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

Slow elementor website

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:

Elementor experiments

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

Elementor host google fonts locally preload

Local vs third party fonts

Elementor with without experiments font optimization

 

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.

Elementor google fonts swap

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.

Elementor css

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

Remove unused css wp rocket vs perfmatters vs flyingpress

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.

Disable elementor plugins perfmatters
You may be able to disable Elementor plugins everywhere but places they’re used
Disable plugins perfmatters
Do the same with other plugins

 

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.

Speed up elementor tips

 

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.

Elementor lazy bg css class
Using a lazy-bg CSS class is the easiest way (use a plugin that supports it or add it manually)

 

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.

Slow wordpress plugins query monitor

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' ); 
}

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

Disable unused modules

 

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.

Elementor mobile editing

 

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.

Css transform translate elementor

 

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

12 things to know about hosting/TTFB

  1. Hosting is the #1 factor of site speed.
  2. TTFB is a key indicator of hosting performance.
  3. TTFB is part of core web vitals and is 40% of LCP.
  4. TTFB also affects INP (since latency is part of TTFB).
  5. SpeedVitals tests TTFB in 35 locations – use this tool!
  6. Test your site 3 times to get accurate numbers in SpeedVitals.
  7. Doing this ensures your caching and CDN are working properly.
  8. Check your average TTFB worldwide in your 3rd SpeedVitals test.
  9. Google flags your TTFB if it’s over 600ms, but under 200ms is better.
  10. PageSpeed Insights (and other testing tools) only test TTFB in 1 location.
  11. WP Hosting Benchmark also tests hosting performance (here are my results).
  12. Combining a good host/CDN is arguably the best way to improve TTFB (using a host with improved specs on top of Cloudflare Enterprise hits 2 birds with 1 stone).

Omm ttfb speedvitals 1

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.

Rocket. Net omm1 coupon

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.

Kinsta to rocket. Net migrationMoved to rocket. Net vs sitegroundRocket. Net positive review

Rocket. Net facebook review 1Rocket. Net vs kinstaKinsta to rocket. Net ttfb redis

Namehero cloudways rocket. Net
I agree with this for the most part

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

Cpu cores on litespeed hosting plansLitespeed cache litespeed server

Ram on litespeed hosting plansNamehero vs siteground feedback

 

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.

Omm switches to flyingpress

 

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.

Redis memcached cpanel

 

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.

Cloudflare with bunnycdn

 

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.

Elementor system info

 

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' );

Cloudways memory limit

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.

Image optimization pagespeed insights

 

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.

Third party code

 

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

Preload font perfmatters

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.

Wp optimize unused database tables

 

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.

Features:

  • Remove unused CSS (1-click).
  • Remove unused JavaScript via script manager.
  • Limit post revisions + increase autosave interval.
  • Delay JavaScript (often used for third-party code).
  • Preload critical images above the fold to improve LCP.
  • CDN rewrite to rewrite URLs so assets are served from your CDN.
  • Instant page (same thing as “link preloading” found in cache plugins).
  • Add missing image dimensions to fix “explicit width/height” PSI item.
  • Host Google Analytics locally and anonymize IP for GDPR compliance.
  • Optimize Google Analytics tracking code to be smaller with less requests.
  • Host fonts locally and serve them from a CDN URL (not needed for Cloudflare).

 

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.

Largest contentful paint background image

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.

Cumulative layout shift

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.

Avoid long main thread tasks 1

 

25. Replace Elementor With Gutenberg Blocks

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

Fastest wordpress theme starter templates

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.

Wp johnny page builder removal service

Not cool.

Elementor source code

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

Elementor speed tips

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

You Might Also Like:

40 thoughts on “25 Ways To Speed Up A Slow Elementor Website (Advanced Optimization Guide)”

  1. Really great article and checklist. My site is faster and I have only don eigth of your suggestions. Will contunue checking all of.

    Reply
    • Awesome! I’m going to revise this post soon with some minor updates but most everything is in there already. Lmk if you have questions.

      Reply
  2. Believe me, this is the best article I read till date. Perfect to the point. Well elaborated. Guts needed to say that some hosting providers spams to get conversion.
    I am a newbie to blogging. Just started on June’21. Taking help of YouTube, articles like yours, have built website by my own.
    Having no technical knowledge, still learning, experimenting everyday for a better speed, theme, lookout of the website.
    Hope will come up with some information and facts about my experience also some day in future.
    By the way, I have bookmarked your article. It will help me a lot.

    Reply
    • Thank you. Yes, most YouTubes are full of it and either leave out or aren’t aware of what these companies are doing. I’ll be publishing some videos soon to hopefully get the word out.

      Reply
    • I don’t think I emphasized 1 single plugin here, Perfmatters/Asset CleanUp or WP Rocket? Those are pretty standard for speed optimization unless you’re using LiteSpeed or SG Optimizer on SG.

      Reply
  3. I have already bookmarked this article before commenting, but I wanted to know about font-awesome. Can you tell me how can I remove font-awesome from my site without any code changes?

    Reply
    • I don’t think you can disable Font Awesome without code changes. No settings or plugins do this that I’m aware of.

      Reply
  4. I am using Elementor and sure it does add extra code, I am seeing good results (<2 sec) using WP Rocket (caching), Smush Pro (image optimization), and WP Asset Cleanup for stripping the fat from WordPress and removing unused scripts and styles (see image below). I do need to work on my optimizing my fonts a little better. Anyway thanks for the article, I’m always looking for new ways to improve my web vitals. I watched a recent video of someone using Nitropack and they are getting amazing results. 98 on mobile and 100 on desktop in page speed insights on a Elementor site. But of course there is a monthly cost for this service.

    Reply
    • Nitropack cheats scores and doesn’t improve load times as much as other (better) cache plugins do. There’s a lot of talk about this… I would do your research before using it.

      Reply
  5. Hi,

    Great article.

    i am at wpxhosting and there is not much ram ( just 256 ) for elementor. and I preferred to remove it because I was using Woocommerce on the same site and it was slow.

    Reply
    • Ah yes, Elementor and WooCommerce is a tough combination. I’m pretty much done removing Elementor from my site (header, footer, menu, sidebar are all hard coded now) and can definitely tell my site loads way faster. Go for it! It’s worth it.

      Reply
  6. Awesome stuff Tom. Implemented a lot of things you recommended and saw a significant increase in loading speed on our Elementor website. Now looking into Oxygen as well.

    Thanks a lot!

    Reply
    • Thanks Daniel, just started converting mine a few days ago. New GTmetrix/Lighthouse totally punishes websites using page builders.

      Reply

Leave a Comment