How To Set Up WP Rocket With Elementor – Exposed

Setting up WP Rocket with Elementor caching is straightforward.

In this guide, I'll answer all your questions about speeding up your WordPress website created with Elementor. If your question is how to speed up the Elementor site using WP Rocket? Keep reading.

I recommend you follow the recommendations below as closely as possible and check at every step if everything is working fine.

Ideally, make these changes on a test or pre-production site to avoid potential issues while fine-tuning the configuration settings.

I encourage you to look at my list of best WordPress cache plugins to speed up a website, with WP Rocket being the top optimization plugin available today.

Before starting, check if you have the latest version of WP Rocket and if you want your website caching to work with Elementor properly.

Download the latest version of WP Rocket.

Configuring WP rocket with Elemntor for the best results can be more complex. Don't hesitate to contact me if you need any help.

Now, let's start the configuration of settings.

The best wP rocket settings for elementor

Here are the best WP Rocket settings for elementor you can do:

1. Caching

• Mobile cache: Speed up Elementor site for your mobile visitors. As most modern themes are responsive, they should work without a separate cache. Only enable this option if you have a theme or plugin dedicated to mobile.
• User cache: User caching is very useful when your website content is user-specific or restricted. Enable if you have a login area that is not a problem.
• Cache Lifespan: The system removes the cached file if it surpasses the specified lifetime. Enabling preloading will automatically generate the caches when the lifetime expires. You can set the period for global cache deletion (0 = unlimited). If you observe recurring problems, consider reducing the lifetime to 10 hours or less.

If recurring problems occur, change to '10' instead. In particular, if you have an AJAX-related e-commerce business, you will probably need to have this value set to '10'.

2. File Optimization

2.1. CCS Files

• Minify CSS files: Enable, always. Without extremely isolated events, if it breaks something, unlikely.
• Combine CSS files: Disable, always. Not necessary with HTTP/2, and indeed, it will slow down the download time a bit.
• Exclude CSS files: Leave blank.
• Optimize CSS delivery: Worth a try. Only use the Load CSS asynchronously option, as the other option (remove unnecessary CSS) is still not stable enough and causes all sorts of problems, including server problems. It also bloats the database, so it is strongly recommended not to test the unnecessary CSS function, except in the test phase.

Enabling the Optimize CSS delivery option often leads to CLS (cumulative layout shift, one of the main features of the web) problems if the automatically generated CSS critical path is not complete.

Do this if you know how to solve this problem by filling in the CSS Critical Fallback field correctly. Otherwise, it's best to leave this option disabled if it causes CLS problems.

2.2. JavaScript files

• Minify JavaScript files: Enable, always. Except in very rare cases, if it breaks something.
• Combine JavaScript files: Disable, always. Not necessary with HTTP/2, and indeed, it will slow down the download time a bit.
• Load JavaScript deferred: Enable to eliminates render-blocking JS on your site and can improve load time.
• Exclude JavaScript files: to avoid disabling minification for all files. You can add specify URLs or keywords of JavaScript files to be excluded from defer (one per line).

• Delay execution of JavaScript: Enable. It is the most important WP Rockets feature to improves performance by delaying the loading of JavaScript files until user interaction (e.g. scroll, click). Completely harmonious beside Elementor, including Elementor Pro.
• One-click exclusions: When using the Delay JavaScript Execution, you might experience delay loading elements located in the viewport that need to appear immediately – e.g. slider, header, menu.
• Exclude JavaScript files: to avoid disabling minification for all files. You can add javascript to elementor files here in case of minification problems.

The goal of this feature is to use it with as few exclusions as possible in the list. In particular, we don't want to exclude jQuery; its loading, parsing, and execution weigh heavily on performance.

However, this exclusion will interfere with anything JS-related. If the hero section of every page on your website has JS dependencies, you won't be able to use this feature to its fullest extent.

If, for example, you have sliders or carousels in your hero section, they will not be able to work with this option.

Even in these conditions, it is recommended to enable it and add the exclusions recommended by WP Rockets. You won't get the incredible performance boost, but it will still help.

Ideally, sketch your websites with JavaScript in cognizance and point anything that depends on JavaScript beneath the fold.

If JavaScript-dependent elements, such as a carousel or slider, only appear on a few pages, disable that functionality for those pages only.

3. Media

• LazyLoad: This feature can improve actual and perceived load time, as images, iframes, and videos only load when they enter (or are about to enter) the window. Reduces the number of HTTP requests.

Enable everything here:

• Enable images.
• Enable iframes and videos: Replace the YouTube iframe with a presurvey picture.
• Excluded images or iframes: This is a very important setting. You need to add your images that are above the fold here, especially your logo. It can't be left blank, otherwise, it will hurt your LCP (largest contentful paint, another vitality of the web).
• Add missing image dimensions: If you have CLS issues and warnings about it, you can enable it to see if it helps. If your CLS is 0, don't enable it.

Ideally, you should add all images that are above the fold on all your pages. Unfortunately, there is no shortcut for this. With Elementor, we cannot add a class name directly to elements. Class names are added to a parent element.

Important: if you are above the fold, images are defined as background images; they won't be lazily loaded anyway, so any need to exclude them.

4. Preload

When you enable preloading, WP Rocket automatically detects your sitemaps and saves all URLs in the database. The plugin will ensure that your cache is always preloaded.

• Preload cache: Enable preloading. You can specify the URLs to be excluded from the preload function, one per line, in the box below.
• Preload Links: Enable. Link preloading improves the perceived load time by downloading a page when a user hovers over the link.
• Prefetch DNS Requests: Enable. Pre-fetching DNS queries can speed up the loading of external files, especially on mobile networks. To do this, you can specify the external hosts to be fetched (no http:, one per line).
• Fonts to preload: Add your fonts that are above the fold here. To find out their URL, visit your site in incognito mode in Chrome, open developer tools (F12), go to the “Network” tab, refresh the page, click on the “Font” filter, then right-click > copy > copy the link address.

If you get an address like this:

l is external (i.e. it is not self-hosted).

So you have to add this part :

//fonts.gstatic.com to the URLs to take.

If you get an address like this:

Then add only this part:

/wp-content/themes/Your-theme/assets/fonts/font-file.woff2

This parameter (Fonts to preload) should be used with care. Don't preload all fonts, only those above the fold, and ideally only the WOFF2 version. For more information, click here.

5. Advanced Rules

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

6. Database

A simple database cleaning tool. Use it freely, and ideally, make a backup before cleaning your database.

You can find a list of the best WordPress backup plugins.

7. CDN

Recommended if you have a global audience. If you have a local audience and your server is in the same locality (or nearby), you may 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.

8. Heartbeat

Reducing or disabling Heartbeat API activity can save some resources on your server. Enable Control Heartbeat if your server has limited resources. Keep the default values below.

9. Add-Ons

Activate them as needed. Most of these options are pretty self-explanatory.

• Varnish: If your server uses Varnish, you should enable this add-on.
• WebP Compatibility: WP Rocket will create separate cache elementor files to serve your WebP images to improve browser compatibility for WebP images.
• Cloudflare: Integrate your Cloudflare account with this add-on. Just enter your email address, the global API key, and the domain of your Cloudflare account to be able to purge the Cloudflare cache and get the optimal settings for WP Rocket.
• Sucuri: To synchronize the Sucuri cache elementor with this add-on you need to provide your API key to flush the Sucuri cache when the WP Rocket cache elementor is cleared.

10. Image Optimization

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

11. Tools

Very useful for creating a backup of your settings or importing settings from another website (for example, you optimize a trial version first, then import the settings into the production site).

12. Tutorials

Here you will find videos to follow for each of the previous steps.

WP Rocket and Elementor – FAQs

Conclusion

WP Rocket and Elementor are like two peas in a pod when you want to optimize your WordPress website. But here's the catch: You've got to set them upright!

This guide has shed light on speeding up your website. Think of it as a blend of art and science – it may take a bit of patience, but the results are oh-so-worth-it.

So, if you're craving a website that zooms like a sports car, you'll need to put in some elbow grease and enlist the help of the mighty WP Rocket!

Want to supercharge your site's speed? Get WP Rocket today and see the magic for yourself!

Don't wait – reach out and let's make your website lightning fast! 🚀