Setting Up WP Rocket for Greatest Elementor Speed

Setting Up WP Rocket for Greatest Elementor Speed

Table of Contents

Having WP Rocket is pretty easy. Setting it up properly for optimal results is a little bit more complex.

In this tutorial, I will share with you the optimal settings for WP Rocket. Depending on your particular website, the design choices, and addons used, some of my recommendations might not be possible.

I suggest you try to follow the below recommendations as closely as possible, however of course, verify that everything works fine every step of the way!

Ideally, while you tinker with the settings, you might want to do that on a staging version, or a pre production site. Stuff can (and almost certainly will) break, while fine tuning the settings.

Check my other article to learn why I believe WP Rocket is now the greatest optimization plugin out there.

So, let's go! Tab by tab, through every WP Rocket setting:

Cache

Setting Up WP Rocket for Greatest Elementor Speed 1

Enable caching for mobile devices : Enabled, always.

Enable caching for logged-in WordPress users : Enable if you have a logged in area, and it doesn't cause problems.

Cache Lifespan : Enter either 0, or 10. Test everything out with '0' first, and if it all works fine, keep it that way.

If there are periodical problems showing up, change this to '10' instead. In particular, if you have anything ecommerce AJAX related, you will probably need to have this set to '10'.

File optimization

Setting Up WP Rocket for Greatest Elementor Speed 2

Minify CSS files : Enable, always. Except in very rare cases, if it breaks something, unlikely.

Combine CSS files : Disable, always. Not needed with HTTP/2, and indeed will slow down load time a bit.

Excluded CSS Files : Leave empty.

Optimize CSS delivery : Definitely worth a try. Only use the Load CSS asynchronously option, as the other option (remove useless css) isn't stable enough yet, and causes all kind of problems, including server problems. It also bloats the database, so it is strongly recommended to not even test the Remove useless CSS feature, except in staging.

Enabling Optimize CSS delivery will often causes CLS (cumulative layout shift, one of the core web vitals) problems if the automatically generated critical path CSS isn't complete. If you know how to fix it by filling it the Fallback Critical CSS field properly, do so. Otherwise, you might want to keep it disabled, if it does causes CLS problems.

Minify JavaScript files : Enable, always. Except in very rare cases, if it breaks something.

Combine JavaScript files : Disable, always. Not needed with HTTP/2, and indeed will slow down load time a bit.

Excluded JavaScript Files : In case minification somehow caused problems, you can add the faulty JS files here, so as to avoid turning off Minification for all of them.

Load JavaScript deferred : Enable. This feature is very compatible with default Elementor & Elementor Pro installation, and should not cause any problem. If your setup is more complex, with many plugins and addons, this might cause some problems. Try to keep it enabled by adding the troublesome JS files to the Excluded JavaScript Files list.

Delay JavaScript execution : Enable. This is the single most important WP Rocket feature for performance. Quite compatible out of the box with Elementor & Elementor Pro.

The goal with this feature is to use it with as few exclusions as possible to the list. In particular, we don't want to exclude jQuery, as it's loading, parsing and execution takes a heavy toll on performance.

It will however interfere with anything JS related. If you have Sliders or Carousels in your hero section, for example, they won't work with this on. If you have JS dependencies in the hero section of every page of your website, you won't be able to use this feature to its full extent. Even then, you should still enable it, and add the exclusions recommended by WP Rocket here. You won't have the amazing performance boost, but it will still help. Ideally, design your sites with JavaScript in mind, and place anything JS dependant below the fold.

If you have JavaScript dependant elements like a carousel or slider in just a few of your pages, go in them and turn that feature off only for these pages.

Known Delay JavaScript problems and how to fix them

Here are the known problems when you have Delay JavaScript execution enabled, without exclusions.

Elementor Nav Icon needing 2 clicks on mobile

The nav icon will require two clicks on mobile instead of one. To fix this, either in your functions.php file, or in a new Code Snippet (recommended way), add this code.

You will need to adjust the '58px' value so that it shows up at the right place for your design. It's the offset from the top of the viewport. Test it out, you will quickly understand.

Then in the Delay JavaScript execution exclusions, add 'ElementorNavFallBackFunction'.

function elementor_nav_fallback_js() {
		 ?>
<script>
	if (!window.elementorProFrontend){
let navToggle = document.querySelector('.elementor-menu-toggle');
let nav = document.querySelector('nav.elementor-nav-menu--dropdown');
navToggle.addEventListener('click', ElementorNavFallBackFunction);
function ElementorNavFallBackFunction(){
	if (!window.elementorProFrontend){
    navToggle.classList.add('elementor-active');
    navToggle.setAttribute('aria-expanded','true');
    nav.style.width = '100vw';
    nav.style.position = 'fixed';
    nav.style.left = '0';
    nav.style.top = '58px';
    nav.setAttribute('aria-hidden','false');
		}
    navToggle.removeEventListener('click',ElementorNavFallBackFunction);
}
}
</script>
<?php
}
add_action( 'wp_footer', 'elementor_nav_fallback_js');

Table of content not being generated

The table of content won't be generated. If it's a website where you are not using that feature, just ignore this part. If you are using it however, you will definitely want to fix this.

The table of content is a great SEO feature, and if it's not generated on page load, Google won't see it, so you will not get any SEO juice from it. Normally to have it back active you would need to exclude just about every JS file on your site (or all those Elementor related, atleast, + jQuery).

However with the following code snippet, you don't have to exclude all of these just to get the table of content working.

So to fix this, either in your functions.php file, or in a new Code Snippet (recommended way), add this code.

You will need to edit this line : scope: '.content_of_post',

Replace .content_of_post with your own selector, the same that you entered in the Table Of Content element's settings.

Setting Up WP Rocket for Greatest Elementor Speed 3

Then in the Delay JavaScript execution exclusions, add 'TableofContentContainer'.

function elementor_table_of_content_fallback_js() {
		 ?>
<script>
/*!
 * jQuery-TOC
 * Table of Contents Generator Plugin for (non-)jQuery
 * 
 * @author Dolphin Wood <dolphin.w.e@gmail.com>
 * @version 0.0.6
 * Copyright 2015. MIT licensed.
 */
	!function(e){"use strict";var t=function(e,t){for(var n in t)t.hasOwnProperty(n)&&t[n]&&(e[n]=t[n]);return e},n=function(e,t){var n=[],r=document.querySelectorAll(t);return Array.prototype.forEach.call(r,function(t){var r=t.querySelectorAll(e);n=n.concat(Array.prototype.slice.call(r))}),n},r=function(e){if("string"!=typeof e)return 0;var t=e.match(/\d/g);return t?Math.min.apply(null,t):1},o=function(e,t){for(;t--;)e=e.appendChild(document.createElement("ol")),t&&(e=e.appendChild(document.createElement("li")));return e},c=function(e,t){for(;t--;)e=e.parentElement;return e},i=function(e,t){return function(n,r,o){var c=n.textContent,i=t+"-"+o;r.textContent=c;var a=e?i:n.id||i;a=encodeURIComponent(a),n.id=a,r.href="#"+a}},a=function(e){var t=e.selector,a=e.scope,u=document.createElement("ol"),l=u,f=null,d=i(e.overwrite,e.prefix);return n(t,a).reduce(function(e,t,n){var i=r(t.tagName),a=i-e;a>0&&(l=o(f,a)),a<0&&(l=c(l,2*-a)),l=l||u;var p=document.createElement("li"),m=document.createElement("a");return d(t,m,n),l.appendChild(p).appendChild(m),f=p,i},r(t)),u},u=function(e){var n={selector:"h1, h2, h3, h4, h5, h6",scope:"body",overwrite:!1,prefix:"toc"};e=t(n,e);var r=e.selector;if("string"!=typeof r)throw new TypeError("selector must be a string");if(!r.match(/^(?:h[1-6],?\s*)+$/g))throw new TypeError("selector must contains only h1-6");var o=location.hash;return o&&setTimeout(function(){var e=document.getElementById(o.slice(1));e&&e.scrollIntoView()},0),a(e)};"function"==typeof define&&define.amd?define(function(){return u}):e.initTOC=u}(window);

let TableofContentContainer = document.querySelector('.elementor-toc__body');

	if (TableofContentContainer){
	let toc = initTOC({
    selector: 'h2, h3, h4, h5, h6', /* Be careful, don't add H1 if there is no  H1 Heading in your scope container. */
    scope: '.content_of_post',
    overwrite: false,
    prefix: 'table-of-content'
});

TableofContentContainer.appendChild(toc);
	}
</script>
<style>
	.elementor-toc__body ol:not(.elementor-toc__list-wrapper), .elementor-toc__body li:not(.elementor-toc__list-item) {
    margin: 0!important;
    padding-top: 1px !important;
    padding-bottom: 1px!important;
}
</style>
<?php
}
add_action( 'wp_footer', 'elementor_table_of_content_fallback_js');

Media

Setting Up WP Rocket for Greatest Elementor Speed 4

LazyLoad : Enable everything here. Enable for images check. Enable for iframes and videos check. Replace YouTube iframe with preview image check.

Excluded images or iframes : That's a very important setting. This can't be left empty, otherwise it will have a negative impact on your LCP (largest contentful paint, another web vital). You need to add your images that are above the fold here, in particular your logo.

Ideally, you would add all the images that are above the fold, on all your pages. Unfortunately there isn't really any shortcut for this. With Elementor, we can't add a class name directly to the <img> elements. The class names gets added to a parent element.

Important: If your above the fold images are set as background images, they won't be lazy loaded anyway, so no need to exclude these.

Add missing image dimensions : If you get CLS problems and warnings about this, you can enable it to see if it helps. If your CLS is 0, keep it off.

Preload

Setting Up WP Rocket for Greatest Elementor Speed 5

Activate Preloading : Enable, always.

Activate sitemap-based cache preloading : Enable.

If you have Rankmath, or another SEO plugin, you will also see:

Rank Math XML sitemap: Enable.

Enable link preloading : Enable, always.

URLs to prefetch : Add your external domains here. Got no idea what this is? Learn moere here, or safely ignore, performance boost is limited.

Fonts to preload : Add your fonts that are above the fold here. Find out their URL by visiting your site in incognito mode in Chrome, open the devtools (F12), go to the 'Network' tab, refresh the page, click on the 'Font' filter, and then right-click > copy > copy link address.

Setting Up WP Rocket for Greatest Elementor Speed 6

If you get an address like this :

https://fonts.gstatic.com/s/roboto/v29/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2

It's external (ie not self hosted), so you should add just this part //fonts.gstatic.com to URLs to prefetch.

If you get an address like this :

https://yourwebsite.com/wp-content/themes/your-theme/assets/fonts/font-file.woff2

Then add that part only : /wp-content/themes/your-theme/assets/fonts/font-file.woff2

This setting (Fonts to preload) is to be used carefully. Don't preload every font, just those above the fold, and ideally, just the WOFF2 version. Learn more here.

Advanced Rules

Setting Up WP Rocket for Greatest Elementor Speed 7

These really depends on the specific website, so I won't give general recommendations here. For most websites, you don't really have to fill anything there.

Database

Setting Up WP Rocket for Greatest Elementor Speed 8

A simple database cleanup tool. Use it freely, and ideally, make a backup before you clean up your database.

CDN

Setting Up WP Rocket for Greatest Elementor Speed 9

Definitely recommended if you have a global audience. If you have a local audience, and your server is in the same locality (or nearby), you might not benefit much from a CDN.

The RocketCDN offered by WP Rocket is a good option, however I find it expensive. I prefer BunnyCDN, which is 10x cheaper, and just as good.

Heartbeat

Setting Up WP Rocket for Greatest Elementor Speed 10

Enable Control Heartbeat if your server has limited resources. Keep the defaults below.

Add-Ons

Setting Up WP Rocket for Greatest Elementor Speed 11

Enable as needed, most of these are pretty self explanatory.

Image Optimization

Setting Up WP Rocket for Greatest Elementor Speed 12

Glorified ad for the Imagify plugin, from the same team as WP Rocket. I much prefer ShortPixel AI, so that's the one I recommend you get instead.

Tools

Setting Up WP Rocket for Greatest Elementor Speed 13

Very useful to create a backup of your settings, or to import the settings from another website (example, you optimize a staging version first, then import the settings in the production website).

Conclusion of Elementor & WP Rocket settings optimization

I really hope this overview will help you out with your Elementor & WP Rocket optimization. Setting up optimizations plugins is as much art as science, and does require a good deal of patience.

Having a really fast website is the result of hard work, and of using the proper tools, such as WP Rocket!

You can read here why I believe WP Rocket is now the greatest optimization plugin, or just get WP Rocket here (if you don't have it already).

Let me see your results!

Fancy an awesome full screen navigation?

Elementor premium full screen navigation templates
Comments

7 Responses

  1. Hi There,

    I have the conflict with the mobile menu toggle (double click). I tried your solution but it doesn't work. Do you have any idea?

    thank you

    1. Hey M!

      I would need your URL where you have the problem to inspect what's going on! I will have a look and hopefully find out why it's not working.

      Cheers!

  2. I added the Code Snippet code ElementorNavFallBackFunction to the JS Delay field in WP Rocket. I couldn't get the Mobile Nav button to work either. FYI. I"m using the Astra Theme and using their Header with the Elementor Nav Widget.

    Does this only work when using the Elementor Header?

    Thanks.
    Doug

    1. Hey Doug!

      I'd be glad to help you out with this. Could you share with me your website so that I can have a look what's up? Here, or if you want it private reach out to me. You will find my info in the footer. Cheers!

  3. Hi,

    When I paste the code into a new snippet it display errors and warnings. Error on line 2, warnings on lines 5, 6 and 8 and error on line 22. Also should the code be located in the Head, Body Start or Body End?

    Many thanks,

    Phil

    1. Hey Phil!

      Great questions. When I refer to adding these as Code Snippets, I'm specifically referring to the Code Snippets plugin. It accepts php, why is how I formatted my Code Snippets.

      I prefer to use this over what Elementor provides as it's much more flexible and reliable. Yes, it's yet another plugin, however that's a backend only plugin, that adds nothing to your pages, so has no impact on load speed. Of course some of the users' code snippets will load on the pages, but that's what we want.

      TLDR: Copy paste these in a new Code Snippet from the Code Snippets plugin, not in the Elementor 'Custom Code' feature.

      1. Perfect, I thought it might be me doing something wrong 🙂 Thanks for the advice.

Leave a Reply

Social Media

Recent Articles