24 Ways To Speed Up A Slow Elementor Website (2022 Guide)

Ready to speed up Elementor?

Below is a complete list of Elementor speed optimizations I’ve 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 by optimizing DOM elements, CSS, JS, and fonts in the Experiment settings. We’ll host fonts locally and add font-display: swap, talk about Elementor’s Google Cloud hosting which uses Google Cloud C2, Hello theme, and specific things like layout shifts in animations.

If you want to know the exact setup I’m using, it’s Cloudways Vultr HF (hosting), FlyingPress (cache plugin), Cloudflare (DNS, CDN, APO), and Perfmatters (asset unloading/bloat removal). You can check my GTmetrix report, web vitals, or the responsiveness by clicking through posts. I have individual tutorials/reviews for all these tools which you can find in the navigation menu.

As a disclaimer, while I was able to optimize my onlinemediamasters.com site to load much faster with Elementor, I ultimately decided to remove it and use Gutenberg instead. But, my blog is about WordPress speed optimization so Elementor wasn’t the best choice to begin with. Needless to say, I’ve spent a lot of time learning how to speed up Elementor, so I hope this helps.

 

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

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.

Font-Awesome Inline – font awesome icons are loaded inline as SVGs without loading the entire library, preventing requests from extra CSS and font files from loading on your website.

 

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. Remove Elementor CSS + JavaScript

Elementor, Elementor Pro, and most Elementor plugins add extra CSS and JavaScript to your site. Many core web vital items are related to CSS + JavaScript (a big reason why many sites using heavy page builders got punished in web vitals). Elementor’s Experiments should help reduce CSS and JavaScript file size, but sometimes you need to use an asset unloading plugin.

• Perfmatters vs. Asset CleanUp – I compared these in this post. I use Perfmatters since the UX/UI is easier and it does much more than removing unused CSS/JS (see section 22). Perfmatters is paid, Asset CleanUp is free but also has a pro version which lets you unload custom CSS while Perfmatters does not. I like Perfmatters and am using it on my website.
• Activate The Script Manager – if using Perfmatters, activate the script manager under Settings → Perfmatters → Extras → Script Manager (enable). If using Asset CleanUp, activate Test Mode to prevent breaking things while testing changes. Perfmatters doesn’t have a Test Mode, but you can always undo a setting or create a staging site for testing.
• Disable Unused Scripts – access your script manager in Perfmatters or Asset Cleanup to view the CSS and JavaScript loaded by Elementor. Try disabling elementor-sticky, dialog, share-link, swiper, animations, icons, and wp-block-library if you don’t use these features.

Try disabling other scripts/plugins:

• Disable contact form everywhere but contact page
• Disable social sharing plugin everywhere but posts
• Disable table plugin everywhere but content with tables
• Disable rich snippet plugin everywhere but content with rich snippets
• Disable fonts everywhere except certain areas (if you use multiple fonts)

 

4. Hardcode Your Header, Footer, Sidebar

This made a huge improvement for me.

I hired WP Johnny to code my header, menu, footer, and sidebar in CSS so it doesn’t use Elementor’s heavy code. I immediately noticed my site loaded faster with better web vitals scores. These appear across your entire site; hiring a developer to do this is definitely worth it.

Even if you plan on using Elementor to design pages, you don’t need it in these areas. After doing this, Elementor only appeared about 150 times in my blog’s 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.

 

5. Add Font-Display: Swap

If you need to ensure text remains visible during webfont load in PSI, head to Elementor → Settings → Google Fonts Load, then choose the “Swap” method. For Font Awesome, Elementor recommends using font-display: block which can eliminate render-blocking resources. You can try 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; }

 

6. Use Less Elementor Widgets/Columns

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

 

 

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

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 consume resources. Delete them if you’re done.

The WP Hive Chrome Extension lets you view plugins in the WordPress repository and see whether they have an impact on memory usage or PageSpeed Insights before even installing it.

 

8. Disable Unused Plugin Modules

Some plugins have modular design and let you disable features you’re not using.

Many Elementor plugins use modular design like Ultimate Addons and Premium Addons (but they can still be slow as mentioned above). Other plugins like JetEngine don’t. View the settings and deactivate modules you’re not using. This can apply to all your plugins – not just Elementor.

 

9. Use Elementor’s Hello Theme

Elementor’s Hello theme has almost no styling/scripts. It’s better to start with minimal bloat, then add features. Gutenberg, GeneratePress, Oxygen, and Kadence are lightweight as well.

 

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

 

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

 

12. Use Cloud Hosting From Google, Vultr, LiteSpeed

Elementor released cloud hosting powered by Google Cloud + Cloudflare.

To my surprise, they’re using Google Cloud C2 which is one of the most highly performant machine families (same one Kinsta uses). So congrats to Elementor for not just slapping Google Cloud on their website, but actually choosing a great family. For comparison, SiteGround uses a slower N2 machine family, which means Elementor’s hosting should be faster than SiteGround’s.

I use Cloudways Vultr HF which is a popular choice in FB Groups. You can check my GTmetrix report, TTFB, or click through my site to see how responsive it is. I moved from SiteGround to Cloudways which cut load times in half and fixed CPU issues. They use Object Cache Pro/Redis with NVMe storage and 22 Vultr data centers (it’s also monthly pricing with no high renewals). There’s no email hosting and their Breeze plugin + CloudwaysCDN aren’t great, so you can use Cloudflare for most of this (I use FlyingPress, Cloudflare/BunnyCDN, and Google Workspace). Cloudways does free 3-day trials, a free migration, and has a 30% off promo code. Some people are afraid they’re “too techie” since you have to launch a Vultr HF server, but it’s really not hard:

Most other hosting recommendations are bogus and I suggest joining the WP Speed Matters Facebook Group to get unbiased feedback on hosting and site speed. SiteGround has a slow TTFB, GoDaddy is a big NO, Bluehost is also very slow, and I would stay away from Hostinger.

Spend 5 minutes looking at recent Facebook polls on “the best hosting,” migration results of people who switched, and unbiased feedback in Facebook groups (click thumbnails to enlarge).

 
LiteSpeed hosting on NameHero is another solid choice (if you haven’t heard of LiteSpeed, go read about it). It’s cheaper than Cloudways because it’s shared hosting – but faster than most.

I’m not sure why people use other LiteSpeed hosts like Hostinger/A2 when you get more CPU cores + RAM with NVMe on NameHero. You can use the LiteSpeed Cache plugin with server-side caching, QUIC.cloud, HTTP/3, and Redis. This is arguably the fastest setup you’ll find on a budget. I don’t know anywhere else you get 3 CPU cores, 3GB RAM, and NVMe on LiteSpeed for $8/mo. WP Johnny and I both have solid guides on configuring LiteSpeed Cache with QUIC. The main con is they only have data centers in US + Netherlands. Otherwise they have higher uptimes with less ‘frequent maintenance’ compared to Hostinger/A2’s uptime status page with US-based support. Ryan (the founder) is a down to earth guy if you watch his YouTube channel.

Affiliate Disclaimer: I use affiliate links to Cloudways + NameHero and appreciate your support. Vultr HF + Cloudflare APO is the main reason my TTFB is consistently around 100ms.

 

13. Invest In A Better Cache Plugin

I used to always recommend WP Rocket, but now I prefer FlyingPress (the cache plugin I’m currently using) and LiteSpeed Cache (what you should use if you’re on a LiteSpeed server).

My core web vitals stayed the same when moving from WP Rocket, but real-world browsing is much quicker (this seems to be the biggest difference between WP Rocket vs. FlyingPress). The settings are similar to WP Rocket’s and are easy to set up. FlyingPress can also lazy render CSS classes (i.e. footer/comments) which makes a big difference. It was built by Gijo Varghese from WP Speed Matters whose free plugins are highly rated and are all integrated with FlyingPress. FlyingPress is actually cheaper long-term since WP Rocket stopped offering renewal discounts. I also can’t say enough about Gijo’s support – he spent more time with me than he should have.

LiteSpeed Cache’s server-side caching already gives it a big advantage to other other two plugins, but you need to be using a LiteSpeed host and the settings are more difficult to configure. It also integrates with QUIC.cloud which you can configure in the LSC settings.

 

14. Activate Redis Or Memcached

Redis and memcached are supported by most cloud hosts.

For example, Cloudways uses Redis which can be installed as a drop-in plugin when activating it in the dashboard. SiteGround uses memcached which can be activated in Site Tools, then in SG Optimizer. The process is different depending on your host, so be sure you Google instructions.

 

15. Take Advantage Of CDN Features

Which CDN you choose and how it’s setup is key for speeding up Elementor.

Cloudflare is always a solid choice and has many features in the dashboard to optimize your site/security. BunnyCDN is also a popular choice in Facebook Groups. Then there’s QUIC.cloud which integrates with LiteSpeed. RocketCDN (StackPath) isn’t the fastest option and was even removed from cdnperf.com where you can see the performance and reliability of several CDNs.

BunnyCDN is easy to setup using their setup instructions and BunnyCDN plugin (setting up QUIC with LiteSpeed isn’t hard either). But Cloudflare requires some extra love in the settings.

 

16. Upgrade To 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.

 

17. Increase Memory Limit

Check your memory limit in Elementor → System Info.

Elementor requires a 256MB memory limit (you can even increase it more). Again, this is something you will do in your hosting account or add this code to your wp-config.php file.

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

 

18. Optimize Images

There are quite a few ways to optimize images:

• Properly size images – use smaller images.
• Compress images – ShortPixel and CDNs are popular methods.
• WebP – most image optimization plugins and CDNs support WebP now.
• Lazy load images, iframes, videos – exclude above the fold images for faster LCP.
• Strip EXIF data from images – most image optimization plugins can strip this data.
• Use explicit width and height – several plugins let you add missing images dimensions.
• Use adaptive images – serve smaller images to mobile with an adaptive images plugin.
• Serve images from a CDN – image URLs should be served from a CDN URL. If they’re not, try the CDN rewrite in Perfmatters or the Bunny CDN plugin. Cloudflare doesn’t do this.

 

19. Optimize Third-Party Code

Third-party code can be found in PSI, GTmetrix Waterfall, or Chrome Dev Tools.

How To Reduce Third-Party Code

• Host fonts + analytics locally.
• Lazy load YouTube videos and replace iframes with a preview image.
• Delay JavaScript (WP Rocket does it automatically or see this list of JS to delay).
• Delay third-party comment plugins and Gravatars if you have lots of comments.
• Use Cloudflare Zaraz to offload Ads, Analytics, FB Pixel, other third-party code.
• Host Avatars locally in Simple Local Avatar to avoid requests from gravatar.com.
• Try Grow by Mediavine for social sharing buttons to prevent social media requests.
• Use a self-hosted YouTube placeholder insetad of i.ytimg.com (FlyingPress does this).

 

20. Preload, Prefetch, Preconnect

You’ve probably seen these in your cache plugin or Perfmatters.

• Preload – often used for fonts and links. Find font files under “preload key requests” in PSI and add them to your cache plugin (or find them in GTmetrix Waterfall chart). Preloading links downloads a page when users hover over a link which makes the page appear to load instantly, but it can also increase CPU usage if your visitors are hovering over lots of links.
• Prefetch – helps browsers anticipate requests from third-party sites. View third-party code loading on your site in PSI, then prefetch the URLs or see this of domains to prefetch.
• Preconnect – establish early connection to important third-party origins (another PSI item). Common with CDN URLs + fonts.gstatic.com. Should be used sparingly and tested.

 

21. 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 the tables left behind by plugins shown as “not installed.” You probably installed the plugin, deleted it, but 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, but install WP-Optimize especially after deleting unwanted plugins.

 

22. Finish The Last 10% With Perfmatters

Perfmatters is more than an asset unloading plugin to 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.

 

23. Optimize For Core Web Vitals

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 – find your LCP element in PSI which is usually an image or background image. You should optimize it as best you can, especially if it loads across your site.

• Preload the LCP image
• Compress the LCP image (try 85%)
• Serve the LCP image from your CDN
• Reduce the LCP image’s size using WebP or SVG
• Exclude LCP image (and other above the fold images) from lazy load

Cumulative Layout Shift – use Google’s Layout Shift Debugger and the “avoid large layout shifts” report in PSI to identify which elements on your website are causing elements to shift.

• 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 – caused by long tasks (over 50ms) that block the main thread. It’s often caused by heavy JavaScript but can also be from third-party code, fonts, CSS, and animations.

• 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

 

24. Remove Elementor

A few lightweight alternatives:

• Kadence Theme – nice site library with pre-built templates for different industries.
• GeneratePress – another site library with pre-built templates for different industries.
• Gutenberg blocks – use a Gutenberg template in the Astra Starter Sites plugin. The Gutenberg Blocks plugin adds extra design blocks. Or transfer same design to Gutenberg.
• Oxygen Builder – super lightweight but does require more technical skill. Compatibility issues have also been reported. Many people in Facebook Groups are moving to Oxygen and posting nice scores/reports. Use it if you’re a developer and want absolutely no bloat.
• Genesis Framework – not as popular since StudioPress got bought out by WP Engine and restructured their pricing, but my old site was built in Genesis and it definitely loaded fast.

Another alternative is to hire WP Johnny for his page builder removal services where he will replace Elementor with Gutenberg blocks. I hired him recently and he did everything for me.

No doubt Elementor is slow.

 
Not cool.

I’m finally done removing Elementor and things are looking up.

Two more threads in case you didn’t find what you’re looking for:

Why is Elementor slow?

Elementor adds extra CSS, JavaScript, fonts, and div wrappers to your site. Coupled with extra Elementor plugins and this can make your site slow and cause core web vital errors related to CSS, JavaScript, DOM elements, and other items.

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