Black Friday Sale - 15% off Yearly PRO Plans!

Use code BF2022 to get 15% off the first year of any Yearly PRO Plan!

Details and conditions

GTmetrix Performance Blog

News, updates and guides on GTmetrix and general web performance

WordPress Optimization Using WP Rocket

Are you looking to maximize performance for your WordPress site? Here’s a step-by-step guide on using WP Rocket to optimize your WordPress installation.

 


Affiliate Notice: We only recommend products we’ve tested extensively and find genuinely impactful to your page performance. You may find affiliate links to such products below – If you decide to purchase them through the links provided, we may be paid a commission at no extra cost to you.
 

Overview

WordPress is by far the most popular Content Management System (CMS) as it’s easy to create a full-featured website with a lot of functionality thanks to a myriad of available themes and plugins.

We’ve written a WordPress Optimization Guide that walks you through how to improve WordPress website performance using free plugins – but performance gains using such plugins may not be enough.

If you’re looking for a more serious solution to your WordPress performance woes, one of the most popular premium plugins is WP Rocket.
 

 
The GTmetrix team has tested WP Rocket extensively and found it to be one of the most effective and simplest page caching plugins to improve WordPress performance.

In this article, we’ll talk about what WP Rocket does, and how to make the best use of it to optimize your WordPress site.
 

Note: This guide mainly addresses front-end optimization issues only

If your site still suffers from performance issues after following this guide, better hosting or back-end code optimization is what will likely make a real difference. Read our hosting for WordPress websites article for more details.

 


 

How WP Rocket Improves Site Performance

As noted above, WP Rocket is a caching plugin, and a very good one at that.

Caching means making a copy of your HTML and static files (CSS/JS/images, etc.) so that your server doesn’t have to spend time generating your page every time someone visits your site.
 

Page caching stores previously generated content and serves them to the visitor.

 
In addition to caching your site and its contents, WP Rocket can also help with common web performance best practices (e.g., compressing text resources, deferring JavaScript, minifying CSS, setting long browser cache TTL, etc.)
 

More Reasons we Like WP Rocket

  • Simple to Use
    • The user experience of WP Rocket is miles above other caching plugins offered, with an intuitive and easy to understand UI.
       
  • Extensive Documentation
    • WP Rocket has an in-depth knowledge base on how to use it, as well as articles on performance best practices (like we do!)
       
  • Rich Feature Set
    • Aside from caching, you can do a lot with WP Rocket – like lazy loading, loading scripts asynchronously, and more.
       
  • It Just Works
    • Once you install WP Rocket, it starts caching immediately without any guess work. You can see instant results with a reduced TTFB out of the box.

 

WP Rocket is compatible with most hosting providers, WordPress themes, page builders, plugins, and CDNs, so it likely won’t break your site or any of its functionality.

That being said, it’s always a good idea to backup your WordPress installation and test your site after installing WP Rocket to ensure that page functionality isn’t broken or affected in any way. More on this below.

 


 

How to Optimize WordPress with WP Rocket

Follow the steps below to optimize your site with WP Rocket.
 

Step 1) Set a Benchmark with GTmetrix

Before undertaking any optimizations, test your page on GTmetrix.com to establish a performance benchmark.
 

Test your unoptimized page on GTmetrix to establish baseline performance.

 

We recommend logging in (or creating a free account if you haven’t done so already) to analyze your site with GTmetrix as you’ll be able to keep better track of your website performance with Daily monitoring and History Graphs.

It’s also worth re-analyzing your page on GTmetrix after each optimization step so that you can see which items are big wins, and which steps possibly make things worse.

 


 

Step 2) Backup Your WordPress Installation

It’s critical that you backup your WordPress installation before optimization and it’s generally a good practice to back up on a regular basis as well.

While you can use any of the available backup plugins offered on WordPress, we’ve previously covered how to use UpdraftPlus to backup your entire WordPress install, including your database, plugins, themes, uploads, and more.

Use a plugin like UpdraftPlus to backup your WordPress install.

Full instructions available here.

 


 

Step 3) Remove any Unwanted or Unused Plugins

Before we even look at WP Rocket, it’s important to conduct a plugin audit.

It’s common to install many plugins over the course of your WordPress website lifetime, so review your plugin usage and remove the ones that aren’t needed anymore.
 

Look familiar? Be sure to audit your WordPress plugins and deactivate, delete and update plugins you no longer use.

 
Make sure to delete unwanted plugins completely (and not just deactivate them) if you don’t need them anymore.

We also recommend updating all your plugins as they may contain performance enhancements and/or security fixes, among other improvements.
 


 

Step 4) Purchase and Install WP Rocket

WP Rocket is a premium plugin, so you must purchase a subscription (well worth the price in our opinion) before installing it on your WordPress website.

Visit the WP Rocket website, sign up for an account, and purchase your desired subscription plan.

Then, from your Account Dashboard, click on Download WP Rocket to download the plugin installation file.
 

Log in to your WP Rocket account, and click on Download WP Rocket to get the installation file.

 
On your WordPress sidebar, click on Plugins, and then click on “Add New”.
 
From the Plugins menu, click on “Add New” to upload the WP Rocket installation file.

 
Upload the installation file that you downloaded from the WP Rocket website, and the plugin should be added to your WordPress install. Find WP Rocket on your list of plugins and activate the plugin by clicking on “Activate”.
 
 
Click on “Activate” to activate the WP Rocket plugin.

 
You’ve now successfully installed WP Rocket!
 


 

Step 5) Configure WP Rocket Settings

You can do this by either clicking on “Settings” under WP Rocket in the Plugins menu, or by hovering over Settings on your WordPress sidebar and clicking on WP Rocket, or by simply clicking on WP Rocket in the Admin Bar (at the top of your admin page).
 

To open the plugin’s settings, hover over “Settings” and click on WP Rocket or click on WP Rocket in the Admin Bar at the top.

 
You should now see your Dashboard, showing your subscription information, and a host of other settings on the left.
 
The WP Rocket Dashboard.

 

Go through each of these sections and configure the following:
 


 

a) Cache

This section allows you to modify how WP Rocket caching will work.
 
 

Ensure that your page is cached for mobile visitors.

 
Under “Mobile Cache”, ensure Enable caching for mobile devices is checked.

  • If you have a dedicated theme for your mobile site, enable the Separate cache files for mobile devices option, otherwise leave this option unchecked.

 
 

You can cache pages for logged-in users if desired.

 
Under “User Cache”, you can decide if you wish to cache pages for logged-in users (e.g., you have a membership website, restricted-content, etc.).

Check the Enable caching for logged-in WordPress users option if you want to do so.

 
 

You can adjust how long you wish WP Rocket to keep cached content.

 
Lastly, you can adjust the Cache Lifespan if needed (i.e., lower number of hours if you update your page more often) – we recommend to keep it defaulted to 10 hours.

Click on Save Changes when you’re done.

 


 

b) File Optimization

In this section, you can additionally optimize your CSS and JS files for improved performance.

Here are our recommended settings:
 
 
Under “CSS files“, ensure Enable Minify CSS files is checked and leave the Combine CSS files option unchecked, unless you are running on HTTP/1.1.

 

Enable “Minify CSS files” to reduce CSS filesizes.

 
You’ll see a warning that CSS minification could break your site – click on “Activate Minify CSS” to continue.
 
You’ll be warned that minification could break your site – click “Activate Minify CSS” to continue.

 
If you find that CSS minification breaks your site or affects site functionality in any way, disable (uncheck) this option.
 
 
If you’re finding certain CSS files break after enabling the above options, you can exclude them from minification/combination in the Excluded CSS Files field.
 
Exclude CSS files from minification/combination by inputting their URLs here.

 
Input the full URLs of the CSS files you wish to exclude from minification/combination operations, and WP Rocket will serve them individually in their original state.
 
 
Scroll further down and enable Optimize CSS delivery; leave it defaulted to “Load CSS Asynchronously.”
 
Enable “Optimize CSS delivery” with the “Load CSS Asynchronously” option.

 
If you run into any styling issues as a result, refer to WP Rocket’s documentation on using Fallback critical CSS.
 
 
Under “JavaScript files“, ensure Minify JavaScript files is checked and leave the Combine JS files option unchecked, unless you are running on HTTP/1.1.
 
Enable “Minify JS files” to reduce JS filesizes.

 
Again you’ll get a notice indicating JS minification could break your site – click on “Activate Minify JS” to continue.
 
You’ll be warned that minification could break your site – click “Activate Minify JS” to continue.

 

If you find that JS minification breaks your site or affects site functionality in any way, disable (uncheck) this option.
 
 
Scroll further down and enable the Load JavaScript deferred option.
 

Enable “Load JavaScript deferred” to help with render-blocking.

 
If any of these options break your site or affect site functionality you can exclude certain JavaScript files from minification/deferral by including their full URLs in the respective Excluded JavaScript Files boxes.
 
Exclude JS files from minification/combination/deferral by inputting their URLs here.

 
Lastly, leave the “Delay JavaScript execution” option disabled, as it requires a good understanding of which scripts are critical for your initial page load. Learn more about this feature here.

Click on Save Changes when you’re done.
 


 

c) Media

In this section, you can apply image and video optimization strategies to all your uploaded media content.
 

Enable all options in the Media section.

 
Ensure all the options in this section are enabled:
 

  • LazyLoad
    • Enable for images
    • Enable for iframes and videos
      • Replace YouTube iframe with preview image
         
  • Image Dimensions
    • Add missing image dimensions

 
 
Important – Don’t lazy load the LCP image!

Make sure you exclude above-the-fold images like your banner or slider images (especially the LCP image) by specifying exclusions (e.g., file names, CSS classes, specific domains, etc.) in the provided Excluded images or iframes field.
 

Be sure to exclude your LCP element from being lazy-loaded!

 
Click on Save Changes when you’re done.
 


 

d) Preload

In this section, you can define how WP Rocket preloads your cache, and other related options.
 

Under “Preload Cache“, enable Activate Preloading. WP Rocket will automatically preload your cache based off links on your homepage, and/or when you add or update content.
 

Enable “Activate Preloading” to have WP Rocket automatically preload your cache.

 
You can also specify sitemaps for WP Rocket to preload if you have them available. Enable “Activate sitemap-based cache preloading” if you do, and input the URLs of the sitemaps (in XML format).
 
WP Rocket can also preload pages based off defined sitemaps.

 

Scroll further and under “Preload links“, ensure Enable link preloading is checked.
 

“Enable link preloading” preloads the cache for that link when a user hovers over it.

 
This ensures that the page for that link is preloaded when a user hovers over it for more than 100ms or more.
 
 
Under “Prefetch DNS Requests“, you can improve DNS load times of third-party requests by prefetching external domains.
 
Improve DNS connection times to external domains by prefetching them.

 
Just input the hostnames of each third-party request used (no http or https) in the field provided.
 
 
Finally, if you have self-hosted fonts, you can preload them by specifying their file names in the Fonts to preload box.
 
Improve browser font discoverability by preloading them.

 
Note that we recommend specifying only a few fonts (maximum of 3) as preloading fonts can have a significant browser overhead.
 
 
Click on Save Changes when you’re done.
 


 

e) Advanced Rules

This section is for more advanced options – mostly related to pages and scenarios you may want to exclude from caching. If you don’t need to exclude any page from caching, ignore this section and move on to the next set of options.

If you do need to exclude certain pages from caching, refer to WP Rocket’s documentation for more information on these advanced rules.
 


 

f) Database

This section allows you to clean up your database by removing revisions, drafts, transients, comments, and other types of backend overhead.
 

WP Rocket can also help clean up a bloated database if needed.

 
This step is not entirely required, especially if you need to retain some of these revisions/drafts or if they aren’t necessarily bloated.

If you do decide to cleanup your database, make sure you backup your WordPress installation so that you can recover it if something goes wrong.

Use your best judgement to determine if you want to proceed with this. Keep in mind that your site could be fast enough without this step but proceeding with database cleanup can provide a considerable boost in some cases.

Tick the desired boxes based on which parts of the database you want to clean up, and then click on Save Changes and Optimize.
 
 
 
That’s it for the main WP Rocket options!
 


 

Step 6) Analyze Your Page Again

Once you’ve attempted all of the above, analyze your site again (via GTmetrix.com) and see the difference in performance!

You should see improvements in the following metrics:

  • GTmetrix Grade
  • Performance/Structure Scores
  • Time to First Byte (TTFB)
  • First Contentful Paint (FCP)
  • Largest Contentful Paint (LCP)
  • Speed Index (SI)
  • Onload Time

You may also see some improvement in the Total Blocking Time (TBT) and Time to Interactive (TTI) metrics.

In general, you should see improvements in the following audits:

  • Reduce initial server response time
  • Eliminate render-blocking resources
  • Serve static assets with an efficient cache policy
  • Minify CSS/JavaScript
  • Reduce unused CSS/JavaScript
  • Reduce JavaScript execution time
  • Minimize main-thread work
  • Avoid chaining critical requests
  • Avoid enormous network payloads
  • Defer offscreen images
  • Don’t Lazy load LCP image

 

Test your page again with GTmetrix – you should see significant improvement!

 
Refer to our documentation to learn more on these metrics and audits.

 


 

Important Notes

The steps mentioned above are meant to be a general guide on optimizing your WordPress site with WP Rocket.

However, they do come with a few caveats and things to be concerned about.

We breakdown the most common and important ones below:
 


 

1) Test After Minifying and/or Combining Scripts

Minifying and/or combining scripts can break functionality on your website.

  • Minification essentially goes through your scripts and removes extraneous data like comments, formatting, whitespace and other things that computers don’t need to read.
  • Combining CSS/JavaScript files takes the contents of each individual file and aggregates them all into a single file.

Because these processes modify data, they may break functionality due to coding typos, syntax errors, duplicate function names, etc.

Make sure to check your site functionality after enabling the minification/combination features. If you find things are broken, disable all minification/combination features, and re-enable them one-by-one to find out which feature is causing the issue.
 
 

Note for combining stylesheets/scripts

Combining CSS/JavaScript files is only recommended for HTTP/1.1 pages.

If your hosting environment supports HTTP/2, combination of files is likely not needed, as the HTTP/2 protocol has improved connection concurrency for requests.

However, if you have more than 100 CSS/JS requests, then your page may likely benefit from combination of files, even if you’re on HTTP/2.

We’ve written an article to help you decide whether you should combine your CSS/JS files.
 


 

2) Clear Your Page Cache After Making Site Changes

Whenever you make major updates to your site, like changing the images or modifying the CSS/theme, it is recommended to clear your page cache to ensure you’re serving the latest version of the site.

In WP Rocket, you can do this in multiple ways:
 
 

From the Dashboard

On the WP Rocket Dashboard, click on the Clear Cache option under “Quick Actions“.
 

Click on “Clear Cache” under the Quick Actions menu on the Dashboard to purge your site cache.

 
 

From the Admin Bar

On your WordPress Admin Bar at the top of the page, hover over WP Rocket to reveal more options – click on Clear Cache.
 

You can also purge your site cache by clicking on “Clear Cache” from the WP Rocket Admin bar settings.

 

Purge cache for specific pages

If you only need to clear the cache on specific pages, you can do this in 2 ways:
 
 
From the Pages Menu

  • On your WordPress sidebar, click on Pages.
  • Hover over the required page, and click on Clear this cache.

 

From the Pages menu on your WordPress sidebar, hover over the required page and click on “Clear this cache”.

 

You can also clear the cache from the specific WordPress post or page itself, by clicking on Clear Cache in the Publish box.
 

From the WordPress Editor, click on “Clear cache” under the Publish box.

 

Preloading the cache

Note that WP Rocket will automatically preload your cache after you’ve cleared it, if you’ve selected the Activate Preloading option as mentioned above.

If not, you can also manually preload the cache by clicking on the Preload cache option, either in the Dashboard or from the Admin bar.
 

You can also manually preload your cache from the Dashboard or the Admin Bar.

 


 

3) Additional options

There are other additional options available with WP Rocket (CDN, Heartbeat, Add-ons, Image Optimization). Heartbeat control is automatically activated, so the majority of users don’t need to do anything about this option.

Content Delivery Networks (CDN) can help your site load faster globally by storing and serving your static resources through server nodes all around the world.

While CDNs are an appropriate solution for most websites looking for speed improvements, not every site necessarily needs one. We’ve written an article on what CDNs are and whether you need to use one.

If you decide to use a CDN, you can integrate it with WP Rocket to prevent any potential incompatibilities that may arise due to conflicting settings.

 

Cloudflare/Sucuri CDNs

If you specifically use Cloudflare or Sucuri, go to the “Add-Ons” settings and scroll down to “Rocket Add-ons”.

Toggle the respective Add-on status of your CDN to “ON” and then click on Modify Options. You can now enter your credentials to integrate them with WP Rocket.
 

Use the “Add-Ons” Settings to easily integrate Cloudflare and Sucuri CDNs with WP Rocket.

 

Other CDNs

If you use a CDN from any other provider, you can integrate them by navigating to the “CDN” settings and enabling the Enable Content Delivery Network option. Add your CDN CNAMES and click on ADD CNAME.
 

Use the CDN settings to integrate other CDNs with WP Rocket.

 


 

Summary

WordPress is the most popular CMS and allows you to easily create a full-featured website. However, it’s important to optimize your site performance for a good user experience.

WP Rocket is a very good caching plugin that also applies some of the most common web performance best-practices to your site. This makes it a great overall fit for most websites, both in terms of compatibility and improving site performance.

If you have a WordPress site and are aiming to maximize your site performance for all your visitors, consider purchasing WP Rocket and giving this guide a try to make the best use of it.
 

Optimize WordPress Performance with WP Rocket

WP Rocket

If you’re serious about improving your WordPress performance, WP Rocket provides a powerful yet simple optimization process for your WordPress website with just a few clicks.

Get WP Rocket today

Cookie Policy

By clicking "Allow All" you agree to the storing of cookies on your device to enhance site navigation, analyze site usage, and assist in our marketing efforts. View cookie details

Deny Allow All
×