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
- 2. Optimize Your Layout
- 3. Disable Unused Add-ons
- 4. Optimize Elementor For Core Web Vitals
- 5. Use A Cache Plugin
- 6. Host Google Fonts Locally
- 7. Disable Font Awesome Icons
- 8. Optimize Images
- 9. Upgrade Server Software
- 10. Optimize Elementor Plugin:
- 11. Avoid An Excessive DOM Size In Elementor
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.
Best Shared Hosting
Cloudways (Use Coupon: DIGIROCK20)
Best Cloud Hosting
Best Managed WordPress Hosting
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 Elementor, essential 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.
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.
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.
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.
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.
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).
- Use CDN.
- Lazy load images.
- Preload fonts.
- Reduce TTFB( Use a faster web, hosting provider).
- First Input Delay (FID):
How To Improve First Input Delay (FID) In Elementor?
Ways to fix your First Input Delay (FID):
- 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 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
Aggregate JS-Files – Enable this option.
Also, Aggregate Inline JS – Enable this.
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.
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.
Optimize HTML Code – Enable.
Keep HTML Comments – Enable this.
If you are using any CDN like StackPath, BunnyCDN, or any other CDN then you can add the CDN URL here.
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 –
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.
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.
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 eicons also create an additional request, so you can also disable it from your website.
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.
Now, let’s Configure Smush Plugin:
- Bulk Smush tab setting:
Image sizes: All
Automatic compression: ON
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.
Gutenberg Support: OFF.
WPBakery Page Builder: Enable it if you are using the WPBakery page builder editor.
- Lazy Load
Media Types: Check all
Output Locations: Check all
Display & Animation: None
Include/ Exclude : Check all
Finally, update these settings.
You can connect the Smush plugin with CDN but you have to upgrade to the premium version.
Image Resize Detection: ON
Color Accessibility: OFF
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.
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).
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.
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.
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.
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.
14. Use a lightweight theme
Themes also affect your WordPress website speed & it is really important to use lightweight themes compatible with 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.
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.
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:
Operation Mode: Choose Varied Image Responses.
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.
Enable Direct redirection to exist converted images? : Check this box.
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: 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.
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.
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.
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.