With page speed being a ranking factor for Google, we’re living in an era where it’s inconceivable to run a website and not taking care of its performance.
If you think that this is too much to bear, and you don’t have time to keep up with Google’s recommendations, web performance optimization techniques, and so on: we feel you, but we’ve got your back!
In this blog post, we’ll see how you can easily optimize your Elementor site, and improve its speed. We’ll do so by using one of the best premium cache plugins for WordPress: WP Rocket.
Why Should You Care About Your Site’s Speed?
According to Google research, nowadays the average mobile web page takes 15.3 seconds to load fully.
The problem is that more than half of visitors will abandon a mobile website that takes more than three seconds to load.
Moreover, if you run an e-commerce site, keep in mind that a one-second delay in mobile loading time can affect your conversion rates by up to 20%.
Given this context, how can you make sure that your WordPress website is loading as fast as it can? Do you need to plunge into technicalities, and get your hands dirty with code to make your site faster?
Luckily, the answer is no. Running a fast website is not as difficult as it sounds, but it’s fundamental to have the best optimization tools within reach.
Since there are several essential steps to follow to speed up a WordPress site, and how to test your website speed here we’ll assume that you already took care of most of them. It means we’re taking for granted that
you already chose the best hosting provider and you got rid of slow plugins.
I’ll be focusing on the importance of having a cached and optimized site.
Why Is Caching Important for the Performance of Your Site?
A cache plugin takes what we could call a snapshot of the dynamic content that WordPress serves, and convert it to static content: this way all the HTML, images, CSS and JS files of your site will be cached.
When a visitor wants to see that cached content, your WordPress site won’t have to consult the web server to show the page: it will simply send that snapshot to the visitor’s browser, in the form of an HTML file.
This makes the process a lot faster: the heavy lifting that WordPress has to do to send a web page to the browser is limited to the very first time the page is visited.
All the visitors coming after the snapshot will benefit from it, and they’ll be able to receive the full page a lot faster than before.
(For a detailed overview of WordPress caching, you can read Caching for WordPress, Explained in Plain English).
How to Use Wp Rocket to Make Your Elementor Site Faster?
WP Rocket is a premium cache plugin for WordPress.
Its primary goal is to make your WordPress site load faster. And it also comes with a bunch of exciting features that will boost the performance of your website, and make your visitors and Google fall in love with it.
There are three plans available:
- Single, if you only have 1 website;
- Plus, if you want to use it on 3 sites;
- Infinite, if you’re going to cache an unlimited number of websites!
Once you’ve chosen the best WP Rocket plan for your needs, you’ll have access to the account page. From there, you can download the plugin and install it on your WordPress backend.
The plugin is meant to work right away and with minimal configuration.
Wp Rocket Automatically Applies 80% of Web Performance Good Practices Upon Activation.
As soon as you activate WP Rocket, your website will instantly benefit from:
- Static cache for desktop and mobile, that is the static HTML version of your content;
- Browser caching (on Apache, if available on the server): this stores certain types of files on your visitors’ local computer;
- GZIP compression (on Apache, if available on the server): this is the technique that compresses the files sent from your server to your visitors’ browser;
- Cross-Origin support for web fonts (on Apache);
- Detection and support of various third-party plugins, themes, and hosting environments;
- WooCommerce Refresh Cart Fragments Cache.
The rest of the options are, well…optional!
If you don’t feel confident with them, there’s no need to use those: the loading time of your website will improve significantly just upon WP Rocket’s activation.
So, Which Are the Best WP Rocket Settings for a Site Built With Elementor?
This is a question that can have multiple answers: there’s not a fixed set of options that should be activated on every website.
Every site is different, and even if they might have Elementor in common, several factors can influence the choice of the best WP Rocket settings.
For the sake of this post, I built a little site with Elementor, so we can see together how WP Rocket behaves on it and which options work best.
Of course, you should then test these options on your own Elementor site: this is the only way to find the best balance, given the specifics of plugins and customization used on your site!
I built this demo site using some of Elementor’s pre-built pages and blocks and adding some customization: widgets, images, videos, etc.
Now, let’s test!
How to Check If Wp Rocket Is Making Your Elementor Site Faster
This is the Elementor site I’ll be working with: an Interior Design portfolio website.
It’s hosted on a dedicated OVH hosting plan; it runs WordPress 5.1.1, and PHP 7.0.33.
Before activating WP Rocket, let’s test the initial speed of its heavier page (it contains more images/videos than others): http://mega.wp-rocket.me/elementor/interior-design/
Note: When you run your speed audit, remember to test the speed of *all* your pages!
To test my page, I’m going to use GTMetrix.
If you create a free account with GTMetrix, it will offer several testing combinations: you can mix up locations, browser, and type of connection.
You can also test the mobile version of your website from a mid-tier device (Android Galaxy Nexus), but this option is only available if you choose Vancouver, Canada, as your testing location.
For this article, I’ll set up my GTMetrix testing environment as follows:
- Test location: London, UK (since it’s the closest location to my server in France);
- Browser: Chrome (Desktop);
- Connection: LTE Mobile (15/10 Mbps, 100ms).
I’m choosing LTE Mobile because I want to have a glimpse of the performance from a slower network instead of an unthrottled connection.
Don’t forget that not all your visitors will access your site from the fastest connections: that’s why it’s important to monitor the speed of your site from different scenarios.
Since the content of my site is not different on mobile, testing the Desktop version using LTE Mobile connection will produce results that could be fairly assimilated to how the mobile version performs on a modern smartphone.
Of course, as we’ll see at the end of the post, speed results for the desktop version from a fast Internet connection will be even better. 🙂
Testing the Speed of Our Site: Before Caching
This is a very simple portfolio site, so I’m not expecting it to be too slow. But the automatic optimizations implemented by WP Rocket are going to be visible right away.
Keep in mind that I’ll be focusing mostly on loading time expressed in seconds. I’m not interested in the PageSpeed score, because it’s not a fair indicator of how fast a site loads. When Google ranks your site, it does it considering its loading time, not its PageSpeed score, which is not a ranking factor.
Here’s how the page performs without any optimization:
GTMetrix Before Caching: https://gtmetrix.com/reports/mega.wp-rocket.me/smjnBVls
6.1 seconds, 4.38 MB, 59 requests
This portfolio page certainly needs some love, since it’s loading in 6.1 seconds!
Let’s see what changes when I enable WP Rocket.
Testing the Speed of Our Site: After Caching (No Options Enabled)
Now I’m going to activate WP Rocket.
To verify that the site is correctly cached, I’m going to check its source code and look for WP Rocket’s comment at the end of the page:
The green comment at the end of the source code is the proof my site is cached with WP Rocket.
For the moment, I’m not going to touch any options; I’ll just leave those activated by default:
- Mobile cache (based on WordPress’ mobile phone detection);
- Cache lifespan (10 hours);
- Combine Google Fonts files;
- Disable (WordPress) Emoji;
- Disable WordPress Embeds;
- Preloading (based on your homepage and the pages linked from it).
Here’s GTMetrix result:
GTMetrix After Caching (default options): https://gtmetrix.com/reports/mega.wp-rocket.me/AWdyIUrw
5.4 seconds, 4.38 MB, 57 requests
As you can see, the page is almost 1 second faster than without caching!
But I know I can go deeper and get a better result: keep reading to learn why.
Testing the Speed of Our Site: Caching + Additional WP Rocket Options
GTMetrix is already highlighting three main issues for this page:
- It weighs 4.38 MB, which is due to the presence of several non-optimized images and YouTube video;
- Images and web fonts are lagging, see picture below from GTMetrix Waterfall tab:
Let’s see how the situation changes when I try to activate some of WP Rocket’s options.
I’ll check those that can directly tackle the mentioned issues.
In particular, I’m going to enable the following options one by one:
From the File Optimization tab:
- Minify HTML
- Combine Google Fonts files
- Remove query strings from static resources
- Minify CSS files
- Combine CSS files
From the Media tab:
- LazyLoad for Images
- LazyLoad for iframes and videos
- Replace YouTube iframe with a preview image
Note: Every time I enable an option and save the changes, I check the website from an incognito window of the browser to see if everything is fine. This is particularly important for advanced options like those included in the File Optimization tab since they can sometimes conflict with other plugins or theme options. If some option conflicts with your site, leave it disabled and clear the cache to override its effect.
This is how the source code of my site looks like:
No spaces, no HTML comments: all the unnecessary details that make the code heavier are stripped out by WP Rocket.
This is the resulting speed:
2.7 seconds, 1.94 MB, 20 requests
It’s a real green field!
WP Rocket’s additional options boosted our site’s speed, decreasing its loading timefrom 5.4 to 2.7 seconds. The number of requests plummeted from 57 to 20, as well as its total page size!
Fine-Tuning With Image Optimization
To fine-tune our optimization process, we should also work on images, and reduce their size. Some of them are pretty heavy (from 300 to 500 kb) and are affecting the overall size of the page.
As a cache plugin, WP Rocket can’t reduce image size on its own, but it counts on a smart helper: the free image optimization plugin Imagify!
If you don’t have it installed, WP Rocket will propose you to do it from the dashboard:
With Imagify I could run a Bulk Optimization to reduce the size of the images used in the page (those on the image carousel were particularly heavy).
This simple action had a significant impact on the performance of the page. Check it out yourself:
Reducing the size of the images on the page, gave an extra boost to its loading time and size. Our page now weighs 812 KB and loads in 1.9s.
Now, if I check the speed for a faster Internet connection (remember we were simulating LTE mobile speed), I’ll get even better results, like this one:
You’re seeing that right: loading time goes below one second (0.6s) for faster connections!
Optimizing your site speed and improving its performance doesn’t have to give you headaches. With the right tools, it can become a straightforward process.
WP Rocket is a premium cache plugin that will help your Elementor site run faster and rank better in the SERP.
In this post, we saw how the activation of a few WP Rocket’s options generated a real performance improvement. This result was possible by only using the options contained in the Media and File Optimization tab.
But WP Rocket comes with many other features, that you can explore and enable according to the characteristics of your site: CDN and Cloudflare integrations, Database optimization or Heartbeat Control are only some of them.
Furthermore, by using our sibling-plugin Imagify, you can optimize images, reduce their size and give an extra boost to the speed of your site.
Your Elementor site will be faster than it ever was.
Try it out, and let us know in the comments what you think!