How to Speed up Your Elementor Site Using WP Rocket

Want to make sure that your WordPress website is loading as fast as it can? Learn how to easily optimize your Elementor site and improve its speed with one of the leading premium cache plugins for WordPress: WP Rocket.

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%.

mobile-page-load-time-and-bounces
Credit: Think with Google

Scary, right?

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, 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 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;
  • 1.2MB of JavaScript is parsed during initial page load, resulting in the “Defer parsing of JavaScript“ recommendation;
  • 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
  • Minify JavaScript files
  • Combine JavaScript files
  • Load JavaScript deferred, and its recommended Safe Mode for jQuery sub-option

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.

Now the code of my page is also optimized (thanks to minification, combination, and deferred loading of JavaScript); images are loading only when the user scrolls the page, and YouTube video has been substituted by an image preview (thanks to LazyLoad).

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:

https://gtmetrix.com/reports/mega.wp-rocket.me/bXJwbLNf

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:

Click here to see the full report.

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!

Wrapping Up

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!

About the Author

Alice Orru
Alice Orru
Alice is a polyglot content writer with strong experience in international customer service and web performance. She is an active member of the WordPress community: she loves translating WordPress into Italian and speaking at WordCamps.

Share on

Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp

you might also like

Liked This Article?

We have a lot more where that came from! Join 885,286 subscribers who stay ahead of the pack.
By entering your email, you agree to our Terms of Service and Privacy Policy.

Comments

41 Responses

  1. In addition to GTmetrix I highly recommend to use the plugin ‘Lighthouse’ for Chrome. With both you should be able to solve a lot of issues of your website(s), if you are following the optimization recommendations of each.

  2. Hi Alice,

    I came across this post doing a little research on best cache plugin and tips to increase speed for WordPress site, for now, I am using W3 Total, but after reading this comprehensive guide to increase website speed with wp rocket plugin,

    I should start using Wp-Rocket.

    Thanks again for this great guide.

    1. Hi Saurabh, I want to give You my honest recommendation. I have a lot of experience in this topic about WordPress cache plugins because I’ve tested them all. Also I’m very obsessed with the “Page Loading Speed”.

      Before you continue reading, in the following link You can test one of my Test Websites so that you can verify the speed. I’m Not using any CDN at all:

      https://tpdepot.org/

      Continue……
      The absolute and indisputable King of cache plugins is the Free “LiteSpeed Cache”(Notably faster than “WP Rocket” and “SiteGround SuperCacher”. Trust Me, I have personally tested all of this). The only requirement that the plugin need to work at peek speed is to have a hosting with “LiteSpeed Webserver”. There are many of this hostings available so there is no excuses to get the benefits of this amazing plugin.

      I have Tested several Hostings that are using the “LiteSpeed Webserver” always looking for the Absolute Best “Price-Performance ratio”, and the two Best that I have found are “Rochen” and “HostWithLove”. Both are really overall TOP Quality and the Performance(aka Page Loading Speed) is Top-Notch.

      1. Rochen (This is my TOP recommendation because is a little faster(~70 milliseconds faster overall) than HostWithLove). Only $ 7.95 monthly
      2. HostWithLove (Really Cheap). Only $3.90 monthly

      Go and test one of them for yourself. You will be amazed and will thank me later 🙂

      1. Good stuff. Just want to add, anytime you are on one of the shared hosting services mentioned you can always get better speed with your own instance that you don’t share with a gazillion other sites. 🙂

  3. I have used LiteSpeed Cache and the results are excellent. Combined with LiteSpeed server it works really well. It also has more features which you get with w3cache paid version.

  4. You can get the same gains using free plugins on the WP repo like Async JavaScript, Autoptimize, WP Disable and Cache Enabler. Other solid options for site image optimization include TinyPNG, EWWW IO and ShortPixel.

  5. When I loaded WP Rocket my plugins page was no longer available so therefore I cannot access the plugins page to delete it. As I clicked “activate” I saw that WP Rocket is not tested with my version of WP but it was too late. Does anyone have any idea how I can get my plugins page back to delete this plugin. It just won’t load. It says error 500.

    1. Hi Tersia,

      If you have FTP access, just go to the Plugins folder and rename the WP Rocket folder to something else. That will deactivate it and let you back in.

  6. Could this be even faster if you switched from the “twentynineteen” WordPress theme to the Elementor “Hello” theme?

      1. Hi Luke!

        I use Astra + Elementor + WPRocket in Siteground shared hosting. With Woocommerce.

        I cannot get less that 3s.

        Would changing server be the only way to improbe?

        Thanks

  7. Good article.

    But… Who is the best free caching plugin to use with Elementor.

    Some Elementor users can’t/won’t buy a premium plugin, what they can do to speed up their websites?

    Thanks

  8. I’m glad there’s finally a post about this on the Elementor blog. I’ve had few clients asking me how to speed up their sites, while using the Elementor plugin.

  9. Installed and immediately noticed a big difference on my Elementor site. One draw back, turning on lazy load images option renders some of the widgets from third party Elementor plugins from working on Microsoft Edge. Anything that uses iframes like Element Pack Pro’s device widget. But overall my site’s page loads are a lot faster straight out of the box, great plugin, thanks for the post, happy.

    1. Hi Paras. Any product names, brands, WordPress plugins, and companies featured or referred to within Elementor’s Blog are not affiliated with Elementor’s Blog. These trademark holders do not sponsor or directly endorse Elementor or any of its products or comments.

  10. Thank you very much for the comprehensive article Please continue to send guides on tips on the speed of the site did not specify the reduction of images on the site it helps a lot of pity that you did not open in your system Added a reduction of images of the weight of a great idea and service to customers Elementor

  11. Really, very nice article. I had some doubts which got cleared in this article. I am using elementor for writing posts. Is this free or paid plugin. Please do reply.

  12. I personally use wp-rocket and it really is the best all-in-one caching plugin out there. I am definitely going to give a short pixel a try

  13. And there are many other Plugins that can do this other than the Affiliate linked one to WP Rocket. 🙂 You might want to disclose that you guys are paid for the referral. Not a bad thing, but it could bias things just a tad. . 🙂

    1. Hello Andrew. Any product names, brands, WordPress plugins, and companies featured or referred to within Elementor’s Blog are not affiliated with Elementor’s Blog. These trademark holders do not sponsor or directly endorse Elementor or any of its products or comments.

  14. W3 Total Cache is a freemium version that we’ve seen some success with when building an Elementor WordPress website for partners but in terms of the absolute best results from simple plug and play, we have to agree with Elementor on WP Rocket. It’s not surprising though. A premium option is able to focus more time and effort to continually optimizing and improving its product in compared to the rest. What are some combinations with cache plugins, CDN, and server that have been most effective for other Elementor users?

  15. When I run the Load JavaScript deferred and Optimize CSS delivery, the initial site load goes awry for a second, I realized I need to exclude the elementor from wp rocket, but I don’t know how to do it, is there anyone who can help?

  16. Website Load Speed is immensly important for SEO.

    I’m very interested in using Elementor for our projects and for our customers.

    My question: All Website Builders are overloaded with JavaScript and CSS because of all the Elements that could be used.

    Even if you minify and combine the files, there is just too much unnecessary code which is loadad.

    Google Page Speed Insights always mentions “Reduce Work for Mainthread” and “too much time for Script evaluation” and so on.

    Before I can use Elementor for all our projects I need to make sure this doesn’t happen.

    Any advice would be greatly appreciated!

  17. I have activated the LiteSpeed cache plugin that run on my website. Currently just purchased WP Rocket plugin, wondering can i use together with LiteSpeed cache plugin? If so, what should i take note of, so as not being interfere with each other?

    Thanks!

  18. This should mention that because Elementor used CSS for section and column background images, WP-Rocket lazyloading (and pretty much any lazyloading plugin available) does not work for background images in Elementor. Which is a huge shame because these are usually the heaviest images.

  19. Hey, just wanted to thank you for the awesome write up.
    Wp rocket is pain in the a** to setup, I use my site with elementor and now it broke lol.
    Really hard to fine tune to make sure I got that speed and my site still looks good (not plain mess).

Leave a Reply

Your email address will not be published. Required fields are marked *

Want to learn how to build better websites?

Join 885,286 Elementors, and get a weekly roundup of our best skill-enhancing content.

By entering your email, you agree to our Terms of Service and Privacy Policy.