I have to be honest until WP Rocket came along I had never considered paying for a WordPress caching plugin, but WP Rocket has changed everything in this area.
I have been a WPO consultant and also a WordPress consultant for more than 10 years and, during this time, I have never seen a trajectory and a vision like that of WP Rocket.
Let’s go back to the year 2014, the year in which WP Rocket began to sound like a caching plugin for WordPress.
At the time, there were several options for implementing caching in WordPress and for optimizing CSS and Javascript files, along with some interesting tweaks.
The problem is that all the plugins that allowed us to do this were very difficult to configure, so the ability to improve the speed of a website hosted on WordPress was only available to a few.
Some of the plugins that were there at the time were: WP Super Cache, W3 Total Cache, WP Fastest Cache, Flexicache, HyperCache, etc. Some of these don’t exist anymore and others, although they still exist, are obsolete caching plugins for websites that can currently be made using WordPress.
The point is that WP Rocket arrived and made it easy to implement certain WPO techniques, such as CSS and Javascript file optimization, prefetching of DNS requests, the ability to optimize CSS delivery, and the ability to minify Javascript and CSS files automatically. easy. As a result, they have been left with a very high market share.
To the point that, right now, there is a big difference between using WP Rocket and not using WP Rocket, since some features (like removing unused CSS) are not supported by any other caching plugin.
WP Rocket – Best WordPress Caching Plugin
Let’s qualify this since I don’t think that WP Rocket is the best caching plugin for WordPress but it is an excellent option, in many cases, due to how well it adapts to most WordPress and how easy it makes it. certain tasks.
There are plugins like W3 Total Cache that can give WP Rocket a complete twist and, when working with complex WordPress installations, are much better and more scalable options.
In the end, WP Rocket is a plugin that allows you to implement page caching, minify CSS and Javascript files, combine CSS and JS files, apply some resource hints, and optimize the served code, among other things. But it lacks object caching in Memcached or Redis, as well as query caching in Memcached or Redis, etc.
For this reason, I don’t think WP Rocket is the best caching plugin for WordPress, but I can say that it is the one that usually adapts best to most simple websites: blogs, corporate websites, small eCommerce, etc.
Why WP Rocket and not another? Well, because I have not found anything like it when it comes to optimizing a WordPress page.
What does WP Rocket do?
WP Rocket is what we generally call WordPress a caching plugin.
If we are a bit more specific, we can say that it is a page caching plugin saved to disk with CSS and JS file optimization functionalities.
Additionally, it allows you to implement a few WPO techniques in addition to caching:
- Optimize the CSS and JS: minify, combine, asynchronous loading, etc.
- Delayed loading of Javascript scripts.
- Cleanup of unused CSS classes on web load.
- Implementation of Lazy Load on images and iframes.
- Improved CLS by adding dimensions as an attribute to images.
- Implementation of a CDN: own or RocketCDN.
- Heartbeat API pulse management o admin-ajax.php-
- Database cleanup (padding functionality, from my point of view).
Configure page cache in WordPress
Precisely the page cache is the strong point of WP Rocket, it is the reason it was born, and the truth is that it does it very well.
I have done some performance and response tests over the years: in all of them, I have seen that WP Rocket serves the page cache in a very optimized way.
The simple fact of activating WP Rocket already improves the speed of our website, since the cache is automatically activated when activating the plugin and in the interface, we do not have any option to deactivate it.
That said, if we go to the WP Rocket settings we will have several panels with options that directly affect the cache settings.
Obviously, the section called “Cache” is to configure this part, but we still have to dig a little deeper to adjust some things.
In the section of the previous image we can configure some useful things:
- Choose whether we want to serve cache on mobile devices or whether we want to serve a separate mobile and desktop version of the cache. This is done when there is some dynamic code that is executed conditionally or when we have a specific mobile version (note, the responsive does not count).
- Choose whether we want pages from the cache to be served to authenticated or connected visitors. This can be useful to improve performance on dynamic websites created with WordPress, such as a WooCommerce online store, but we must be careful with the LOPD by correctly excluding some URLs, such as checkout or cart.
- We will be able to define the cache lifetime, also called TTL. This is the period of time it will take to “expire” to create a new cache version. In static websites and blogs I recommend putting “0” because, unless you have something strange, the cache emptying policies will take care of purging the cache when something happens (when new content is published, a new comment, etc.).
This is the configuration that I have in my blog (the one in the previous screenshot), since I use a function to modify the web header depending on whether the user enters from a computer or from a smartphone.
How to disable WP Rocket
As we have said before, you cannot disable WP Rocket from the interface. For this, we need a deactivation plugin that they offer us on the official page that will deactivate the WP Rocket page cache.
This deactivation plugin is enough to install it, activate it and you don’t have to do anything else:
- https://docs.wp-rocket.me/article/61-disable-page-caching
Of course, if you don’t want to use any of WP Rocket’s functionality, you can disable the plugin directly. But if you want to use all the features and optimizations, but do without the page cache, you can use this deactivation plugin.
If you are going to use another caching plugin or a server-side cache and WP Rocket to optimize code, beware of cache inconsistencies due to TTL overlapping and some resources showing a 404 error.
Exclude files and pages in WP Rocket
One of the most interesting sections of the WP Rocket configuration, and also one of the ones that make it an adaptable plugin for most situations, is the section called “Advanced Rules”:
I can’t give you exact information on how to configure this section, since this really serves to adapt WP Rocket to your case and to the incompatibilities that may arise.
But I am going to list all the options that we have in this “Advanced Rules” section and what we can do with them:
- Never cache these URLs: This allows us to add full or regex URLs that will never be cached and therefore never served cached. It may be attractive to add dynamic URLs here, but you also have to consider performance.
- Never cache these cookies: This allows us to specify cookies that, when detected in the visitor’s browser, do not serve the cached version of WP Rocket.
- Never cache these user agents: This allows us not to serve cached pages to certain user agents on users’ browsers and devices. This in some cases can allow us to better define the difference between computer and mobile.
- Always purge these URLs: This allows us to add URLs that will always be purged on cache flush, regardless of the cache flush policies implemented by WP Rocket. This is useful precisely for modifying WP Rocket’s cache flushing policies.
- Cache these query strings: Normally query string versions of a page are served with the “root” cache and not as a version-specific cache. In cases where the query string modifies the content of the web, we can specify that a certain query string is allowed to create specific cache versions.
Also, in the “Optimize Files” section we have some option boxes that will allow us to exclude specific CSS and JS files during CSS and Javascript optimization. But we will see this a little further down.
Precisely, these options are the ones I like in a WordPress cache plugin since they are the ones that take the configuration much further.
WP Rocket is not the most “powerful” caching plugin in this area, but it works to solve problems in 90% of the situations.
Preload cache in WP Rocket
Another feature that I love in a WordPress caching plugin is cache preloading.
A poorly managed cache preload can bring you down the web; in fact, years ago the WP Rocket precache bot would bring you down directly.
What a precache bot does is traverse the entire WordPress website as if it were a visitor, forcing the caching plugin to create a cache for any page the bot passes through.
From this section, we can activate the preload and select to see the pages that the preload bot has to go through using the sitemap.xml of the site. On the other hand, it is also capable of detecting some well-known WordPress SEO plugins (RankMath SEO, Yoast SEO, etc.) and allows us to select their sitemaps to follow. If it does not detect any, then we will have to put it by hand in the corresponding box.
Another thing that we can manage from here is the preloads, which I will explain separately:
- Preload links: This causes a cached page to be preloaded (if the cached version is not created) when we mouse over a link. Fully recommended now. It is supported by a JS library that detects the links and applies the “Prefetch” resource hint to them based on the configuration, in this case, the hover
- Prefetch of DNS requests: With this, the resource hints that «Prefetch DNS» is applied. In this box, we must add all the external URLs without protocol in order to carry the DNS lookups. With this, we greatly speed up the DNS requests from the first load of the web by the visitor.
- Preload Fonts: It is about preloading the font files with a resource hint “Preload” in the header. This slightly speeds up the loading and rendering crashes that are commonly detected in Google PageSpeed Insights.
Precache seems to me to be a key option in a cache plugin to improve speed. The only problem is that, if we have very limited hosting, that bot browsing our website at full speed can crash the website or greatly extend the loading time for our visitors by exceeding the use of resources.
On the other hand, the truth is that I do not pay too much attention to the preloading of DNS requests, since at the loading time level we did not get much improvement with this resource hint. For this reason, you can see in the screenshot that I have it empty, although for my clients I usually implement it to make it perfect.
Regarding the preloading of links, I think that it is currently essential, although we must be careful with the power of our hosting and not fall short of resources.
Optimize CSS and JS files with WP Rocket
Along with the cache, the optimization of Javascript and CSS files is another of WP Rocket’s strong points for the user.
Normally implementing WPO techniques that optimize the loading of the resources loaded by WordPress is usually something complex even for profiles with a lot of experience in technical issues.
In WP Rocket we have a whole section called “Optimize Files” where we find all the functionality related to Javascript files and CSS files.
We must remember that this type of CSS and Javascript file optimization plugin does not work on the resources themselves, but on cached copies that are later used to serve visitors.
In this part, we are going to explain all the features that WP Rocket has for Javascript and CSS so that you can improve the Google PageSpeed score and also the speed of your website.
Minify Javascript and CSS files with WP Rocket
Minifying files is one of the simplest and oldest WPO techniques, but at the same time, it is one of the most complex in CMS-based websites (such as WordPress) because it is done automatically using patterns.
During the minification process, the Javascript and CSS files are cleaned so they weigh less. Being lighter, they download faster in the visitor’s browser and improve speed.
What is done to clean these files when minifying? Well, usually this:
- Remove line breaks.
- Remove blank spaces.
- Delete comments.
The essence is to remove all characters that take up space in the files but are not interpretable by the visitor’s browser.
This is not very sciencey for either JS or CSS. In both cases we have a box to activate and a text box to add exclusions (shared with the combo):
For Javascript, the minify options are exactly the same, but they are further down.
Now comes the important topic.
Personally, I recommend that you be careful with Javascript minification since when minifying CSS there is usually no problem, but when minifying JS things change and some functionality problems may appear. I prefer to do asynchronous loading or delayed loading of Javascript, before messing around with adding exclusions in order to properly minify Javascript files.
Another issue is that as in the case of “Advanced Rules”, I cannot tell you exactly what to put in the text boxes to exclude files since it totally depends on the combination of themes and plugins that you have in your WordPress. The only thing I can do is recommend you enable CSS minification first and be careful with Javascript minification.
Combine JS and CSS with WP Rocket
Combining files of the same type is a WPO technique that has been made obsolete with the advent of HTTP/2 and HTTP/3, although this is only in theory.
I don’t usually implement it, since combining JS and CSS files is usually more of a problem than a solution for certain implementations.
What is done when combining JS and CSS files is to join several files of the same type into a single file, reducing the number of HTTP requests made when loading the web.
What are the dangers of combining files of the same type? That current websites are quite complex and it is normal to find dependencies (files that depend on other files). This causes serious problems that we need to fix with the text boxes to exclude files. And, in some cases, we end up adding so many exclusions that we can say that we are almost back to square one but have lost a lot of time.
In WP Rocket, to activate the combine option, we must activate the minify option first. The box to exclude files is exactly the same and the “Advanced Rules” also applies here: I can’t tell you how to fill in that box, since it depends on your website.
Optimize CSS delivery with WP Rocket
Everyone knows the phrase “Optimize CSS delivery” because it is common to find this “tip” in Google PageSpeed Insights.
It is really fixed by doing asynchronous loading of the website’s CSS and WP Rocket allows us to do this automatically.
Since version 3.10 the interface of this configuration area has changed and now it gives us the choice between asynchronous loading of the CSS and the elimination of unused CSS:
To activate the asynchronous loading of the CSS, we simply mark “Load CSS Asynchronously” and, when we save the configuration, the critical path will be generated.
Today this option does not usually give problems, since they have more than proven it.
The thing is, if we have to choose between loading CSS asynchronously and removing unused CSS from files, the second option is the correct one.
Remove Unused CSS con WP Rocket
In version 3.9 of WP Rocket the option “Remove Unused CSS” appeared and it is here to stay. Although at the time of writing this is a beta feature, it is already fully functional and has become a WP Rocket “exclusive” as no other caching plugin has this feature built-in.
Yes, it is true that there are services to remove unused CSS from style sheets automatically, but I have tried them and, in addition to being very expensive, they usually cause quite a few problems.
WP Rocket’s “Remove Unused CSS” service is integrated together with the cache plugin and offers us a fairly refined service that is constantly being updated since the cleaning of the files is done in an external API (such as generating CSS critical path).
As I said before, we must choose between “Remove Unused CSS” and “Load CSS Asynchronously”. I personally prefer the “Remove Unused CSS”.
In addition, the “Remove Unused CSS” allows us to add CSS classes, CSS selectors, or CSS files that we do not want to optimize, so we can easily resolve possible conflicts that we find during optimization.
Finally, I want to add that removing unused CSS from files is often one of the highest-rated WPO techniques by Google PageSpeed Insights.
Asynchronous Javascript Loading with WP Rocket
We start with Javascript, one of the most delicate things on any website.
When doing asynchronous loading of the Javascript, what we do is that the scripts load in parallel as they are called, although being careful with the dependencies.
In WP Rocket, confirming asynchronous loading or lazy loading is quite easy, as it is simply to activate a checkbox and then we have a text box to add exclusions if there are problems or incompatibilities:
Currently, WP Rocket has this very mature functionality and it is rare to encounter problems with common themes or plugins.
If the asynchronous or lazy loading of Javascript falls short, we can try the delayed loading or JS delay that comes in the next section. With asynchronous loading, we do not save HTTP requests; with delayed loading, yes.
Delayed loading of Javascript with WP Rocket
Along with the “Remove unused CSS”, the delayed load or JS delay has been marked as a before and after in WP Rocket.
Before WP Rocket implemented this feature, I was already delaying the loading of scripts using Flying Scripts from the author of FlyingPress.
Although Javascript Delayed Loading is more powerful than Javascript Asynchronous Loading, we should keep in mind that it is also riskier and more likely that we will need to add exclusions to the textbox.
Even, as you can see in the previous screenshot, WP Rocket itself brings you some example lines to put in the exclusion box if something breaks on the web when applying the delayed load. The reason is that most problems come from jQuery libraries, so those lines would solve the most common cases.
I repeat: this feature of WP Rocket makes a difference in the loading speed of a WordPress and also in Google PageSpeed Insights scores.
Optimize the database with WP Rocket
For me, this option is more padding than anything else as it cannot compete with other more advanced WordPress database cleanup alternatives.
A good tool to clean the WordPress database is Advanced Database Cleaner since it not only cleans the typical traces of “garbage” that allows us to clean any other plugin, but we can also clean the database tables and the table WordPress wp_options.
Nothing to do with this WP Rocket functionality to optimize our WordPress database. For this reason, I am not going to delve into it, since it does not have any mystery and nothing you do can break WordPress.
Optimizing speed and performance budget have nothing to do with optimizing your WordPress database. In any case, optimizing the WordPress database serves to improve the consumption of resources on the server and the efficiency of the application in certain circumstances.
Lazy Load con WP Rocket
Lazy Load is one of the WPO techniques that have begun to gain weight thanks to the growing market share of mobile device browsers.
With Lazy Load, the loading of the loaded element is delayed until the user scrolls enough to see the element (perhaps a little earlier). In this way, requests are saved in the FCP and LCP of the web and the number of requests and bandwidth used are reduced in many cases since most users do not scroll.
In WP Rocket we can find this setting under “Media” and, personally, I always check these three boxes:
With this, we do Lazy Loading of the images and also of the iframes, including videos from YouTube and other supported video platforms. In addition, WP Rocket takes this functionality a little further, replacing the YouTube preview with an image generated and also loaded via Lazy Load.
Applying Lazy Load to YouTube videos can help us improve the loading speed for Javascript when loading a WordPress page with many embedded videos.
If at any given moment an element loaded by Lazy Load gives you problems, you must add an exclusion to the text box that you can see in the previous image. You just have to add the file name (one per line).
Setting up a CDN with WP Rocket
Before we talk about this, let’s clear one thing up.
The folks over at WP Rocket have been offering a StackPath-based CDN for a while now. I haven’t tried it, but I have tried StackPath and I don’t like it AT ALL.
I can’t tell you about RocketCDN, but I can tell you about how to implement a normal CDN ( traditional pull ) using the WP Rocket CDN configuration.
Inside the “CDN” section of the WP Rocket settings we have this:
Here we must configure the corresponding CNAMEs that we generate with the hostname provided by our CDN provider.
Don’t have a CDN provider yet? You have 2 options.
The first is to use Cloudflare, the only real free CDN, although you don’t need WP Rocket for this, as its setup is done using another method.
The second option is to contact one of the many pay-per-use CDNs that exist and that can be configured by hostname or CNAME. I recommend CDN77, KeyCDN, and Amazon CloudFront.
This website uses CDN77 right now and the result to serve content to Spain and Latin America is very good.
The configuration varies depending on the CDN service you want to hire, so I can’t tell you exactly what you have to put in the options of the previous screenshot. Normally a CDN gives you a hostname, you have to create some CNAMEs (or use them directly), and those CNAMEs or the hostname of the CDN you have to use in the options of the previous screenshot.
This is no longer dependent on WP Rocket, but on the CDN. WP Rocket is simply the final step. What WP Rocket does when you activate this tool replaces the normal resource upload URLs with URLs that point to our configured CDN.
WP Rocket y Cloudflare
Just above we have talked about Cloudflare as a CDN. I am not going to expand much and I am not going to explain here how Cloudflare is configured as a CDN since that is from another post.
What I do want to tell you is that WP Rocket allows us to empty CloudFlare’s cache from the WordPress backend if we configure the Cloudflare API in Wp Rocket.
For this we must go to the “Add-on” section of the WP Rocket configuration:
And that is where we must configure the Cloudflare API (which we can get in your panel) to be able to empty the Cloudflare cache from the WordPress dashboard or when the WP Rocket cache is emptied.
In addition, it also allows us to apply some recommended settings to CloudFlare, although I personally do not recommend it because I like to put my own configuration adapted to each case.
Ajustar Heartbeat o admin-ajax.php con WP Rocket
I am not going to go into much detail in explaining the Heartbeat API or the functionalities of the WordPress admin-ajax.php, since I have explained it in another specific article.
With WP Rocket we can easily control the time between pulses or completely disable the admin-ajax.php function in some parts of the web (not recommended unless you know what you are doing).
Although this functionality of WP Rocket is not the most complete that we can find in a plugin to adjust this, the truth is that it fulfills its function and allows us to space the period of time between pulses.
Is WP Rocket compatible with WooCommerce?
I have been asked this question many times and I continue to answer it every week.
Is WP Rocket compatible with WooCommerce? Is the best option? The answer is “it depends”.
It depends on the online store and how complex it is. If due to the complexity of the online store, we need to cache queries (query cache) and cache objects, WP Rocket may fall short and you need to make an advanced configuration of W3 Total Cache, saving query cache and object cache directly in the RAM memory using Memcached or Redis.
This is a common thing and there is also no exact rule to decide what can be done with WP Rocket and in which cases you need something more powerful. It depends on the resource needs of the specific WordPress and how we can solve this.
In some WordPress, there are dynamic parts that we cannot cache with a page cache and there we need something else. Depending on the complexity of these uncacheable parts, we may need something other than page caching or something more advanced.
WP Rocket and Raiola Networks
In 2020, the people of WP Rocket and us ( Raiola Networks ) put some points in common and became the first Spanish hosting partner of WP Rocket.
One of the things that we polished is the integration of the WP Rocket cache together with, the high-performance web server that we use at Raiola Networks for our hosting clients on the cPanel & WHM platform.
What we did is make the WP Rocket cache fully compatible with the LiteSpeed Web Server cache, thus optimizing cache purges and the efficiency of the cache served to visitors.
Although LiteSpeed Web Server already has its own caching plugin very similar to WP Rocket, its configuration is much more complex. Although we can say that it can become more powerful in optimizations, many customers are looking for simplicity and not perfection.
In addition, we have a discount on WP Rocket licenses for our clients 😉
How much does WP Rocket cost?
I can contribute little here since the price of WP Rocket is what it is.
The price shown in the previous screenshot is already with the discount applied for being a Raiola Networks client.
The cheapest license is for one website and costs €44 at the moment. While the unlimited license, to install on as many websites as you want, costs €222.
Which one is the best for you? Well, it completely depends on how many WordPress you have if you need WP Rocket for them, and how serious you are about optimizing your WordPress.
I understand that if your sites don’t make you money, WP Rocket isn’t interesting for you, but for that, there are other free alternatives like LiteSpeed Cache (available for free to our hosting customers ).
On the other hand, if your WordPress starts to have visited, I would not think about it and invest in WP Rocket. As I said at the beginning of the post, WP Rocket was the first caching plugin I decided to pay for.
