Elementor is good. It allows you to create pages quickly, nicely, and fully customize them to your own needs without having to know how to write code.
However, the code that Elementor generates is not the cleanest. It’s often (unnecessarily) complex, not very easy to read, and more verbose than code a human would write.
All of this can have a significant and negative impact on the speed of the site.
You don’t have to believe me, feel free to put your Elementor site into Google speed tracking and see for yourself.
What can we do about it?
Although we will probably never achieve a 100/100 speed score with Elementor, I believe that implementing the tips below will speed up your site by at least 25%, especially if you have never optimized your site before.
Why is speed so important anyway?
People are impatient. They don’t like to wait, and slow sites can make the tight race for our attention hard to win. But these “intuitive” reasons are far from the only ones.For 11 years, Google has considered speed as one of the important metrics for determining a site’s position in the search engine, and in 2018, it added even more weight to speed and began measuring it on mobile phones as well.In addition to satisfying the Google god, speed has major business implications. According to data from Small SEO Tools and Strangeloop, a 1 second delay in loading reduced conversions by 7%. In other words, according to this data, if your site generates a daily turnover of 25,000 Kč,- then a one-second speed-up can result in a daily increase in turnover of 1750 Kč.
So how do you go about speeding up your site?
Web Speed Up Process
Initial site measurement
Getting rid of slow parts
Aiming for speed
Checking and remeasuring
While we may be tempted to just plunge in for speedup, it’s worth measuring the site well first, which will often give us a good idea of where there’s the most room for improvement. In the next step, I then like to get rid of anything that isn’t necessary on the site, as that alone can lead to noticeable speedup. I then add things that might make the site faster, and finally it’s worth testing everything again to see if we’ve broken the site at the same time by our efforts to make it faster.
Initial site measurements
To know where to go, we first need to know where we are. When measuring the web, I usually do this by creating a spreadsheet where I write down the results of the Google Speed Insight test and the WebPage test.I test the pages several times, and in the case of Google Speed Insights, I do both phone and desktop tests separately. It’s also a good idea to add a page link on the Pagespeed site to measure page speed continuously.
If you are more technically savvy, you can also take a number of hints from this phase as to what will need to be improved and fixed.
Getting rid of slow parts
Telling what doesn’t work is much easier than guessing what will work.
Getting rid of things that slow the site down (and add no value) is the foundation of success.
I give below an example of 7 things that illustrate exactly this.
Remove unused templates- Remove plugins that can be replaced directly by Elementor blocks
Remove unused plugins- Remove duplicate plugins
Disable loading of unused Google fonts- Load videos from YouTube or Vimeo instead of from the site
Instead of ready-made templates, create the same template manually
If you want advice on how to do any of the above, post a comment or ask on Discord.
Aiming for speed
Hosting Optimization
There are many better experts on this topic than me. However, the bottom line is:
- Hosting that has PHP version 7+
- Hosting that also allows caching at the server level
Personally, I use SiteGround, but in the Czech Republic, a good choice is WPHosting or Your Hosting.
Tips for when your site is hosted on SiteGround
Siteground offers its users three ways to make their site faster with hosting, and if you use SiteGround, it’s worth taking advantage of these options.
- If you don’t use any other caching plugin, you can use the SG Optimizer plugin, which SiteGround says should allow you to use the full potential of SiteGround servers.
- You can enable what is called the memcached option, which is a caching system that speeds up the site by caching the results of database requests in the server’s RAM. If you’re not too wise from this description, don’t despair, user-wise it will be fully sufficient to enable this option in the Site Tools > Speed > Caching menu, where you can enable the Memcached button.
- In the Site Tools > Devs > PHP Manager menu you can then use the Ultrafast PHP menu, allowing you to speed up your site even more.
Choosing the right template
The wrong template can make it impossible to speed up your site even if you stand on your head. I personally use the Hello Elementor! template, which also has a Child theme, which you can find here on Github.
For sites where Elementor isn’t used then I use the Astra template, which also has an easily accessible child theme.
We’ve also heard high praise for the OceanWP template, but I have no personal experience with it.
Enable caching
WordPress pages are inherently “dynamic”. This means that every time someone views the page, the page is “pieced together” from different parts to make the whole look good. So as soon as someone opens your page, Wordpress begins the process of putting the page together so that it can be shown to the visitor.
If you don’t have any dynamic content on your site such as a form, search, etc. you can convert the pages to html versions which are inherently static.
But if you use and need dynamic content, you’ll have to take care of the caching yourself, which in WordPress is most easily accomplished with a plugin.
The caching plugin creates a time-limited static copy of the site on your first visit, and then sends that copy to other users. This means that WordPress does not have to “rebuild” the site from scratch for each visitor, which speeds up the process dramatically.
What caching plugin to use?
Of the free plugins, I worked well with the WPOptimize plugin, which also performed well in my speed tests. User friendly is SiteGround Speed Optimizer and a good free alternative which is a bit harder to set up then is WP Super Cache.
On my sites I then use WP Rocket which I am extremely happy with, however this plugin is not free and costs about 5000,- CZK thousand per year. You can find a review of it in English at WPLama.
Image Optimization
Images are most likely to take up the most space on your site, and because of this, they are the most common reason why pages are so slow.
The question is how to reduce their size and thus significantly benefit the speed of your pages.
You can find a great article on this topic by Adam Laity. But basically, you can shrink the images before you upload them to the web (for example, using IrfanView), then you can use a plug-in such as TinyPNG on the web, and if you want to really maximize your images, you can also consider a cloud-based solution such as Cloudinary, or you can use a content delivery network called a CDN.
Consider using a CDN
CDN stands for content delivery network, and this service basically keeps a copy of your website across different word location. Because the traffic is geologically split, the site is much faster. You can use CloudFare free version to experiment with that, which is good enough for most of the websites (there’s a pro version as well).
Content delivery network does, in a nutshell, keep a copy of your site in various places around the world. Then, when someone tries to come to your page, the CDN will show them the page that is currently closest to their current location, making this display much faster.
Cloudflare CDN can even be used on your site for free (as long as you don’t exceed your traffic quota).
From the paid CDNs, then, Bunny CDN looks very interesting in terms of price/performance ratio.
Code Minification
Elementor is notorious for the code it produces not being the cleanest. Just hit the Ctrl + Shift + I key combination and you can see for yourself. The unnecessary complexity of the code is part of the reason why some more experienced people prefer the Oxygen builder, for example.
If you are like me, however, and like Elementor for its broad capabilities and flexibility, it’s a good idea to minify the code on the site.
Plugins that minify CSS and JavaScript code do, as I understand it, mainly get rid of spaces in the code, remove unnecessary characters, or perform a kind of consolidation in the framework that combines multiple files into a single file.
I personally use the aforementioned WPRocket plugin for this purpose, while the WPOptimize plugin, has proven to be a good free alternative. However, it’s important to say that I haven’t tried too many plugins, and it might be worth experimenting with more solutions.
Enabling GZip compression
GZip is another form of data compression. The original data is taken and compressed, resulting in a smaller final file size. The user then gets the original data by “unzipping” the file again. The HTTP protocol supports this form of compression, so it is a good way to speed up your site by allowing visitors to download smaller files.
How to enable GZip compression on your Elementor site
The first option is to add the attached code below to your .htaccess file in File Manager.
If you don’t know how to edit htaccess, leave a comment below the article and I can make a short video on how to do it (it’s really not that complicated). However, Gzip compression will also allow you to enable some plugins such as WP Super Cache.
Limiting the number of revisions
WordPress stores a large number of revisions for posts and pages by default. This both takes up space and is not very useful from a practical point of view.
That’s why it’s a good idea (again in File Manager) to add the attached piece of code below to the wp-confing.php folder.
Disabling hotlinks
If you don’t disable hotlinking, you are allowing other sites to use images from your site by linking to them, so that even when images are displayed on your site, they are actually loaded directly from your site (which naturally leads to slowdowns).
You can simply disable the linking by adding the attached piece of code below to the htaccess again.
Checking and remeasuring
While we may be tempted to just plunge right into speeding things up, it’s worth measuring the site well first, which will often give us a good idea of where there’s the most room for improvement. In the next step, I then like to get rid of anything that isn’t necessary on the site, as that alone can lead to noticeable speedups. Then I’ll add things that could make the site faster, and finally it’s worth testing everything again to see if our efforts to make the site faster also broke it.A motivational image that’s definitely good to keep in mind.
Caption
Optimizing the web pays off in every way. It can be a little tricky at times, but give it time and you’ll see it bear fruit.
Elementor is only as good as you optimize it. It works, but it’s not right away.
If you would like help with optimization, feel free to contact me or come to our Discord for advice.
