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)

Mainstream hosts (like SiteGround, Hostinger, GoDaddy, and WPX) don’t live up to the hype. They skimp out on CPU/RAM, use slower SATA SSDs, and are shared hosting with strict CPU limits which force you to upgrade. Cloud hosting is faster, but Kinsta and WP Engine still use SATA SSDs with low limits on PHP workers and monthly visits which get expensive. Instead of focusing on speed/technology, they do aggressive marketing… don’t fall for mainstream hosts.

For cloud hosting, I recommend Rocket.net (what I use) or Cloudways Vultr HF (what I previously used). Both use Cloudflare Enterprise which makes a major improvement to TTFB between full page caching, HTTP/3, image optimization, and Argo Smart Routing. Both also use NVMe, Redis, and have monthly pricing. However, Rocket.net is definitely faster since you get a lot more resources (32 CPU + 128GB RAM), LiteSpeed’s PHP (faster than Cloudways’ PHP-FPM), and Brotli. There are also no PHP worker limits due to Rocket.net’s free/automatic Cloudflare Enterprise which handles roughly 90% of traffic, resulting in less requests to your origin server. Finally, Rocket.net is easier between their dashboard and A+ support which is even better than Kinsta’s. Cloudways has more bandwidth/storage, but the technology isn’t as fast. One of these cloud hosts + Cloudflare Enterprise + FlyingPress (cache plugin) is the combination I would use.

WP Engine SiteGround Kinsta Cloudways Vultr High Frequency Rocket.net
Hosting type Cloud Cloud Cloud Cloud Private cloud
CPU cores Not listed 4 12 1 32
RAM (GB) Not listed 8 8 1 128
Storage (GB) 10 40 10 32 10
Object cache Redis Memcached Redis ($100/mo) Redis (Pro) Redis
Server Apache + Nginx Apache + Nginx Nginx Apache + Nginx Apache + Nginx
PHP processing Not listed FastCGI FastCGI PHP-FPM LiteSpeed
Bandwidth or monthly visits 25,000/mo 5TB 25,000/mo 1TB 50GB + 250,000/mo
CDN Cloudflare SiteGround CDN Cloudflare Enterprise Cloudflare Enterprise ($5/mo) Cloudflare Enterprise
CDN PoPs 270 14 270 270 270
Full page caching x Coming soon
Compression Brotli Brotli Brotli GZIP Brotli
Argo smart routing x x x
Load balancing x x x
Image optimization x Limited x
CPU limits Low PHP workers Very common Low PHP workers Average None
Email hosting Limited x x x
TrustPilot rating 4.4/5 4.6/5 4.3/5 4.6/5 4.9/5
Monthly price $25 $100 $30 $13 + $5 for CF Enterprise $25
Plans Don’t use Don’t use Don’t use View plans View plans
Omm ttfb speedvitals 1
Sites hosted on Rocket.net average a 100ms global TTFB (search their TrustPilot reviews)
Keycdn global ttfb
You can also test TTFB in KeyCDN or click through my site to see how fast it loads

Rocket. Net trustpilot reviewKinsta to rocket. Net migrationMoved to rocket. Net vs sitegroundRocket. Net positive review

Rocket. Net vs cloudways vultr hf trustpilot reviewRocket. Net facebook review 1Rocket. Net vs kinstaKinsta to rocket. Net ttfb redis

Rocket. Net woocommerce elementor
Try Rocket.net for $1, request a free migration, then retest your TTFB (or reach out to Ben Gabler)

Why Rocket.net’s Cloudflare Enterprise Is Better

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
Argo smart routing x
Load balancing x
Image optimization x
Automatic configuration x x
Price Free $5/mo (1 domain) Free

For shared hosting, I recommend NameHero. They use LiteSpeed servers which means you’ll use LiteSpeed Cache + QUIC.cloud CDN (arguably the fastest setup on a budget). It’s similar to Hostinger/A2 with LiteSpeed and cPanel, but you get more CPU/RAM and support/uptimes are better which is reflected in their TrustPilot reviews. I generally recommend their Turbo Cloud plan for $7.38/month which includes 3 CPU + 3 GB RAM and faster NVMe storage. The main con is their data centers are only in the US/Netherlands. If your visitors aren’t close to there, make sure to setup QUIC.cloud which has HTML caching (ideally the paid plan which uses all 73 PoPs).

SiteGround Hostinger GoDaddy WPX NameHero Turbo Cloud
Hosting type Shared Shared Shared Shared Shared
CPU cores Not listed 1-2 1-2 Not listed 3
RAM (GB) Not listed .768 – 3.072 .512 – 2 Not listed 3
Object cache Memcached x x x Redis
Server Apache + Nginx LiteSpeed Apache LiteSpeed LiteSpeed
CDN SiteGround CDN Cloudflare Enterprise QUIC.cloud QUIC.cloud Cloudflare Enterprise
CDN PoPs 14 73 14 73 73
Full page caching x
Compression Brotli Brotli Brotli GZIP Brotli
HTTP/3 x
Image optimization Limited x x
CPU limits Common Low RAM Common At their discretion Average
Cache plugin SG Optimizer LiteSpeed Cache x LiteSpeed Cache or W3TC LiteSpeed Cache
Email hosting Limited Very limited Limited
Major incidents Google blocked DNS for 4 days Breach affecting 14M customers Breach almost every year Worldwide outage 2 day outage
Free migration $30/site Free Paid Free Free
Price $3-8/mo (1 year) then $15-40/mo $29/mo (yearly) $20.83 (yearly) $20.83 (yearly) $7.38/mo (1-3 years)
Renewals Very high Monthly Monthly Monthly Monthly
TrustPilot rating 4.6/5 4.4/5 4.9/5 4.5/5 4.9/5
Plans Don’t use Don’t use Don’t use Don’t use View plans
Litespeed vs nginx vs apache
LiteSpeed is faster than Nginx/Apache (and more efficient with less chance of CPU spikes)

Litespeed cache litespeed server

Cpu cores on litespeed hosting plans

Namehero vs siteground feedback

Ram on litespeed hosting plans

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 interested in profits/reputation over performance. Do your own research before getting advice.

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).
Namehero cloudways rocket. Net
NameHero for shared, Cloudways Vultr HF for cloud, but Rocket.net outperforms both


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.


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


You Might Also Like:


  1. I am new to Blogging and created my site with Elementor. I joined a WP Meet Up site and one of the participants recommended switching to GenerateBlock / Press. Says site will run much faster. I see from comments above, you are switching to GeneratePress. Wanted to know how difficult it is to switch from Elelmentor to GeneratePress?
    Note: been doing some you tube surfing on topic, but have not found anything detailed enough to chance “blowing up my site”.

    • Not overly difficult but obviously required quite a bit of work. I only have a few pages though, the rest are blog posts. Designed my site by looking at GenerateBlocks (https://generateblocks.com/library/) then going off those templates. Probably took 1 month to complete but I also spent several extra months rewriting a bunch of content.


Leave a Comment