When it comes to optimizing your website, the role of caching in WordPress can never be underestimated. What exactly is caching all about? We know that it can speed up our websites, but is there more to it?
What is Caching?
Caching is the process of creating static versions of your content, and serving that to visitors. Static pages are generally rendered quickly in browsers. This leads to the faster performance of your website.
Here is the list of best cache plugins that you may wanna use.
This way, the back and forth queries to and from the database can be avoided, thereby reducing the server load.
Advantages of Caching:
- Enhances the speed and performance of your website
- Help reduce the load on your hosting server
- Save server memory and I/O operations
- Offers a better user experience
The easiest way to do so is by means of plugins. There are several free and premium WordPress plugins out there that help you to enable caching on your website.
In this article, I will particularly talk about WP-Rocket plugin.
Developed by Jonathan Buttigieg and Jean-Baptiste Marchand-Arvier, WP-Rocket is a premium caching plugin that delivers the best results out of all WordPress caching tools on the market.
It is generally considered one of the top caching plugins for WordPress, yet it is 100% premium. The plugin caches in the background via wp-cron to reduce the load. Although, WP-Cron is a plugin that allows taking control over the execution of cron jobs.
It works by stimulating the current user’s session cookies when requesting a page to cache. In addition to better performance levels, it includes a better, and easier-to-use settings area.
How to install WP-Rocket?
- First of all, buy WP-Rocket plugin and download it.
- In order to install the plugin through your WordPress dashboard, you need to start with the zip file of the plugin.
- Download the zip file normally and proceed with the installation.
- Go to WordPress admin panel >> Plugin >> Add New >> Upload Plugin.
- Upload the zip file.
Once it’s activated, simply go to the settings panel. You will receive an automatic email telling you a new website has been added to your account.
How to configure WP-Rocket?
Activate the plugin.
According to WP Rocket team, your site speed gets improved after only enabling it. So, primarily check whether that your site is improved.
However, there are many settings you can configure to suit your site. To do so,
- Open the plugin panel, click WP Rocket. It will ask for the following things, and you need to simply check the check box.
In the Dashboard, you can see sections like My Account, My status etc.
My status section:
- If you are a beta tester, turn ON the Rocket tester.
- If you want to share anonymous data with the development team, you can turn on the Rocket Analytics.
Click on Save changes.
This section involves basic caching options like Mobile cache, User cache, Cache lifespan.
1. Mobile Cache:
- If you are using the mobile theme for your site or blog, then it is recommended to enable the mobile cache. It is also recommended that do not enable mobile cache if your website is not responsive.
- If you have separate mobile theme On for your site, then turn on the separate mobile cache.
2. Logged In User Cache:
Enable caching for logged in users if you have users who log in to access your site. If there are multiple users on your site, it will offer individual cache to those.
3. Cache Lifespan:
Set the cache lifespan according to your convenience. I recommend keeping it 24 hours by default as the cache files will be removed automatically after 24 hours.
Note: Setting this too low will clear the cache too frequently. On the other hand, setting it too high might cause visitors to miss the latest content on your site. But if you want an unlimited lifetime, set it as 0 and cache files will remain as it is.
Click on Save changes.
Note: You can completely disable or manage cache for individual pages or posts on your editor screen. You can either choose Never cache this page option which will completely stop caching that individual page or post or disable/enable other options.
- LazyLoad for images
- LazyLoad for iframes/videos
- Minify/combine HTML
- Minify/combine CSS
- Minify/combine JS
- Optimize CSS Delivery
- Defer JS
It includes minification of several files such as HTML, CSS, Google Fonts, and JS. I recommend enabling the option only and only if you have an updated version of HTTP1 (For example, HTTP1.1 or HTTP2).
It reduces the weight of each file and allows a faster reading of browsers and search engines.
The optimization is categorized into 3 parts:
- Basic settings
- CSS Files
1. Basic Settings:
- Minify HTML: Minifying HTML removes whitespace and comments to reduce the size
- Combining Google fonts files: Combining Google Fonts will reduce the number of HTTP requests.
- Remove query strings from static resources: Enabling it removes the version query string from static files (e.g. style.css?ver=1.0) and encodes it into the filename instead (e.g. style-1.0.css).
2. CSS Files:
- Minify CSS: Enabling it removes whitespace and comments to reduce the file size.
- Combining CSS: Combine CSS merges all your files into 1, reducing HTTP requests.
Note: If your site is already on HTTP2, then this option is not recommended.
3. Exclude CSS files: If you want to exclude some specific CSS from a directory, you can enter the path or URL in this option. Although, this is optional and not highly recommended.
4. Optimize CSS Delivery: Enabling it eliminates render-blocking CSS on your website for faster-perceived load time.
5. Fallback critical CSS: WP Rocket makes it as convenient as possible to handle advanced performance optimizations like asynchronous CSS and critical CSS.
When you activate the Optimize CSS delivery setting check box, critical CSS will be generated for your website in the background and added upon the next page load. After that, CSS will be loaded asynchronously on your site.
3. JS Files:
- Combine JS Files: Once activated, it combines your site’s JS info fewer files, reducing HTTP requests. Not recommended if your site uses HTTP/2.
- Excluded JS files: If you want to exclude some specific JS from a directory, you can enter the path or URL in this option. Although, this is optional and not highly recommended.
- Load JS deferred: Like CSS, enabling it reduces render-blocking JS on your website for faster-perceived load time.
Click on Save changes.
1. Lazy Load:
Enable the lazy loading of images, especially if you have a lot of images on your site. Doing so faster the long page by delaying images. You can also enable it for iFrames and videos.
Disable Emoji will reduce the number of external HTTP requests.
Click on Save changes.
It is categorized into 3 sections:
1. Sitemap Preloading:
Activating sitemap preloading runs automatically when the cache lifespan expires.
There is also an option to submit the sitemap manually. Just enter the URL in the in the sitemaps for preloading box.
2. Preload Bot:
This option is recommended if and only if you have well-performing servers.
Keep it automatic, it gets triggered automatically after you add or update content on your website. You can also launch it manually from the upper toolbar menu, or from Quick Actions on the WP Rocket Dashboard.
3. Prefetch DNS requests:
DNS prefetching can make external files load faster, especially on mobile networks. You can also add external hosts to be prefetched. For that purpose, you have to just enter the URL in the box.
Some most commonly used domains for DNS Prefetch:
//use.typekit.net //netdna.bootstrapcdn.com //s0.wp.com //s.gravatar.com //stats.wp.com //www.google-analytics.com //cdnjs.cloudflare.com //ajax.googleapis.com
Database involves different sections to clean up including Post-cleanup, Comments cleanup, Transients Cleanup, Database Cleanup and Automatic Cleanup.
- Post Cleanup: Enabling post cleanup post revisions and drafts will be permanently deleted. Do not use this option if you need to retain revisions or drafts.
- Comments cleanup: Spam and trashed comments will be permanently deleted.
- Transients Cleanup: Transients are temporary options; they are safe to remove. They will be automatically regenerated as your plugins require them.
- Database Cleanup: Reduces overhead of database tables.
Click on Save changes.
WP Rocket is generally compatible with most CDN providers, including Amazon CloudFront, MaxCDN, KeyCDN, and others.
- Activate the CDN by clicking on the checkbox.
- Enter the CDN CNAME and choose reserved for all files.
2. Exclude files from CDN:
There are some files, which you may don’t want to serve via CDN. In this case, you can enter the URL of that files or directory in the box. The domain part of the URL will be stripped automatically.
Click on Save changes.
WP-Rocket with Varnish
WP-Rocket is compatible with Varnish. The plugin comes with a one-click add-on that purges all the Varnish cache each time WP Rocket purge it’s cache to make sure all the cache are up to date.
To enable Varnish, you need to enable this add-on, no further configuration needed.
WP-Rocket with Cloudflare:
Cloudflare performs minification process of JS and CSS. In contrast to WP-Rocket, the plugin involved an additional process called concatenation.
It means WP Rocket combines files into little groups for better compatibility and performance.
With the Rocket plugin, it is optional to use Cloudflare individually as the plugin involves WP Rocket Cloudflare add-on.
WP Rocket’s Cloudflare add-on:
In the plugin’s add-on tab, you will see the Cloudflare add-on.
- Turn the button ON and click Modify Options button. A new tab for Cloudflare settings will open.
- It will ask for Global API key. For that Log Into your Cloudflare account. You will get your Global API key there.
- Copy the Global API key and paste in WP Rocket settings.
- In the Account Email, enter your email address used on your Cloudflare account.
- Zone ID: Enter your zone ID for your domain. This is found on the Overview page of your Cloudflare account.
Jumping down, you will see 3 options as follows:
- Development mode: Development Mode allows you to temporarily suspend Cloudflare’s edge caching and minification features.
2. Optimal settings: Activating this option is highly recommended. It will,
- Set Cloudflare’s caching level to Aggressive
- Activate Cloudflare’s minification
- Deactivate Rocket Loader (name unrelated to WP Rocket)
- Set Cloudflare’s browser cache to 1 month
3. Relative protocol: The Relative protocol setting rewrites the URLs of static files (CSS, JS, images) to use a relative protocol ( // instead of http:// or https://). You should NOT activate it when your WordPress site runs on full SSL. You should enable this only if you are using Cloudflare’s flexible SSL feature.
Now, at the end of the page, you will see a button ‘Clear all Cloudflare cache files’. It is highly recommended, do not use this button every time. It is only helpful while troubleshooting the problems.
There is a list of some important tools like Importing or Exporting settings, Rollback etc.
Hence, you are done with some simple settings of WP-Rocket.
Now, you have to check if the plugin is working or not. To do so,
- Log out of WordPress as you have enabled Caching for logged in users.
- Open your site and check the source code
- Check the comment appearing as follows:
This website is like a Rocket, isn't it ? Performance optimized by WP Rocket. Learn more: http://wp-rocket.me
Note: The comment will not appear if you have enabled minification at Cloudflare’s end. Instead, you can see the links to the minified files in the header.
Enabling White Label footprint:
Like other cache plugins, WP Rocket also adds footprint in the HTML source code on your site which looks like:
But, WP-Rocket plugin allows the White label footprint. So, enabling white label allows you to remove mention of WP Rocket in the HTML comment footprint on your site.
How to enable White Label footprint?
wp-config.phpat the root of your WordPress installation and add this constant:
define ('WP_ROCKET_WHITE_LABEL_FOOTPRINT', true);
- Then clear the cache.
- The footprint will update to a generic message without mention of WP Rocket:
Hide Cloudflare’s API key fields
If you prefer to hide API key fields in the WP Rocket’s Cloudflare settings then add following code snippet to
define( 'WP_ROCKET_CF_API_KEY_HIDDEN', true );
Adding this will hide API key field in the settings.
You can also add API keys directly in
It is all about performance optimization. In particular, WP-Rocket helps its best as it claimed to optimize your site performance. You may like to read my another guide on speeding up WordPress.