For Elementor website speed optimization, I’ve tried all of the popular caching plugins. WP Rocket. SG Optimizer. Litespeed. W3 total cache. WP fastest cache.
Sitegrounds own plugin was pretty reasonable for a free option if you host with them, but it was only OK.
They mostly offer common options, like lazy loading, page caching and preloading your google font.
I’ve even tried the lesser-known ones like Comet Cache, and minifying plugins like Fast Velocity Minify and font loaders like OMGF (for more swift loading of your preferred google font so you can benefit from improved typography), so you don’t have to resort to browser defaults.
Some were free. Some were paid. I’ve been searching for literally months – checking the ones recommended on YouTube videos and so on. But it eluded me.
They all help to a greater or lesser degree, but none of them really improved loading speed to the level I was particularly happy with. Until I found this one.
So was there a caching plugin that provided massive performance improvements with something close to “one click” for my landing pages and blog posts?
Improvement in desktop loading speed vs not using a cache plugin
For my site, yes. I was incredibly surprised at the level of improvement compared with no caching, and also surprised compared with some of the other caching plugins which I’ve tried previously.
If you’re just here for the link, here it is. It’s an affiliate link, which costs you nothing but helps me to continue to make more posts like this.
Why Elementor site loading speed is a problem
Within the world of WordPress website generation, Elementor as a page builder gets a moderately bad name around the issue of site speed.
People find resources like “font awesome” being loaded even when they’re not used. Some Elementor users have become frustrated, and there are complaints. However, Elementor are clearly working on it.
Divi is reportedly much worse and they don’t appear to be improving. Other users buy a WordPress theme from a site like Themeforest, and they can be either amazing or truly dreadful.
Typically, Oxygen (a more lightweight pagebuilder), a lightweight theme like Astra or custom coding with WordPress and Gutenberg are considered more effective solutions when trying to solve website performance issues.
However, they are beyond the technical reach of most WordPress users, which is why Elementor exists and why we love it so much.
Why is Elementor slow loading?
When a page builder like Elementor creates the HTML for your site, they can create code that is considered bloated; it contains more than is needed to display the page. They often load more than is strictly necessary too.
As I mentioned though, Elementor has started to fight back.
With the recent V3.1 improvements, they started the process of loading each widget only if it was necessary, and they improved the DOM elements in V3.0. But it’s still fairly slow loading – there’s a way to go.
So, with an Elementor website, you’re starting from a negative position when it comes to site speed, the scores Google PageSpeed insight and Web Core Vitals.
Even if they managed to speed it up massively though, a caching plugin still makes sense.
Why should I care about site speed?
It’s a good question. Well, presuming it’s WordPress performance you’re considering today – possibly because you have a blogging website or a small brochureware site – there are two key reasons:
- Ranking changes and Google Core Web Vitals
- User Experience
What are Core Web Vitals?
Google recently announced that, as of May 2021, websites would gain a rankings boost if they considered site speed and Cumulative Layout Shift (CLS) to be important for their users.
GTMetrix waterfall chart, showing the time taken to load a page, and the number of elements that were loaded
What is User Experience?
This is why Core Web Vitals matters; Google has highlighted a number of issues that they consider vital for website visitors, hence the name.
Faster load times are one of these vital elements, since visitors are incredibly impatient and even a relatively fast time of 3-4 seconds will increase frustration. Google says you really want to have a speed of less than 2.5 seconds and the data bears that out.
Site speed is here with us and it’s here to stay. The great news is though, by improving the loading speed of your landing page or blog post, you’ll gain more business.
What are good enough load times?
There are differences of opinion, because they’re just opinion. However, Google says that the Largest Contentful Paint (LCP) should be within 2.5s.
How have they arrived at that figure though? Where does it come from? Is it someones guess?
Well, they did a huge amount of testing on the speed of websites a few years ago and they found that:
53% of mobile website visitors will leave if a webpage doesn’t load within three seconds.
That’s really where this figure comes from.
Google always likes to push the online industry along, and Core Web Vitals is one way of achieving this. They don’t care if you have a WordPress website, an Elementor website, a WordPress theme or custom built HTML.
That does leave Elementor users with something of an issue then; feeling very firmly on the backfoot when it comes to the upcoming changes with Google ranking. While we’re not sure how serious an issue this might be yet, it’s certainly worth considering if you’re in a competitive niche.
What are some common causes of a slow loading website?
Your website hosting
First off, it’s important to have a decent WordPress host for your site. I use Siteground. While not the best performance, they offer a decent speed for a reasonable price.
However, with an effective cache plugin, you don’t need the absolutely fastest hosting performance. This is because page caching pre-builds the pages (known as warming up the cache) so all it has to do is deliver HTML which is already there ready for it. This will ensure a fast TTFB (Time To First Byte).
Your site hosting should be fast enough to respond to an http request though.
One of the most common issues, especially for those relatively new to website speed, is the size and format of their images. Typically, you’ll find people with huge 2Mb image sizes downloaded straight off stock sites, which take a long time to download.
This isn’t anything to do with your Elementor; it’s not their issue at all. All images should be resized to a reasonable size for web – often 2000 pixels.
There are various types of compression and you should choose the type of image for the suits the image; JPEG for photographs and PNG for similar coloured graphics. You should also choose a reasonable compression level.
The more recent webp format – which only has limited support in the industry yet, sadly – is preferred over both JPEG and PNG though.
There are several image optimization plugins – like ShortPixel – that can result in significant file size reduction with little to no effort, but it would be preferable if this were all in a single cache plugin.
It’s also possible to employ lazy loading, where the images are only loaded when they’re needed when someone scrolls down. This is also called deferred loading.
Website technical elements
Desktop website loading times
Your site will typically contain one or more CSS file that contains all of the styling for your page – such as fonts, colours, backgrounds and so on. For an elementor website, there are typically multiple CSS files. Combining these into a single file is typically faster for page load times.
GZip & PHP
GZip and PHP version can also affect your loading time. Zipping up elements of your website page will reduce the amount to download to the browser, causing improved speed optimization.
PHP was known to be quite slow to execute in version 5.6 and the latest version 8 runs twice as fast. Ensuring your WordPress host is using the latest version – or even UltraFast PHP – will help your WordPress site noticeably.
WordPress plugin optimization
Plugins are not all the same. Some of them have been written to provide excellent performance, but many are incredibly slow to execute. A web developer can help you find these. However, an effective page cache can reduce this issue since it will bypass the need to build your website page on the fly.
Your WordPress database holds all of the information about your site – all of the pages and their content. After many years, this can become unwieldy and database optimization is effective.
Top tips for a fast loading Elementor website
I’ve been working in websites and optimisations for some times, and these are my top 5 tips, based on mistakes I see all of the time.
- Optimize image size; as mentioned above, people who are not professional web developers (and some who are) tend to leave their images too large in terms of pixel size, and with compression settings too high. As a rule of thumb, I suggest 2000 pixels across or down, and around 70% for compression.
- Reduce plugins; on my sites, I use as few of these fancy Elementor plugins as possible. They say they’re “optimized” but then I look at the waterfall charts and they tell a different story. I only use PremiumAddons.
- Reduce font use; I tend to use only 2-3 fonts per site, and only use certain weights in most cases. Most people don’t know that downloading a different font-weight is like loading an entirely new font.
- Keep the design simple; you can do a lot with a simple design, but if you start to include hundreds of different types of elements on a page, with incredibly complicated design elements, it will slow your site down. 95% of the design I do can be done purely with CSS.
- Hosting performance; all WordPress hosting is not the same. At the bottom end of the market are the very well known hosting … one of them with another name for father <ahem>. These hosts will perform terribly on the whole. Move yourself to a decent host like Siteground.
- Use a fantastic cache plugin; Elementor websites just don’t run well out of the box, regardless of whether you manage to achieve the other 5. That’s just a fact of life, I’m afraid.
What does the SwiftPerformance cache plugin do?
It takes care of everything that’s required. No longer are there complicated steps to trouble yourself with to solve your slow page loading; it’s as close to one-click as possible.
Having tried many of the other options on the market, I found them to be left wanting. All mouth and no trousers, to use a British phrase. This included the Premium options.
SwiftPerformance also benefits from being an autooptimize plugin, where it can create the best settings for itself, after checking your hosting.
Here’s a roundup of the key WordPress performance optimizations they offer that will improve your Google PageSpeed score. However, there are other options not listed here too.
|Features||Information & details|
|Auto optimize images||Both on image upload, and across the entire website|
|Image quality setting||Both for JPEG and PHP|
|Webp image format||Conversion using their server, plus serving using <picture> or rewrites|
|Resize images||Ensure all images are not too large|
|Lazy load images||Yes, including sensitivity setting to determine how early the load should happen based on the viewport and blurred image while loading|
|Responsive images||<srcset> to allow images to be loaded relative to the size of the device|
|Cache warming||Yes, prebuild the cache based on a list of URLs, sitemap, or auto-find pages|
|Minify & Gzip HTML||Yes, remove unnecessary elements and Gzip compression|
|Merge CSS files||Yes, including option to generate critical CSS to load based on initial viewport and include critical CSS in header.|
|Minify CSS||Yes, including removing whitespace and shortening elements.|
|Google Fonts||Preloading and/or delivery from your local server, and swapping to use browser fonts temporarily.|
|Page cache||Various options including memcache and disk cache, plus Gzip.|
Now, many of these site optimization options will be familar to those using a WordPress cache plugin. However, I’ve not found one so effective as SwiftPerformance at being a “one click” solution.
It just seems more effective than the alternatives I’ve tried.
How about mobile performance?
This is where an Elementor website is always going to struggle without significant custom development.
Mobile website loading times
However, with other cache plugins I typically saw a score of between 15 and 30 – maybe 40. With SwiftPerformance I found scores to be more around the 50 to 65 mark with Largest Contentful Paint (LCP) paint times of around the magic 2.5s mark!
That’s a pass in the eyes of Google!
Improvement in mobile performance compared with no cache plugin
Maybe SwiftPerformance will work for you?
No plugin is a replacement for understanding what you’re doing. If you design a site to be difficult to load, it’ll be difficult to load, and there’s only so much a plugin can do. However, with the right settings, SwiftPerformance is the closest I’ve seen to “we just take care of it all”.
If you want to give it a try, they have a 14 day money-back guarantee. If it doesn’t work, you’ve lost nothing. If it works, both your site visitors and Google are going to be happier.
I’ve also found their support to be effective, helpful and quick at explaining some areas where I hadn’t quite understood.
How to use it to speed up your Elementor website
First off, use the Google Pagespeed Insights tool to check a few pages on your site and note the desktop and mobile scores.
Once you’ve installed it, you should run the automatic optimize option. It will test your website hosting and set the most important settings yourself.
You should be aware there’s more to do once you’ve installed it! Don’t run immediately to Google Pagespeed Insight tool – like I did – and expect it suddenly to be fast! First you need to warm up the cache and change some other settings.
This involves telling the SwiftPerformance where your sitemap is (or it can discover pages for itself) and leave it for some time – maybe 30 mins to an hour – to prebuild the pages. Before this, your website will run as slowly as before.
You must wait until the pages on your site have been cached, which happens in the background
During this time you can go through the settings and make sure that your Elementor website still functions. I would strongly suggest the following settings:
- Under “Optimization -> Styles” choose “Generate Critical CSS” and “Critical CSS Method” should be set to “Viewport based”. Otherwise your website will have a large Cumulative Layout Shift (CLS), so you’d be defeating the object since this is another Core Web Vitals score.
- Under “Media -> Images” choose “generate Webp” and “Serve Webp” using picture elements.
- Under “Media -> Images” set JPEG quality to around 70, unless your site is about photography, in which case it can be higher.
- Run a one off optimize over all of the images on your Elementor website.
Once all of this has finished, check your performance on the Google tool and hopefully you’ll have a significantly improved performance.
And if you’re really struggling, the guys at SwiftPerformance can optimize your Elementor website using their plugin for you.