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.
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.
- 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!)
- 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.
- 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.
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.
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.
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.
On your WordPress sidebar, click on Plugins, and then click on “Add New”.
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”.
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).
You should now see your Dashboard, showing your subscription information, and a host of other settings on the left.
Go through each of these sections and configure the following:
a) Cache
This section allows you to modify how WP Rocket caching will work.
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.
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.
- Note that there may be several caveats and potential conflicts associated with a “user cache”, so leave this option disabled if you’re unsure.
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.
You’ll see a warning that CSS minification could break your site – click on “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.
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.”
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.
Again you’ll get a notice indicating JS minification could break your site – click on “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.
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.
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.
Ensure all the options in this section are enabled:
- LazyLoad
- Enable for images
- Enable for iframes and videos
- Replace YouTube iframe with preview image
- 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.
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.
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).
Scroll further and under “Preload links“, ensure Enable link preloading is checked.
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.
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.
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.
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
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“.
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.
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.
You can also clear the cache from the specific WordPress post or page itself, by clicking on Clear Cache in 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.
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.
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.
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
Optimize WP performance with just a few clicks using WP Rocket.
Get page caching, JS and CSS script optimizations, database cleanup and more!
