In this guide, you'll learn how to get the most out of WP Rocket! Step by step, we show you how to go through the plugin's setup and how to make your website faster. We use our own website to see how much faster the site becomes after installing and configuring WP Rocket.
What is WP Rocket?
Chances are you already have an idea what WP Rocket is for: it's a caching and performance plugin that helps you make your WordPress website faster. The great thing is that you don't have to dive into the code yourself to do so. With the right settings, the plugin takes care of this for you.
WP rocket is a popular plugin. By now, according to WP rocket itself, the plugin is on more than 5 million websites worldwide. And that while there is no free version of the plugin. So for many site owners, the investment in faster load times and better performance is undoubtedly worth it.
A single license at WP Rocket costs $59, which is €52.61 at the time of writing at the current exchange rate.
Installing the WP Rocket plugin
Because WP Rocket is a premium plugin, you won't find it in the standard WordPress plugin library. You buy the licence directly at WP Rocket's website. After that, you will get a download link to download the plugin. On your WordPress website, you can install the plugin by uploading the zip file. Go to Plugins > New plugin, and choose Plugin upload.
Getting started with WP Rocket
WP Rocket setup is not that difficult at all. The plugin is nice and clear, but you need to know which settings you do and don't turn on. Some options give immediate results, others can actually break things on your site if you use them incorrectly. That is why it is smart to test every adjustment, preferably first in a test environment of your website.
There are a few things you need to pay extra attention to. Do you have an online shop or a site where the content is different for each visitor? Then you need to be careful with caching, because you don't want to use caching on every page. For instance, you do not want to cache the shopping cart page, which is different for each visitor who adds products. You also need to be careful if you use a lot of animations built with JavaScript. This is because WP Rocket has an option to load these files only at a later time, which makes the website faster, but often makes these animations stop working.
The handy thing is that WP Rocket's dashboard is clearly divided into different sections, such as caching, files, media and preload. In this guide, we'll walk through those sections step by step and show you which settings are best to use and what to consider.
Dashboard - tab
The tab called 'Dashboard' doesn't actually have any optimisation settings you can adjust. This tab only serves as an overview and shows your licence, for example, and you can clean up and reload the cache there. Handy, because only after the old cache is deleted can you see if new tweaks work. By the way, WP Rocket automatically removes the cache itself after any changes to settings. So you don't have to pay attention to this yourself.
File optimisation - tab
In the tab File optimisation can optimise your CSS and JavaScript files. Note that some settings can cause problems. After adjusting settings, always test your website properly.
- Reduce CSS files: Removes unnecessary spaces and comments from CSS files.
- Optimising CSS delivery: Merges multiple CSS files to reduce the number of HTTP requests.
- Reduce JavaScript files: Removes unnecessary spaces and comments from JavaScript files.
- Combine JavaScript files: Merges multiple JavaScript files to reduce the number of HTTP requests.
- JavaScript delayed loading: Ensures that JavaScript files are loaded only after the page content, improving loading time.
- Defer JavaScript execution: Sets JavaScript to execute only after a short delay, reducing the initial loading time.
Because CSS takes care of the visual layout of your website and because JavaScript triggers moving elements (such as animations, among others), you need to check carefully what these changes do to your website. It is smart to test each option separately. So when you tick one of the options, check what it does to your website first.
Open your website after each modification and then go through several pages. Check whether the styling is still correct and check whether functionalities on your website still work properly. If everything works well, you can move on to the next setting. If not, it is better to leave the setting option off or to exclude certain files.
Thus, under the various options you will see the option to exclude files from optimisation. This is quite some detective work because you need to find out which files are necessary for styling or for functionality that no longer works due to optimisation. You also need to have some understanding of code to figure out which files are involved.
Finding file URLs
You can find the files in the following way: using the F12 key on your keyboard, open your browser's dev tools. Now you can look for the right files in the website's code.
In the example I explain below, we are going to look for the CSS file and the JavaScript file that will cause the carousel/slider displayed on our homepage state works properly. Hypothetically, certain WP Rocket settings could break the carousel. When the 'JavaScript delayed loading' setting is on, the carousel actually stops working! We found this out by optimising the website itself with WP Rocket.
CSS file url detection
I use Google Chrome as a browser to look for the files. To find CCS files, I use the 'elements' tab in dev-tools. There, in the top left corner, I choose the option 'Select an element in the page to inspect'.
I then select the carousel to get to the right piece of code.
In the code, you can see that the carousel has the CSS class 'brxe-carousel slider-smooth'. When you click this piece of code, you will see in the 'Styles panel', which is on the right, the link to the CSS file that gives styling to the carousel. Here, right-click on the link and then choose the 'Copy link address' option.
You can then add this link within WP Rocket's settings to exclude the file from CSS optimisation.
JavaScript url stores
In the 'Sources' tab, you will find JavaScript files. Unfortunately, it is not immediately clear there which file belongs to the carousel on our homepage. Therefore, it is important to check whether the carousel belongs to your theme or to a plugin, for example. In our case, the carousel is part of Bricks, which is the theme on our website.
Perhaps you yourself work with a plugin like Elementor or use another plugin that allows you to insert a slider in Gutenberg. In that case, you need to look in the plugins folder to find the right file.
As you can see below, we were able to find the file named 'swiper.min.js?ver=8.4.4'.
Again, we can copy and paste the url of the file where JavaScript files are excluded.
Conclusion file optimisation:
So it takes some knowledge to set the settings under the 'File Optimisation' tab all the way right. You might choose to just leave certain options off. If you still want to get everything out of the plugin, it is often a matter of a lot of testing and trying.
You might not be able to directly exclude the right file from optimisation. In that case, try to exclude several urls and see if the functionality works properly after that. If so, incrementally remove urls from the list you added until you figure out which one is the right one to add.
Media - tab
The Media-tab helps you optimise images and other media elements. You will find the following options within this tab:
LazyLoad
This loads images only when they come into view. Which reduces the loading time for the visitor because the rest of the page can be loaded fixed. You can enable this for images, CSS backgrounds and for iframes and videos. Again, after checking the settings, it is wise to test and check that it has no negative effects on the website.
If it does, you can exclude images from Lazyload by putting the file url in the box for exclusions.
Optimising images
With this option, WP Rocket ensures that all images on your page are given a width and height attribute. This means that the browser already knows how much space an image takes up, even before it is fully loaded. It prevents the layout of your page from shifting during loading, giving your visitors a more stable and pleasant reading experience.
Fonts
Here you can set fonts (the fonts on your website) to load faster above the fold (the part of the website that is directly in view). Also, if you use Google Fonts, you can host them on your own website. That means WP Rocket places these fonts directly on your website and they don't have to be retrieved from Google itself when the page is called. This saves a lot in terms of loading speed.
Preloading tab
The Preloadingtab makes your website load faster by pre-loading certain data.
- Cache preloading: Loads the cache for all pages based on your sitemap, so visitors always have a fast experience.
- Preload links: Loads links that the user is likely to follow already in the background.
Advanced rules - tab
In the Advanced Rules tab, you can tell WP Rocket exactly how it should handle certain pages or users. This is useful for larger or more complex sites, such as web shops.
Never cache URLs: Here you specify pages you never want cached. Think, for example, of the shopping cart or the checkout page. This way, every visitor will always see the most up-to-date version.
Never cache cookies: Sometimes websites use cookies to make certain pages dynamic. Add those cookies here so that those pages are also never cached.
Never cache user agents: You can exclude specific devices or browsers (user agents) from caching. Useful if certain visitors always need to see a fresh version.
Always empty URLs: These are pages you always want to refresh, for example your homepage. This way, you make sure visitors never see an old version.
Query strings caching: Some pages have extra information in the URL, such as filters or search queries. Here you can specify which of those pages may be cached, so that they load faster.
Database - tab
The Database-tab helps you keep your database clean and optimised. A clean database ensures faster load times and better performance.
- Cleaning up messages: Deletes drafts, revisions and trash items.
- Cleaning up comments: Deletes unwanted or marked responses.
- Cleaning up transients: Removes expired transients that take up unnecessary space.
- Database cleaning: Removes unnecessary data such as pingbacks and trackbacks.
- Automatic cleaning: Sets to automatically clean up the database at regular intervals.
CDN - tab
A CDN (Content Delivery Network) is a network of servers around the world that stores and delivers your website files from the server closest to your visitor. This is useful if you have visitors to your website who are not located in the Netherlands. So this option is especially nice when you have a lot of international visitor traffic on your website, for example.
In WP Rocket, you will find the following settings in this tab:
- RocketCDN: WP Rocket has its own CDN that you can easily enable. Once you activate it, your images, scripts and other files are automatically delivered over this network. You need to do almost nothing yourself.
- Using your own CDN: Do you have a different CDN? That's also possible. Just enter the details of your CDN provider. WP Rocket will then make sure your files are delivered over that network.
- Cloudflare: Are you using Cloudflare? Then add your API key. WP Rocket will then automatically link itself so that everything works smoothly.
In short: with a CDN, you make sure your site loads faster, for everyone, everywhere. RocketCDN is the easy option, but you can also use your own CDN or Cloudflare if you like.
Heartbeat - tab
The Heartbeat API from WordPress is a small system that lets your browser and the server talk to each other. For example, your site knows if someone is still active in the backend. The downside is that this communication sometimes takes extra server power.
In the Heartbeat tab you can manage this:
- Adjust frequency: You decide how often this communication takes place. Less often means less load on your server.
- Disable on certain pages: You can disable the Heartbeat API in places where it is not needed, such as the backend or on specific pages. This way, you save server resources without affecting your site functionality.
In short: with these settings, you keep the server nice and light without breaking anything on your site.
Other tabs
WP Rocket has a number of other tabs. We are not going to discuss these in detail here, as they are mainly for offering additional products. If you're curious, you can always check them out for yourself - but for most websites, the settings we've covered are the most important.
Optimisation of our own website
As a test, we optimised our own website with WP Rocket. First, we did a test to see how fast the website is without a caching plugin. In this, the score for mobile came out to 72 points. We did this test using Lighthouse, a feature in the dev tools of your Chrome browser.
To access it, open your dev tools again by clicking F12 on your keyboard. There you will find the tab called 'Lighthouse'. Make sure you are not logged in to your website and preferably use in an incognito tab to perform the test as well as possible.
During optimisation, we ran into a few things. For instance, the carousel, which we discussed earlier, was suddenly no longer visible when we checked the 'Defer JavasScript execution' option. The 'Javascript deferred loading' setting then again caused the carousel to be fixed and not rotate. By excluding the file URLs from this widget, it worked as it should again.
In the end, we once managed to achieve a score of 93 for loading on mobile. So a good score which shows that the plugin was really able to boost the website!
Conclusion
Speed is important, but not all-important. The more things happen on your website - such as interactive elements, carousels or animations - the slower it often becomes. As a result, websites that are fairly simple in design often load faster, but that does not mean they are attractive to visitors. So it's all about finding a middle ground: a site that looks good and offers enough, but is still nice and fast.
