In this piece, I want to share some tips on how you might be able to speed up the Elementor website without having to redevelop the entire website from scratch at either a cost to you or your client.
One of the most important things when looking at creating a website that will use a page builder is hosting, Elementor will become resource hungry very, very quickly due to the volume of code that is generated once you have done all of your design work and probably not realising what is happening under the hood. My best advice here is to go for dedicated or cloud hosting where your resources are not shared with other websites on the same server, but don’t go cheap on this and make sure you have allocated enough resources for the website to breeze along without capping out on memory and cpu.
Make sure that form the offset when using images that you optimise them for ALL responsive options, for example: if you create a section and put a background image in as 1920 x 1080px which is going to be huge on some tablet and especially mobile, make sure that you are aware of the images you are loading in. Go even further and make sure you use a tool prior to uploading to compress the file down further (without losing quality) with tools such as TinyPng or others. You can actually also use plugins within WordPress such as Smush or Shortpixel which upon upload will then compress the images for you.
Caching can become a complicated subject if you are unsure about what you are doing. The easy thing to do is enable all the options within a plugin such as browser cache, object cache, minify the JS and CSS, and so on. This can often lead to the website slowing down! Follow the guides on how to properly optimise an Elementor website because there is so much code going on, by minifying and inlining the CSS or JS can not only cause issues when rendering out the page or loss of functionality it could also slow the website down. My recommendation here is to follow the guides provided by the plugin vendor.
Instead of sticking a plugin on your website as mentioned above and hoping it will work it’s magic by enabling all the options, consider using Cloudflare to do the heavy lifting for you, it is really easy to setup and has a free tier also. Cloudflare basically stores a cached version of your website so that each time a user visits your website it does not need to hammer your server each and every time. I have heard rumours though that it isn’t so friendly on WooCommerce?
It is so easy to get carried away on Elementor (or any page builder tool) and just start plonking sections within a section on top of images and layers and so on, but you must always be mindful that each widget or element your adding is adding more and more code to load. My best advice is to try and shave off widget or sections where you can, be mindful also of constantly applying font families manually to your fonts and equally with the colours, make sure that you take advantage of ‘globals’ because to ensure the website isn’t applying the same colours/fonts over and over.
Elementor Asset Loading
Recently Elementor added experimental tools for improved asset loading and also optimised DOM layouts. In short, both of these newer options have been put in place to optimise the code output. So, the idea is that unused HTML elements will be removed (CAUTION: It could break your website if enabled AFTER you have done all of your hard work). Elementor is making strides towards making a leaner plugin but it is going to take time but they are getting there for sure!
Still not sure?
Some of these steps can become quite a complex matter, especially if the website is already built or restricted to the hosting choices. We offer services such as website optimisation and website auditing. Contact us to find out more about how we can resolve these issues for you!