This is a comprehensive list of Elementor speed optimizations.
Before starting this tutorial, I highly recommend testing your site in the Chrome Dev Tools Network report + KeyCDN’s Performance Test. These tell you whether your Elementor site is slow from CSS/JavaScript, images, fonts, or TTFB (which is also 40% of LCP in core web vitals).
Experiments are covered in steps 1-4, fonts are covered in steps 3-6, CSS/JavaScript in 7-14, images in 15-17, and TTFB/memory usage are mainly related to hosting/CDN in steps 18-20.
It’s true, Elementor adds more CSS/JavaScript than Gutenberg. But this usually only becomes an issue when you install extra Elementor plugins and don’t properly optimize your site. Then you check your coverage report and see this. A slow host/CDN/cache plugin won’t help either.
Since this is a blog about WordPress speed, I replaced Elementor with GeneratePress which is more lightweight. However, I’m not here to convince you to do that. You can still get excellent PageSpeed scores with Elementor, it just requires extra steps and knowing what to look out for.
Hope this helps (lmk if you have questions).
- Activate Elementor Experiments
- Change CSS print method to “external file”
- Disable default fonts/icons
- Host fonts locally using woff2
- Preload fonts
- Leave Google Fonts load as “swap” (if using Google Fonts)
- Disable Gutenberg’s wp-block-library
- Remove unused CSS with Elementor exclusions
- Use transform + translate in animations
- Code your header/footer in CSS
- Delay JavaScript with Elementor exclusions
- Test plugins for CSS, JS, high memory usage
- Disable plugins where they’re not used
- Use less Elementor widgets/columns
- Upload images in WebP
- Use Optimole (or an image CDN) to optimize images
- Preload viewport images and exclude them from lazy load
- Use LiteSpeed with NVMe SSDs for shared hosting
- Try Rocket.net’s <100ms TTFB cloud/WooCommerce hosting
- Use full page caching
- Configure hosting settings
- Rethink your optimization plugin
- Lazy render Elementor sections
- Remove bloat, database bloat, unused modules
Affiliate Disclaimer – I use aff links in this guide, specifically to Rocket.net, FlyingPress, and Perfmatters which between the 3, can greatly improve web vitals compared Kinsta, SiteGround, Hostinger, WP Rocket, and NitroPack – all of which I don’t use/recommend.
1. Activate Elementor Experiments
Head to Elementor → Settings → Experiments, then activate the following:
Inline Font Icons – font icons (i.e. Font Awesome + eicons) will load inline as SVGs without loading the entire library. This means less CSS requests and render-blocking CSS issues in PSI.
Lazy Load Background Images – you originally had to use an optimization plugin that came with a “lazy-bg” helper class (or similar) and add it to your background images. This is easier.
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 – only loads lightbox and screenful libraries, the dialog library, and share links library when they’re being used on a page, resulting in less JavaScript on your site.
Improved CSS Loading – only loads widget CSS and animations where they’re being used (while loading them inline), resulting in less CSS and render-blocking resources on your site.
Usage Data Sharing – sharing data with plugin developers requires a small amount of server resources which are used to send the data. Therefore, I recommend disabling this in all plugins.
2. Change CSS Print Method To “External File”
While there are pros & cons for each, external CSS files can be cached and they don’t increase the size of HTML. You can test the results for your site, but I generally recommend external file.
3. Disable Default Fonts/Icons
In the next couple steps, we’re going to only load fonts you need (locally using woff2) while preloading them. And the first step is to disable both Google Fonts and Font Awesome icons.
When changing font/CSS settings, you should regenerate CSS & data in Elementor’s Tools settings, then test results in a Waterfall chart like GTmetrix or Chrome Dev Tools. You can immediately tell if fonts are hosted locally, using the faster woff2 format, and the brown bar in GTmetrix indicates blocking time which can be reduced via preloading.
4. Host Fonts Locally Using woff2
If fonts.gstatic.com or other third-party fonts load on your site, host them locally instead.
Step 1: Go to the Google Fonts website (or another font site) and download your fonts. Make sure you only select the weights you need since too many weights will increase the file size.
Step 2: Convert them to woff2 using CloudConvert (woff2 files are smaller than .ttf).
Step 3: Upload the fonts as custom fonts (Tony Teaches Tech has a video tutorial). If you’re not using Elementor Pro, OMGF downloads them automatically when you click “save & optimize” in the settings. It can also load fonts early (preloading them) or you can choose not to load them at all [screenshot]. Web Squadron has another video tutorial if you need more clarification on this.
5. Preload Fonts
The final step is to preload fonts loading above the fold.
Copy their files names, then preload them which you can do in most optimization plugins. You should also preload eicons and Font Awesome Icons if you use them. Once fonts are preloaded, you should see blocking time decrease (which is shown as the brown bar in the Waterfall chart).
Check your Console report for errors since preloading unused fonts decreases performance.
6. Leave Google Fonts Load As “Swap” (If Using Google Fonts)
Setting Google Fonts Load to “swap” fixes ensure text remains visible during webfont load. However, Font Awesome recommends font-display: block since it makes them non render-blocking. You can also change font-display property in Elementor Pro’s custom fonts. Zach Leatherman has a detailed analysis if you want to dive into definitions and pros/cons of each.
To add font-display: swap manually, find your font’s CSS file or search for the font using String Locator if you’re not sure where it’s located. Then simply add font-display: swap to the font face.
@font-face {
font-family: "Lato Regular";
font-weight: 300;
font-style: normal;
src: url("fonts/Lato-Regular-BasicLatin.woff2") format("woff2");
font-display: swap;
}
7. Disable Gutenberg’s wp-block-library
Since you’re using Elementor, you can disable Gutenberg which adds an extra CSS file to your site (/wp-includes/css/dist/block-library/style.min.css). You can find this in your source code:
You can use the Disable Gutenberg plugin or the script manager in Perfmatters. If you’re only using Gutenberg in certain sections of your site, both options let you control where it’s loaded.
8. Remove Unused CSS With Elementor Exclusions
The fastest way to remove unused CSS is with FlyingPress, Perfmatters, or LiteSpeed Cache.
WP Rocket’s is slower because it loads used CSS inline instead of a separate file. This is bad because it increases HTML size and can’t be cached. While nearly every single optimization plugin and “speed expert” agrees separate file is better (including Vikas Sharma who is very active in Facebook Groups), WP Rocket seems more interested in scores over browsing speed.
Regardless of which plugin you use, you’ll need to add Elementor exclusions.
Exclude Flexbox container stylesheets:
/wp-content/plugins/elementor/assets/css/frontend-lite.min.css
/wp-content/plugins/elementor-pro/assets/css/frontend-lite.min.css
Exclude sticky menu selectors:
#elementor-device-mode
.elementor-sticky--active
This is what it looks like in Perfmatters. For used CSS method, file is worse for scores, but faster for visitors. For stylesheet behavior, remove is fastest but you’ll need to exclude files/selectors if they break your site. And if “remove” is causing too many issues, “delay” is the next best setting.
Some plugins like WP Rocket have documentation on how remove unused CSS works with specific settings, but there are no Elementor-specific exclusions. If something on your site is breaking, right click it and inspect it in Chrome Dev Tools. Find the file (or CSS selector) and exclude it. You can also do this when delaying JavaScript in step #11.
9. Use Transform + Translate In Animations
Not that I endorse animations, but use transform + translate to prevent layout shifts (CLS).
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.
10. Code Your Header/Footer In CSS
Since your header/footer load across your entire site, they should be lightweight, especially your header because it loads at the top. CSS is much more lightweight than Elementor’s code. After doing this, “Elementor” appeared about 150 times in my source code (compared to 2,008).
I hired WP Johnny to do this, but he’s a busy guy. My developer (Pronaya) can also do this who you can hire through his freelancer profile. I’ve worked with him for 10 years so yes, he’s legit. He lives in Bangladesh so there’s a time change, but his communication has always been 100%.
This is also part of Vikas’ recommendations:
11. Delay JavaScript With Elementor Exclusions
When using WP Rocket or the “delay all JavaScript” setting in plugins like Perfmatters and FlyingPress, you’ll usually need to exclude Elementor files or it could break your site. You can also use Flying Scripts to add JavaScript files manually, but “delay all” is usually more powerful.
Perfmatters has an exclusion list and so does WP Rocket. Check the plugin’s documentation since “delay all” doesn’t play nicely with Elementor unless you exclude files. Perfmatters also says it “might vary slightly based on the elements and templates you’re using in Elementor. If you’re not using a lot of animations, you might not need any exclusions for Elementor at all.”
Elementor:
jquery.min.js
jquery.smartmenus.min.js
webpack.runtime.min.js
webpack-pro.runtime.min.js
frontend.min.js
frontend-modules.min.js
elements-handlers.min.js
elementorFrontendConfig
ElementorProFrontendConfig
imagesloaded.min.js
Elementor search:
webpack-pro.runtime.min.js
webpack.runtime.min.js
elements-handlers.min.js
jquery.smartmenus.min.js
Elementor Pro
a/jquery-?[0-9.](.*)(.min|.slim|.slim.min)?.js
/jquery-migrate(.min)?.js
/elementor/
/elementor-pro/
/wp-includes/js/imagesloaded.min.js
ElementorProFrontendConfig
elementorFrontendConfiga
This is what it looks like in Perfmatters:
If you want to add JS files manually, open your “third-party code” and “remove unused JavaScript” reports in PageSpeed Insights and start there. I also have a list of JS files to delay.
You can use both defer/delay JavaScript at the same time, but just like you need to exclude files in other steps, you may need to do the same when deferring JavaScript while also excluding jQuery. Check your Console report in Chrome Dev Tools for errors.
12. Test Plugins For CSS, JS, High Memory Usage
This is the “trap” I was talking about.
Install the wrong plugin and it can add a ridiculous amount of CSS/JavaScript which you can check in the Chrome Dev Tools coverage report (or Perfmatters script manager). While most of these files are related to DethemeKit, even Elementor Pro adds quite a bit of CSS/JavaScript.
Plugins running ongoing background tasks aren’t good since they increase memory usage. This is common with security, image optimization, analytics, backup, and some SEO plugins. Even Elementor increases memory usage (that’s why I don’t suggest using it on shared hosting).
WP Hive is great for telling you whether a plugin increases memory usage. Just install the Chrome Extension, browse the WordPress plugin repo, and it will tell you on the right side. However, take “minimal impact on PageSpeed” with a grain of salt since it seems to only test plugins out of the box. But once you start adding content with Elementor, it does impact scores.
Pretty much every Elementor plugin also uses jQuery. You can see this by enabling display dependencies in Perfmatters, view the script manager, and scroll down to Misc → jQuery:
There’s also Query Monitor and my 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 | ✓ |
13. Disable Plugins Where They’re Not Used
Elementor plugins are notorious for loading across the entire site.
If you only need them on specific pages/posts, you can reduce CSS/JavaScript by unloading them in Perfmatters or Asset CleanUp. I use Perfmatters since it has a lot more optimizations.
Once you’ve enabled the script manager (Settings → Perfmatters → Extras → Script Manager), go to the script manager settings and enable testing mode. This lets you test the script manager without it breaking your site, but remember to disable it when you’re ready to publish changes.
View the script manager and unload plugins where they’re not used (everywhere but pages, posts, current URL, Regex, etc). This obviously depends on which plugins you use and where.
14. 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.
Elementor also has a video on this:
15. Upload Images In WebP
The reason you want to upload WebP images manually is to avoid using plugins (which taxes the server) and because image CDNs like Cloudflare Polish don’t always serve WebP images. Even when Cloudflare must have thought the savings weren’t high enough and didn’t convert them, I found converting them manually generally resulted in a file size reduction of over 50%.
You can check if images are being served in WebP using Chrome Dev Tools:
16. Use Optimole (Or An Image CDN) To Optimize Images
Optimole does a better job than other plugins, and Cloudflare Mirage/Polish are even better.
While most plugins compress images and convert them to WebP, not all of them support AVIF, mobile image resizing, or viewport/network-based optimizations (such as downgrading image quality on slow connections). So if you must use an image optimization, I recommend Optimole.
Image CDNs are preferred because they don’t use server resources or take up storage. Instead, images are optimized on the fly (by your CDN, not your server) without needing to take backups.
Imagify | ShortPixel | Optimole | SiteGround CDN | Bunny Optimizer | Cloudflare Mirage/Polish | |
---|---|---|---|---|---|---|
Compression | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
WebP | ✓ | ✓ | ✓ | Via plugin | ✓ | ✓ |
Mobile resizing | x | SP Adaptive Images | ✓ | x | ✓ | ✓ |
AVIF support | x | ✓ | ✓ | x | x | ✓ |
Serve images from CDN | x | SP Adaptive Images | Cloudfront | ✓ | ✓ | ✓ |
CDN locations | – | – | 450 | 176 | 114 | 285 |
No server use | x | x | x | x | ✓ | ✓ |
No bloat | x | x | Offloading | x | ✓ | ✓ |
Plugin rating | 4.4/5 | 4.5/5 | 4.8/5 | – | – | – |
Price | Free 20MB/mo or $9.99/mo | Free 100 credits/mo or $3.99/mo | Free 5,000 visits/mo or $19.08/mo | $14.99/mo | $9.5/mo or $.03/GB w/ FlyingCDN | Varies on Cloudflare Enterprise |
To address these, I crop/resize images and upload them in WebP. Besides optimizing above the fold images in the step 17, everything is done by my cache plugin/CDN. Just make sure you add image dimensions in Elementor’s Layout tab or you may get the ‘explicit width/height’ warning.
I have a full tutorial on optimizing images if you still need help:
17. Preload Viewport Images And Exclude Them From Lazy Load
Above the fold images should be excluded from lazy load or it adds resource load delay and hurts LCP. They should also be preloaded to make them high priority which also improves LCP.
The easiest way is preloading critical images in Perfmatters or FlyingPress. Just set the number of images that usually load above the fold (usually 2-3) and both are done automatically. Other plugins make you exclude images by URL or class, then manually preload images which can be time consuming. There are plugins to help, but it’s still more work than Perfmatters/FlyingPress.
LiteSpeed Cache and WP Rocket make it relatively easy to exclude images from lazy load, but won’t preload them. You could also use a plugin to add classes to Elementor to make this easier.
18. Use LiteSpeed With NVMe SSDs For Shared Hosting
Mainstream hosts like SiteGround, Hostinger, WPX, and SlowDaddy don’t live up to the hype. They use slow SATA SSDs, no Redis, and skimp on CPU/RAM/inodes (causing CPU issues and forced upgrades). It gets more expensive with renewals, add-ons, price increases, and wasted time dealing with incidents like SiteGround’s DNS causing 2M sites to get deindexed in Google. The only reason you see “glowing reviews” is because SiteGround threatens people who write bad reviews, controls Facebook groups, and untruthful affiliates. Hostinger writes fake reviews and scams people, so don’t believe “unlimited” storage/websites/bandwidth on their website. WPX isn’t ideal for dynamic/international sites (they literally say they target a TTFB of <400ms). Slow technology + limited resources + prices + incidents + poor support… these aren’t worth it:
SiteGround GrowBig | Hostinger Business WP | GoDaddy Managed WP Deluxe | Bluehost Choice Plus | WPX Business Plan | |
---|---|---|---|---|---|
Type | Shared | Shared | Shared | Shared | Shared |
Server | Apache + Nginx | Apache + Nginx | Apache + Nginx | Apache + Nginx | LiteSpeed |
Cores/RAM | Not listed | 2 cores/1.5GB | 2 cores/1GB | Not listed | 1 core/1GB |
Storage | 20GB SATA | “200GB” SATA | 60GB SATA | 40GB SATA | 15GB SATA |
Database | MySQL | MariaDB | MySQL | MySQL | MariaDB |
Object cache | Memcached | Memcached | Memcached | x | x |
Data centers | 10 | 8 | 9 | 6 | 3 |
Cache plugin | SG Optimizer (view chart) | LiteSpeed Cache | x | x | W3TC or LSC |
CDN | SiteGround CDN ($14.99/mo) | QUIC.cloud ($.02-.08/GB w/ monthly credits) | GoDaddy CDN | Cloudflare | XDN |
CDN locations | 176 | 81 | Not listed | 285 | 36 |
Full page caching | ✓ | ✓ | x | x | x |
Control panel | Site Tools | hPanel | cPanel | cPanel | WPX Panel |
Email storage | 10GB | 1GB | 10GB | Adjustable | Not listed but frequent issues |
Inodes | 400,000 | 600,000 | 250,000 | 200,000 | Not listed |
Incidents | TTFB, DNS, CPU issues, controls Facebook groups | Downtimes, scams, fake reviews, bad poll | Malware, breaches. I/O | Downtimes, Sitelock scams | Global outage (no redundancy system) |
Migrations | $30/site | Unlimited (but with mistakes) | Paid | “Qualified” accounts only | 5 free |
Support | C | F | D | D | B |
TrustPilot rating | 4.6/5 | 4.6/5 (fake) | 4.7/5 | 3.8/5 | 4.9/5 |
Monthly price | $3.99 (1 year) | $3.99 (1-4 years) | $10.49 (2 years) | $5.45 (1 year) | $20.83 (1 year) |
Renewals | $24.99/mo | $8.99-$14.99 | $14.99/mo | $19.99/mo | $20.83 |
Look into a host who uses LiteSpeed with NVMe storage which are faster and use CPU efficiently. FastComet is budget-friendly, NameHero is good for US sites, ChemiCloud is similar to NameHero but has more NVMe-powered data centers and scalability, or Scala for US sites on a shared/cloud hybrid plan with guaranteed resources. You’ll install free LiteSpeed Cache plugin which does a great job with core web vitals, then configure the settings. This includes connecting Redis (or Memcached) and QUIC.cloud’s CDN, ideally the standard plan which has 81 PoPs + HTML caching to improve TTFB. When all is said and done, it’s usually faster, more CPU efficient, and cheaper with higher quality hosts.
FastComet FastCloud Extra | NameHero Turbo WordPress | ChemiCloud WordPress Turbo | Scala Entry WP Cloud | |
---|---|---|---|---|
Type | Shared | Shared | Shared | Hybrid |
Cores/RAM | 6 cores/6GB | 3 cores/3GB | 3 cores/3GB (scalable to 6/6) | No limits |
Storage type | 35GB SATA | Unlimited NVMe (US data center) | 40GB NVMe (9/11 data centers) | 50GB NVMe (US data center) |
Database | MySQL | MariaDB | MariaDB | MariaDB |
Object cache | Memcached | Redis | Memcached | Redis |
Data centers | 11 | 2 (US + EU) | 11 | 3 (US + EU) |
Server | LiteSpeed | LiteSpeed | LiteSpeed | LiteSpeed |
Cache plugin | LiteSpeed Cache | LiteSpeed Cache | LiteSpeed Cache | LiteSpeed Cache |
CDN | QUIC.cloud ($.02-.08/GB w/ monthly credits) | QUIC.cloud ($.02-.08/GB w/ monthly credits) | QUIC.cloud ($.02-.08/GB w/ monthly credits) | QUIC.cloud ($.02-.08/GB w/ monthly credits) |
Full page caching | ✓ | ✓ | ✓ | ✓ |
Control panel | cPanel | cPanel | cPanel | sPanel |
Email storage | 2.048GB | Adjustable | Adjustable | Adjustable |
Inodes | 500,000 | 500,000 | 500,000 | Unlimited |
Incidents | 2022 DDoS attack on 3 data centers | 2011 2-day node outage | None | None |
Migrations | 3 free | 1 free | 200 cPanel + 10 non-cPanel | Unlimited free |
Support | B | B | B | A |
TrustPilot rating | 4.9/5 | 4.6/5 | 4.9/5 | 4.9/5 |
Monthly price | $5.49 (1-3 years) | $9.98 (3 years) | $5.99 (3 years) | $14.95 (3 years) |
Renewals | $21.95/mo | $19.95/mo | $19.95/mo | $24.95/mo |
19. Try Rocket.net’s <100ms TTFB Cloud/WooCommerce Hosting
I use Rocket.net with their free Cloudflare Enterprise integration which is the fastest cloud hosting/CDN combination I’ve seen in 12 years and you can try them for $1 your 1st month.
I can tell you first-hand it’s a major upgrade after using a $180/month SiteGround Cloud plan, Cloudways Vultr HF, then discovering a lesser-known Rocket.net who got me a <100ms global TTFB in KeyCDN and faster TTFB/LCP in tools like GTmetrix. The other cloud hosts have similar limits as shared hosting between CPU/RAM/inodes and PHP workers. Your “true cost” kicks in, yet you’re falling for the exact same resource limit trap with mediocre performance/technology.
Why they’re faster in a nutshell:
The <100ms TTFB is due to faster tech, Cloudflare Enterprise, and you get more resources. All plans have access to 32 cores/128GB RAM, Mirage/Polish for image optimization, and features specifically good for TTFB and WooCommerce like APO, Argo, NVMe, Redis (Redis Pro on their Business plan), and no PHP worker limits or paid add-ons. Instead of limiting server resources and hitting you with upgrades/add-ons, it’s essentially priced by bandwidth usage. And while Rocket.net doesn’t do aggressive marketing like other hosts, they have awesome feedback in Facebook groups, all 5/5 star TrustPilot reviews, this AMA, watch this interview, or talk to Ben.
SiteGround Cloud/Kinsta still use slower SATA SSDs, include just 8GB RAM, and neither use Redis Pro whose Relay integration is great for optimizing WooCommerce. Both can easily cost $200/mo+ between upgrades from CPU / PHP workers and paid add-ons like CDNs/Redis. They use an inferior DNS to Cloudflare (check dnsperf.com), and Kinsta’s memory limit is just 256MB.
Cloudways Vultr HF uses NVMe SSDs + Redis Pro + Cloudflare Enterprise. However, you get minimal cores + RAM which gets expensive if you run into CPU issues and need to scale. Their Cloudflare Enterprise doesn’t support APO, serves annoying challenge pages, and costs $5/mo per domain. Cloudways uses PHP-FPM (Rocket.net uses LiteSpeed’s PHP) and Cloudways can be overwhelming when configuring server, application, and CDN settings with “meh” support. I’ve also seen more complaints recently about high CPU usage and prices increases after they were acquired by DigitalOcean. If Cloudways was actually faster, I would have stuck with them.
SiteGround Cloud Jump Start Plan | Kinsta Starter Plan | Cloudways Vultr HF (2GB) | Rocket.net Starter Plan | |
---|---|---|---|---|
Type | Cloud | Cloud (shared containers) | Cloud | Private cloud |
Server | Apache + Nginx | Apache + Nginx | Apache + Nginx | Apache + Nginx |
Nginx reverse proxy | ✓ | $50/mo | ✓ | ✓ |
Cores/RAM | 4 cores/8GB | 12 cores/8GB | 1 core/2GB | 32 cores/128GB |
Storage | 40GB SATA | 10GB SATA | 64GB NVMe | 10GB NVMe |
Object cache | Memcached | $100/mo Redis | Redis Pro | Redis (Redis Pro on Business plan) |
PHP processor | FastCGI | FastCGI | FPM | LiteSpeed |
PHP workers | CPU limits + suspensions | 2 | No limit | No limit |
Memory limit | Adjustable | 256MB | Adjustable | 1GB |
Database | MySQL | MySQL | MariaDB | MariaDB |
Bandwidth/visits | 5TB/mo | 25k/mo | 2TB/mo | 50GB + 250k/mo |
CDN | $14.99/mo SiteGround CDN | Cloudflare APO + firewall rules (read) | $5/mo Cloudflare Enterprise | Free Cloudflare Enterprise |
CDN locations | 176 | 285 | 285 | 285 |
Full page caching | ✓ | ✓ | x | ✓ |
Smart routing | Anycast | x | Argo | Argo |
Images | Limited | x | Mirage/Polish | Mirage/Polish |
DNS | Blocked by Google (4 days) | Route 53 | DNS Made Easy ($5/mo) | Cloudflare |
Cache plugin | SG Optimizer | Use FlyingPress | Breeze | Use FlyingPress |
Data centers | 10 | 35 | 44 | Served from Cloudflare’s edge |
Control panel | Site Tools | MyKinsta | Custom (hard) | Mission Control |
Email hosting | ✓ | x | x | x |
Support | C | B | C | A |
Migrations | $30/site | Unlimited free | 1 free + $25/site | Unlimited free |
TrustPilot rating | 4.6/5 | 4.2/5 | 4.5/5 | 4.9/5 |
How it starts costing more | High initial price, CPU limits, CDN, internal mistakes | PHP workers, Redis, bandwidth, # of sites, monthly visits | Recent price increase, CPU usage, CDN | Bandwidth, # of sites |
Monthly price | $100 + CDN | $29 when paying yearly + add-ons | $30 + CDN | $25 when paying yearly |
11 things to know about hosting/TTFB:
- Hosting is still the #1 speed factor.
- TTFB (server response time) is 40% of LCP.
- WooCommerce sites greatly benefit from APO + Argo.
- SpeedVitals tests TTFB in 40 locations – test your site!
- Test your site 3 times to get accurate numbers in SpeedVitals.
- Doing this ensures your caching and CDN are working properly.
- Check your average TTFB worldwide in your 3rd SpeedVitals test.
- Google flags your TTFB if it’s over 600ms, but under 200ms is better.
- PSI and GTmetrix only test TTFB in 1 location (use SpeedVitals or KeyCDN).
- WP Hosting Benchmark also tests hosting performance (here are my results).
- 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).
People are moving from SiteGround/Kinsta/WPE to Rocket.net, but I haven’t found 1 single person who moved the other way around, not even in SiteGround’s 11,000+ TrustPilot reviews. And even with their chokehold on Facebook groups, Rocket.net is popping up more and more.
Getting started is easy: sign up, request your free migration, ask support to install Redis, and remove any CDN/image optimization plugins from your site. Retest TTFB and core web vitals, then you’re pretty much done. Rocket.net’s support is awesome and their hosting is hands-off.
20. Use Full Page Caching
Whether you take my hosting/CDN recommendations, you should be using full page caching.
I recommend Cloudflare APO (or better, Cloudflare Enterprise) or QUIC. SiteGround’s CDN supports full page caching but I have no clue why you would use it instead of APO which has more PoPs and is $5/mo, other than SiteGround wants you to pay them instead of Cloudflare.
RocketCDN | SiteGround CDN | FlyingCDN By FlyingPress | FlyingProxy Cloudflare Enterprise | Cloudways Cloudflare Enterprise | Rocket.net Cloudflare Enterprise | |
---|---|---|---|---|---|---|
CDN | StackPath | Google Cloud | BunnyCDN | Cloudflare | Cloudflare | Cloudflare |
Tbps | 100 | Not listed | 80 | 192 | 192 | 192 |
Locations | 73 | 176 | 114 | 285 | 285 | 285 |
Full page cache | x | ✓ | x | APO | x | APO |
Brotli | x | ✓ | ✓ | ✓ | ✓ | ✓ |
Smart routing | x | Anycast | SmartEdge | x | Argo | Argo |
Priority routing | x | x | x | ✓ | ✓ | ✓ |
Load balancing | x | ✓ | ✓ | ✓ | ✓ | ✓ |
Image optimization | x | Very limited | Bunny Optimizer | Mirage/Polish | Mirage/Polish | Mirage/Polish |
Compression | x | ✓ | ✓ | ✓ | ✓ | ✓ |
WebP | x | x | ✓ | ✓ | ✓ | ✓ |
Mobile resizing | x | x | ✓ | ✓ | ✓ | ✓ |
Firewall | x | x | ✓ | ✓ | ✓ | ✓ |
Anti-DDoS | x | x | ✓ | ✓ | ✓ | ✓ |
Bandwidth | Not unlimited as advertised | Unmetered | Unlimited | 100GB | 100GB | Determined by hosting plan |
Price | $8.99/mo | $14.99/mo | $.03/GB | $10/mo | $5/mo | Free w/ hosting |
21. Configure Hosting Settings
Some of these are found under Elementor → System Info, but you’ll want to open up your hosting dashboard and configure the following (obviously some of them depend on your host):
- PHP Version – higher versions are faster, but make sure plugins are compatible.
- Memory limit – Elementor recommends 768 MB for best performance. Some hosts like Cloudways use PHP-FPM and let you change PHP-FPM memory limits.
- Redis/Memcached – Redis has advantages, and Redis Object Cache Pro is even better. Once enabled in your hosting account, you may need to connect it using your cache plugin (LSC/W3TC) or a Redis plugin. See your host’s documentation.
- OPcache – improves PHP performance and can also reduce CPU usage, so use it.
- Caching layers – if they have something like Varnish or Nginx caching, use it.
- Brotli – not many hosts support Brotli (most use Gzip), but it’s a bonus if they do.
- Cron Jobs – replace wp-cron with a real cron job (most hosts have documentation on this). Aim for 5 or 10 minute intervals since something like “60 minutes” means all scheduled tasks in the past hour will run at the same and can cause CPU spikes.
- Hotlink protection – stops people from copying your images onto their website when they’re still hosted on your server (can be enabled in your host/Cloudflare).
- TLS – if your host has TLS settings, use TLS 1.3 and set minimum version to 1.2.
- Resource usage – just a reminder to keep an eye on resource usage & errors logs.
22. Rethink Your Optimization Plugin
Use LiteSpeed Cache if you’re on a LiteSpeed server, FlyingPress in all other cases.
WP Rocket only released 1 new feature after 2020 if you check their changelog, lacks many important features, and RocketCDN/Imagify also lack features. They’ve basically gone “stale.” I used WP Rocket before FlyingPress and immediately noticed my site was faster after switching.
SiteGround Optimizer is fine for caching, but it’s one of the worst plugins for core web vitals. I usually recommend disabling all settings (except dynamic caching + Memcached, then use FlyingPress or Perfmatters for everything else. Plus, it’s loaded with compatibility issues their support (Hristo) likes to blame on third-party themes/plugins if you check the support forums.
SG Optimizer | WP Rocket | FlyingPress | LiteSpeed Cache | |
---|---|---|---|---|
Server-side caching | ✓ | x | x | ✓ |
Object cache integration | ✓ | x | x | ✓ |
Delay JavaScript | x | ✓ | ✓ | ✓ |
Remove unused CSS | x | Inline | Separate file | Separate file |
Critical CSS | x | ✓ | ✓ | ✓ |
Preload critical images | x | x | ✓ | x |
Exclude above the fold images | By class/type | By URL/class | Automatic | Automatic |
Lazy load background images | x | Inline HTML | lazy-bg class | x |
Add missing image dimensions | x | ✓ | ✓ | ✓ |
Lazy load iframes | x | ✓ | ✓ | ✓ |
YouTube iframe preview image | x | ✓ | ✓ | ✓ |
Self-host YouTube placeholder | x | x | ✓ | x |
Host fonts locally | x | x | ✓ | ✓ |
Font-display: swap | x | ✓ | ✓ | ✓ |
Preload links | x | ✓ | ✓ | ✓ |
Bloat removal (beyond Heartbeat) | x | x | ✓ (read details) | x |
Lazy render HTML elements | x | x | ✓ | ✓ |
Guest Mode | x | x | x | ✓ |
Advanced cache control | x | x | x | ✓ |
Gravatar cache | x | x | x | ✓ |
Limit post revisions | Delete all | Delete all | Delete all | Keep some |
CDN | Google Cloud | StackPath | BunnyCDN | QUIC.cloud |
CDN PoPs | 176 | 73 | 114 | 80 |
Full page caching | ✓ | x | x | ✓ |
CDN geo-replication | x | x | ✓ | x |
CDN image optimization | x | x | ✓ | ✓ |
CDN image resizing for mobile | x | x | x | ✓ |
CDN DDoS protection | x | x | ✓ | ✓ |
CDN bandwidth | Unmetered | Very limited | Unlimited | Unlimited |
Documented APO compatibility | x | x | ✓ | x |
Documentation | Not detailed | Good | Not detailed | Good |
New features | Infrequent | Infrequent | Frequent | Frequent |
Facebook group | Join | Join | Join | Join |
CDN price | $14.99/mo | $8.99/mo | $.03/GB | $.02-.08/GB |
Plugin price | Free | $59/year | $60/year | Free |
Renewal price | Free | $59/year | $42/year | Free |
View tutorial | View tutorial | View tutorial | View tutorial |
23. Lazy Render Elementor Sections
You’ll need FlyingPress or LiteSpeed Cache to do this.
Lazy render is like lazy loading images only for any element on the page using CSS selectors. While #footer and #comments are both common, you can also lazy render Elementor sections.
View your site, then right click the Elementor section you want to lazy render. Inspect it in Chrome Dev Tools, right click the code, copy the CSS selector, and paste it into FlyingPress/LSC.
Follow Gijo’s video tutorial, only do it with Elementor sections below the fold.
24. Remove Bloat, Database Bloat, Unused Modules
Here’s a summary:
- Remove bloat using Perfmatters’ general settings or Debloat.
- Use the Disable WooCommerce bloat plugin for WooCommerce.
- Remove database bloat (including unused tables) with WP-Optimize.
- Disable all unused modules/settings in plugins if you don’t use them.
- Only allow Heartbeat when editing pages/posts (source: Perfmatters).
Your Perfmatters general settings should look something like this:
The problem with cleaning your database with cache plugins is they don’t take backups (WP-Optimize takes them via UpdraftPlus), they delete all post revisions (WP-Optimize can keep a few), and they don’t remove unused tables left behind by old plugins (while WP-Optimize does).
Ultimate Addons, Premium Addons, Rank Math, and many other plugins are module-based, meaning you can deactivate features you don’t use. WP Johnny also found Ultimate Adds For Elementor and uses too many autoloads, so again, you gotta be careful which plugins you use.
Conclusion: Elementor Is Slow, Your Site Doesn’t Have To Be
This blog is all about speed so I use GeneratePress (Elementor wouldn’t make sense for me).
Another post by Vikas in case I didn’t cover everything (from 2011, but still relevant):
Why is my Elementor website slow?
Elementor adds extra CSS, JavaScript, fonts, and div wrappers to your site. Elementor plugins don't help either, including Elementor Pro which adds even more CSS/JavaScript.
How can I speed up my Elementor site?
You can speed Elementor by activating the performance settings and disabling unused fonts, font icons, and Gutenberg. There are Elementor-specific exclusions when removing unused CSS and delaying JavaScript in cache plugins, both of which can help significantly.
Why is the Elementor Editor slow?
High memory usage slows down the Elementor editor. Besides upgrading memory, a common reason for high memory usage is plugins running ongoing background tasks.
Why is Elementor slow on mobile?
If your Elementor mobile site is slow, try using mobile caching, resize images for mobile with your image optimization plugin or CDN, and reduce latency with a faster DNS/CDN.
Why is WooCommerce slow on Elementor?
Elementor and WooCommerce both add extra CSS/JavaScript while increasing memory usage. Using a sufficient host with object caching (i.e. Redis) along with full page caching and CDN features like Argo Smart Routing can speed up the delivery of dynamic content.
Cheers,
Tom
ELEMENTOR CLOUD IS VERY SLOW to me…
Thank you
Will try your recommendations
Yep, tried it and it’s not fast at all. Lmk if you have questions.
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.