WP Rocket - The Best Caching Plugin?

What is WP Rocket?

WP Rocket is a caching plugin for WordPress. Caching can significantly improve the loading times of your WordPress website. A shorter loading time is not only an enormous advantage for your visitors, but can also affect the ranking of your website in search engines.

WP Rocket is not only a pure caching plugin. But many website operators and developers don’t know that WP Rocket offers other useful features that further optimize the loading time – that’s what we want to change with this article.

Please note that each WordPress instance has different caching and optimization requirements. Now you can find out which WP Rocket options are especially relevant for your website.

Performance Comparison

If you are on the road in the WordPress area, you might know my website gamer-stuhl.de. I developed the site completely from scratch, including the Guided Selling function and the load time optimization, which is the subject of this article.

The following figure shows the comparison between the loading time with and without WP Rocket in the performance test of GTmetrix. You can also have a look at the two tests here directly at GTmetrix:

• Without WP Rocket: https://gtmetrix.com/reports/www.gamer-stuhl.de/IwNzTYfl
• With WP Rocket: https://gtmetrix.com/reports/www.gamer-stuhl.de/BcDAqCrO

As you can see on the picture we have reduced the loading time from 2.9s to 1.6s. This is a loading time saving of almost 50%. By also using the lazy load and minification features of WP Rocket, we were able to reduce the total page size by more than 200kb. As a result, the number of requests could also be reduced by almost 80%.

How the loading time feels in a direct comparison, we tried to illustrate in a small video (Left: Without WP Rocket, Right: With WP Rocket).

In this article we would like to explain how you can do this on your site. So let’s start right away.

Installing WP Rocket

To install WP Rocket, you must first download it after purchase. Simply log in to your WP Rocket account.

Now click on Download WP Rocket to save the .zip file with all plugin files on your computer.

We need this .zip file in the next step to install WP Rocket in WordPress. Open the following path in the WP menu: Plugins -> Add new -> Upload plugin -> Browse -> wp-rocket.zip file

After pressing the Install Now button, all you have to do is activate the plugin. Just click the Activate Now button. WP Rocket is now completely installed on your WordPress instance! Very good.

Dashboard

Via the WordPress menu Settings > WP Rocket you get to the dashboard of WP Rocket. On the dashboard you will find all important information about your WP Rocket account.

My Account lists your current license and the license expiration date. Furthermore, under My Status you can choose whether you want to support WP Rocket with the development in the form of the Rocket Tester (a kind of beta program) or with the transmission of diagnostic data. Both are optional and not a must. On the right side under Useful Links you have access to the most important “Clear Cache” functions.

Cache

The basic cache settings allow you to set the mobile cache, the personalized cache, and the cache duration. Each setting should be chosen carefully:

Mobile Cache

The first option Activate caching for mobile devices ensures that WP Rocket also delivers cached documents to users with smartphones. Important: If this option is not activated, no cached documents will be delivered to users with mobile devices. This makes page views on mobile devices slower.

The second option Separate cache for mobile devices activates the independent mobile cache. This means that the cached documents are stored separately for desktop/tablets and mobile (smartphones) on your server:

• index.html(.gz) – Cache files for Tablets and Desktop
• index-mobile.html(.gz) – Cache Files for Mobile (Smartphones)

An important note: WP Rocket does not assign tablets to the mobile cache. If you want tablets to be treated as mobile devices, you can install the following plugin: WP Rocket – Set Tablets As Mobile

User Cache

The personalized cache is intended for websites that offer their visitors a login. If you enable this setting, WP Rocket will cache a separate version of the page for each user.

This is especially interesting if every logged-in visitor sees pages with different content – e.g. the account page of Ultimate Member (Membership Plugin for WordPress). Here every visitor has individual account settings.

Cache Lifespan

Many developers and agencies don’t know why this setting is one of the most important in all of WP Rocket and why it should be set to under 12 hours.

In WordPress there is a security mechanism called Nonce. A Nonce is a token used to validate communication with the server. The Nonce is automatically reset every 12 hours by WordPress. If now the automatic emptying of the cache is set to over 12 hours, the requests to the server would be rejected for a certain time, because the (old) cached Nonce does not match with the newly generated Nonce of the server.

For this reason, the cache duration should always be set to less than 12 hours or, to be on the safe side, less than 10 hours.

File Optimization

Basic Settings

Minify HTML

This setting minifies the HTML code of your page. This means that comments, blank lines and line breaks will be removed. This means that your visitor will have to download less code and the page will be faster.

Combine Google Fonts Files

Many themes and plugins now integrate Google fonts into the website. Each theme or plugin loads the fonts individually from the Google server. This can result in many HTTP requests that make your site slow. WP Rocket combines these many requests into a single request. This means that your site only needs to connect to the Google server once.

Remove query strings from static resources

The version query string (style.css?ver=1.0) of static files (JS, CSS, …) tells the browser the following: “Hey Browser, the filename is the same, but I changed something about the file. Please download the new version (for example: ?ver=1.1)”. Some Website Pagespeed tools like GTmetrix, Pingdom or Google PageSpeed criticize exactly these version query strings. If you enable this option, WP Rocket will rename the file to style-1.0.css (instead of style.css?ver=1.0).

CSS files

Minify CSS Files

WP Rocket removes all comments, spaces and carriage returns from your CSS files to minimize file size.

Combine CSS Files

With this option all CSS files are combined to a single CSS file. This reduces the HTTP requests to your own server. WP Rocket does not recommend this option if HTTP/2 is enabled. Nevertheless I could measure a speed increase especially on weaker servers. Therefore I recommend my customers to always activate this option.

Excluded CSS Files

If you notice that the presentation of your page suffers from the CSS summary, you can enter here the paths to the CSS files that should be excluded from the summary.

Optimize CSS delivery

Before the browser can display the website to the visitor, it must render it. The browser must first download all CSS files referenced in the code. The time taken to download all CSS files can vary greatly depending on the server and Internet speed of the visitor.

With this option, WP Rocket ensures that render-blocking CSS files are loaded at the end. However, this can have different effects from theme to theme and lead to the fact that your page is only loaded without CSS and the styles of the CSS files only become noticeable after a few seconds. Please test this option before on a development environment.

JavaScript files

Minify JavaScript Files

As with CSS minification, JavaScript files remove all comments, spaces, and line breaks to minimize file size.

Combine JavaScript Files

With this option, WP Rocket will merge all JS files into a single JS file. This will only load one JS file instead of several, reducing HTTP calls to your server.

Excluded Inline JavaScript

This section is not quite trivial, but it is very helpful if you encounter any errors in the display or operation of your site. WP Rocket also minifies Inline JavaScript, which is the JavaScript that is directly in the code of your website and is not embedded via a .js file. If you want to exclude an inline JavaScript area from the summary, you can insert a part of the inline code into the Excluded inline JavaScript field. As soon as WP Rocket finds the corresponding part of the inline JavaScript code on your page, this area will not be merged with the other JS code. This makes it easy to fix JavaScript errors caused by the merge.

Excluded JavaScript Files

In this field you can insert URLs of JavaScript files to be excluded from the summary. Here you can store both internal and 3rd party JS files.

Load JavaScript deferred

As with the Optimize CSS Display option, all JavaScript files must be downloaded before rendering the Web page. With the option Load JavaScript delayed the browser will load the JavaScript only after the render process. This means, however, that unforeseen malfunctions of the functionality of the page can occur until all JavaScript files are loaded after rendering. You should test this option thoroughly on a development environment.

Safe mode for jQuery

Many themes and plugins require jQuery (a JavaScript framework) to work. With this option you can make sure that jQuery is loaded at the very top of the page to avoid unforeseen problems with your theme or plugins. This will temporarily block the rendering for loading jQuery, but you should enable this option to avoid problems with the display of the page.

Media

LazyLoad

The LazyLoad function of WP Rocket ensures that images, iFrames and videos are not loaded until they reach the visible area of the browser window. So if you have a page with many pictures, you can significantly improve the loading time, because not all pictures are loaded in advance, but only when they reach the visible area by scrolling the visitor. WP Rocket loads the LazyLoad elements shortly before the visible area, so that the visitor doesn’t notice the delayed loading of the elements.

Especially worth mentioning is the possibility of LazyLoad from Background Images. Many developers use background images, which are not stored as images in the browser, but as the background of an HTML tag (e.g. DIV, SPAN, …). So these images can only be loaded when they reach the visible area.

WP Rocket offers especially for YouTube videos a LazyLoad method where the iFrame of YouTube (which is about 800kb in size) is not loaded directly, but a preview image instead of the video. Only after the visitor clicks on the video to play it will the data of the video be loaded from YouTube. This can significantly improve the loading time of your site.

Emoji

Since WordPress version 4.2 the in-house Emoji’s of WordPress are integrated. Activate this WP Rocket function to not load the WordPress Emoji’s and to use the browser’s internal Emoji’s.

Embeds

By deactivating the WordPress embeds, you prohibit third parties from embedding your content on external pages.

Preload

Preload

The Cache Preloading function plays a central role in the caching of your WordPress website. You should therefore always activate the Activate Preloading option. Once preloading is active, WP Rocket will cache all pages of your website in the cache directory of your WordPress instance (wp-content/cache/wp-rocket/your-domain).

To keep the cache files up to date, WP Rocket has integrated an intelligent cache empty function. This ensures that the cache is automatically cleared and re-stored when the following events occur:

• When saving WP Rocket settings
• When the cache lifecycle ends
• If you click on “Fill Cache” in the WP Admin Toolbar
• When saving Posts, Pages and Custom Post Types. In addition, all associated tags, categories, paginations, … are emptied and newly created.

Sitemap-based filling of the cache

To make WP Rocket’s preloading work easier, you can enable Sitemap-based Filling. If this option is enabled, WP Rocket will preload using your Sitemap. WP Rocket will automatically recognize the sitemaps of the following SEO plugins at the time of writing this report:

• Yoast SEO
• all-in-one SEO
• Rank Math SEO
• SEOPress
• The SEO Framework

Alternatively, you can enter the URL of your sitemap directly in the Sitemaps field for cache filling.

Prefetch DNS Requests

A DNS prefetch can have a very positive effect on the loading time of your page. This is the case if you have included third-party content on your site (e.g. YouTube videos, Google fonts, JavaScript resources that are loaded externally).

Normally, the DNS lookup is performed when the browser wants to load the external content. However, if the DNS lookup takes longer in this situation, the entire loading process of your website will be blocked, resulting in a longer loading time. With DNS prefetch, the DNS lookup is completed before the content is loaded and is available to the browser. This can bring an enormous increase in speed, especially for mobile devices.

To use the DNS prefetch, all you have to do is enter the hosts (e.g. //fonts.googleapis.com) in the field. Remember to choose a relative protocol (use // and not http://).

Advanced rules

The advanced rules of WP Rocket are important if you want to exclude specific pages from caching. WP Rocket offers several ways to do this.

Never Cache (URLs)

Special URLs that should not be cached are e.g. login, logout, member or shopping cart pages. If you use one of the following eCommerce plugins, WP Rocket will automatically store the non-cached pages:

• WooCommerce
• big commerce
• Easy Digital Download
• iThemes Exchange
• jigoshop
• WP shop

Never Cache (cookies)

If you want to prevent a user with a certain cookie from seeing a cached page, you can store the name of the cookie here.

Never Cache (User Agents)

You can also define a list of user agents that should not have cached pages displayed. This is especially interesting for incompatibility problems of certain browsers.

Always Purge (URLs)

WP Rocket detects releases of new and updates of existing posts and automatically regenerates their cache file. However, you may want to refresh the cache file of other posts when this event occurs (when any post is published or changed). These other posts or their URL can be entered in the field. Thus these URLs will be deleted from the cache every time you create or change a post in the backend.

Cache Query Strings

WP Rocket does not cache pages with query strings (e.g. /beitrag/?query=search). If you still want to add pages with query strings to the cache, you can add the query strings here. WP Rocket will then cache these pages as well.

Database

Important: The database functions of WP Rocket are used to make direct changes to your database. You should therefore make your selection carefully.

The following section describes which data will be changed or deleted by WP Rocket and which settings will be used.

Post Cleanup

WordPress stores certain data in the database when you edit or delete posts. On the one hand, so-called revisions are created when editing WordPress articles. With these revisions it is possible to track the development of longer articles. The revision of a post also protects against data loss if your PC crashes while writing.

On the other hand, deleted articles are not completely deleted from the database, but are marked as deleted and put into the trash – so the deleted articles are still available in the database.

Depending on your selection, determine which data WP Rocket should delete.

Comments Cleanup

WordPress also stores SPAM comments in the database. When deleting a comment, the comment is not deleted from the database but moved to the trash and is still available in the database.

Determine which data WP Rocket should delete depending on your selection.

Transients Cleanup

Transients are data that are only valid for a certain period of time. Plugins and themes store these transients in the database in order to avoid having to go through time-consuming queries every time. Transients can usually be deleted without problems, because plugins and themes recreate them when they are not present.

Database Cleanup

This option optimizes the tables in the database so that redundant data is deleted, thus reducing the size of the table.

Automatic Cleanup

If you don’t want to do the database optimization manually every time, WP Rocket can do it for you automatically. Just choose how often you want a crontask to do the optimization.

CDN

Many international websites use a CDN to be able to deliver the data worldwide location dependent and therefore faster. If you also use a CDN, you can enter the CNAMEs of your CDN here.

If you use CloudFlare or Sucuri as CDN, you can also use the included add-ons from WP Rocket. Read more about this below.

Heartbeat

The WordPress Heartbeat is an API that provides real-time data transfer for synchronization between browser and server. The WordPress Heartbeat is used in the following areas, for example:

• Automatic saving and editing in the WordPress Backend Editor
• Notifications in the WordPress Admin Dashboard
• Post lock information (when another editor is working on a post)
• Real-time data displayed by plug-ins on the dashboard

The Heartbeat API processes a number of tasks each time it is called. The WordPress Heartbeat is executed every 15-60 seconds by every visitor (and every open browser tab). The more plugins you have installed, the more likely it is that more tasks will be added and the server load will increase.

With the reduction of heartbeat activity by WP Rocket the server load is minimized and the front- and backend is relieved.

Add-ons

One-click Rocket Add-ons

With the One-click Rocket Add-ons you can (as the name suggests) activate additional functions that don’t require any configuration.

Google Tracking

If you use Google Analytics, many performance testing tools will warn you that data from Google Analytics cannot be cached by your browser. You cannot cache data that you don’t host yourself (Google Analytics is obtained directly from the Google server). For this reason, WP Rocket stores the necessary data from Google Analytics in the caching folder and provides it with the necessary caching information. This allows the browser to cache the Google Analytics data.

Important to know: If you have integrated Google Analytics with the Google Tag Manager in your page, this function does not work.

Facebook Pixel

As already described with Google Tracking, Facebook’s external script files are not cached because they are obtained from the external Facebook server. With this option, these data are also stored directly in the caching folder of your server and can therefore be cached by the browser.

Varnish

If your server supports the Varnish Cache you can activate this option. This function ensures that the Vanish Cache of the server is always on the same level as the WP Rocket Cache.

Rocket Add-ons

The Rocket Add-ons are similar to the One-click Rocket Add-ons extensions, but require further configuration.

Cloudflare

With the Cloudflare Add-on you can connect WP Rocket to your Cloudflare API. WP Rocket synchronizes the local cache on your server with the Cloudflare cache. This synchronizes changes to posts directly with Cloudflare.

Scuri

With the Scuri Add-on you can connect WP Rocket with the Scuri API and synchronize your local cache of your server with Scuri.

Tools

The tools of WP Rocket include on the one hand the export and import of WP Rocket settings, with which you can, for example, import the settings from a development environment in order not to manually reset everything. On the other hand, WP Rocket also offers a restore option that allows you to switch to a previous major version if you are participating in the beta program.

Admin Bar

WP Rocket integrates an additional menu in the WordPress Admin Bar. The following modules can be accessed via this menu:

• Settings
  This link takes you directly to the WP Rocket dashboard where you can customize the settings.
• Empty cache
  By clicking Clear Cache you tell WP Rocket to clear the internal cache on the server
• Empty OPcache
  If you don’t know what the OPcache is: “OPcache increases PHP performance by storing the precompiled byte code in memory. This avoids loading and parsing the scripts with every request.” Source: php.net After a click on Empty OPcache the current OPcache is emptied.
• Preload Cache
  The option Fill Cache tells WP Rocket to start the preloading of the cache and rebuild the cache of the entire page.
• Further links
  The links Documentation, FAQ and Help take you to supporting explanations of WP Rocket

Caching of individual contributions

In every WordPress post you will find the so called WP Rocket Options in the sidebar of the editor. You can set separate caching options for each post.

Conclution of the author

Comments

Click here to cancel reply.

Your name (required)

Your email address(required, but will not be published)

Your comment

Submit comment