How To Speed Up Your Slow Elementor Website In 24 Steps: Advanced Guide For Passing Core Web Vitals Updated For 2025

This is a comprehensive list of Elementor speed optimizations.

Before starting this tutorial, I highly recommend testing your site in the Chrome Dev Tools Network report + KeyCDN’s Performance Test. These tell you whether your Elementor site is slow from CSS/JavaScript, images, fonts, or TTFB (which is also 40% of LCP in core web vitals).

Experiments are covered in steps 1-4, fonts are covered in steps 3-6, CSS/JavaScript in 7-14, images in 15-17, and TTFB/memory usage are mainly related to hosting/CDN in steps 18-20.

It’s true, Elementor adds more CSS/JavaScript than Gutenberg. But this usually only becomes an issue when you install extra Elementor plugins and don’t properly optimize your site. Then you check your coverage report and see this. A slow host/CDN/cache plugin won’t help either.

Since this is a blog about WordPress speed, I replaced Elementor with GeneratePress which is more lightweight. However, I’m not here to convince you to do that. You can still get excellent PageSpeed scores with Elementor, it just requires extra steps and knowing what to look out for.

Hope this helps (lmk if you have questions).

 

1. Activate Elementor Experiments

Head to Elementor → Settings → Experiments, then activate the following:

Inline Font Icons – font icons (i.e. Font Awesome + eicons) will load inline as SVGs without loading the entire library. This means less CSS requests and render-blocking CSS issues in PSI.

Lazy Load Background Images – you originally had to use an optimization plugin that came with a “lazy-bg” helper class (or similar) and add it to your background images. This is easier.

Optimized DOM Output – addresses avoid an excessive DOM size item in PSI by removing unnecessary div wrappers (elementor-inner, elementor-row, and elementor-column-wrap).

Improved Asset Loading – only loads lightbox and screenful libraries, the dialog library, and share links library when they’re being used on a page, resulting in less JavaScript on your site.

Improved CSS Loading – only loads widget CSS and animations where they’re being used (while loading them inline), resulting in less CSS and render-blocking resources on your site.

Usage Data Sharing – sharing data with plugin developers requires a small amount of server resources which are used to send the data. Therefore, I recommend disabling this in all plugins.

 

2. Change CSS Print Method To “External File”

While there are pros & cons for each, external CSS files can be cached and they don’t increase the size of HTML. You can test the results for your site, but I generally recommend external file.

 

3. Disable Default Fonts/Icons

In the next couple steps, we’re going to only load fonts you need (locally using woff2) while preloading them. And the first step is to disable both Google Fonts and Font Awesome icons.

 

4. Host Fonts Locally Using woff2

If fonts.gstatic.com or other third-party fonts load on your site, host them locally instead.

Step 1: Go to the Google Fonts website (or another font site) and download your fonts. Make sure you only select the weights you need since too many weights will increase the file size.

Step 2: Convert them to woff2 using CloudConvert (woff2 files are smaller than .ttf).

Step 3: Upload the fonts as custom fonts (Tony Teaches Tech has a video tutorial). If you’re not using Elementor Pro, OMGF downloads them automatically when you click “save & optimize” in the settings. It can also load fonts early (preloading them) or you can choose not to load them at all [screenshot]. Web Squadron has another video tutorial if you need more clarification on this.

 

5. Preload Fonts

The final step is to preload fonts loading above the fold.

Copy their files names, then preload them which you can do in most optimization plugins. You should also preload eicons and Font Awesome Icons if you use them. Once fonts are preloaded, you should see blocking time decrease (which is shown as the brown bar in the Waterfall chart).

Check your Console report for errors since preloading unused fonts decreases performance.

 

6. Leave Google Fonts Load As “Swap” (If Using Google Fonts)

Setting Google Fonts Load to “swap” fixes ensure text remains visible during webfont load. However, Font Awesome recommends font-display: block since it makes them non render-blocking. You can also change font-display property in Elementor Pro’s custom fonts. Zach Leatherman has a detailed analysis if you want to dive into definitions and pros/cons of each.

To add font-display: swap manually, find your font’s CSS file or search for the font using String Locator if you’re not sure where it’s located. Then simply add font-display: swap to the font face.

@font-face {
font-family: "Lato Regular";
font-weight: 300;
font-style: normal;
src: url("fonts/Lato-Regular-BasicLatin.woff2") format("woff2");
font-display: swap;
}

 

7. Disable Gutenberg’s wp-block-library

Since you’re using Elementor, you can disable Gutenberg which adds an extra CSS file to your site (/wp-includes/css/dist/block-library/style.min.css). You can find this in your source code:

You can use the Disable Gutenberg plugin or the script manager in Perfmatters. If you’re only using Gutenberg in certain sections of your site, both options let you control where it’s loaded.

 

8. Remove Unused CSS With Elementor Exclusions

The fastest way to remove unused CSS is with FlyingPress, Perfmatters, or LiteSpeed Cache.

WP Rocket’s is slower because it loads used CSS inline instead of a separate file. This is bad because it increases HTML size and can’t be cached. While nearly every single optimization plugin and “speed expert” agrees separate file is better (including Vikas Sharma who is very active in Facebook Groups), WP Rocket seems more interested in scores over browsing speed.

Regardless of which plugin you use, you’ll need to add Elementor exclusions.

Exclude Flexbox container stylesheets:

/wp-content/plugins/elementor/assets/css/frontend-lite.min.css
/wp-content/plugins/elementor-pro/assets/css/frontend-lite.min.css

Exclude sticky menu selectors:

#elementor-device-mode
.elementor-sticky--active

This is what it looks like in Perfmatters. For used CSS method, file is worse for scores, but faster for visitors. For stylesheet behavior, remove is fastest but you’ll need to exclude files/selectors if they break your site. And if “remove” is causing too many issues, “delay” is the next best setting.

 

9. Use Transform + Translate In Animations

Not that I endorse animations, but use transform + translate to prevent layout shifts (CLS).

You can use Happy Addons to add these. CSS transform lets you change the width/height of animations while CSS translate lets you move elements around without causing layout shifts.

 

10. Code Your Header/Footer In CSS

Since your header/footer load across your entire site, they should be lightweight, especially your header because it loads at the top. CSS is much more lightweight than Elementor’s code. After doing this, “Elementor” appeared about 150 times in my source code (compared to 2,008).

I hired WP Johnny to do this, but he’s a busy guy. My developer (Pronaya) can also do this who you can hire through his freelancer profile. I’ve worked with him for 10 years so yes, he’s legit. He lives in Bangladesh so there’s a time change, but his communication has always been 100%.

This is also part of Vikas’ recommendations:

 

11. Delay JavaScript With Elementor Exclusions

When using WP Rocket or the “delay all JavaScript” setting in plugins like Perfmatters and FlyingPress, you’ll usually need to exclude Elementor files or it could break your site. You can also use Flying Scripts to add JavaScript files manually, but “delay all” is usually more powerful.

Perfmatters has an exclusion list and so does WP Rocket. Check the plugin’s documentation since “delay all” doesn’t play nicely with Elementor unless you exclude files. Perfmatters also says it “might vary slightly based on the elements and templates you’re using in Elementor. If you’re not using a lot of animations, you might not need any exclusions for Elementor at all.”

Elementor:

jquery.min.js
jquery.smartmenus.min.js
webpack.runtime.min.js
webpack-pro.runtime.min.js
frontend.min.js
frontend-modules.min.js
elements-handlers.min.js
elementorFrontendConfig
ElementorProFrontendConfig
imagesloaded.min.js

Elementor search:

webpack-pro.runtime.min.js
webpack.runtime.min.js
elements-handlers.min.js
jquery.smartmenus.min.js

Elementor Pro

a/jquery-?[0-9.](.*)(.min|.slim|.slim.min)?.js
/jquery-migrate(.min)?.js
/elementor/
/elementor-pro/
/wp-includes/js/imagesloaded.min.js
ElementorProFrontendConfig
elementorFrontendConfiga

This is what it looks like in Perfmatters:

If you want to add JS files manually, open your “third-party code” and “remove unused JavaScript” reports in PageSpeed Insights and start there. I also have a list of JS files to delay.

 

12. Test Plugins For CSS, JS, High Memory Usage

This is the “trap” I was talking about.

Install the wrong plugin and it can add a ridiculous amount of CSS/JavaScript which you can check in the Chrome Dev Tools coverage report (or Perfmatters script manager). While most of these files are related to DethemeKit, even Elementor Pro adds quite a bit of CSS/JavaScript.

Plugins running ongoing background tasks aren’t good since they increase memory usage. This is common with security, image optimization, analytics, backup, and some SEO plugins. Even Elementor increases memory usage (that’s why I don’t suggest using it on shared hosting).

WP Hive is great for telling you whether a plugin increases memory usage. Just install the Chrome Extension, browse the WordPress plugin repo, and it will tell you on the right side. However, take “minimal impact on PageSpeed” with a grain of salt since it seems to only test plugins out of the box. But once you start adding content with Elementor, it does impact scores.

Pretty much every Elementor plugin also uses jQuery. You can see this by enabling display dependencies in Perfmatters, view the script manager, and scroll down to Misc → jQuery:

There’s also Query Monitor and my list of slow plugins.

Plugin	Category	Memory Impact	PageSpeed Impact
All In One SEO	SEO	x	x
Broken Link Checker	SEO	x	✓
Disqus	Comments	✓	x
Divi Builder	Page Builder	x	x
Elementor	Page Builder	x	x
Elementor Premium Addons	Page Builder	✓	x
Elementor Pro	Page Builder	x	x
Elementor Ultimate Addons	Page Builder	✓	x
JetElements	Page Builder	x	x
Jetpack	Security	x	x
NextGEN Gallery	Gallery	x	x
Popup Builder	Popup	x	x
Site Kit by Google	Analytics	x	✓
Slider Revolution	Slider	x	x
Social Media Share Buttons	Social Sharing	✓	x
WooCommerce	WooCommerce	x	x
Wordfence	Security	x	✓
wpDiscuz	Comments	x	x
WPML	Translate	x	x
Yoast SEO	SEO	x	✓

 

13. Disable Plugins Where They’re Not Used

Elementor plugins are notorious for loading across the entire site.

If you only need them on specific pages/posts, you can reduce CSS/JavaScript by unloading them in Perfmatters or Asset CleanUp. I use Perfmatters since it has a lot more optimizations.

Once you’ve enabled the script manager (Settings → Perfmatters → Extras → Script Manager), go to the script manager settings and enable testing mode. This lets you test the script manager without it breaking your site, but remember to disable it when you’re ready to publish changes.

View the script manager and unload plugins where they’re not used (everywhere but pages, posts, current URL, Regex, etc). This obviously depends on which plugins you use and where.

 

14. Use Less Elementor Widgets/Columns

This video by Oooh Boi has some great tips for using less Elementor widgets/columns which results in less code. Definitely worth watching the full 15 minutes if you haven’t seen it already.

Main part starts at 3:23.

Elementor also has a video on this:

 

15. Upload Images In WebP

The reason you want to upload WebP images manually is to avoid using plugins (which taxes the server) and because image CDNs like Cloudflare Polish don’t always serve WebP images. Even when Cloudflare must have thought the savings weren’t high enough and didn’t convert them, I found converting them manually generally resulted in a file size reduction of over 50%.

You can check if images are  being served in WebP using Chrome Dev Tools:

 

16. Use Optimole (Or An Image CDN) To Optimize Images

Optimole does a better job than other plugins, and Cloudflare Mirage/Polish are even better.

While most plugins compress images and convert them to WebP, not all of them support AVIF, mobile image resizing, or viewport/network-based optimizations (such as downgrading image quality on slow connections). So if you must use an image optimization, I recommend Optimole.

Image CDNs are preferred because they don’t use server resources or take up storage. Instead, images are optimized on the fly (by your CDN, not your server) without needing to take backups.

	Imagify	ShortPixel	Optimole	SiteGround CDN	Bunny Optimizer	Cloudflare Mirage/Polish
Compression	✓	✓	✓	✓	✓	✓
WebP	✓	✓	✓	Via plugin	✓	✓
Mobile resizing	x	SP Adaptive Images	✓	x	✓	✓
AVIF support	x	✓	✓	x	x	✓
Serve images from CDN	x	SP Adaptive Images	Cloudfront	✓	✓	✓
CDN locations	–	–	450	176	114	300
No server use	x	x	x	x	✓	✓
No bloat	x	x	Offloading	x	✓	✓
Plugin rating	4.4/5	4.5/5	4.8/5	–	–	–
Price	Free 20MB/mo or $9.99/mo	Free 100 credits/mo or $3.99/mo	Free 5,000 visits/mo or $19.08/mo	$14.99/mo	$9.5/mo or $.03/GB w/ FlyingCDN	Varies on Cloudflare Enterprise

To address these, I crop/resize images and upload them in WebP. Besides optimizing above the fold images in the step 17, everything is done by my cache plugin/CDN. Just make sure you add image dimensions in Elementor’s Layout tab or you may get the ‘explicit width/height’ warning.

I have a full tutorial on optimizing images if you still need help:

 

17. Preload Viewport Images And Exclude Them From Lazy Load

Above the fold images should be excluded from lazy load or it adds resource load delay and hurts LCP. They should also be preloaded to make them high priority which also improves LCP.

The easiest way is preloading critical images in Perfmatters or FlyingPress. Just set the number of images that usually load above the fold (usually 2-3) and both are done automatically. Other plugins make you exclude images by URL or class, then manually preload  images which can be time consuming. There are plugins to help, but it’s still more work than Perfmatters/FlyingPress.

LiteSpeed Cache and WP Rocket make it relatively easy to exclude images from lazy load, but won’t preload them. You could also use a plugin to add classes to Elementor to make this easier.

 

18. Use LiteSpeed Hosting With NVMe Storage

ChemiCloud uses LiteSpeed servers, NVMe SSDs, Redis, and more CPU/RAM which can scale through their Turbo Boost add-on. You’ll configure LiteSpeed Cache (which is free and does a great job with core web vitals) on top of QUIC.cloud’s CDN or Cloudflare APO. This beats other hosting setups in terms of TTFB, price, support, and scalability. With a 5/5 TrustPilot rating, it’s obvious other hosts are popular from marketing, but fall short when you actually look at specs.

Notes

• LiteSpeed servers are faster than Apache.
• LiteSpeed servers are more CPU/memory efficient.
• NVMe SSDs are faster than SATA SSDs, often with 6x faster read/write speeds.
• MariaDB is more powerful than MySQL (here’s a Facebook poll taken on the two).
• Redis is more powerful than Memcached, especially for dynamic/WooCommerce sites.

View Spreadsheet

ⓘ links are used for clarification. See how TrustPilot reviews are calculated in my full spreadsheets.

Bad Hosts

Mainstream hosts like SiteGround, Hostinger, WPX, and SlowDaddy don’t live up to the hype. They use slow SATA SSDs, no Redis, and skimp on CPU/RAM/inodes (causing CPU issues and forced upgrades). It gets more expensive with renewals, add-ons, price increases, and wasted time dealing with incidents like SiteGround’s DNS causing 2M sites to get deindexed in Google. The only reason you see “glowing reviews” is because SiteGround threatens people who write bad reviews, controls Facebook groups, and untruthful affiliates. Hostinger writes fake reviews and scams people, so don’t believe “unlimited” storage/websites/bandwidth on their website. WPX isn’t ideal for dynamic/international sites (they literally say they target a TTFB of <400ms). Slow technology + limited resources + prices + incidents + poor support… these aren’t worth it.

 

19. Use Rocket.net + Cloudflare Enterprise For A 100ms Global TTFB

If the fastest hosting means the fastest TTFB, Rocket.net averages 100ms.

That’s who I use and they’re specifically good for international audiences and WooCommerce/dynamic sites (hence the 100ms global TTFB) thanks to free Cloudflare Enterprise, 32 CPU cores + 128GB RAM, NVMe SSDs, Redis/Redis Pro, and LiteSpeed’s PHP.

View Spreadsheet

Aside from my biased opinions, they’ve blown up in Facebook groups where Ben Gabler (CEO) did an AMA. They have all 5/5 star TrustPilot reviews where you’ll see people who switched to Rocket.net from other hosts (but not the other way around) even when you search SG’s 13,000 TrustPilot reviews. You can see more migration results if your search their TrustPilot for “TTFB.”

Here’s an interview I did with Ben (he also did one with Admin Bar).

It’s $1 your 1st month with free migrations. Or reach out to Ben and schedule a demo. The dashboard is easy and Cloudflare Enterprise is automatic… the only thing I did initially was upgrade PHP versions, ask support to add Redis, and remove CDN/image optimization plugins.

 

20. Use Full Page Caching

Whether you take my hosting/CDN recommendations, you should be using full page caching.

I recommend Cloudflare APO (or better, Cloudflare Enterprise) or QUIC. SiteGround’s CDN supports full page caching but I have no clue why you would use it instead of APO which has more PoPs and is $5/mo, other than SiteGround wants you to pay them instead of Cloudflare.

View Spreadsheet

 

21. Configure Hosting Settings

Some of these are found under Elementor → System Info, but you’ll want to open up your hosting dashboard and configure the following (obviously some of them depend on your host):

 

22. Rethink Your Optimization Plugin

Use LiteSpeed Cache if you’re on a LiteSpeed server, FlyingPress in all other cases.

WP Rocket only released 1 new feature after 2020 if you check their changelog, lacks many important features, and RocketCDN/Imagify also lack features. They’ve basically gone “stale.” I used WP Rocket before FlyingPress and immediately noticed my site was faster after switching.

SiteGround Optimizer is fine for caching, but it’s one of the worst plugins for core web vitals. I usually recommend disabling all settings (except dynamic caching + Memcached, then use FlyingPress or Perfmatters for everything else. Plus, it’s loaded with compatibility issues their support (Hristo) likes to blame on third-party themes/plugins if you check the support forums.

 

23. Lazy Render Elementor Sections

You’ll need FlyingPress or LiteSpeed Cache to do this.

Lazy render is like lazy loading images only for any element on the page using CSS selectors. While #footer and #comments are both common, you can also lazy render Elementor sections.

View your site, then right click the Elementor section you want to lazy render. Inspect it in Chrome Dev Tools, right click the code, copy the CSS selector, and paste it into FlyingPress/LSC.

 

24. Remove Bloat, Database Bloat, Unused Modules

Here’s a summary:

The FlyingPress bloat settings should look something like this:

The problem with cleaning your database with cache plugins is they don’t take backups (WP-Optimize takes them via UpdraftPlus), they delete all post revisions (WP-Optimize can keep a few), and they don’t remove unused tables left behind by old plugins (while WP-Optimize does).

Ultimate Addons, Premium Addons, Rank Math, and many other plugins are module-based, meaning you can deactivate features you don’t use. WP Johnny also found Ultimate Adds For Elementor and uses too many autoloads, so again, you gotta be careful which plugins you use.

 

Conclusion: Elementor Is Slow(er), But Your Site Doesn’t Have To Be

My blog is all about speed so I use GeneratePress (Elementor wouldn’t make sense for me).

Another post by Vikas in case I didn’t cover everything (from 2011, but still relevant):

Why is my Elementor website slow?

Elementor adds extra CSS, JavaScript, fonts, and div wrappers to your site. Elementor plugins don't help either, including Elementor Pro which adds even more CSS/JavaScript.

How can I speed up my Elementor site?

You can speed Elementor by activating the performance settings and disabling unused fonts, font icons, and Gutenberg. There are Elementor-specific exclusions when removing unused CSS and delaying JavaScript in cache plugins, both of which can help significantly.

Why is the Elementor Editor slow?

High memory usage slows down the Elementor editor. Besides upgrading memory, a common reason for high memory usage is plugins running ongoing background tasks.

Why is Elementor slow on mobile?

If your Elementor mobile site is slow, try using mobile caching, resize images for mobile with your image optimization plugin or CDN, and reduce latency with a faster DNS/CDN.

Why is WooCommerce slow on Elementor?

Elementor and WooCommerce both add extra CSS/JavaScript while increasing memory usage. Using a sufficient host with object caching (i.e. Redis) along with full page caching and CDN features like Argo Smart Routing can speed up the delivery of dynamic content.

Cheers,
Tom