How To Speed Up Elementor - A Case Study

As an Elementor agency, we use the Elementor website builder to construct great websites for our clients. Whilst Elementor can help us build attractive and effective websites, Elementor is growing a reputation for creating bloated, slow websites.

While it is true that the way Elementor generates the HTML, CSS and Javascript (JS) for a website does lead to some excess, it can be mitigated.

There are several key steps everyone can take to ensure their Elementor website is still effective and engaging whilst still being fast to load.

We have just launched the redesigned website for Lean Tree. When we first started working with Lean Tree we encountered a slow, unreliable and clunky design. By using the best practices, we helped improve the website speed and eventually the layout.

In this post, we are going to explore how we helped Lean Tree become truly lean!

Before we started

Tim from Lean Tree initially reached out to us, via a recommendation, due to downtime with his website. His business had been recently launched and keen customers were routinely reporting that their website was unavailable.

Tim wanted their website to be reliable and also felt it was a bit slower than it could be.

At the start, we undertook a GTMetrix scan to see how long the website was taking to load. Here are the results:

As you can see, the performance on the website wasn’t great. It was taking 2.1 seconds to load, which isn’t appalling but should be better. There was a lot of time being blocked by scripts and significant issues with the culmative layout shift.

The other great concerns were that the home page was 2.73MB in size. Anything more than 1MB is worrying, nearly 3MB is not great!

For me, the most worrying was the four pages on the report of server requests. 157 requests were being made to the server to load the home page. A large percentage of these were actually 404 errors.

First initial steps

While the initial GTMetrix report was certainly concerning, the biggest priority was downtime. Before any work could be undertaken to speed up the website, we needed to ensure it was consistently live.

Choosing better hosting

When I first started working with Lean Tree their website was being hosted with Hostinger. There are some reports from customers that say Hostinger is great, some say to avoid. That’s true of most hosting platforms, though.

Regardless of who was hosting the website, there was significant downtime. I had set up an UptimeRobot scan to alert me of downtime. Within hours I had an alert and the site stayed offline for quite a while.

The account that the website was hosted on was a shared hosting plan. The original website designer had put Lean Tree with her other sites all on a server that was shared with other accounts and sites.

Shared hosting can be a great financial choice, but if one website gets hacked or gets high traffic, everyone else can suffer. There can be hundreds or even thousands of sites on one server, all at the mercy of each other.

The solution was the opposite. Moving Lean Tree to Cloudways would mean that Tim and his team would own their own cloud server and eliminate the risk of others effective them.

We opted for a Vultr HF server with Cloudways. There are loads to choose from, and you can get picky, but they all provide the same great quality. The advantage of a Vultr HF server is the backend of the website can be significantly faster to use. This makes managing the website even easier!

The migration over to Cloudways was effortlessly easy. Cloudways provide their own migration plugin. All you have to do is enter your Cloudways server details and the plugin does the tricky bit. Then it’s a case of changing the A records within the DNS and it was live.

Using Cloudflare as a CDN

A content delivery network (CDN) has become a must-have tool for every modern website. What a CDN does is distribute a copy of your website to data centres all over the world. This means that a person in Sydney and Surrey will be able to load your website in roughly the same amount of time, regardless of where your hosting company is based.

But what about if it’s hosted in London and all of your customers are in the UK? What’s the point? A CDN also helps improve the speed of your website regardless of the user’s geolocation.

Cloudflare can minify the CSS and Javascript code. It compresses the code to be as small as possible, and require as few server requests as possible, and speed up the delivery of it to users.

Also, Cloudflare provides an extra layer of security with its firewalls. While speed was the focus of the work, what’s the point of a fast website if it gets hacked?

Setting up Cloudflare is easy. You simply need to set up an account with them and change the nameservers for your domain. You get access to loads of options and settings and you can read around the best choices. Ultimately, if you use a WordPress speed plugin, such as WP Rocket, it will change your settings to the optimum settings anyway!

Looking at server requests

The server requests are the best place to start when speeding up the website. It’s like a doctor taking an X-ray of a sore arm — you can see exactly what going on inside and spot the cause of the pain!

Quite a lot of the server requests were unnecessary. Either for resources that caused a 404 error, for scripts that should be combined or for plugins that should not be used.

The vast majority of the 157 requests were for small resources and didn’t cause any block in the loading time. However, any request that’s not necessary should be removed.

Reviewing the plugins

The server requests showed that the first issue to tackle was the plugins. Clearly, there were too many and some loading on the home page despite not being used.

When I first looked at the backend of the website I was fairly stunned (and quite annoyed). The previous designer had installed over 50 plugins. Quite a few were duplicates. By that, I mean that there were 3 plugins to load Mailchimp, 4 to add tracking codes and many other crossovers that simply didn’t need to be there.

I always plan out which plugins I will use. Each one I install will potentially slow down the website. I never install a plugin until I am 100% certain it is necessary and it will provide more benefit than bad.

What I could see on the Lean Tree plugin page was a scattergun approach to plugins. Many installed, some then deactivated after testing, but still installed. No clear planning.

My first step was to install WP Reset. Yes, my first step was to install another plugin! WP Reset is one of those plugins that add more benefit than bad. It takes a backup (a ‘snapshot’) of the website before any plugin is installed or deactivated. That way I could turn off plugins and not worry about messing up the website.

I spent hours systematically turning off plugins and testing for any negative effect. Then I found some plugins where one plugin would do the job of 4 or 5.

Finally, I turned things off. Quite a few plugins that provide addons for Elementor come with the option to turn off any settings you don’t need. Turning off anything you don’t need reduces the requests.

Tackling the plugins was a big step to take to tame this beast of a website!

Improving the images

Images are a vital part of a modern, engaging website. Images are also one of the most common reasons why a website is slow.

I said earlier that a web page should be under 1MB in total. If you take a photo on your phone or download a stock image online it can be 4MB or more. If you upload three or four of these images to one page, you’ve got a big problem!

Before uploading images to a website you need to take the following steps:

1. Resize the image

2. Compress the image

3. Install a plugin that converts to WebP and loads the image at the right size

To resize the image I use Photoshop. Paying for a Creative Cloud license is not much fun, so a free tool like Pixlr allows you to easily resize images online. Simply upload the image and choose the new size. Check out some guidance online for the best size.

Once the image has been resized you can compress the file size with TinyPNG. JPEG and PNG files both work fine there. What TinyPNG does is strip out any unnecessary data on your image file and simplify the number of colours used. After compression, you can see a reduction in around 80% of the file size.

Before uploading to your website you need a plugin or plugins installed to further optimise and resize your images.

We use Shortpixel Image Optimizer and Shortpixel Adaptive Images. Together they further compress the file, then convert it into WebP format. Finally, when a user loads the website Shortpixel will load each image at the perfect size and load from their own CDN.

When I first started there was no image compression and optimisation taking place. Around half of the page size was from images despite them taking up less than 10% of the server requests. One image was 465KB, one 380KB and another 247KB. Over 1MB for just three images!

Setting up WP Rocket

From my initial GTMetrix scan, I had fully assumed there was no caching plugin installed on the website. Imagine my surprise when I found WP Rocket was installed.

WP Rocket is one of many speed plugins for WordPress. These plugins are necessary due to the way WordPress works. WordPress creates websites using PHP. They are designed to be dynamic websites that can be changed often. Imagine a news website with constant breaking news or a social media platform like Facebook with people adding new posts.

WordPress is designed to be dynamic, but most people don’t need it to be like that. By using a plugin like WP Rocket, you can create a static version of the website by creating a caching version. That static, cached version loads quickly for visitors and is only replaced when you make changes to the website.

Also, WP Rocket compresses and combines the scripts. A WordPress website can have loads of CSS & JS scripts. Each plugin might have its own and some might have multiple ones. Each script is one single request from the server and can slow things down.

WP Rocket will minify the code. That means it squeezes it together to be a small a file as possible. It removes all spaces so the code is read quickly by your browser.

You can then combine scripts. WP Rocket can turn 50 CSS files into one and the same for Javascript. It does mean one bulky file, but there’s only one request rather than 50 sent to your server.

WP Rocket, when activated, will provide its own ‘best-fit’ settings which does initially improve your website loading time. However, the best-fit options are only a first step. You can rachet up the options to speed up your website even more if you’re willing to risk temporarily messing up your website.

Finding the right settings for WP Rocket is about trial and error, something that just hadn’t been done when I first become involved.

While WP Rocket is great, there’s one more plugin required to make things really fly…

Asset CleanUp

WP Rocket will combine scripts and make fewer requests, but what it can’t do is remove requests that simply shouldn’t be there. Asset CleanUp allows you to do just that.

Asset CleanUp scans each page and shows you every request from that page. Every plugin and every script being requested to load that page.

Lean Tree had Mailchimp installed to add people from their Woocommerce checkout page to their Mailchimp list. The problem is that the Mailchimp plugin and its scripts were being loaded on every single page, despite 99% of pages not needing it. With Asset CleanUp I could turn off Mailchimp on every page apart from the one it was needed on.

With Asset CleanUp I was able to turn off many requests that simply weren’t needed. I could also tackle the fonts. As the website was using Google Fonts it was making many, slow requests to Google for the font files. With Asset CleanUp you can preload these requests. This massively cuts down on the time it takes to get the font and means you only get the exact font-weight you need.

After the initial work

After four days of work, we were able to slightly reduce the loading time. While there wasn’t a great improvement in the blocking time, the number of server requests had gone from 157 to only 28.

Also, the page size had from nearly 3MB to less than 2MB.

Despite all of the hard work, visible there wasn’t a massive improvement. Most crucially, the culmative layout shift was still critically bad.

The website was having no downtime and was loading in comfortably under 2 seconds, but it had hit a brick wall. Fundamental issues with the design and layout remained.

Rebuilding the website

While you can build lean, fast Elementor websites. The way you design the page matters. Every aspect of the design needs to be carefully thought through in regards to the speed.

On the original Lean Tree website, there was an image slider at the top of most pages. This slider was causing the issues with the layout shift and requiring a lot of JS and CSS to function. A simple, visual section was harming the website very dramatically.

Rebuilding the website meant focussing on the ensuring every aspect of the layout was simple, but effective.

All images were adequately compressed and resized. All icons used on the website were manually created and imported as SVGs.

The previous website used a lot of animations. While animations can be visually appealing, the animations in Elementor add a lot of bloat to the page loading.

A final, crucial part of the design was to simplify the colours and the fonts. The previous website used a wide range of colours and around 4 different fonts. The new version has just 5 colours in total. For fonts, only two different fonts and a total of four different weights.

All colours and fonts were set in the Elementor Site Settings. This is important because it means the fonts and the colours are only requested once while the page loads. If every bit of text or every section had the colours and the font manually set it would take longer to load. Using the Site Settings makes life easier when it comes to both building and eventually loading the pages.

The results

In the beginning when the largest contentful paint (the loading time) took 2.1 seconds. Now, with the redesign, the website takes 0.7 seconds. Blocking time has fallen from 0.6 seconds to 0.1 seconds and layout shift from 1.88 to 0.02.

The page size is below 1MB for the home page and all aspects of the loading time have been significantly reduced.

The installation of WordPress is the same and the new design is built on top of the pages that were present from when I started. All that was done to make such a big improvement was to build the page design and layout to be focused on speed.

When you view the website you will find a high level of consistency. There are 4 different sizes of fonts used on the page. There’s plenty of white space to allow items to breathe. It also allows images to be lazy-loaded by Shortpixel so only one or two images are being loaded at any one time.

When it comes to design, simple is simply better. Not just visually, but from a loading perspective as well. Don’t bombard the person viewing the website and don’t bombard the device trying to load it!

Is it just about design?

When viewing the results you could assume that design, and design alone makes the difference. Without Cloudways, Cloudflare, Shortpixel, WP Rocket and Asset CleanUp the results would be very different.

You need a stack of great tools to make a website faster, but it must be paired with a great design and an optimised layout. The stack of tools alone made minimal difference. The revised layout wouldn’t have been anywhere near as effective without the stack of tools.

A fast Elementor website comes from the perfect harmony of great design and great tools.

Next steps

There are still many steps that could be taken to improve the website. I had hoped to host the fonts locally, but the fonts displayed very differently went loaded into Elementor’s Custom Fonts.

With the newest version of Elementor, there are some ‘Experiments’ that can allow for even greater improvements in speed. Whilst I have tested these features and they are great, they are still in development. I wouldn’t want to take the risk of using a tool that’s not finished being designed.

If in the future more improvements are made I shall come back and add to this.

In summary

Elementor is a great tool for building modern and highly effective websites. While it’s a great tool it can add some unwanted bloat.

By using great hosting, caching, image optimisation and asset cleaning you can remove most of the bloat. Paired with a design and layout build for speed, you can build a lean, mean, blazing-fast Elementor website.

If you’re looking for help with your Elementor website or want to get your perfect website, get in touch.