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

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

how to speed up elementor website

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

Elementor is a popular page builder plugin with more than 5 million active installations. The most common reasons for every slow WordPress website are their 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 site.

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 a better web hosting providers & you can choose any web hosting provider based on your budget. All these web hosting offer fast loading time which improves user experience & reduce bounce rate.

A2 Hosting

Best Shared Hosting

Cloudways (Use Coupon: DIGIROCK20)

Best Cloud Hosting

WPX Hosting

Best Managed WordPress Hosting

Kinsta

Best Premium Hosting

Disclamier: 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 from my own experience but also from 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 section & 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 in most of the time this plugin is only required in the contact page. So, with 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 in 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 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 which 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 moves 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 dimension 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 Autoptimize plugin. I am using 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 in 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 in 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 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/disable it.

Check out my complete post on 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 file, 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 speed up your Elementor website.

6. Host Google Fonts Locally

If you are getting 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 on 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 on 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 entire website using Asset clean up plugin.

elementor disable font awesome

Elementor eicons also creates 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 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 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 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 improve 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 Recommend 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.WEBP images. As of now we can’t upload WEBP images directly on WordPress. But we can convert all our images in .WEBP using 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 default.

Png options: let it be 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 add 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 of 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 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 & fix 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.

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 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, Instagram. 

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.

cyber monday web hosting deals 2020
A2 HOSTING

STARTING AT $2.99/MONTH

cloudways cyber monday deal
CLOUDWAYS HOSTING

STARTING AT $10/MONTH

cyber monday sale 2020
WPX HOSTING

STARTING AT $20.83/MONTH

Summary
How To Speed UP A Slow Elementor Website (2021) With 100% GTmetrix Score
Article Name
How To Speed UP A Slow Elementor Website (2021) With 100% GTmetrix Score
Description
16 Ways To Speed UP a Slow Elementor Website (2021) With 100% GTmetrix Score. 1. Choose a Better Web Hosting Provider 2. Disable Unused Add-ons 3. Use A Cache Plugin 4. Host Google Fonts Locally 5. Disable Font Awesome Icons 6. Optimize Images 7. Upgrade Server Software 8. Increase Memory Limit 9. Optimize Videos 10. Use a lightweight theme 11. Clean Your Database 12. Disable Woocommerce Script & Cart Fragments 13. Use WEBP Images 14. Use CDN 15. Delay Loading Of Third-Party Scripts 16. Optimize More:
Author
Publisher Name
Digirockstar
Publisher Logo

Leave a Reply

Your email address will not be published. Required fields are marked *

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