How To Speed UP A Slow Elementor Website | Optimize For Core Web Vitals (2022)

You are currently viewing How To Speed UP A Slow Elementor Website | Optimize For Core Web Vitals (2022)

Want to speed up your Elementor site? then follow this ultimate guide on how to speed up your slow Elementor website with 100% GTmetrix, Page Speed, Pingdom score & optimize your Elementor site with Core Web Vitals.

Elementor is a popular page builder plugin with more than 5 million active installations. Most people think that Elementor is slowing their site but it is not true. The common reasons for every slow WordPress website are its servers, third-party scripts, installing lots of plugins, etc.

So, in this post, I have shared a complete step-by-step guide on how to speed up a slow Elementor website.

Table of Contents

1. Choose a Better Web Hosting Provider

This is one of the biggest reasons for a slow Elementor site. It is better to switch to better web hosting providers & you can choose any web hosting provider based on your budget. All these web hostings offers fast loading time which improves user experience & reduces bounce rate.

A2 Hosting

Best Shared Hosting

Cloudways (Use Coupon: DIGIROCK20)

Best Cloud Hosting

WPX Hosting

Best Managed WordPress Hosting

Kinsta

Best Premium Hosting

Disclaimer: Since I don’t recommend ‘not good’ hosting like various different affiliates out there, you could really help me out by signing up for any web hosting mentioned above using my affiliate link. Also, let it be known that I base my reviews not only on my own experience but also on other trusted sources.

You can also join some Facebook groups or some Sub Reddits related to WordPress hosting to get Unbiased reviews.

2. Optimize Your Layout

In Elementor using more sections, inner sections, columns, and widgets can slow down your site. But you can design the entire same layout by using fewer sections, columns, inner sections & widgets. So, watch this official video from Elementor to learn how to design a layout in the most efficient way.

3. Disable Unused Add-ons

You might have installed Master addons for Elementoressential addons for Elementor, or any other addons on your site. These addons slow down your Elementor site but you can fix this by disabling unused add-ons. Be careful with this, it may break your site. Deactivate one by one & check your site. If your site breaks then reactive the last add-on.

fix elementor site slow on mobile
disable unused addon on elementor

You can even manage your script using Perfmatters or with Asset Clean up plugin for the same but these plugins will remove all the add-ons from that page. Unload only on those pages where you are not using these Elementor add-ons.

speed up slow elementor site

The contact form 7 plugin also loads on all the pages but most of the time this plugin is only required on the contact page. So, with the asset clean-up plugin you can unload contact form 7 scripts and reduce your page size.

disable scripts on asset clean up in elementor

4. Optimize Elementor For Core Web Vitals

Core Web vitals will also be considered as a ranking signal in the Google search results and we all have to optimize our WordPress site to stay in the market. You can check out my complete guide on improving Core Web Vitals on the WordPress website. Apart from this post, here are some key points that will help you to improve your Core web Vitals score on your Elementor-based website.

Google Core Web Vitals for WordPress

Core Web Vitals are consists of 3 factors:

  • Largest Contentful Paint (LCP):

Largest Contentful Paint (LCP) means that the main content of your web page should load fast. The faster it loads, the better your LCP.

fix core web vitals wordpress

How To Improve Largest Contentful Paint (LCP) In Elementor?

Here are some ways that will help you to optimize LCP in your WordPress Website:

  • Optimize Images.
  • Preload Critical Images (Logo, featured images).
  • Minify CSS & Javascript.
  • Use CDN.
  • Lazy load images.
  • Preload fonts.
  • Reduce TTFB( Use a faster web, hosting provider).

  • First Input Delay (FID)

FID or First Input Delay may be the most complicated metric to understand and optimize. To explain it simply, FID deals with how long it takes for a site to become interactive with the user after they click on a link or button or just simply interact with a javascript-powered control.

how to improve core web vitals

How To Improve First Input Delay (FID) In Elementor?

Ways to fix your First Input Delay (FID):

  • Eliminate render-blocking Javascript using the Async Javascript plugin (free)/ FlyingPress (Paid)/ WP Rocket (Paid).  
  • Remove Unused CSS & Javascript.
  • Delay loading of third-party scripts like analytics, chat widget, etc. using the flying script plugin.
  • Apply Brotli compression.

  • Cumulative Layout Shift (CLS)

CLS or Cumulative Layout Shift definition to be precise is a website loading metric that measures visual stability, but also it can be easily described by saying it deals with how your site loads and if or not the contents of your site move around after loading of any new contents.

how to improve lcp in wordpress

How To Fix Cumulative Layout Shift (CLS) In Elementor?

Common ways to fix CLS:

  • Try to avoid animation.
  • Avoid layout shifts.
  • Specify dimensions for Images, videos, ads & iframes.
  • Preload & host your fonts locally.

5. Use A Cache Plugin

Improve your Elementor website speed with cache plugins like FlyingPress (Paid), WP Rocket (paid) or WP fastest Cache (free/paid), or the Autoptimize plugin. If you are on a Litespeed server then use the Litespeed Cache plugin. I am using the FlyingPress plugin to improve my WordPress website speed.

Let’s configure the Autoptimize plugin for your Elementor site:

Under JS, CSS & HTML Tab

autoptimize javascript setting

JavaScript Options:

Aggregate JS-Files – Enable this option.

Also, Aggregate Inline JS – Enable this.

Force Javascript in < Head> – Disable.

Exclude scripts from Autoptimize – If you want to exclude any script from optimization then you can add that here. By default Wp-includes/js.dist/, wp-includes/js/tinymce/ & js/jquery/jquery.js are excluded.

Add try-catch wrapping – disable this.

CSS Options:

autoptimize ideal css settings

Optimize CSS Code – Enable this.

Aggregate CSS – files – Enable.

Also Aggregate Inline CSS – Enable. This will inline all CSS files.

Generate data: URLs for images – Enable this if you are not using any CDN.

Inline and Defer CSS – Enable this. Run a speed test in Gtmetrix. If any CSS file is still showing, then you can line and defer the CSS file. The best tool to inline and defer CSS is criticalpathcssgenerator.

  • First, enter your website URL.
  • Next copy the entire codes from the CSS file and paste that code into the full CSS box. 
  • Now, click on the create critical path CSS button to generate the file. 
  • Next, copy the newly CSS file codes and paste that into the inline and defer CSS box. 
  • If you have more than one CSS file then you can generate separate codes, just give some space in the inline and defer CSS box and paste those codes.

Inline All CSS – Disable.

Exclude CSS From Autoptimize: Here you can exclude certain CSS files. let it be default & if you want to exclude any CSS file then you can add it here.

HTML Options

autoptimize criticalcss.com power-up

Optimize HTML Code – Enable.

Keep HTML Comments – Enable this.

CDN Options

autoptimize setup guide

If you are using any CDN like StackPath, BunnyCDN, or any other CDN then you can add the CDN URL here.

Misc Options:

wordpress autoptimize best settings

Save aggregated script/CSS as static files – I will recommend Enable this as it will serve cache CSS and Javascript files through your server. You may need to disable this option if your web server doesn’t properly handle the compression.

Minify excluded CSS and Javascript Files – Enabling this will also minify the excluded CSS & JS files. But if your site breaks or you see any minification-related issues then uncheck this option.

Experimental: Enable 404 Fallbacks:  Disable this.

Also, Optimize For Logged In Editors/ Administrators – Up to you. You can either enable/or disable it.

Check out my complete post on the best Autoptimize settings to optimize your Elementor site.

Now let’s configure WP fastest cache plugin –

wp fastest cache settings 2020

Settings Tab:

Cache System: Enable.

Widget Cache (Premium): Check this box.

Preload: This option will create a cache of the entire site automatically. After enabling this option a pop-up will appear where you have to select all the options, add 4-6 if you are using Shared Hosting, and 10-12 if you are using VPS hosting in the pages per minute. You can also check out their official blog post for more info.

Logged – In – Users: If your site has multiple users then uncheck this box otherwise enable this.

Mobile: Check this box.

Mobile Theme (Premium): Enable this.

New Post: Enable this option as this will clear cache files when a post or page is published. After checking this box a pop-up will appear where you have to choose to Clear All Cache Option.

Update Post: Check this option. This will clear cache files when a post or page is updated. Again, a pop-up will appear and this time you have to choose Clear cache of Post/page.

Minify HTML: enable.

Minify HTML Plus (Premium): Premium users should check this box to minify HTML even more.

Minify CSS: Enable this option.

Minify CSS Plus (Premium): Check this option.

Combine CSS: Enable this. It will combine all CSS in one file which will reduce HTTP requests & thus reduce your Elementor website speed.

Minify JS (Premium): Similar to HTML & CSS files, you can minify your JS files.

Combine JS: Enable this as it will combine all JS files In one file, which will reduce HTTP requests.

Combine JS Plus (Premium): This will combine JS files even more.

Gzip: Enable.

Browser Caching: Check this box.

Disable Emojis: Check this.

Render Blocking JS (Premium): Enable.

Google Fonts (Premium): Enable. 

Lazy Load (Premium):  Enable.

Now Just click on Submit. 

You can also check out my complete post on WP Fastest Cache settings to optimize your Elementor website.

6. Host Google Fonts Locally

If you are getting a Google Fonts error in your GTMetrix report, then you can fix this error by hosting Google Fonts locally.

fix google fonts slowing down wordpress

You can use the OMGF plugin to host your Google Fonts locally. This is a lightweight plugin so don’t have to worry about this. Here is the complete guide on how to host Google Fonts Locally.

7. Disable Font Awesome Icons

Font awesome icons also affect your element or site speed. But even if you don’t use Font awesome icons their CSS code will still load by default with Elementor icons. 

If want to use icons on your site, then I will suggest you to download icons from the royalty-free icon’s website & upload it to your site.

Again for those who are not using Font Awesome icons, then you can disable it by choosing any method given below.

  • By adding a Code 
  • By using Asset Clean Up or Perfmatter plugin.

Elementor has shared a few lines of code to disable Font Awesome icons. You can check that code and add that code to your site.

You can also use the Asset Clean UP Or Perfmatter plugin to fix this issue. 

Using Asset Clean UP:

Unload these 2 scripts of Font Awesome either from one page or the entire website using the Asset clean-up plugin.

elementor disable font awesome

Elementor eicons also create an additional request, so you can also disable it from your website.

disable font awesome in elementor

8. Optimize Images

The first step of optimizing your images is using the correct dimensions of your images. It means the image is of a higher dimension but it is showing in a smaller dimension.

Just run a speed test of your page In GTmetrix & if you are getting any warning in the Serve Scaled Images section then you have resized those images in the correct dimension given in the GTmetrix.

Download those images, resize them with the correct dimension & replace the old image with the new one.

The second step is Image Compression. I compress all my images using Tinypng.com and then I upload my images to my site.

I am also using the Smush plugin to compress my images even more. You can also use ShortPixel or Imagify plugin for image compression.

Now, let’s Configure Smush Plugin:

smush plugin settings
  • Bulk Smush tab setting:

    Image sizes: All

    Automatic compression: ON

    Metadata: OFF

best wordpress plugin for speed optimization

Image Resizing: On (choose max-width = 2048 & max height = 2048)

Then click on the Update setting.

  • Directory Smush

With directory smush, you can compress all the images including theme images. Just select your directory and click on the Compress button.

  • Integrations
how to improve wordpress website loading speed

Gutenberg Support:  OFF.

WPBakery Page Builder:  Enable it if you are using the WPBakery page builder editor.

  • Lazy Load
how to get 100 page speed insight score in wordpress
LiteSpeed Cache Plugin Settings

Media Types: Check all

    Output Locations: Check all

    Display & Animation:  None

    Include/ Exclude :  Check all

    Scripts:  Footer

Finally, update these settings.

  • CDN

You can connect the Smush plugin with CDN but you have to upgrade to the premium version.

  • Tools
how to solve minimize redirects error in wordpress

Image Resize Detection:  ON

  • Setting
how to block bad bots in WordPress

Color Accessibility: OFF

    Data: Keep

Finally, click on the Update setting.

The PRO version will compress your images even more. The free version will compress 50 images at once & you have to click again to compress your images if you have more than 50 images.

9. Upgrade Server Software

Check your current MySQL & PHP version under Elementor > System Info.

fix elementor performance issue

Upgrading your MySQL & PHP version also improves your Elementor site speed. Elementor Recommend My SQL should be MariaDB & the PHP version should be PHP 7 or above (see the screenshot below). 

optimize Elementor page speed

10. Optimize Elementor Plugin:

Start your optimization by disabling the features that you are not using. You can disable a few features like Disable Default Colors, Disable Default Fonts, etc. if you are not using them.

elementor core web vitals

If you are an Elementor Pro user, then I will suggest self-hosting your fonts & icons.

11. Avoid An Excessive DOM Size In Elementor

If you are using any page builder then there is a high chance that you will get this warning in your GTmetrix or Google Pagespeed Insight test report. You can optimize DOM size in Elementor plugin by going to Elementor > Settings> Experiments > Optimize DOM Output.

avoid an excessive dom size elementor

Under the Experiments tab, there are a few other options like improved asset loading, Accessibility improvements, import-export template kit, and Landing pages. All these options are in Beta, so, test these features one by one & if you are not using the import-export template kit and landing pages then just choose Inactive.

12. Increase Memory Limit

Elementor Recommends having a memory limit of 256MB. You can check your memory limit by going to Elementor > System Info.

reduce elementor load time

If the memory limit is less than 256MB then you can increase it through your Cpanel.

13. Optimize Videos

Videos can also slow down your Elementor site. But you can optimize it by adding image overlay, lazy loading & adding a play icon.

elementor image optimization

14. Use a lightweight theme

Themes also affect your WordPress website speed & it is really important to use lightweight themes compatible with Elementor.

Themes Recommended By Elementor:

asset cleanup elementor

15. Clean Your Database

Use the WP-Optimize plugin to clean your WordPress database. This plugin clears all post revisions, auto-draft posts, trashed posts, spam & trashed comments, etc. You can also delete unwanted database tables created by plugins that you have deleted from your site.

wp optimize plugin

This will make your database files lighter & helps your Elementor website to load faster.

16. Disable Woocommerce Script & Cart Fragments

If you are using WooCommerce then It is really important to disable scripts & cart fragments. You can use the Asset Clean Up or Perfmatter plugin to do this task.

increase loading time of elementor

17. Use WEBP Images

WEBP is a new image format that is lighter than JPG images. Now, almost all the browsers are supporting it.WEBP images. As of now, we can’t upload WEBP images directly on WordPress. But we can convert all our images in WEBP using the WEBP express plugin. So, now let’s convert our images in WEBP format

WEBP Express Plugin Settings:

best webp wordpress plugin

Operation Mode: Choose Varied Image Responses.

General:

Scope: All content.

Image types to work on: Both jpegs and pngs.

Destination folder: Mingled.

File Extension: Append”.webp”.

Destination structure: Document root.

Cache-control header: Do not set.

Redirection Rules:

Enable Direct redirection to exist converted images? : Check this box.

Conversion:

Jpeg Options: Let it be the default.

Png options: let it be the default.

Metadata: No metadata in webp.

Convert on Upload: check this box

Bulk convert: Convert all your images in webp from here.

Alter HTML:

Alter HTML: Check this box.

What To Replace: Choose Replace Image URLs & check the box of only do the replacements in webp enabled browsers.

How to replace: Choose the complete page option.

Finally, Click On Save Settings.

18. Use CDN

CDNs are also helpful to speed up your Elementor site. You can use Cloudflare (free/paid) or StackPath (paid) CDN to improve your website speed. Cloudflare not only offers CDN but also adds additional security on our site, preventing our site from DDos attack, etc. You can check my post on how to set up Cloudflare CDN & reduce your website speed.

19. Delay Loading Of Third-Party Scripts

Third-party scripts like Google Adsense, Chatbots, etc. affect your website speed & there is no way to optimize these scripts.  But with the Flying Script plugin, you can optimize your 3rd party JS scripts. This plugin loads the external JS scripts after the web page loads completely. You can even set the timing of the loading of 3rd party scripts.

flying script plugin settings

All you have to do is add a keyword to that script for example – use the keyword “tag” for Google Tag Manager”, Fbevents.js for Facebook Pixel, etc.

You can also join their Facebook group – WP Speed Matters.

20. Optimize More:

You can also watch my video or blog post, where I have covered almost everything on how to speed up the Worpress website for free with timestamps in the video description.

FAQs:

How To Host Google Fonts Locally In Elementor?

The best way to host Google Fonts locally in Elementor is by using the OMGF plugin. This is a free plugin & fixes your Google Fonts error in the Gtmetrix speed test.

How To Disable Font Awesome In Elementor?

You can disable Font Awesome In Elementor by using the Asset clean Up plugin or by using Perfmatter plugins. You can unload the font awesome script & eicons scripts using any of these plugins.

Does Elementor Slow Down Your Site?

No. Elementor doesn’t slow down your website. The most common reason for a slow WordPress site is using poor web-hosting providers, using a lot of plugins, third-party scripts, etc.

Is Elementor Bad For SEO?

No, Elementor is SEO friendly plugin. You can easily design a beautiful, engaging page using the Elementor plugin.

Conclusion:

Speeding up your Elementor website will improve user experience, increases your ranking in search results, and will reduce the bounce rate.

Apply these ways to speed up your slow Elementor website & give your visitors a better user experience. Applying these ways will also fix your Core Web Vitals score. Please share your GTmetrix, page speed insight, or Pingdom score in the comments below.

Did I miss anything? If so, please mention it in the comment box, I will try to add those. If you have any queries regarding how to speed up your WordPress site then fill free to comment below. 

Don’t forget to share this post on Facebook, Twitter, Pinterest, and Instagram. 

Best Black Friday Web Hosting Deals

A2 Hosting

Starting At $2.99/month

cloudways hosting review 2020

Cloudways Hosting

Starting At $10/month

black friday web hosting deals

WPX Hosting

Starting At $20.83/month

Sandip Maheshwari

A guy blogging for the last 4 years, I am a guy who loves to write about SEO, social media and affiliate marketing. An avid cricket fan, die-hard fan of Silicon valley the series. I love to blog in my free time to share my knowledge with people around the world.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.