Instructions and tips for setting up the WP Rocket plugin , which can visibly speed up your WordPress site.
Table of Contents
What is a cache
Cache is a word thrown around so often lately that even my grandmother is slowly talking about it. Cache is the name for temporary or both computer and server cache.
Instead of the entire web page having to be reloaded (so effectively downloaded from the server), certain parts that don’t change are loaded from this memory.
Thus, there is a decrease in the data flow between the client and the server, which is associated with a smaller amount of transferred data and, in particular, a faster page loading speed.
Server-side cache
Every average server has its own cache system. The server usually remembers saved images, CSS and JS files that are common to the entire page.
Instead of always sending the saved logo to the client, it only sends information that the client already has the logo saved and can therefore use it.
This applies to most images on the page. You may have ever faced the problem of still seeing the old image even after replacing it with a new one. So the cache is to blame.
During the development of the website, of course, we need to disable the cache, because we need to see the changes made immediately. This can be done on the server side, in the control panel of your hosting.
Page-side cache
We can also set a cache on the WordPress side. Although it is called a cache, in reality only the optimization of the used codes and other files is done.
We can use several plugins for this purpose. Some of them are free and mostly cover only basic functionality. Many have paid versions or are paid from the ground up.
In this article, we will focus on the WP Rocket plugin, which is paid, but I can definitely rank it among the best speed optimization plugins with a clear conscience.
How to get WP Rocket? what is his price?
We get WP Rocket exclusively from their official website . In terms of price, we have three plans to choose from – SINGLE for $49 per year, we will use it for one website. We’ll use the $99 PLUS plan for three sites and the $249/year INFINITE plan for an infinite number of websites (great for developers who do a lot of sites).
After filling in the billing information and payment, we will receive a .zip file for download, which contains our plugin and license. We upload the plugin to our site via wp-admin (Plugins-> add new-> upload plugin). After successful installation, do not forget to activate the plugin.
Instructions for setting up the WP Rocket plugin
In practice, I have already encountered several times that a person installed a cache plugin and did not notice any change. Of course. HAVING a cache plugin is nice, but it’s like having a driver’s license (but not driving). In order to improve performance and optimize speed, we will need to configure WP Rocket.
WP Rocket settings can be accessed in wp-admin through the main left column in the Settings section –> WP Rocket . We click. We will be shown a bulletin board and many different, at first glance scary, options. Let’s go through them one by one.
Dashboard
Bulletin board. Basic information about your account, licenses, etc. is displayed here. We have the option to turn on “Rocket Analytics” here, which means some data will be sent to WP Rocket HQ. This can help plugin developers.
Cache
Basic settings for cache.
We can turn on/off mobile caching , I recommend leaving it on. We can also separate cache files separately for large PCs and separately for mobiles. I personally never do this as I see no reason to.
Enable caching for logged-in WordPress users turns on the cache for logged-in users. Unnecessary for simpler and presentation pages, but if you have a page where users log in (e.g. e-shop), this function can be useful. Basically, the logged-in user does not use the cache (it is assumed that the logged-in user is a website administrator, who should see the page without a cache to be able to check changes immediately). When you check this box, the cache will also be used by logged in users.
Cache Lifespan – here we set the period of time after which the cache should be cleaned automatically. After clicking on “Minutes” enough to select the hour and day. I always leave the default value set, but of course it’s up to you. So, if you ever make a change, it doesn’t start showing up right away, you have to “flush” the cache manually, i.e. reset it. If you forget, it will automatically reset after the time specified here.
The cache can be cleared manually via the Admin panel (the black strip at the top), find the WP Rocket item in it and click Clear cache to flush the entire cache. This will start showing the changes everywhere, even to non-logged-in users.
File optimization
Probably the most interesting part. Here we set how WP Rocket should process the files that make up the website.
Basic settings
Minify HTML – minifies the HTML source code of the page by removing line breaks or unnecessary spaces. Little effective, but there’s practically nothing to go wrong here. I always turn it on.
Optimize Google Fonts – definitely leave this on, it will improve the loading of Google Fonts, which you almost certainly use.
Note: In newer versions of WP Rocket, Basic settings are no longer available (no longer relevant).
CSS Files
CSS is the language with which, in simple terms, the appearance of the page is set. In an ideal universe, each page contains a single .css file where all the visual stuff is set up. But this is certainly not true in WordPress. Since WordPress is a complex platform and consists of themes and plugins, almost every plugin has its own CSS files (and rarely just one). As a result, you load several tens of CSS files every time the page is loaded.
Minify CSS files – minifies .css files by removing indentations and spaces. Similar to HTML minification. Since there are more CSS files, this setting is almost a must.
Combine CSS files – what this setting will do is go through all the .css files that the page uses and create one big file (one only). So let’s get closer to the state of the ideal universe – you load only one .css file, albeit a larger one. It is definitely necessary to enable this option.
Optimize CSS delivery – I turn this setting on as well. It will cause the CSS to load “asynchronously”, that is, independently of the rest of the web page content.
Of course, to make it not so easy, setting the combination of CSS files can cause visual errors on the page (so-called bugs). In that case, it is necessary to find out what is causing the given problem and include the specific .css file in “Excluded CSS Files”.
Javascript files
As in the case of CSS, we can also optimize Javascript files.
Minify and Combine behave the same way as CSS
Remove jQuery Migrate – jQuery Migrate is a helper jQuery function that alerts you to incompatibilities between jQuery versions and plugins or third-party themes. Since WordPress 5.5, it is no longer used, so you can disable it.
Load JavaScript deferred – will basically do the same as Optimize CSS delivery – the javascript will be loaded independently of the rest of the files on the page.
Note: If you use the http2 protocol, there is no need to combine CSS or JS files.
The media
In this section we will set up images, videos and other multimedia content.
Lazy Load
Lazy Load is a functionality that slows down unnecessary loading of images that are not immediately visible on the page. This will cause a significant speed increase, as the images will only start loading when you get close to their location. I enter www.wp.sk and at the very bottom in the footer is the wp.sk logo, which is actually a picture.
Lazy load will cause the page to load without this image. Only when we get close to the footer by turning the mouse wheel, the image is loaded in the background and displayed. Until then, it is not needed. Without lazy load, the entire page is loaded right at the beginning.
Enable for images – enables Lazy load for images.
E nable for iframes / videos – enables lazy load for videos and iframes. Iframe is often used e.g. in the case of a Facebook feed, or when inserting a YouTube video or content from another site.
Replace YouTube iframe with preview image – replaces an unloaded video with a preview image (e.g. if we quickly scroll to the place where the video should be and it hasn’t had time to load in the background).
Emoji
Emojis are a rather useless part of WordPress, but on some blogs they can find their application. Actually, they are smileys (emoticons) that WordPress automatically converts into graphic form. If you don’t need it, you can easily turn them off.
Embeds
Disable WordPress embeds – prevents others from “pulling” part of your site to external sites. I recommend leaving it on.
WebP compatibility
Sets caching for WebP images. WebP is a relatively new image format designed primarily for display on the Internet. The image is smaller in size but comparable in quality to jpg. Each jpg and png can be converted to WebP, through some converter, and uploaded to the page. However, if you are not using WebP, it is not necessary to enable this setting.
Preload
As I mentioned above, WP Rocket works in the style of creating custom files (mainly .css and .js) that are then used in the live operation of the website, instead of the original ones. Preload is the function that triggers this file generation. The same goes for regenerating already created files if there is a change on the page (e.g. adding a new article, etc.).
Here I recommend leaving “Activate Preloading” on, as well as “Activate sitemap-based cache preloading”, “Yoast SEO XML sitemap” (if you use the Yoast SEO plugin) and also “Enable link preloading”. This is enough for 99% of websites.
Advanced rules
Here we will set advanced rules for WP Rocket. For example, we can specify subpages, files, etc. here. which should never be cached. We can set an exception when caching cookies, or based on the browser used.
Within WP Rocket, it is possible to use the so-called wildcards, i.e. the asterisk wildcard *. If we need e.g. to remove the entire plugin from caching, let’s say Contact form 7, it is nonsense to list 10 .css files under each other, which are located in the contact-form-7 folder. We’ll use a wildcard instead, something like this:
Wp-content/plugins/contact-form-7/* which ensures that the entire folder (and therefore the entire plugin) remains uncached.
Database
In this section, we can speed up the site nicely in some cases, but it takes its toll. Here we can perform the so-called cleaning the database from seemingly unnecessary data. WP Rocket recommends taking a database backup before performing such database operations.
Here we can delete revisions, automatic drafts, posts from the trash, unapproved comments, transients, optimize tables and set automatic cleanup.
When creating each subpage or article in WordPress, as many revisions are saved as many times as we click the UPDATE button. For large sites that mainly contain articles, this can be quite a problem, considering that there can be several million revisions. By deleting these revisions, we will greatly facilitate the life of the database, but we will lose the possibility to return to previous versions of the article or subpage.
CDN
CDN stands for Content Delivery Network. You are using it and may not even know it. At the code level of a web page, there are various libraries that are generally used in creating a web page.
A typical example can be jQuery or Google fonts. The advantage is that the visitor to your website will probably already have jQuery downloaded from another page on his PC, so his browser does not have to pull the jQuery file again from the server, but from its cache, when rendering the page.
This will affect the speed of the website. However, in reality, these are only a few kilobyte files, which will not have an extreme impact on the speed when it comes to a classic website.
Heartbeat
Heartbeat is a built-in wordpress functionality. This is some kind of regular “impulse”, on the basis of which ajax requests are sent to the server at regular intervals (once per minute).
It is used for notifications that are displayed in the administrator environment, for automatic saving of articles and subpages, for locking content when edited by another user (the proverbial table “User #name edits this article” pops up).
I personally have never had a problem with this, nor have I ever dealt with it. You can theoretically turn off Heartbeat here, but I certainly do not recommend it, as it interferes with the built-in functionality of WordPress, not to mention the plugins used, which may become unusable. So limiting this setting is only relevant for some weak plugins.
Add-ons
Option to install other plugins that work with WP Rocket and ensure even better speed.
Image optimization
You should think about image optimization already when creating a website, or when uploading content. Decency dictates not to put an image larger than 300kB on the page. The FullHD size (ie 1920×1080) is completely sufficient for most websites. I definitely do not recommend uploading gigantic SLR images (e.g. 6000×4000) to the web.
Although WordPress will still crop them to 4K size, the data size of the image is more important than the dimensions. There are really only a few exceptions when it is necessary to use a large data image.
For such images, however, we always use its thumbnail and the full image only when clicking on it (e.g. by opening it in Lightbox). In any case, WP Rocket does not include the image optimization option, but it works very nicely with the Imagify plugin .
Another well-known plugin for optimizing images is EWWWW Image optimizer (I recommend uninstalling it after use).
Tools
Plugin tools. Import, export, revert to an older version. Things we know.
Tutorials
And finally, in the Tutorials section of the WP Rocket plugin you will find video tutorials for use in English.
Final tip: check out this tutorial on how to speed up your WordPress site .
Was this article helpful for you? Support me by sharing, please. 👍
