Download the 60+ page eBook on WordPress SEO along with bonuses.

The Best (and Optimal) WP Rocket Settings for 2021

WP Rocket is the leading cache plugin for WordPress in terms of performance and one of the best speed optimization plugins to reduce your page load times.

Once you activate WP Rocket, it will apply 80% of the settings on its own without needing you to lift a finger. However, to get the most out of it, you should configure certain additional WP Rocket settings to give your website the best performance.

Trust me, you will find that configuring WP Rocket in 2021 is such an easy and enjoyable process as you follow this guide.

In this tutorial, I will walk you through every minor detail in the WP Rocket settings dashboard to help you configure this popular cache plugin as per your specific needs.

Do these WP Rocket settings work?

You bet. Before I deep dive into the actual configuration, I want to show what I have achieved on PassionWP using the same exact settings I have described in this tutorial.

I tested the homepage of PassionWP using Google’s Page Speed Insights tool and here is the result for mobile and desktop:

A perfect 100 score for mobile as well as desktop. This really means something as the Page Speed Insights tool is based on the Core Web Vitals metrics.

If you want to boost your WordPress website speed but are still sitting on the fence, I can suggest only one thing: Get WP Rocket.

After all, its 202,000 customers can’t be wrong.

Activate WP Rocket

This is an obvious but essential step. Since WP Rocket is a premium plugin without a free version, you will first need to purchase a valid license.

Note: If you haven’t purchased WP Rocket yet, kindly consider buying the plugin using my affiliate link that will cost you no additional amount but will provide me a tiny commission and motivate me greatly to write more such WordPress guides for my readers. Thank you.

Once you complete your purchase, you should log in to your WP Rocket account and download the latest version of the plugin.

download wp rocket

Now head back to your WordPress dashboard and upload and activate the plugin. When you navigate to the WP Rocket settings page, you should see the confirmation along with your license information.

wp rocket license activation

There’s nothing more to do here. Now let’s start with configuring the actual WP Rocket settings.

WP Rocket – Hightlights

  • Full page and browser caching
  • Minify, combine and optimize CSS files
  • Minify, combine, and optimize JavaScript files
  • Defer and delay JavaScript
  • Preload cache
  • Preload links
  • Preload fonts
  • Prefetch DNS
  • Lazyload images
  • Add missing image dimensions
  • WebP caching
  • Disable embeds
  • Optimize database
  • Schedule database cleaning
  • Control WordPress Heartbeat
  • Integrate CDN
  • Use with Cloudflare

WP Rocket Cache Settings

As I mentioned in the beginning, WP Rocket automatically applies 80% of the recommended settings. This includes enabling browser cache, page cache, GZIP compression, optimize Google font files, disable WordPress emoji, etc.

So we are left with a limited number of settings to take care of.

Mobile cache

By default, mobile caching is enabled. You can choose to enable a separate cache for mobile devices if your website uses a dedicated mobile theme or plugin. Otherwise, leave the option unchecked.

wp rocket settings

User cache

If you wish, you can enable caching for logged-in users like Admin, Editor, Contributor, etc. But if you’re running a single-author blog then it’s advisable to keep this option unchecked.

wp rocket user cache

The reason being you want to witness the changes that you make to your WordPress site in real-time. If you enable caching for logged-in WordPress users (i.e. yourself), you will see a cached version of your site even after you make some changes unless you clear the cache.

Cache lifespan

This setting determines how frequently your website cache will be rebuilt. The default value is set to 10 hours. But this is deliberately set on the lower side to avoid conflict with WordPress security tokens called Nonces.

wp rocket cache lifespan

Ideally, this should be set to 12 hours since frequently deleting and rebuilding the website cache will increase the load on the host server. Some shared hosts might disapprove of too frequent cache deletion.

If you update your website only occasionally like once a week then you can even set the cache lifespan to 24 hours. So, a cache lifespan of 12 to 24 hours will be ideal for the majority of websites.

Now that we have tackled the Cache settings in WP Rocket, let’s move to the File Optimization settings.

File Optimization Settings in WP Rocket

These settings will optimize your CSS and JavaScript files making them load faster. Let’s first see how to optimize the CSS files before moving on to the JavaScript files.

CSS files

  1. Minify CSS files

This setting will minimize the size of your CSS files by removing the white spaces and comments in between the CSS files. While this alone may not help to speed up your page load times, it will boost your ‘performance score’ on speed test websites like GTmetrix, Pingdom, etc. that take into account CSS minification while grading web pages.

wp rocket minify CSS settings

Important: Once you minify your CSS files, you should check your website using incognito/private mode to ensure everything is working normally. If things break, you can uncheck this option or exclude certain CSS files from minification that I will discuss in a minute.

  1. Combine CSS files

This setting combines all the CSS files on a page into a single file. The result is a smaller page size that may boost your performance score further but will most likely break things on your site. This is especially true if your website uses the HTTP/2 connection that most websites do nowadays.

So, it’s recommended to keep this option unchecked.

Exclude CSS files

If things break when you minify your CSS files, then excluding certain CSS files from minification in the WP Rocket settings can help restore things.

The first step is to identify the CSS files that are causing problems. To do this, right-click on the element that has broken and click Inspect Element in the browser context menu (for Chrome).

Then identify the plugin that is not rendering the element as it should. In the following example, I am right-clicking on my contact form on the About page to identify the plugin. I can see that the Forminator plugin is loading the CSS files on this page.

Once I have identified the plugin whose CSS files I want to exclude from minification, I will simply enter the plugin path and append (.*).css to the path to exclude all the CSS files of that plugin from minification.

Example: /wp-content/plugins/forminator/(.*).css

This is a great way to minimize your CSS files and at the same time exclude certain incompatible files from the minification process.

  1. Optimize CSS delivery

This setting will eliminate render-blocking CSS from page load. Certain CSS files may block the web page rendering (loading) until they are served. This in turn increases the overall page load time.

The Optimize CSS delivery setting in WP Rocket eliminates the render-blocking CSS and loads it after the other elements have been loaded.

However, one downside of this feature, that I observed in my tests, is that it results in a jarring effect on page load where certain images and elements (that require the render-blocking CSS) move around.

Optimize CSS delivery with WP Rocket

This increases the Cumulative Layout Shift (CLS) which is a Google Core Web Vital metric and lowers the performance score on Page Speed Insights. For this reason, I advise you to not activate the Optimize CSS Delivery feature in WP Rocket.

  1. Remove unused CSS

If you run your webpage through Google’s Page Speed Insights tool, you will notice a recommendation to remove unused CSS from the web page.

Certain plugins add CSS to all the pages on your website even if the CSS files are not required on some pages. This unnecessarily bloats the page size and increases the page load times.

Therefore, you should select the option to remove unused CSS in the WP Rocket settings.

Once you select this option, WP Rocket will process the CSS on your site to remove the unused CSS.

But remember that this is a Beta feature at this point and changes will be made in the future. Also, if something breaks on your site, you can either uncheck this option or exclude the CSS files by adding them to the CSS Safelist using the method that I described earlier under the heading ‘Exclude CSS files’.

Also, if you’re using the Wordfence security plugin, then make sure to add the following WP Rocket IP to your whitelist under Advanced Firewall Rules: 135.125.83.227

You can also activate the Learning mode in Wordfence, for a week, to help it better understand this feature.

JavaScript files

Now, let’s learn how to easily optimize JavaScript files using WP Rocket with a few mouse clicks.

  1. Minify JavaScript files

This feature is similar to CSS minification. Enabling this option minifies the JavaScript files on your web pages by removing white spaces and comments in between the JS files. This should improve your performance score on speed test websites. That’s why you should select the Minify JS files option in WP Rocket settings.

Minify JavaScript files using WP Rocket
  1. Combine JavaScript files

If your site is using HTTP/2, it’s advisable to skip this option since it could break things easily on the front-end. Also, combining JS files may improve your performance scores but may not actually increase your page speed.

For this reason, do not activate this feature.

Exclude JavaScript files

If minifying your JS files breaks something on the front-end, then it is better to exclude those JS files from minification. You can follow the same steps to identify the JS files to exclude as I mentioned under the ‘Exclude CSS files’ sub-heading earlier.

  1. Load JavaScript deferred

Certain JavaScript files block page rendering (loading) until the files are loaded. Such JS files are termed render-blocking and they increase your page load time and lower your performance scores.

Load JavaScript deferred using WP Rocket

To get around this problem, enable the option to load JS files deferred. Now, the render-blocking JavaScript files will get deferred until the page has loaded. That is, they will no longer get in the way of page load.

  1. Delay JavaScript execution

You must’ve heard of lazyload for images when the image is loaded only when it comes in the viewport of the user. Delay JS execution is similar to lazyload but for JavaScript.

It delays the execution of the JS files until the page has become interactive for the user.

Delay JavaScript execution

Enabling this option will boost your Page Speed Insights score further by taking care of the following warnings:

  • Remove unused JavaScript
  • Minimize main thread work
  • Reduce JS execution time
  • Reduce total blocking time
  • Reduce time to interactive
  • Reduce the First Contentful Paint time

In short, delaying JS execution has a big impact on your website’s Core Web Vitals.

Test all changes

I can’t stress this point enough. Whenever you enable any of the CSS and JavaScript options in WP Rocket, you should test the front-end of your website thoroughly to make sure everything works the way it should.

If a page displays any errors or erratic behavior, you can either uncheck that particular optimization or add an exclusion to the exclude box below that setting.

Best WP Rocket Media Settings

Optimizing your images is crucial to scoring high on the Core Web Vitals (CWV) parameters. The Largest Contentful Paint (LCP) core web vital is directly related to your images since, more often than not, the LCP is the largest-sized image on a webpage.

Fortunately, WP Rocket has some cool in-built image optimization settings. These settings can be used together with a dedicated image optimization plugin.

Lazyload images

The lazyload images option loads the images on a page only when the images come in the viewport of the reader. This helps to avoid long loading times since the images are not loaded at once but only when required.

Lazyload images using WP Rocket

If you use a dedicated image optimization plugin like WP Smush or EWWW Optimizer, then lazyload is already enabled on your site and you should skip lazyloading in WP Rocket.

However, if you’re only relying on WP Rocket to optimize your image delivery, then you should enable both options.

Add missing image dimensions

It’s always a good practice to specify the dimensions of images on a page. This way, the browser reserves the required space for the image beforehand.

Add missing image dimensions in WP Rocket settings

If the image dimensions are missing, it can result in an awkward jerk when the image suddenly appears in the viewport of the user. This is also known as Cumulative Layout Shift (CLS), a Core Web Vital that you should take care of.

Disable WordPress embeds

This option will prevent other sites from embedding content from your site and also prevent you from embedding content from other non-allowed sites.

Disable WordPress embed in WP Rocket

This feature helps to save precious bandwidth (data transfer) and make your pages load faster since the JavaScript used for embedding the content will be blocked from loading.

Unless you’re running a content-sharing website where users can freely embed content from your site, you should keep this option checked.

Enable WebP image caching

WebP is the next-generation image file format for web browsers introduced by Google. WebP images are smaller in size compared to JPG or PNG images and boast the same image quality.

Enable WebP image caching in WP Rocket

Image optimization plugins like EWWW Optimizer automatically convert your JPG and PNG images to WebP. So if you’re using a separate plugin for WebP conversion, then you don’t have to enable this option in the WP Rocket settings.

Otherwise, make sure to enable WebP image caching to experience faster site speeds.

WP Rocket Preload settings

Enabling preload settings in WP Rocket will preload various components of a webpage, including, its cache, links, DNS request, and fonts for faster load times. Let’s go through each setting individually.

Preload cache

You should enable the preload cache option for faster performance. Preloading helps to rebuild the cache when you update a post or page or update it. You can also manually preload the cache from the WP Rocket admin bar at the top.

Preload cache settings in WP Rocket

For best results, activate the sitemap-based cache preloading option. This will help WP Rocket to find your content links easily. If you use an SEO plugin like Yoast SEO, RankMath, or All-in-one-SEO, then WP Rocket will automatically detect your sitemap.

If not, you can manually enter your XML sitemaps that should be used for preloading. For example, I have manually entered the PassionWP posts, pages, and category sitemap URLs.

You can usually find your sitemap URLs by navigating to https://yoursite.com/sitemap.xml

Preload links

This setting helps to improve the perceived load time for users but does not actually improve your performance score on speed test sites.

Enable link preloading in WP Rocket

When a user hovers over a link, the cache of that page is preloaded so that when the user actually clicks the link, the page loads almost instantly for that user. You should enable this option since it improves the overall user experience on your website.

Prefetch DNS requests

DNS prefetching will prefetch the external websites that certain scripts require for their smooth functioning like Google Analytics, Google Fonts, Google Ads, Google APIs, etc.

When you visit a website, you will sometimes notice messages like ‘waiting for google-analytics.com’ in the browser bottom. Prefetching DNS requests will make such external websites load faster.

There are certain URLs that you can input in the URLs to prefetch box. For example:

//fonts.googleapis.com
//fonts.gstatic.com
//google-analytics.com
//apis.google.com
//googletagmanager.com
//doubleclick.net (for Google ads)

Preload fonts

This option will help to preload the fonts used on your website. But for this feature to work, you will need to host the fonts locally and specify the path of the locally hosted font file.

This feature is useful if you use fonts hosted on external websites like Google fonts. If you are using one of the system fonts included in your WordPress theme like Arial, Verdana, Times New Roman, Helvetica, etc. then you don’t need to preload the fonts to experience faster page speed.

WP Rocket Database settings

Database optimization is also a built-in feature of WP Rocket so you don’t need to rely on a separate plugin for this purpose.

Using WP Rocke, you can automate the following database management tasks:

  • Cleanup post revisions, auto drafts, trashed posts
  • Cleanup spam comments, trashed comments
  • Cleanup transients (temporary files stored in the MySQL database)
  • Optimize WordPress tables

You can choose to manually perform the database cleanup or schedule the cleanup to run at a scheduled frequency. I recommend setting a weekly frequency for the database cleanup.

Control WordPress Heartbeat API

The WordPress Heartbeat API provides syncing and real-time data transfer between your server and the browser. It is used by WordPress for different tasks like auto-saving posts and pages, displaying admin notifications, checking the site health, etc.

Apart from WordPress, certain themes and plugins also rely on this API for their functioning. So far so good.

What you should know is that the WordPress API makes a call to the admin-ajax.php file once every 15-16 seconds that may overload some servers especially if you’re using a shared hosting server.

So it’s a recommended practice to reduce the background Heartbeat API activity by enabling the Control Heartbeat option. Also, leave the default behavior setting to Reduce activity.

Control WordPress Heartbeat API

Once enabled, WP Rocket will reduce the WordPress Heartbeat API from one hit per one minute to one hit per two minutes.

This should help you save precious server resources and remain in the good books of your web host.

Using Cloudflare with WP Rocket

I’ve run you through the most important settings in WP Rocket. But you might be interested in learning how to use Cloudflare with WP Rocket. Fortunately, configuring Cloudflare for use with your WordPress site is a breeze thanks to the Cloudflare add-on.

All you need to do is enable the Cloudflare add-on within the WP Rocket settings.

Using Cloudflare with WP Rocket

Now head to the Cloudflare add-on settings panel and enter the following Cloudflare credentials:

  1. Global API key
  2. Your Cloudflare account email
  3. Zone ID

Next, choose the Optimal Settings option and save the changes.

Optimal Cloudflare settings for WP Rocket

That’s it. The Cloudflare settings are taken care of with WP Rocket.

Using a CDN with WP Rocket

You’ve seen how easy it is to set up Cloudflare with WP Rocket. But what if you’re using a Content Delivery Network (CDN)? Well, setting up your CDN with WP Rocket is just as straightforward and easy.

Note: Cloudflare is not a CDN. If you only wish to set up Cloudflare, then follow the instructions in the previous section and skip this part.

Head over to the CDN panel within WP Rocket settings and select the option Enable Content Delivery Network.

Integrate CDN with WP Rocket

After this, enter the CDN CNAME(s). You can find this in your CDN account dashboard. An example would be cdn.passionwp.com

WP Rocket CDN settings

The great thing about WP Rocket is that it allows users to add multiple CNAMEs for different content types like Images, CSS & JavaScript, or you can just use a single CDN for all files.

This means that your images can be served from cdn1, CSS from cdn2, JavaScript from cdn3. The choice is yours.

This wraps up this handy guide on the best WP Rocket settings for your website. There are some Advanced Rules in WP Rocket as well but 99% of users can skip them.

WP Rocket Settings: Summary

WP Rocket is not just the fastest cache plugin for WordPress, it is also the easiest to configure. The best part about WP Rocket settings is the extensive control that users receive over every aspect of their website cache.

Beginner users can just activate WP Rocket and 80% of the recommended settings will be automatically applied by the plugin. But if you need more granular control for optimal site performance and speed, go along with this easy-to-follow guide.

If you haven’t bought WP Rocket yet, get it today and your users will thank you for it tomorrow.

Download the WordPress SEO eBook

Go from WordPress SEO Zero to Hero in no time. Also receive 2 Bonus PDFs with this free eBook.

Give it a try. You will thank yourself later.

About Trishan Mehta

Trishan Mehta is a WordPress fanatic since 2009. When not WordPressing, he is busy exploring hidden natural getaways whenever he can grab an opportunity.

Leave a Comment