stand for ukrainian independence image

Stand for Ukrainian Independence

Contribute
stand for ukrainian independence image
Aya
Eleonora Zolotarova
Content Marketer
Updated on
Useful Resources

Speed Up Your Elementor Website: 13 Tips

While Elementor is arguably the fastest WordPress 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 your Elementor website.

Table of Contents

Web Vitals or What a Fast Website Is 

Google always rules the show, and its guidelines are basic for all website owners. This year, Google finally released a guide that clearly defines a “fast website.” 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 an understanding of “what a quality site is” in the form of specific metrics called Core Web Vitals. They also stated that following these metrics is crucial for site ranking.

Google determined that the top factors influencing users’ satisfaction with a website are the loading speed, interactivity, and visual stability.

Google main indicators

  • 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) 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 effort or warnings, something changes on the page. It also calculates the conditions presented when you want to click the button, but it suddenly moves, and you’re clicking something else.
  • Pages should maintain a CLS of less than 0.1.

To ensure 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. In addition, Google has released a browser extension to help you determine the page loading speed: web-vitals-extension

It looks like this:

cwv extension example

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

How to Measure the Website Loading Speed?

Besides the new tool, all of Google’s major web developers’ tools now support Core Web Vitals, including PageSpeed Insights, Lighthouse, the newly launched Chrome UX Report API, and others. These can be used in tandem to measure a website’s loading speed.

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 recommends improvements. 

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 what the recommendations look like:

Google PageSpeed Insights recommendations

Please do not hastily follow all the recommendations of the service. Some of them may harm the user experience or other factors. Act with caution.

Lighthouse

Lighthouse is an open-source auditing tool for improving the quality of websites and web apps. 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 what the report looks like:

Lighthouse is available both in the Chrome Extension and the Chrome DevTools workflows. However, using the DevTools version is preferable since it allows testing local sites and authenticated pages, while the extension does not.

Chrome UX Report API

CrUX, often known as the Chrome UX Report API, is a bunch of public data on the real user experiences of millions of websites. It is the actual data collected from real users in the field, not hypothetical lab data. 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 fully integrated into the abovementioned PageSpeed Insights but can also be used via CrUX Dashboard, BigQuery, or CrUX API, which enables high-level data integration with other apps.

Google Analytics

Good old GA is another convenient way to measure website load speed. However, 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 compare the impact of the page load speed on 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 drops, you can easily check if there was an effect on your marketing metrics (sales, bounce, etc.).

Google also has other tools that will help you measure your website’s performance and load speed, for example, GTmetrix, powered by Lighthouse or Search Console

You can achieve the most optimal performance possible by using the right combination of the data you get with these tools and their recommendations. Good performance is also a crucial factor not only for a good user experience but also for SEO.  

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

📚 Read also: How to Add Google Analytics to WordPress?

Pingdom Website Speed Test

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

Pingdom Website Speed Test is conducting tests from seven 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 what the primary report looks like:

Pingdom Website Speed Test

Another part of the report includes recommendations on boosting your website’s performance, content and request distribution details, and information on the resources you’re loading on the page. 

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

how to boost website performance

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 it alongside others to ensure the integrity of the received data because there are dozens of possible reasons why your website might perform slowly.

Why Elementor Website Is Running Slow and How to Fix it

There are dozens of different reasons why a WordPress website may perform poorly.

Below are some of the most typical and primary culprits you should pay attention to first. So let’s talk about these:

1. Your WordPress hosting provider is letting you down

Let’s start by shifting the blame! Yes, sometimes, the slow WordPress website is not your fault. For example, it’s pretty standard for one server to host hundreds of sites that share its power. Hence, heavy traffic usually causes a slowdown.

🛠 How to fix WordPress hosting problem?

It’s better to check in advance if your hosting provides a good support service.

If you run a big website with massive traffic or an app that needs lots of control, renting a physical server is the best option for hosting your site.

📚 Read also: What Type of Web Hosting Do You Need?

2. Images are too large

Yes, that is 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. Unfortunately, some don’t pay attention to images’ size, which is a wrong attitude.

🛠 How to fix large images issue?

Use any image compressor like TinyPNG or an image optimization plugin like Imagify.  

image optimization

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 advertised to be 26% lighter than others. Converting images to WebP makes your photos load faster, allows users to consume less data, and addresses one of the PageSpeed Insights recommendations: serve images in next-gen format. As a result, you’ll also get a boost in your PageSpeed Insights score.

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 zones, this slows down the server response speed.

🛠 How to fix server response speed?

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 closest to him. As a result, the download speed increases.

Carefully learn the options for WordPress-powered sites and choose the one that suits you the most. Several major CDN providers include Uploadcare, Cloudwatch, MaxCDN, and others.

4. Files are too large

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

🛠 How to fix files too large issue?

Using GZIP Compression will reduce the time it takes to transfer files to the browser. The transmitted data volume will decrease 4-5 times, thus increasing the download speed. 

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 instructions on BetterExplained.

5. Your code isn’t optimized

If we don’t use something, it’s best 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 not optimized code problem?

When you make several tweaks to your website, and your speed still lags, you may contact a web developer for custom improvements. It won’t cost a fortune but will make a difference. In addition, some WordPress plugins can help you remove your biggest performance problems.

For instance, WP Rocket is a powerful caching plugin that will help you tackle the most challenging performance issues and improve your Core Web Vitals scores – you saw above how these metrics are essential to improving your SEO performance. 

If you want to speed up your Elementor site and optimize the Largest Contentful Paint and First Input Delay scores, you should eliminate render-blocking resources as one of the first actions. This means that you should allow the browser to parse and render your site’s pages without downloading the CSS and JS scripts that would make the page load slower. Since these files are not critical for loading the page, they should be downloaded only when the browser has already displayed the main content.

For a similar reason, you should also reduce JavaScript execution time. JavaScript files could prevent users from interacting quickly with your page and hugely affect user experience. That’s why the non-critical JavaScript files should not be loaded as the first resources when rendering the page.

What’s more, the simple removal of unnecessary spaces, commas, unused code, formatting, and other stuff can make an additional difference to page speed optimization. 

What does it mean in practical terms? To address these crucial issues, you should remove unused CSS and JavaScript, defer JavaScript, delay JavaScript execution, and minify CSS and JS files. As explained above, you can do it manually or take advantage of a caching plugin to save time and effort.

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 data caching?

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 responses. However, Elementor’s suggestion, which is the easiest way, is to use a caching plugin.

7. You are not selective about your plugins

Firstly, some web owners don’t remove unnecessary WordPress plugins, which obviously affects the loading speed.

Some plugins are not optimized, so installing one of those might negatively affect the website’s loading speed more than a bunch of other, more optimized plugins. 

🛠 How to fix it?

Read the reviews carefully before installing any new plugin to ensure it won’t cause any problems. Even after adding new plugins, it’s better to check the performance to ensure that everything is ok. Also, don’t forget to switch off unused modules and uninstall the plugins you don’t use.

8. Too many redirects

Try to avoid redirects, they significantly affect the performance.

9. The installed WordPress theme is too slow

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

🛠 How to fix the slow WordPress theme issue?

Use Kava Theme. Or another balanced, optimized, SEO-friendly, and fast WordPress theme. To ensure that the WordPress theme suits your needs and doesn’t slow down the site, check its speed after installation, and test if it works properly on every web and mobile browser.

Website Performance Optimization for Elementor

There are some Elementor-specific settings and rules to consider for optimizing your website. Let’s go through the most important ones. 

Layout optimization

Elementor layouts are built of certain components: sections, columns, and widgets. The more elements you have on the page, the more server requests are created. So, there are some guidelines to follow for improving the loading speed of the page:

  • Reduce the number of sections, columns, and widgets when possible. 
  • If you need to place, e.g., an image and a text, it’s better to use an “image + text” widget instead of a combination of two widgets (an image and a text).
  • Use global styles for fonts and colors instead of setting them individually for every widget.  
  • Some elements’ positioning and other properties can be quite easily modified with the help of custom CSS, so you can assign an ID or class name to the widget (it’s available in a free version of Elementor as well) instead of doing it using several sections or widgets and aligning them. 
  • Use lazy load for videos; the feature is available in the widget’s settings. 

Let’s talk in more detail about reducing the number of columns and sections

In older versions of Elementor, we had to create a dedicated column for each widget if several widgets should be placed in a row. Things changed with the Elementor 2.5 update, but some people still use the old method. Also, the Flexbox alignment was introduced in that release, which also helps to improve page loading speed. 

For example, you need to place an image, a text block, and a button in a row (side by side). Create a section with one column, and add all the required widgets (image, text, button). By default, they will appear one below the other. Now, it’s time to edit the widget’s properties and place those objects inline. For each widget, go to the Advanced tab. Select the Width property and set it to “Inline (auto).” Here, you can also adjust a vertical alignment for your widgets. Now, your widgets are placed in a row (side by side). 

To distribute them properly on the row, go to the parent column’s settings to the Layout tab and set the Horizontal Alignment to what works best for your design (using the Flexbox alignment settings). The same can be done with the Vertical Alignment. 

The same logic can be applied when you need to place widgets properly as a column, one below the other. 

As of 2022, the full-fledged Flexbox Container feature is still in the Alpha stage of development, which means that it should not be used on live websites because it’s still in the process of making and debugging.  

Additional Elementor setting for better performance

Elementor has certain experimental features, and a few of them are created to improve performance. They can be found at Elementor > Settings > Experiments tab in the WordPress dashboard. This tab shows various experimental features at different developmental stages, but most of them are already stable and not even in the Beta phase, so they can be used on live websites. Let’s go through them:

  • Optimized DOM Output. This feature helps to reduce the number of div wrappers and avoid excessive DOM size. The only problem is that it changes a markup, so it works great with the new sites (if you make it active before creating the first page with Elementor), but it most probably will cause problems if switched on the existing site. 
  • Improve Asset Loading. When it is switched on, unused scripts are not loaded.
  • Improved CSS Loading reduces the amount of CSS code loaded on the page by default.

Third-party Elementor add-ons and icons

There are many amazing third-party Elementor add-ons that add specific widgets or enable certain features. One important thing to consider is that almost all of them come with quite a lot of code (JavaScript, CSS), and they all have to be loaded, which negatively impacts performance. Using many extensive add-ons is not a good practice if you use a couple of widgets from each. Find and use an add-on with everything you need (or most of the widgets). 

Switching off unused modules of such add-ons is a crucial thing to do to improve the loading speed.  

Use Load Level Editor with Crocoblock plugins

Load Level Editor allows you to remove all unnecessary styling options when working with Crocoblock widgets. This feature is available for several JetPlugins, and you can find it in Crocoblock > JetPlugins Settings > {the plugin}. 

📚 Read more about WordPress optimization methods and tips for boosting the Crocoblock plugins’ performance.

Final Words

So why do you need your Elementor website to be fast? Let’s sum up a few frequently asked questions first:

How to speed up Elementor?

Check out the basic ‘slowing down’ issues to look at WordPress hosting, images, CDN, files, code, data caching, installed plugins, redirects, and the WordPress theme. Also, consider optimizing the Elementor layout.
It is doubtful that Elementor itself will slow down your site. However, there are dozens of different reasons why a WordPress website may perform poorly.

What is web vitals?

Web Vitals are a set of indicators for quality signals required to deliver a great user experience on the web.website vitals

How to measure the website loading speed?

There are a few web developer tools: PageSpeed Insights, Lighthouse, Chrome UX Report API, GTmetrix, and Pingdom Website Speed Test.

Ultimately, 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!

Therefore, we advise immediately verifying your Elementor site using whichever speed test tool you want, applying the recommendations appropriately, and sitting back to enjoy the amazing changes made to your website and business.