How To Improve Elementor Site Speed

As an Elementor agency, we know that it is the best page builder for WordPress websites, but its bloat can harm your website. You need not worry about the dreaded Elementor bloat, follow our 12-step programme to improve your Elementor site speed.

We will go through all of the key steps you need to take to improve your website’s loading time and make it more reliable for all visitors.

1. Make sure you’ve got fast hosting

The first and most fundamental step is to ensure your website is in the best place to load quickly. All of the other 11 steps below can be rendered pointless if your hosting provider does not have a fast and consistent platform.

The tendency for everyone starting out building a website is to look for the cheapest host. Why does it matter? Aren’t they all basically the same? The answer is a resounding no to the latter question, hosts are never the same!

The cheapest hosting providers offer ‘Shared Hosting’. Some might try to use other terms, but ultimately you are on a shared hosting plan. What that means is your website is one of hundreds or maybe even thousands on the same server.

With shared hosting you have no control over the other websites on that server, you also have no control over how many websites the host puts onto your server. If one website on the server gets hacked or gets a lot of traffic, everyone else on the server is affected. During peak times of the day, every website on a shared server can all be slower due to the weight of traffic.

For the vast majority of shared hosting users, they won’t see any massive drop in performance or really notice an issue. For many others, including clients we’ve worked with before, the hosting can be both slow and very unreliable.

What’s the alternative? There are quite a few newer hosting providers cropping up at the moment who offer cloud server hosting. Companies like Cloudways help you access your own cloud server. From as little as around £8 per month, you can have your own server. You can control who is on that server, how much traffic it has to deal with and still get the benefit of exceptional support if something goes wrong.

My first top tip is to look for a cloud server hosting solution over shared hosting. The price isn’t that different, but the quality certainly is!

2. Add a content delivery network (CDN)

You may have heard of CDNs and possibly not know much about them. They have become the backbone of the modern digital infrastructure. The role of a CDN essentially is to speed up the connection between your website and each visitor.

The main purpose of a CDN is to provide multiple geolocations of your website. Our websites are all hosted in London. If a user from Manchester clicks on our website their request only needs to travel a short distance to get the website. If a visitor comes from Sydney they would have to wait a lot longer for the website to be sent to their device. A CDN stores a copy of your website at locations all over the world, so each visitor only needs to connect to the local node rather than your hosting provider.

Another crucial improvement is to time to first byte (TTFB). Your website’s TTFB is a measurement of how quickly a request from a visitor for your website leads to the information being sent back to them. I’ve seen some shared hosting providers take 1 second or longer to respond. With a CDN you can hope for it to take 0.1 seconds to 0.01 seconds for the website to be sent to the visitor. A CDN massively improves the initial loading time of your website.

A CDN can offer great additional solutions like firewalls, bot protection and protection from data breaches. There are some great choices for CDNs. Our top tips are to use Cloudflare (which offers a great free plan, as well as paid options) or BunnyCDN (which might cost you a few pence per month, per website). Both are fairly easy to set up with plenty of help available online if you’re struggling.

3. Choose the right theme

The next two steps are going to be annoying if you’re reading this after building an Elementor website. Both are steps that are harder to make retrospectively and might serve as good lessons for next time!

A theme is a basic fundamental of a WordPress website. Every site built with WordPress needs a theme. With so much choice out there it might seem like it’s hard to get the right one. There are over 8,000 free themes to choose from and many more paid and premium themes.

With both the free and the premium themes it is important to ask what comes with the theme. Quite a few themes, especially premium ones, provide a huge list of extra features and plugins that come with that theme. However, if you don’t need all of those extra bits, what’s the point.

From my experience of having previously shopped around for the best premium theme, I know that all they do is massively slow down your website. What you really need from a theme is almost nothing.

With Elementor it is a website builder. You use Elementor to build your entire website. From headers to footers, blog templates to shop pages, every pixel can be built with Elementor. Therefore you don’t need added extras, Elementor offers it all.

The best theme when using Elementor is a barebones theme. The free Hello Elementor theme, built by Elementor is your best choice. It comes with almost a completely blank page and allows you to build from the ground up with Elementor.

Other great themes for Elementor include Astra, Blocksy and OceanWP.

4. Design matters

When it comes to Elementor, how you build your pages makes a huge difference to the eventual loading time.

If you add a big, heavy image slider to every page, add loads of animations and extra little features, every little bit will slow down your website.

Interactive features, like sliders and animations, require a lot of additional Javascript to run and look interesting. A slider or some animation can make your website look exciting, but at what cost?

The best way of thinking when using Elementor is simplicity is your goal. Try to avoid stacking loads on Inner Sections widgets onto each page, they add unnecessary bloat. Keep your layout and the amount of content on each page as simple as possible. It won’t harm your user experience as most users won’t keep scrolling if your page is long and full of content anyway.

Finally, and leading into the next step perfectly, try to reduce the size of images on your page. Do not use loads of large, wide images, as images add weight.

5. Optimise and offload your images

When I have worked with businesses who have built their own website the number 1 reason why their website is slow is due to images.

A photo or a downloaded stock image can be around 4000 pixels wide and around 4MB in size. Ideally, you’d want each page of your website to be less than 1MB in totality. So, adding that massive, 4MB image is going to quadruple your web page’s expected size.

I have worked with many people who have just uploaded images to their website and seen their website bloat enormously. The reality of adding images to a website is that a lot of work goes into adding every single one.

Firstly, you need to work offline. Before you upload an image you need to reduce its dimensions. The maximum you would ever need an image to be is 1920 px wide. That would only be for big full-screen images. With tools like Photoshop or Pixlr, you can resize your images easily.

Next, compress the images with TinyPNG or TinyJPG. Despite the different names, both would compress PNG and JPG images. The purpose of image compression is to get rid of things you don’t need. TinyPNG will strip out things like metadata — content stored on an image such as where the photo was taken or which device took the photo. TinyPNG also reduces and simplifies the number of colours used in the photo, all with minimal reduction in quality. Ultimately, with TinyPNG you might see a reduction of around 80% in image size.

Finally, it’s time to upload to WordPress. First, though you need an image optimisation plugin. Both Shortpixel and EWWW offer great, free image optimisation plugins with the option to pay for more features.

The purpose of these plugins is to further compress the images and add new formats. Google loves WebP images. They are much smaller than PNGs or JPGs. Shortpixel and EWWW will automatically convert your images to WebP. They will also create retina versions, which are 2x the size and perfect for users with retina devices.

Additionally, image optimisation plugins will help serve your images at the perfect size. Despite our efforts in Photoshop or Pixlr to reduce the dimensions, you do need to be wary of every different device that a visitor might use to load your website. Both Shortpixel and EWWW will serve each image at the best size for each device that views your website. This further improves loading time.

When serving your image at the perfect size, Shortpixel and EWWW will serve the image from their own CDN. The best image optimisation plugins will store a copy of your website’s images on their own CDN and deliver your images at a much faster rate.

Luckily, image optimisation is easy to set up and can be done retrospectively.

6. Set up caching

Caching is such a vital part of WordPress website building. All WordPress websites are built using PHP. As a programming language, PHP is designed to be dynamic. It’s great for websites like Facebook or news websites, where content can change very quickly throughout the day. It’s not so good for the vast majority of websites.

When a visitor comes to a WordPress website the server essentially needs to piece together every part of the PHP WordPress website. This process takes time and involves lots of queries between the visitor’s browser and your server. When it is built the website is delivered as an HTML website.

The alternative is to use a caching plugin. A caching plugin builds the website and stores that HTML version. When a visitor comes to your website the pre-built HTML version is served really quickly.

The only thing to bear in mind is every time you make a change you need to clear the cache, clear the old saved version, and let it build a newer version.

There are loads of great, free caching plugins for WordPress. My top tip is WP Rocket. While it is a paid plugin, it works perfectly with Elementor and with a CDN like Cloudflare.

7. Optimise CSS & Javascript files

The second part of the process for any good caching plugin is to optimise and speed up your CSS and Javascript files.

Your CSS files control how your pages look. From colours to fonts, every visual part of your website is controlled by the CSS. Javascript controls how things work. Any animation or even how Elementor functions are controlled by Javascript (JS).

The theme you choose will come with its own CSS and JS files. Elementor has quite a few CSS and JS files. Most plugins you add will bring their own files as well.

It ends up with your website needing to load potentially hundreds of CSS and JS files every time a page is loaded. What plugins like WP Rocket does is shrink and combine these files.

Optimisation plugins, like WP Rocket, will optimise the files by reducing any spaces in the code. This makes it quicker to read each file. They can also then combine all or most CSS files or JS files into one CSS or JS file, so the visitor needs fewer requests to get the data. You can also set up critical files to load first or ask for some files not to be optimised.

Ultimately, optimising your CSS and Javascript files is an essential process and one best done when your website is built and ready to be shared with the world.

8. Run a plugin audit

The great thing about WordPress is that there are thousands of free and paid plugins to add extra features to your website. You can essentially build anything you want with WordPress, just with some plugins.

The problem is every plugin adds bloat. Every plugin you install can slow down your website. You need to look at every single plugin you have installed and ask yourself if it is vital.

Things like caching plugins, security plugins and Elementor are all vital plugins that you cannot get rid of. But do you need that contact form plugin when Elementor has its own? Do you need a Mailchimp plugin when you can integrate it with Elementor without a plugin? Do you need 5 Elementor addon plugins?

It is best to never install a plugin until you are 100% convinced it is vital and you cannot find its features in another plugin you already have. Retrospectively it is still important to be ruthless and get rid of as many plugins as possible.

When it comes to Elementor addon plugins, many offer some great additional widgets and features. However, most come with loads you’ll never need. Luckily all of the good addons plugins allow you to turn off features you don’t need.

Finally, there are some plugins that offer loads of features in one. Toolkit for Elementor, which is a paid plugin, is a swiss army knife for Elementor websites. It offers its own caching and code optimisation solution. You can optimise images and videos and fonts as well (we will cover that step next). You can also add tracking codes with Toolkit and turn off any widgets, scripts or WP features you don’t need. Toolkit is one plugin that can replace at 4!

9. Host fonts and preload

The longer I work in web design the longer I become obsessed with font optimisation.

When it comes to design, fonts really matter. They are the most important visual aspect, as you want to encourage visitors to read your content. Choosing the right font can make all of the difference. Also, keeping the choice to one or two fonts only is also a design must!

So, is it all about choosing the right font? From a design point, yes. From a technical point, it goes further. Most people who build a website with Elementor rely on the built-in range of hundreds of Google fonts. The problem with Google fonts is every time someone loads your website they need to send a request for each font. That includes each font size, font-weight, etc. It can take time.

The best way to reduce the loading time of fonts is to self-host them. Elementor allows you to upload your own custom fonts. This can either be one you’ve downloaded from a font website (free or paid), or it can be a Google font you have downloaded from Google.

By hosting the font yourself it can massively improve the speed it takes to load the font. The other step is to preload or preconnect to fonts. Within WP Rocket and Toolkit for Elementor there is an option to preload fonts. There you can enter the address of the WOFF2 font files. If you don’t want to self-host your fonts, you can still preload fonts from Google.

Find the font file address can be tricky. All you need to do is run a GTMetrix report, look at the ‘Waterfall’ report and click on a font file. When you open it up it shows you the URL of the font file. That can be copied over to a font preloading option.

Since I’ve started preloading fonts I’ve been amazed at how much of a difference it makes to the loading time of websites.

10. Manage which scripts load

This step is a bit more technical and one you can skip if it sounds scary!

Every WordPress website makes loads of requests for resources every time it loads. All of those CSS and JS files, as we know, takes time to load.

Sometimes scripts or other resources are being loaded you don’t need to be loaded. With a Woocommerce page, it will load the cart and other shop files on every page, not just shop pages. Form plugins, like Contact Form 7 will load their scripts on every single web page, regardless of whether or not there’s a form on that page.

With AssetCleanUp (or AssetCleanUp Pro, for the paid version), Perfmatters and Toolkit for Elementor you can see every script and resource loaded on every page and turn any off you don’t need.

Where it can be technical is the process is essentially a case of turning off scripts until the website breaks and working out which ones are too important to turn off. This is not something you should do on a live, public website. Good hosting providers allow you to create a staging version to test on, or do this before telling the world about your website.

Elementor’s notoriety for bloat is about the sheer number of scripts it requires for every page built with it. However, the animation JS file can be turned off if you aren’t using animations. Many Elementor scripts can be turned off as well.

At the time of writing, this Elementor has said they are soon launching updates that mean their builder and pages built with it will only load scripts that are being used by each page. While there is no date set for this release until then you can turn off the features. There is an interim solution I will cover soon.

11. Reduce third-party scripts

As a business grows and becomes successful it becomes important to utilise data to empower your growth. Things like Google Adsense, Analytics, Tag Manager, etc become important. Adding a Facebook Pixel for ad tracking is also great.

You might think about adding live chat to improve the customer experience. The problem with all of these third-party scripts is that each slows down your website. Each script takes time to load and ping back to Google, Facebook, or wherever the script came from.

Firstly, ask yourself if you really need that script. Google Adsense and Facebook Pixel are vital if you plan to run regular ad campaigns. However, if you don’t plan to really dive into Analytics how useful really is it?

If you do plan to use third-party scripts, then delay them. Some still work if you insert them in the footer. Within Toolkit for Elementor it allows you to paste tracking codes in the footer, so they load last and don’t slow down the website loading time.

Alternatively, WP Rocket allows you to ask for the script to be loaded later as well. Whichever route you choose, do think about the importance of every additional script you add.

12. Use the Elementor Experiments

As mentioned in the 10th step, Elementor is taking its bloat seriously. They plan to reduce the server requests their builder, and the pages it builds, requires.

While we await these updates, for now, you can do some experiments yourself. By going to Elementor > Settings > Experiments you can turn on some new features.

Please note, as it says on this Experiments page, these are all features that are in development, so turning them on might harm your website.

If you are happy to turn them on you’ll be pleasantly surprised. The ‘Optimized DOM Output’ will shrink the size of the web pages by getting rid of empty classes and reducing the overall size. The Improved Asset & CSS Loading options will also help take that step to only load the CSS and JS files your pages need.

From my experience, I have not had any negative effects of using the Elementor Experiments, but do tread carefully!

In summary

Elementor allows so many people to experience building websites and getting a great business site. While Elementor websites can be slow, there are some steps you can easily take to reduce or remove that Elementor bloat.

Follow the 12-step programme above to drastically improve your website loading.

If you need any more information, or are unsure about any of the steps mentioned, please do get in touch with us. We’re more than happy to help you get your perfect website!