Dark Mode On / Off

How to Speed Up WordPress Site with WP Rocket

WordPress users often struggle to make their site load faster. They often stumble upon various articles on the internet with tips and tricks to optimize their website. If you have read any of those articles, you’ll find a long list of optimization that is too technical for WordPress beginners.

Learning how to speed up your WordPress site is an essential skill. A page loading speed has a direct influence on your traffic, bounce rate, conversions, and user experience. Besides, search engines love fast loading websites.

Improving your website speed isn’t that difficult. You can optimize your site to load faster and rank higher on search engines avoiding all those technical jargon.

In this article, you will learn step by step how to configure and speed up your website using WP Rocket.

Let’s roll in.

About WP Rocket

WP Rocket is a premium caching WordPress plugin with over 1+ million users. It’s one of the most powerful yet easy to use caching plugin available for WordPress.

The plugin offers minimal and easy to understand configurations that produce immediate results.

In addition to browser and page caching, you can minify your HTML, CSS, and JS files, lazyload your media files, configure CDN, control heartbeat, optimize your database, and much more.

WP Rocket Pricing and Plans

WP Rocket offers different pricing plans. If you are a single website owner, the Single plan is right for you. They also offer an unlimited plan with unlimited usage, an ideal choice if you are a freelancer or an agency.

Why use WP Rocket?

There are lots of free caching plugins like W3 Total Cache, Autoptimize, WP Super Cache, and so on. 

You might be thinking, why not use the free one?

In the past, I’ve used W3 Total Cache and Autoptimize for a couple of my websites. I never got satisfactory results with them. W3 Total Cache is pretty confusing and too technical to configure. Autoptimize is relatively simple to configure but has limited features.

So, I decided to switch to WP Rocket. To be honest, it has never let me know. The plugin is easy to configure, has clean UI, and above all, it has improved my website performance. 

It costs some money, but the results you get after its use justifies the investment.

If you are strict on your budget, you can check our guide on how to configure Autoptimize

If you want to explore the benefits of WP Rocket, let’s move ahead with the tutorial.

Benchmarking Your Site

Before you start optimizing your site with WP Rocket, you can benchmark your site to record its current status. Later on, after configuring the plugin, you can compare the results to see the difference.

To test your website speed, you can use either of these websites:

  1. GTMetrix
  2. Pingdom
  3. Google Pagespeed

As all these websites rank the site on various parameters, I suggest you test your site on all three websites and keep a record of it.

Installing WP Rocket Plugin in WordPress

First of all, you need to purchase the WP Rocket plugin. If you haven’t already made the purchase, go ahead and make the purchase.

Once you make the purchase, download the plugin ZIP file from your account. Installing WP Rocket is the same as installing any other premium plugin. 

To install and activate the plugin, navigate to Plugins > Add New. Select the download ZIP file and click on Install Now.

After the plugin is installed, click on the Activate button.

Configuring WP Rocket in WordPress

To configure WP Rocket, navigate to Settings > WP Rocket from your dashboard. You will see the WP Rocket dashboard, as shown in the screenshot below.

As shown in the above screenshot, on the dashboard, you can see your purchase details, settings panel on the left, and some quick action buttons on the right.

The View My Account link will navigate you to the WP Rocket website to access your purchase. 

Clear Cache helps you to clear your site’s cache quickly. You can use Preload Cache to create a cached version of your site manually.

Regenerate Critical CSS will generate the necessary CSS code required to render your website in the visitors’ viewpoint. 

There is also a Help button to browse through the extensive documentation or reach out to the support team.

Cache

In the Cache panel, you will find the settings for mobile caching, caching for logged-in users, and cache lifespan. The plugin creates a cached page that is served as static files to your visitors.

Though the settings are self-explanatory, here’s a brief explanation:

  • Mobile Cache: It is enabled by default. If unchecked, enable it if your site is responsive. It will generate static files for your mobile users. If your mobile version is different or using any mobile theme, you can enable Separate cache files for mobile devices option.
  • User Cache: This setting is mainly for a membership site, forum, or site with secure content. You can leave it unchecked.
  • Cache Lifespan: Here’s you specify how often you want to clear your site’s cache. 10 hours is set by default, which is sufficient for most sites.

After making the changes, click on the Save Changes button.

File Optimization

Usually, a WordPress site includes several CSS and JavaScript files. Each file makes a request and results in increased site loading time. Further, these files aren’t optimized.

From the File Optimization tab, you can minify those files and combine them to reduce the file requests. As a result, it improves the site loading speed significantly.

This section is broken down into three sub-sections: Basic Settings, CSS Files, and JS Files

Under Basic Settings, you should enable all the options. Minify HTML option removes the white space to reduce the file size.

If you are using Google Fonts, by combining Google Fonts, you’ll reduce the number of requests.

In the CSS files section, enable the options shown in the screenshot. Minifying and combining your CSS files will reduce the file size and number of requests. You should also check Optimize CSS Delivery to eliminate render-blocking CSS. 

A render-blocking CSS delays a webpage from loading or visible on time. If your CSS file is large, it takes more time to load. By eliminating this, you load the necessary CSS only that is essential for rendering the website to the users’ viewport.

You can also specify the CSS files to exclude from minification.

In the JavaScript Files section, you will find the necessary settings to optimize the JS files. Enable the settings to minify and combine JavaScript files. In addition to this, check the Load JavaScript deferred and Safe Mode for jQuery option.

When you defer the JavaScript files, the browser renders your website without waiting for those files to load. Thus, it speeds up the website loading time.

Media

Under the Media section, you can enable the lazy loading for your media content. You can lazy load your images, iframes, and Youtube videos.

Also, enable Disable Emoji and Disable WordPress embeds. These files are enqueued by default with the WordPress installation and are not necessary to some extent.

At the bottom, you will find the setting to configure WebP. You should only enable this option if you want to convert your existing images to WebP format.

WebP is a modern superior lossless and lossy compression image format that helps to load your image faster. Currently, only a few latest versions of the browsers support it.

If you want to use this option, you also need to install Imagify or any other plugin that converts your images to WebP format.

Preload

Preloading generates the cache of your content, starting with the homepage. When this option is enabled, it will update the cache whenever you update your content or cache the new content.

You can also manually trigger preloading from the dashboard or WordPress admin bar at the top.

The Prefetch DNS Requests option is handy when you want to specify external hosts to prefetch from to load your external files faster.

If your site has lots of pages to preload or your server has limited resources, preloading can spike your server CPU usage.

Before you enable this option, please ensure that you have enough resources and configuration on your hosting server.

Advanced Rules

In some cases, you might not want to cache specific posts, pages, or URLs. In that case, you can specify the URLs to exclude from caching in the Advanced Rules section. This feature helps exclude pages like login, checkout, searches, etc.

You can also exclude the cookies by IDs and user agents from caching. In Always Purge URL(s) section, you can specify the URLs to purge the cache on the update automatically. 

WP Rocket doesn’t cache pages like ‘example.com/page/?city=paris’ with query strings. But, you can also force caching for pages with query strings by adding the query parameter in Cache Query String(s) section.

Database

The Database section includes cleanup options for posts, comments, transients, and databases.

You can permanently delete post revisions, auto drafts, trashed posts, spam & trash comments, and transients.

Transients stores information in your database with an expiration time. It helps to improve the site performance by reducing server load.

You can also schedule automatic database clean up and set the frequency as per your preference.

Click on the Optimize button to save the changes.

CDN

A Content Delivery Network (CDN) is a group of servers geographically distributed that works together to provide fast delivery of your site content.

Under the CDN section, you can add a CDN network and specify files to exclude from CDN. When you add your CDN network, you can choose the files to handle.

You can select all the files, images, CSS, and JS together or CSS and JS independently. WP Rocket also offers CDN at $6.99 per month.

Heartbeat

The Heartbeat section lets you control over the Heartbeat API activity to save your server resources.

You should enable heartbeat control and reduce or disable activity for the backend, post editor, and frontend. It will change the activity from 1 heartbeat frequency per minute to one hit every 2 minutes.

Add-ons

The Add-ons section includes some settings to extend the functionality of WP Rocket. It includes add-ons like Google Analytics, Facebook Pixel, Varnish, Cloudflare, and Sucuri.

If you are using any of these, you can enable it with a single toggle.

Image Optimization

In addition to all those above settings, image optimization is also crucial. You can install the Imagify plugin to compress your images.

Imagify is a powerful image compression plugin that reduces your images file sizes and still maintain your image quality.

You need to sign up for an account and get an API key to use this plugin. The free account has a limit on monthly usage.

Tools

The Tools section allows you to import or export your settings. You can also roll back to the previous version if the current version is not working smoothly on your site.

Tutorials

The last one is the Tutorials section. Here you’ll find some useful video tutorials to use the plugin.

Final Benchmarks

At this moment, you’ve optimized your site with all the features of WP Rocket. It’s time to run the tests once again with GTmetrix, Pingdom, and Google Pagespeed. You will observe a noticeable boost in your site’s performance.

Here's a result of my website:

Final Thoughts

WP Rocket is one of the most powerful caching plugin available for WordPress. The plugin has been trusted by millions as it has successfully helped website owners to improve their website performance.

The plugin takes hardly a couple of minutes to configure, and you can see the site’s performance improvement in real-time. If you ever face any issues, their friendly support team is just a click away from your dashboard.

Was this helpful tutorial easy to follow? Please feel free to share your site’s performance report before and after using WP Rocket.

If you are using any other caching plugin, let me know in the comment section below.

Leave a Reply

Your email address will not be published. Required fields are marked *

Recommended Articles