25 Ways To Speed Up A Slow Elementor Website (Advanced Optimization Guide)

Ready to speed up Elementor?

This is a comprehensive list of Elementor speed optimizations compiled over the last couple years working with Elementor and finding solutions in the Elementor Facebook Group. These should make your site faster while addressing web vitals and multiple PageSpeed Insight items.

We’ll start with Elementor Experiments and font optimization, finding large CSS/JS files and slow Elementor plugins, and specific things like lazy loading background images. I’ll get into “the great debate” about hosting, cache plugins, and CDNs. For what it’s worth, I’m using Rocket.net with Cloudflare Enterprise, FlyingPress, and Perfmatters. I was previously using Cloudways with WP Rocket but recently switched and can’t recommend this setup enough.

While I was able to optimize my site to load much faster in Elementor, I eventually replaced it with GeneratePress (and glad I did). My blog is about speed optimization so Elementor wasn’t a great choice to begin with. Regardless, I’ve spent a lot of time learning to speed up Elementor and hope this tutorial helps. If you have questions or suggestions, feel free to leave a comment.

 

1. Activate Elementor Experiments

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

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 – addresses “remove unused JavaScript” by dynamically loading widget JS handlers and Swiper only when they’re being used. Elementor says “in order for this experiment to work properly, you’ll have to use the Elementor Pro 3.0.9 version and above.”

Inline Font Icons – font awesome icons will be loaded inline as SVGs without it loading the entire library, preventing requests from extra CSS and font files from loading on your website.

Improved CSS Loading – addresses “remove unused CSS” and “eliminate render-blocking resources” in PSI by only loading widget CSS and animations when they’re actually being used on the page, while also applying inline CSS. Activating this saved 177KB in Elementor’s test.

 

2. Host Fonts Locally And Preload Them

Activate these in the Theme Customizer → Performance.

This loads Google Fonts locally and preloads them, or prefetches them when served from fonts.gstatic.com. Make sure to flush local font files then check your font files in the GTmetrix Waterfall chart to make sure they’re being served from your site (instead of fonts.gstatic.com).

 

3. Try Font-Display: Swap

If you need to ensure text remains visible during webfont load in PageSpeed Insights, head to Elementor → Settings → Google Fonts Load → choose “swap.” For Font Awesome, Elementor recommends using font-display: block which makes resources non render-blocking. You can test font-display: swap or font-display: block, then test your own results in PageSpeed Insights.

Without Font-Display:

@font-face { font-family: Lato; }

With Font-Display:

@font-face { font-family: Lato; font-display: swap; }

 

4. Remove Elementor CSS + JavaScript

The Coverage tab in Chrome Dev Tools is your best friend for finding heavy CSS/JS files.

These can be related to Elementor, Elementor Pro (or other Elementor plugins), plugins not related to Elementor, or even third-party scripts such as Google Tag Manager. Since many core web vitals are related to CSS/JS, reducing or optimizing these files should be your top priority.

The easiest way is to avoid plugins/scripts that add CSS/JS in the first place. Look at your usage visualization graph any time you start using a plugin to see its impact on CSS/JS. Use the WP Hive Extension to see a plugin’s impact on PageSpeed before installing it. Finally, replacing slow plugins with lightweight alternatives is obvious, but it can have one of the largest impacts.

Another solution is to use the “remove unused CSS” feature found in cache plugins or Perfmatters. As Vikas explained in a Facebook post, FlyingPress does a better job than WP Rocket and Perfmatters. The UCSS in LiteSpeed Cache is also a solid option (but only use one).

Finally, use an asset unloading plugin to remove unused CSS/JS on specific pages. I prefer Perfmatters over Asset CleanUp because the interface is cleaner, it has lots of bloat removal options, and it’s maintained well with new features added somewhat regularly. When using Perfmatters, activate the script manager under Settings → Perfmatters → Extras → Script Manager. Then you can view any page on your site and find the script manager in your admin menu where you can start disabling plugins/CSS/JS on pages where they don’t need to load.

 

5. Code Sitewide Elements In CSS instead of Elementor

Do not build your header, footer, sidebar, and other sitewide elements in Elementor.

CSS is much more lightweight than Elementor’s bloated code and there’s absolutely no reason to use Elementor for this. If you don’t know how to do this, it’s 100% worth hiring a developer. I hired WP Johnny to remove Elementor and this was the first thing he did (which made a huge improvement). You can still use Elementor to design pages, but you don’t need it in these areas. Johnny is a busy guy so you can probably find someone in Facebook Groups or freelancer.com.

After doing this, “Elementor” only appeared about 150 times in my source code (it used to appear 2,008 times). WP Johnny offers this as a speed optimization service but he’s usually busy; you can try finding a developer on freelancer.com or upwork.com who can code these.

 

6. Lazy Load Background Images

If you’re seeing errors for defer offscreen images in PageSpeed Insights for background images, see that tutorial for instructions.

There are a few ways to fix this:

• Add the lazy-bg helper class in FlyingPress to your background image’s CSS class.
• Disable lazy load in WP Rocket, then use Optimole which can lazy load CSS selectors.
• Add a “lazy-bg” CSS class manually, enqueue it, then add lazy-bg to your background.
• Move background images to inline HTML by marking up background images using divs.

Many cache plugins like WP Rocket only lazy load images when they use inline HTML. So you ‘ll either need to move background images to inline HTML, use a plugin that supports a lazy-bg helper class, or add a helpful class yourself. WP Rocket recommends the Lazy Load Background Images For Elementor plugin but it’s not maintained and has bad reviews. Use another method.

 

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

 

8. Go Easy On Elementor Plugins

Don’t go crazy with 3rd party Elementor add-ons.

I deleted Ultimate Addons, Premium Addons, and multiple Jet plugins (i.e. JetEngine) since these were only being used in a few areas of my site and weren’t worth the extra load times. Again, check your Chrome Dev Tools report to see how much CSS/JS they add to your website.

Avoid Other Slow Plugins

Some plugins impact core web vitals while others run CPU-hungry background tasks and increase usage. Statistic, backup, portfolio, live chat, form, slider, and JetPack are just a few examples. Query Monitor will find your slow plugins, but even Query Monitor and Broken Link Checker constantly run in the background and increase usage, so delete them if you’re done.

WP Hive lets you view plugins in the WordPress repository and see whether they impact memory usage + PageSpeed Insights before installing it. However, it seems to only test fresh installations and not how much CSS/JS they add to a site once you actually add content with them, so I wouldn’t consider this 100% accurate which is why I created this 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	✓

 

9. Replace Icons With Custom Icons

You’ll want to disable Font Awesome and Eicons, then use custom icons instead. You can dequeue them (see below for Eicons), then add custom icons under Elementor → Custom Icons.

add_action( 'wp_enqueue_scripts', 'remove_default_stylesheet', 20 ); 
function remove_default_stylesheet() { 
	wp_deregister_style( 'elementor-icons' ); 
}

 

10. Disable Unused Modules In Ultimate Addons

Ultimate Addons, Premium Addons, Rank Math, and many other plugins are module-based, meaning you can deactivate features you’re not using. WP Johnny found Ultimate Adds For Elementor is bloated and uses too many autoloads, so even if you don’t see it adding CSS/JS, it can still be slow and increase CPU usage. Be sure to check WP-Optimize for database bloat too.

 

11. Remove Heavy Elements On Mobile

Use Elementor’s responsive mode to remove heavy elements from mobile. Instead of a slider, use an image (or just use less images). Remove heavy third-party code and JavaScript from your mobile site. Google uses mobile first indexing – mobile speed is what you should focus on most.

 

12. Use Transform + Translate In Animations

Using animations without transform + translate can result in layout shifts.

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.

 

13. Use Faster Hosting (The Great Debate)

Rocket.net with their free Cloudflare Enterprise will outperform any “mainstream host” since you get 32 CPU cores + 128GB RAM, NVMe storage, Redis, and Cloudflare’s full page caching + Argo Smart Routing. I use them and average a <150ms global TTFB (or click through my posts).

Mainstream hosts (like SiteGround, Hostinger, and WPX) don’t have a lot of CPU/RAM, use slower SATA SSDs, and are shared hosting with strict CPU limits which force you to upgrade plans. Cloud hosting is faster, but Kinsta still uses SATA SSDs with low CPU/RAM, PHP workers, and monthly visits (Redis also costs $100/month). Cloudways Vultr HF is who I previously used, but again, they start with only 1 CPU + 1GB RAM on slower Apache servers, PHP-FPM, and GZIP.

Here are Rocket.net’s:

All plans use 32 CPU cores + 128GB RAM with NVMe (faster than SATA), Redis (better than memcached), LiteSpeed’s PHP, and Brotli (smaller compression than GZIP). They have no PHP worker limits since only about 10% of traffic hits your origin due to their Cloudflare Enterprise.

	SiteGround	Hostinger	Kinsta	Cloudways Vultr HF	Rocket.net
Hosting type	Shared	Shared	Cloud	Cloud	Private cloud
Storage	SATA	SATA	SATA	NVMe	NVMe
CPU cores	Not listed	1-2	12	1	32
RAM (GB)	Not listed	.768 – 1.536	8	1	128
Object cache	Memcached	x	Redis ($100/mo)	Redis (Pro)	Redis
Server	Nginx	LiteSpeed	Nginx	Apache	Nginx
PHP processing	FastCGI	LiteSpeed	FastCGI	FPM	LiteSpeed
Compression	Brotli	Brotli	Brotli	GZIP	Brotli
CPU limits	Very common	Low memory	PHP workers	Average	None

 
Why you need Cloudflare Enterprise

Because you get Enterprise features like 270+ PoPs, prioritized routing, full page caching, HTTP/3, WAF, and image optimization. 3 problems with most CDNs are their small network (PoPs) and no full page caching or image optimization. For example, WP Rocket’s RocketCDN uses StackPath which was removed from cdnperf.com and doesn’t include image optimization with a mediocre Tbps speed of 65+. SiteGround’s CDN only has 14 PoPs. QUIC.cloud CDN (for LiteSpeed) and BunnyCDN are good, but they still don’t beat Cloudflare Enterprise. Sure, you can pay $5/mo for Cloudflare’s APO, but you’re still missing out on all other Enterprise features.

3 popular hosts with Cloudflare Enterprise

Rocket.net’s Cloudflare Enterprise is free, setup automatically, and uses full page caching (unlike Cloudways). And unlike Kinsta’s, Rocket.net has Argo Smart Routing (specifically good for WooCommerce sites), load balancing, and image optimization. Rocket.net CEO Ben Gabler also used to be StackPath’s Chief Product Officer and went as far as building Rocket.net’s data centers in the same locations as Cloudflare’s. And unlike both hosts, Rocket.net doesn’t limit PHP workers (there’s no CPU limits) and monthly visit limits are 10-25 times more than Kinsta’s.

	Cloudflare Enterprise (Kinsta)	Cloudflare Enterprise (Cloudways)	Cloudflare Enterprise (Rocket.net)
CDN PoPs	270	270	270
Prioritized routing	✓	✓	✓
Full page caching	✓	x	✓
HTTP/3	✓	✓	✓
WAF	✓	✓	✓
Argo smart routing	x	✓	✓
Load balancing	x	✓	✓
Image optimization	x	✓	✓
Automatic configuration	x	x	✓
Price	Free	$5/mo (1 domain)	Free

 
Problems with mainstream hosts

I’ve written some pretty bad reviews about SiteGround’s slow TTFB, CPU limits, and why SG Optimizer does a poor job with core web vitals (they also control several Facebook Groups and threaten to sue people who write bad reviews). Hostinger writes fake reviews and is only cheap because you get less resources like CPU/RAM. Kinsta and WP Engine are way too expensive for how many resources, PHP workers, and monthly visits you get. Along with major incidents like WPX’s worldwide outage and SiteGround’s DNS getting blocked by Google for 4 days (both WPX and SiteGround denied responsibility). One thing is clear: most mainstream hosts appear to be more interested in profits than performance. Please do your own research before getting advice.

Getting started

Step 1: Create a Rocket.net account and you’ll be prompted to add a coupon. Sign up with coupon OMM1 to get your first month for $1 (renews at $30/mo or $25/mo when paying yearly). If you sign up with my coupon or affiliate links, I get a commission which I seriously appreciate.

Step 2: Request a free migration. They did this the same day and let me review my website before it was launched with no downtime. For the record, their support is better than Kinsta’s and you can reach out to Ben Gabler or his team (via phone/chat/email) if you have questions.

Step 3: Upgrade to PHP 8.1 and ask support to install Redis (they use Redis Object Cache). These are the only things I did since Cloudflare Enterprise and backups are both automatic.

Step 4: Retest your TTFB in SpeedVitals and click through your pages to see the difference. You can also search their TrustPilot profile for people mentioning “TTFB” where they’re rated 4.9/5.

I was previously on Cloudways Vultr HF which was great, but their Cloudflare Enterprise doesn’t use full page caching (yet) and is $5/mo with annoying challenge pages. Even if their Cloudflare Enterprise was identical, Rocket.net still outperforms them with better specs like more CPU/RAM, Brotli, and LiteSpeed’s PHP (plus better support, easier to use, and usually pricing). While Cloudways is a big improvement than most hosts, you’re already spending $18/mo for Vultr HF’s lowest 1 CPU plan with Cloudflare Enterprise. At that point, the extra $7/mo you’d be spending at Rocket.net is worth it. Rocket.net’s dashboard is also much easier.

For small sites on a budget, NameHero’s Turbo Cloud plan is similar to Hostinger between LiteSpeed, cPanel, and pricing. However, NameHero’s Turbo Cloud plan has about 1.5x more resources (3 CPU + 3GB RAM) with NVMe storage. NameHero’s support/uptimes are also better shown in TrustPilot reviews. This is one the fastest setups on a budget… you get a LiteSpeed server + LiteSpeed Cache + QUIC.cloud CDN, and email hosting. The main con is their data centers are only in the US and Netherlands. If these aren’t close to your visitors, make sure to setup QUIC.cloud’s CDN which has HTML caching (ideally the paid plan which uses all 70 PoPs).

 

14. Invest In A Better Cache Plugin

FlyingPress and LiteSpeed Cache are better than WP Rocket and SiteGround Optimizer (there, I said it). I explain why in my post on best cache plugins.

They do a better job of optimizing for actual browsing speed instead of just core web vitals (unlike WP Rocket). They’re maintained well and don’t constantly release premature updates and use customers as beta testers (unlike SiteGround Optimizer). They also have more features (lazy rendering HTML classes, preloading critical images, lazy load background images CSS helper class, self-hosted YouTube placeholder, and more effective remove unused CSS feature. LiteSpeed Cache has their own unique optimizations like Guest Mode and server-level caching.

I switched from WP Rocket to FlyingPress and immediately noticed a big difference when clicking through my posts (core web vitals stayed the same). Gijo’s support was also the best I’ve experienced. I have tutorials for pretty much every cache plugin but you’ll want the one for FlyingPress settings or LiteSpeed Cache settings. Don’t use free cache plugins because with the exception of LiteSpeed Cache, most haven’t even been updated for CWV and aren’t maintained.

 

15. Activate Redis Or Memcached

You should be using one or the other (I prefer Redis).

The first thing you do is check whether your host supports it (Cloudways has Redis, SiteGround has memcached, and you’ll usually see both in cPanel in PHP Selector → Extensions (or similar).

Once you activate it, some cache plugins also have settings for Redis/memcached (i.e. LiteSpeed Cache, SiteGround Optimizer, W3 Total Cache). Obviously, you only want to use one.

 

16. Use A Better CDN Configuration

Cloudflare Enterprise (through Rocket.net), FlyingProxy, FlyingCDN, and QUIC.cloud’s standard plan are all solid CDN choices.

What’s my reasoning?

• Cloudflare Enterprise is hard to beat. Rocket.net and FlyingProxy include several Enterprise-level features for relatively cheap (or free) including full page caching which isn’t included on Cloudways/Kinsta. While both are good, I would personally lean towards Rocket.net since you get more optimizations (like Argo + Tiered Cache and load balancing) without having to configure anything. However, FlyingProxy can be used on any host. The premium network, prioritized routing, more PoPs, and WAF alone make a big difference.
• What about FlyingCDN? Tried it and it’s great. Only reason I use BunnyCDN is because I have affiliate credits. It has Bunny Optimizer + geo-replication built-in and is only $.03/GB.
• Two CDNs? Gijo recommends using both Cloudflare + BunnyCDN (see screenshot below).
• QUIC.cloud’s standard plan is also solid. It has HTML caching (similar to Cloudflare APO) but the free plan only uses 6 PoPs and lacks DDoS protection, so you get what you pay for.
• Don’t use RocketCDN. It uses StackPath which was removed from cdnperf.com after major issues. Has a low Tbps compared to BunnyCDN and doesn’t have geo-replication. It’s only a CDN (nothing else) which WP Rocket made easy to set up, but consequently has 0 customization options. Finally, it’s not “unlimited” like WP Rocket claims here. Not good.
• Don’t use SiteGround’s CDN. Only has 14 PoPs and you have to use SiteGround’s DNS to use it which was previously blocked by Google for 4 days. I wouldn’t trust it, but your call.

 

17. Use PHP 8.0

Check your PHP Version in Elementor → System Info.

It takes 2 minutes to login to your hosting account and upgrade PHP versions.

 

18. Increase Memory Limit

You can also find memory limit, max post size, max upload size, and other things in System Info. Elementor requires a 256MB memory limit but you can bump it up even more. Most of these can also be changed in your host. Increase the memory limit here or add the code to wp-config.php.

define( 'WP_MEMORY_LIMIT', '1024M' );

19. Optimize Images

There are quite a few ways to optimize images:

• Properly size images – resize images to smaller dimensions.
• Defer offscreen images – lazy load background images in step #6.
• Efficiently encode images – ShortPixel/CDNs are popular for compression.
• WebP – most image optimization plugins and CDNs support WebP now.
• Preload first contentful paint image – PSI tells you which image to preload.
• Lazy load images, iframes, videos – exclude above the fold images for faster LCP.
• Use explicit width and height – several plugins let you add missing image dimensions.
• Use adaptive images – serve smaller images to mobile with an adaptive images plugin.
• Serve images from a CDN – just make sure your images are also served from the CDN.

 

20. Optimize Third-Party Code

Open your third-party code in PSI and follow the tips:

• Host fonts, analytics, Tag Manager, Gravatars, and YouTube placeholders locally.
• Lazy load YouTube videos and replace iframes with a preview image.
• Delay JavaScript (automatically in WP Rocket or see this list of JS to delay).
• Delay third-party comment plugins/Gravatars if you have lots of comments.
• Use Cloudflare Zaraz to offload Ads, Analytics, FB Pixel, other third-party code.
• Try Grow by Mediavine for social sharing buttons to prevent social media requests.

 

21. Preload, Prefetch, Preconnect

You’ve probably seen these in PageSpeed Insights which basically helps critical or third-party resources load faster. You can do these in your cache plugin, Perfmatters, or with manual code.

• Preload – do this for fonts located in CSS files and fonts that load above the fold. You can find font files in GTmetrix Waterfall. Preloading links downloads a page when users hover over a link which makes the page appear to load instantly, but this can also increase CPU usage if your users are hovering over lots of links. This is a setting in many cache plugins.
• Preconnect – usually only done with third-party fonts (fonts.static.com) and CDN URLs. Many cache plugins will automatically preconnect these, but check the documentation.
• Prefetch – done for other external domains (see screenshot above or common domains).

22. Remove Unused Database Tables

Many speed plugins clean your database but won’t delete tables left behind by old plugins, which is where WP Optimize comes into play.

View tables left behind by plugins marked as “not installed.” You probably installed the plugin, deleted it, then it left behind pre-configured settings in your database. So if you don’t plan on using that plugin again, remove it. Otherwise, WP Rocket and other cache plugins are fine for regular database cleanups. Install WP-Optimize once in a while especially after deleting plugins.

 

23. Finish The Last 10% With Perfmatters

Perfmatters does more than remove unused CSS/JS.

They’ve made several updates and it now includes optimizations not done by most cache plugins. This can help with asset unloading, bloat removal, reducing CPU usage, and web vitals.

 

24. Core Web Vitals (LCP, CLS, TBT)

I have an extensive tutorial on optimizing WordPress for core web vitals (and how to fix 25+ items in PageSpeed Insights), but I want to share a few important parts of getting better scores.

Largest Contentful Paint

• Optimize your LCP element.
• Exclude above the fold images from lazy load.

Cumulative Layout Shift

• Test your site in Google’s Layout Shift Debugger.
• Specify dimensions of images, videos, iframes, ad div code.
• Ensure text remains visible during webfont load (fix FOIT).
• Host fonts locally on your server and see if preloading them helps.
• Use CSS transform in animations instead of width/height attributes.
• Ensure optimize CSS delivery is working (i.e. in WP Rocket) to avoid FOUC.
• When moving elements, use transform: translate() instead of top, bottom, left, right.

Total Blocking Time

• Find long main-thread tasks (over 50ms) in PSI.
• Focus on removing and optimizing JavaScript/CSS.
• Find the source of blocking time in GTmetrix Waterfall.
• Avoid using plugins and themes with heavy JavaScript files.
• Defer, delay, minify, and optimize JavaScript as best you can.
• Identify third-party scripts with high blocking time and optimize them.
• Check your “avoid long main-thread tasks” report in PSI to pinpoint files.

 

25. Replace Elementor With Gutenberg Blocks

I ran a test on the fastest WordPress themes using different starter templates/layouts.

Next time you build a site or redesign yours, try GeneratePress or Kadence.

I redesigned mine with GeneratePress + GenerateBlocks and page size cut in half even, and this was after removing Elementor. Scratch drag and drop page builders and embrace block editors.

Another alternative is to hire WP Johnny for his page builder removal services where he will replace Elementor with Gutenberg blocks, or find another developer who can do this for you.

Not cool.

Another post by Vikas in case I didn’t cover everything:

Why is my Elementor website slow?

Elementor adds extra CSS, JavaScript, fonts, and div wrappers. Try activating built-in optimizations in Elementor Experiments, hosting fonts locally, and preloading them. Hosting, cache plugin, and CDN will also be key to speeding up Elementor.

What are common reasons for a slow Elementor site?

Too many bloated plugins, unnecessary modules, cheap shared hosting, and not optimizing fonts, images, and third-party code can slow down your Elementor site.

Why is the Elementor Editor slow?

If your Elementor Editor is slow, it's most likely due to high CPU consumption caused by plugins or lack of server resources. Increase your memory limit or look into cloud hosting.

Why is Elementor slow on mobile?

Try using mobile caching, adaptive images, responsive layouts, and avoid hamburger menus. However, most desktop optimizations carry over to mobile so try fixing those first.

Why is WooCommerce slow on Elementor?

Both Elementor and WooCommerce add extra scripts and styles to your website. Try selectively disabling these using Asset CleanUp or Perfmatters. You can also try disabling cart fragments if your customers don't use them as well as WooCommerce admin bloat.

Cheers,
Tom