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.
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.
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.
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
- 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.
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.
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.
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.
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.
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
- 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.
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.
- 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.
This is a great way to minimize your CSS files and at the same time exclude certain incompatible files from the minification process.
- 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.
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.
- 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:
You can also activate the Learning mode in Wordfence, for a week, to help it better understand this feature.
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.
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.
It delays the execution of the JS files until the page has become interactive for the user.
Enabling this option will boost your Page Speed Insights score further by taking care of the following warnings:
- 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
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.
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.
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.
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.
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.
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.
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.
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
This setting helps to improve the perceived load time for users but does not actually improve your performance score on speed test sites.
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:
//doubleclick.net (for Google ads)
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.
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.
Now head to the Cloudflare add-on settings panel and enter the following Cloudflare credentials:
- Global API key
- Your Cloudflare account email
- Zone ID
Next, choose the Optimal Settings option and save the changes.
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.
After this, enter the CDN CNAME(s). You can find this in your CDN account dashboard. An example would be cdn.passionwp.com
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.
- Elementor Review: Pros and Cons of Elementor and Is It Really Worth It in 2021? - September 7, 2021
- Perfmatters Settings and Review: Performance Booster for WordPress - August 22, 2021
- The Best (and Optimal) WP Rocket Settings for 2021 - August 12, 2021