Aya
Eleonora Zolotarova
Content Marketer
Updated on
Other

Speed Up Your Elementor Website

A slow site won’t hurt your sales much only if you are a monopoly in your niche (which is unlikely). While Elementor is arguably the fastest site builder, some websites still might load too slowly, degrading the behavioral factor for SEO and depriving you of consumers. In this article, we’ll find out why it happens, and what you can do to speed up Elementor website.

Web Vitals or what a fast website is 

Google always rules the show, and their guidelines are basic for all website owners. This year, Google released a guide that finally gives us a clear definition of what a “fast website” is. It is called the Web Vitals initiative – a set of indicators for quality signals required to deliver a great user experience on the web. The company claims that this initiative is needed to provide site owners with understanding of what a quality site is in the form of specific metrics called Core Web Vitals. Also it was already stated that following these metrics are crucial for site ranking.

Google determined that the top factors influencing the user’s satisfaction with a website are the loading speed, interactivity, and visual stability, so this is how these three main indicators appeared:

  • Largest Contentful Paint (LCP), aka loading performance. LCP shows how much time it takes to render the largest image or text block visible within the viewport. Good user experience means that LCP occurs within 2.5 seconds of when the page first starts loading.
  • First Input Delay (FID), aka interactivity. FID measures the time from the user’s first interaction with a page (like tapping a link) to the time when the browser begins processing in response to that interaction. The FID should be less than 100 milliseconds.
  • Cumulative Layout Shift (CLS), aka visual stability. CLS shows off the number of unexpected layout shifts during the entire lifespan of the webpage. In simple words, it calculates all situations when suddenly, without an effort or warnings, something changes on the page, or the situations when you want to click the button but suddenly it moves, and you’re clicking something else. Pages should maintain a CLS of less than 0.1.
Web Vitals

To make sure you hit the target for every metric, a suitable threshold to measure is the 75th percentile of page loads, segmented across mobile and desktop devices. To help you to determine the speed of page loading, Google has released a browser extension web-vitals-extension

It looks like this:

Web Vitals

And now let’s talk about other ways to measure the website performance and Elementor speed optimization.

How to measure the website loading speed?

Besides the new tool, all Google’s major web developers’ tools now support Core Web Vitals, including PageSpeed Insights, Lighthouse, the newly launched Chrome UX Report API, and others.

Google PageSpeed Insights

PageSpeed Insights is a tool that measures page load speed. It analyzes the web page, displays the result on a 100-point scale, and gives recommendations for improvement. 

The tool shows results for mobile and desktop devices according to the following parameters:

  • First Contentful Paint (FCP)
  • Largest Contentful Paint (LCP)
  • First Input Delay (FID)
  • Cumulative Layout Shift (CLS)
  • Speed Index
  • Total Blocking Time

And this is how the recommendations look like:

Please do not rush to follow all the recommendations of the service. Some of them may harm the user experience or other factors. Act wisely. ?

Lighthouse

Lighthouse is a tool for improving the quality of websites. It includes performance, accessibility, SEO, Progressive Web Apps, and the best practices audits that you can run on any web page.

This tool isn’t aimed to measure the loading speed itself but acts slightly in another way. It estimates the speed of rendering of the primary content. 

This is how the report looks like:

A Lighthouse report

Lighthouse is available both in the Chrome Extension and the Chrome DevTools workflows. It’s preferable to use the DevTools version since it allows testing local sites and authenticated pages, while the extension does not.

Chrome UX Report API

Chrome UX Report API (aka CrUX) is public data about millions of websites’ actual user experience. It’s not something like hypothetical lab data but a real one, coming from users in the field. As was previously said, it includes all the Core Web Vitals metrics, as well as metrics like Time to First Byte (TTFB) and First Contentful Paint (FCP).

CrUX is integrated into abovementioned PageSpeed Insights but also can be used via CrUX Dashboard, BigQuery, or CrUX API that enables the integration of high-level data with other apps.

A custom CrUX dashboard

Google Analytics

Good old GA is another convenient way to measure website load speed. The data you will receive will differ from the one you will get via PageSpeed Insights or others. And here’s why:

  1. GA provides data from actual site users that you can segment by location, mobile/desktop categories, and others.
  2. This data helps you to compare the impact of the page load speed to users’ behavior.
  3. GA numbers are not sufficient by themselves. But with their help, you can track changes in performance. For example, if page speed dropped you can easily check if your marketing metrics (sales, bounce, etc.) were influenced.

There are also other tools by Google that will help you measure your website’s performance and load speed, for example GTmetrix powered by Lighthouse or Search Console. Using the right combination of the data you get with these tools, along with the recommendations, you can bring your chance to the most optimal performance possible. Good performance is a key factor not only for a good user experience but also for SEO. 

Sure, there are efficient third-party website speed testing tools as well. Probably the most popular one is Pingdom Tools.

Pingdom Website Speed Test

This tool was developed specifically for measuring the website load speed. It identifies whether the webpage is fast enough, or too slow, too heavy, etc. It combines a super easy user interface suitable for every novice with the features advanced enough to satisfy experienced developers. Most importantly is that this tool is the efficient one to help you make your website fast!

Pingdom Website Speed Test is conducting tests from 7 different locations:

  • Asia – Japan – Tokyo
  • Europe – Germany – Frankfurt
  • Europe – United Kingdom – London
  • North America – USA – Washington D.C.
  • North America – USA – San Francisco
  • Pacific – Australia – Sydney
  • South America – Brazil – São Paulo

This is how the primary report looks like:

Another part of the report includes the recommendations on how to boost your website’s performance, the information on how your content and your requests are distributed, and what’s happening with all resources you’re loading on the page. 

The final part is the file requests analysis that reveals a more extensive look at every HTTP request on your site. 

All this information is available for free and via a single click. Pingdom is a convenient tool but remember that it’s better to use different ones to be sure about the veracity of the received data, because there are dozens of possible reasons why your website performs slowly. 

Why your website is running slow and how to fix it

Does Elementor slow down your site? If you believe so, check out this Elementor Speed Optimization Guide. However, it is doubtful that Elementor itself will slow down your site. As you already understood from the information above, there are dozens of different reasons why a website may perform poorly. Among them, there are basic and most common ones that you should pay attention to first. Let’s talk about them.

1. Your hosting provider is letting you down

Let’s start by shifting the blame! Yes, sometimes the slow website is not your fault. It’s a common situation when one server keeps hundreds of sites that share the server power. After all, heavy traffic usually causes their slowdown.

How to fix it: Migrate from Shared hosting to Dedicated one (VDS) of your provider. It is more expensive but much more efficient as well. 

Please note that even after migration, you may experience server speed issues, so you will need to contact the hosting provider’s support to ensure that switching was done correctly. It’s better to check in advance if your hosting provides a good support service.

If you run a giant website with huge traffic or an app that needs lots of control, the best option is to rent a physical server that will only host your site.

2. Images are too large

Yes, that simple. Generally, no pic should be over 1 MB. Out of ignorance, some newbies may compress large images by CSS, but in the end, the user’s browser still loads the image in full size. Some don’t pay attention to images’ size at all and that’s the wrong attitude.

How to fix it: Use any image compressor like TinyPNG.  

Another option is to use CSS Sprites. They merge all images on the page into a single file that thus downloads faster. Also, pay attention to Google’s WebP image format, which is stated to be 26% lighter than any other.

3. You don’t use a content delivery network 

When your website’s server is located in a particular city, but visitors come to your site from other cities, this slows down the server response speed.

How to fix it: Use a content delivery network (CDN). This network consists of servers in different parts of the world. When the site is connected to the network, copies of the web resource files are created on its servers, and then the user receives data from the server located closest to him. As a result, the download speed increases.

Learn carefully what are the options for WP-powered sites and choose the one that suits you the most. There are several major CDN providers like Cloudwatch, MaxCDN and others.

4. Files are too large

And if they are, we do what we always do – zip it! 

How to fix it: Using GZIP Compression will reduce the time it takes to transfer files to the browser. The volume of transmitted data will decrease 4-5 times, and the download speed will increase. Enabling compression is quite simple. For example, in Apache you will have to add the following to the .htaccess file:

# compress text, html, javascript, css, xml:

AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript

# Or, compress certain file types by extension:

<files *.html>
SetOutputFilter DEFLATE
</files>

Read more detailed instruction on BetterExplained.

5. Your code isn’t optimized

If we don’t use something, it’s better to get rid of it. When it comes to web development, this rule also applies here. Garbage code always slows down the loading speed.

How to fix it: Some WP plugins can help you get rid of it, and they actually remove about 50% of the problems, which is already better than nothing. But when you did a lot and your speed still isn’t great-great, you may contact a web developer for custom improvements. It won’t cost a fortune but will make a difference.

There are a number of common practices, for example, placing CSS at the top of the page and scripts at the end. Thus, the browser has the opportunity to start rendering the page even before starting all the scripts. Also, to prevent browsers from caching external resources, be sure to avoid inline CSS and JS code. 

And sometimes, the simple removing of unnecessary spaces, commas, unused code, formatting, and other stuff can make a difference to pagespeed optimization

6. You didn’t turn on data caching

In this case, the browser reloads the page every time the user revisits it.

How to fix it: There are different ways to set up caching. For example, you can use the Apache web server headers module, which monitors and modifies the headers for HTTP requests and HTTP responses. The easiest way and the one Elementor team suggest is to use a caching plugin.

7. You are not selective about your plugins

First of all, some web owners don’t remove unnecessary plugins and it obviously affects the loading speed.

Another thing is the fact that some plugins are not optimized themselves, and by installing it you risk your website’s speed. 

How to fix it: Read carefully the reviews before installing any new plugin to make sure it won’t cause any problems. Even after it, after adding new plugins it’s better use the tester to check if everything is ok. Also, don’t forget to uninstall every plugin you no longer need.

LivingWithPixels

8. Too much redirects

Chains of 301 redirects slow down the rendering of web documents, and in addition, such pages are poorly indexed.

How to fix it: Use any free or premium redirect detection tool, plugin, or extension to find unnecessary redirects and minify their quantity. In the future, it’s better to avoid massive redirects not to overload the server.

9. Too much flash content

As we know, building a complex and multifunctional site with Elementor is quite challenging, and if we add a bunch of animations, the performance of the site will suffer too. Also, it may conflict with accessibility guidelines.

How to fix it: Try to replace the existing flash content with HTML5 alternatives, or get rid of it when possible.

10. The installed theme is too slow

Poorly-coded themes are too heavy and don’t use special scripts to compress their elements.

How to fix it: Use Kava Theme. ? Or another balanced, optimized, and SEO-friendly one. To make sure that the theme suits your needs and doesn’t slow down the site, be sure to check its speed with special tools after installation, and test if it works properly on every web and mobile browser.

Final words

So why do you need your website to be fast? In the end, there’s only one reason – it directly affects your income! The scheme is simple:

  1. A fast site ranks better
  2. More people will visit the site that ranks better
  3. A fast site (this is not the only criterion, but still) will not create additional obstacles between your product and your client
  4. PROFIT!

So our advice is to check your site immediately with any speed test tool you prefer, wisely implement the recommendation and sit back to watch the cool transformations of your website and business.