How To Speed Up A Slow Elementor Website (28 Ways)

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 multiple PageSpeed Insight items and web vitals.

We’ll start by optimizing DOM elements, CSS, JavaScript, and fonts Elementor which adds to your site. For this, we’ll be using Elementor Experiment settings, asset unloading plugins, and other tips (like coding your header/footer in CSS). Then we’ll talk about optimizing fonts, media, third-party scripts, hosting, cache plugins, and general recommendations to speed up your site.

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.

Hosting is obviously the #1 factor as shown in the WordPress optimization guide. I use Cloudways Vultr HF (very popular in Facebook Groups) and have a TTFB of around 200ms.

Here’s my latest WordPress speed optimization video which is 28 minutes. It’s not specific to Elementor, but should help you improve scores in PageSpeed Insights as well as core web vitals.

 

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 when they’re actually 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 171KB 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

Activate these in the Theme Customizer → Performance.

This loads Google Fonts locally (reducing third-party code by preventing fetching from fonts.gstatic.com) and preloads them which instructs browsers to download fonts as soon as possible. Make sure to flush local font files, then test your font files in the GTmetrix Waterfall chart to make sure fonts are being served from your website (as opposed to fonts.gstatic.com).

 

3. Remove Elementor CSS + JavaScript

Elementor, Elementor Pro, and most Elementor plugins add extra CSS and JavaScript to your site. Many Lighthouse items are related to CSS and 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 much easier. 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.
• 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 (examples below):

• 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)
• Disable WooCommerce scripts/styles except on non-eCommerce pages (see #18)

 

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 GTmetrix 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 (much less than it used to). WP Johnny offers this as a specific speed optimization service but he’s usually busy; you can also try finding a developer on freelancer.com or upwork.com who can hard 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 third-party Elementor plugins.

Many designers rely on multiple Elementor addons to build their site only to realize they’re slowing it down. I ended up deleting Ultimate Addons, Premium Addons, and JetEngine since these plugins were only used in a few areas of my site and weren’t worth the extra load times.

Avoid Other Slow Plugins

Statistic, backup, portfolio, live chat, form, slider, JetPack, and other plugins can slow down your site. 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.

Make sure plugins don’t take a long time to load:

 

8. Disable Unnecessary Plugin Modules

Plugins with modular design let you disable certain features you’re not using.

Some third-party Elementor plugins use modular design like Ultimate Addons and Premium Addons (but they can still be slow as mentioned above). Other plugins like JetEngine do not. Modules are enabled by default. View the settings and deactivate modules you’re not using.

 

9. Use Elementor’s Hello Theme

Elementor’s Hello theme comes with almost no styling or scripts. It’s better to start with minimal bloat then add features. Gutenberg, GeneratePress, and Oxygen are lightweight too.

 

10. Remove Heavy Elements On Mobile

It’s a very common problem to have great desktop scores in Lighthouse, but bad mobile scores. 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 the mobile site. Google uses mobile first indexing – mobile speed is what you should focus most on.

 

11. Use Transform + Translate For 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. Reduce TTFB With Cloud Hosting

I’m using Cloudways Vultr High Frequency and usually have a 80ms TTFB + 1.3s fully loaded time in GTmetrix (the post tested also has 50+ images and 600 comments). Feel free to click through my site to see how fast it loads. Vultr HF and DigitalOcean are two of the most popular hosting plans in the WordPress Hosting and WP Speed Matters Facebook Groups. Cloudways is monthly pricing and includes a free migration which makes them easy to try out. Hosting is by far the #1 factor in the WordPress optimization guide and they even recommend DigitalOcean.

Be careful with other hosting recommendations:

• Matthew Woodward pushes WPX but uses Kinsta on his own site.
• Darrel Wilson pushes NameHero but his GTmetrix report is a mess.
• Hostinger writes fake reviews and was banned from Facebook Groups.
• They also push SiteGround when Backlinko says their TTFB is slow (I stopped recommending them and changed my review to outline all SiteGround’s problems).
• WP Engine, GoDaddy, Bluehost, HostGator, and EIG brands are obviously not good.

I switched from SiteGround to Cloudways in 2019. My response times were 2x faster, I was paying 1/2 the price of what I was on SiteGround, and had no CPU issues or high renewal prices.

Cloudways is usually #1 in recent Facebook polls (click thumbnails to enlarge).

People who moved to Cloudways and posted their results:

NameHero’s Turbo Cloud plan is also a solid choice. It uses NVME, LiteSpeed servers, the LiteSpeed Cache plugin, and QUIC.cloud CDN which supports HTTP/3. All 3 tools have excellent reviews and were specifically designed to work together for faster speeds. They are different from Cloudways: NameHero is more beginner-friendly with cPanel, everything is built-in to their hosting (no need to pay for WP Rocket or email hosting), and support is A+. The biggest con is you pay 1-3 years upfront, then higher renewal prices kick in. My NameHero review shows you how to setup LiteSpeed Cache + QUIC.cloud (I was able to get a 61ms TTFB). Obviously an Astra Starter Site is smaller than onlinemediamasters.com, but it was impressive nonetheless. They also do a free migration and Ryan (CEO) has some awesome YouTube videos.

 

13. 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 images in viewport) 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.

• 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

 

14. Upgrade To PHP 8.0

Check your PHP Version in Elementor → System Info.

Upgrading PHP versions is one of the easiest ways to speed up your Elementor site. Kinsta’s PHP benchmarks show how higher PHP versions can run 2-3x faster. Elementor also recommends higher PHP versions and to increase memory limit to 256MB (see next step).

You can do this in your hosting account:

 

15. Enable Redis + Memcached

Redis and memcached are supported by most cloud hosts.

Cloudways supports both which can be activated in your account. SiteGround supports memcached which you can activate in SG Optimizer (use all 3 caching levels). Many people don’t take advantage of server caching, Redis, and speed services offered by their host. You should!

 

16. Increase Memory Limit To 256MB

Check your memory limit in Elementor → System Info.

Both Elementor, WordPress, and WooCommerce recommend a 256MB memory limit.

You can usually change memory limits in your hosting account:

Otherwise, add this code to your wp-config.php file.

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

 

17. Configure A Solid Optimization Plugin

WP Rocket and LiteSpeed are the gold standards for cache plugins.

I use WP Rocket but if you’re using a LiteSpeed server, you should be using LiteSpeed.

How your cache plugin is configured greatly impacts the speed of your Elementor site. WP Rocket and LiteSpeed come with features most cache plugins don’t have, meaning more optimizations and less plugins needed on your site. I have guides for nearly every cache plugin including the WP Rocket settings, W3 Total Cache settings, Autoptimize Settings, and others.

 

18. Optimize Images

There are quite a few ways to optimize images:

• Properly size images – avoid oversized images (make them smaller).
• Compress images – use an image optimization plugin like ShortPixel.
• WebP – next-gen images recommended in Lighthouse. Done by WebP plugins.
• Lazy load images, iframes, videos – done using various speed plugins. Exclude images above the fold from lazy load and don’t use it if you have fast scrolling users (eCommerce).
• Strip EXIF data from images – strips useless data from images like date, time, location, and camera settings when a photo was taken. Done by most image optimization plugins.
• Specify image dimensions – make sure a width and height is specified in each image’s HTML. WP Rocket has an option to add missing image dimensions in the Media settings.
• 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.
• Disable hotlinking – same thing as Cloudflare’s hotlink protection (some cache plugins like WP Rocket also have this). Prevents other websites from embedding your images.
• Use adaptive images – serve smaller (adaptive) images to mobile users. One of the few things you can do to improve mobile load times. Done through an adaptive images plugin.

 

19. Optimize Third-Party Code

Just like Google Fonts are a third-party request, so is AdSense, Analytics, Maps, Tag Manager, embedded videos, and even Gravatars or social sharing plugins which generate extra requests.

Optimizing Third-Party Requests

• Lazy load videos and replace iframe to eliminate requests to YouTube.
• Delay loading comments (e.g. wpdiscuz) and Gravatars to speed up comments.
• Host Gravatars locally using WP User Avatar to avoid requests from gravatar.com.
• Try Grow by Mediavine for social sharing buttons to prevent social media requests.
• Delay third-party code using WP Rocket’s delay JavaScript execution or Flying Scripts.

 

20. Add Preload, Prefetch, Preconnect

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

• Preload – often used for links and fonts. Preloading links downloads a page when users hover over a link. Preloading fonts helps browsers discover fonts in CSS files (copy your font URLs from the GTmetrix Waterfall tab then paste them into the font preloading option). Both can be done in WP Rocket, Perfmatters, and Pre* Party Resource Hints.
• Prefetch – helps browsers anticipate requests from third-party sites. View third-party code loading on your site (in Lighthouse). Next, grab their URLs or see this of common domains to prefetch. Lastly, prefetch them using one of the 3 plugins mentioned above.
• Preconnect – establishes early connections to important third-party origins (item found in Lighthouse). Common with CDNs and fonts.gstatic.com but can’t be done in WP Rocket (use one of the other plugins). It should be used sparingly and tested once implemented.

 

21. Clean Your Database

Many speed plugins clean your database, but they don’t let you delete tables left behind by old, uninstalled plugins. That’s why I like WP Optimize.

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

A few notes about CDNs:

• If visitors are close to your origin server, you don’t need a CDN.
• Cloudflare’s DNS is faster than a cheap DNS from GoDaddy or Namecheap.
• Minifying with Cloudflare can often be better (more aggressive) than cache plugins.
• Cloudflare’s Rocket Loader can be hit or miss and can break your site (test carefully).
• If using Cloudflare, setup a cache everything page rule. For dynamic sites, use the WP Cloudflare Super Page Cache plugin to use Cloudflare’s cache without breaking your site.
• Browser cache TTL should be about how often you publish a new post (e.g. 10 days).
• Setting up Cloudflare requires changing nameservers, other CDNs will use a CDN URL.
• Cloudflare’s automatic platform optimization is worth $5/month and can improve TTFB.

Recently, I stopped using Cloudflare and WP Rocket’s RocketCDN. I switched to BunnyCDN which was highly recommended in Facebook threads. Both Cloudflare and RocketCDN can actually have a negative impact on load times and TTFB. If you’re not getting great results with those, I recommend BunnyCDN. It’s affordable and easy to setup using their setup instructions.

Instructions – choose a CDN, sign up, create a pull zone, grab your CDN URL, then add it to your site (usually in your cache plugin). Make sure images are being served from the CDN URL.

 

23. Disable WooCommerce Scripts, Styles, Cart Fragments

Just like you selectively disabled CSS and JavaScript in the first step, you can also use Perfmatters or Asset CleanUp to do the same thing with WooCommerce scripts and styles. Otherwise, these will load throughout your entire website (even on non-eCommerce pages).

Perfmatters lets you do this with 1-click:

 

24. Explore Plugins By Gijo Varghese

Love this guy and his plugins; he even has his own WP Speed Matters Facebook Group.

Flying Scripts is my favorite because it lets me show Gravatars without affecting GTmetrix. He also has plugins for hosting analytics locally, image optimization, Flying Pages (preloads pages), and other useful plugins. Check out my 25+ WordPress speed optimization plugins for a full list.

 

25. Eliminate Render-Blocking Resources

If you have render-blocking errors in PageSpeed Insights, Autoptimize can fix this by inlining critical CSS and adding defer/async attributes.

Simply install the plugin and enable the settings below. For better control of choosing which files should have defer/async attributes, try the Async JavaScript plugin (the same developer).

 

26. Serve Static Assets With An Efficient Cache Policy

To serve static assets with an efficient policy, Google wants your cache expiration to be 6 months (or 180 days). WP Rocket, CDNs, and many hosting accounts usually let you adjust this.

• Cloudflare –  go to Caching → Browser Cache TTL, then set it for “6 months.”
• Hosting Accounts – Cloudways (for example) has a static cache expiry option.
• WP Rocket – edit your .htaccess file (WP Rocket adds this code there) and change the expiration. If you’re not sure how to edit .htaccess, use the Htaccess File Editor plugin.

 

27. Finish The Last 10% With Perfmatters

Perfmatters (by Kinsta) takes care of what I like to call “miscellaneous speed optimizations.”

Some of these are extremely useful; the script manager which lets you selectively disable plugins/scripts from certain pages, changing the autosave interval, limiting post revisions, preconnect, and disabling WooCommerce scripts, styles, and cart fragments. When it comes to these types of optimizations, I don’t know of any plugin that does a better job than Perfmatters.

What do you expect, it’s Kinsta.

 

28. Remove Elementor

If speed/SEO are important, consider removing Elementor.

Elementor is great for quickly deploying sites for clients. But if it’s your own site and you truly want to improve it, consider a lightweight alternative. Web vitals are becoming a large ranking factor and it’s unlikely you will pass the Web Vitals Test in PageSpeed Insights with Elementor.

Alternatives

• Gutenberg blocks – redesign your site with Astra (using a Gutenberg template from the Starter Sites plugin). The Gutenberg Blocks plugin adds blocks to give you additional design options (plenty of YouTube tutorials). Or transfer your same design to Gutenberg.
• GeneratePress – rated #1 fastest theme in some Facebook polls with plenty of designs to choose from in their Site Library. A good balance between fast and user-friendly themes.
• Oxygen Builder – super lightweight but requires more technical skills. 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.
• Kadence Theme – haven’t tried it yet but know it’s a popular alternative in Facebook Groups and used by Adam from WPCrafter. They also have a Gutenberg Blocks plugin.
• 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.

Page builder migrations and polls on fastest themes (click thumbnails to enlarge):

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 already hard-coded my header, menu, and footer instead of using Elementor. Soon, my site will be built entirely with Gutenberg. If you haven’t heard of WP Johnny, he’s a bigger WordPress speed wizard than me.

No doubt Elementor is slow.

Not cool.

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

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

 

Frequently Asked Questions

Is Elementor slow?

Elementor adds extra CSS, JavaScript, and div wrappers to your site. Coupled with additional Elementor plugins and this can make your site slow. It can also cause multiple web vital errors related to CSS, JavaScript, network payloads, and DOM elements.

What are common reasons for a slow Elementor site?

Too many bloated plugins, unnecessary modules, cheap shared hosting, and lack of optimizing fonts, images, and third-party scripts can all 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