WP Rocket Review & Tutorial 2020: How we decreased loading times with 49%

by | Jan 25, 2020

How to create an order bump in WooCommerce

WP Rocket is a popular premium caching plugin available for WordPress. It’s one of the most powerful caching plugins available, but it’s still easy to use. Features include page caching through minification of HTML, CSS, and JavaScript files, cache preloading, media compression, database optimizations, heartbeat control, lazy loading, and lots more. WP Rocket can be expanded through add-ons.

WP Rocket is only available as a premium plugin. This can make it difficult to know if it’s the best solution for your needs. In this article, we’ll look at WP Rocket, see how easy it is to use, and see what it can do to help you decide if it’s the right plugin for your website.

The best way to speed up your website

Get Started With WP Rocket Today

WP Rocket Settings and Features

WP Rocket starts caching your website as soon as you activate it. The main features are enabled by default. It doesn’t require a lot of setup and there are no complex settings. I recommend activating a few more features to get the best results possible. If you want to make adjustments or activate features, go to the dashboard menu under Settings and enable the features you want. Here’s a look at the menu and settings.

Dashboard

WP Rocket Dashboard
The Dashboard tab provides information about your account, getting help, getting started, documentation, and FAQs. Quick Actions provide links for clearing cache, starting the cache preloading, purging content, and regenerating critical CSS.

Cache

WP Rocket Cache
The Cache tab includes settings for mobile cache, enabling caching for logged-in users, and cache lifespan. The cached pages are saved as static files and then served to your visitors. This gives you control over who gets those cached files and how long to keep the cache before clearing it.

File Optimization

WP Rocket File Optimization
File Optimization has several sections that include basic settings to minify HTML, combine Google font files, and remove the query strings from static resources.
WP Rocket File Optimization 2
For CSS and JavaScript, settings include minify, combine, optimize CSS delivery, and load JS deferred. When you select to minify or combine CSS or JS, you’ll get a message warning that it can break your site. It does seem to handle JS and CSS minification without breaking the website. Fortunately, if it does break the site, all you have to do is deactivate this feature. The minified files are cached.

Media

WP Rocket File Optimization 2

The Media tab adds features for lazy loading, disabling emojis, disabling WordPress embeds, and enabling WebP caching. Rather than loading every image on the page at once, only the images that will be visible to the reader. As the reader scrolls, the next set of images are loaded. Lazy Loading is done with JS.

You can enable lazy loading for images and videos independently. If you enable lazy loading for video, you’re given another option to replace YouTube iFrames with a preview image. This will greatly improve your loading time if you have a lot of YouTube videos on the page.

Preload

WP Rocket Preload

Preloading generates the cache starting with links on your homepage. It’s triggered automatically when you update your content. You can also trigger it manually.

Prefetch DNS Requests allows you to specify external hosts to prefecth from in order to make external files load faster.

Advanced Rules

WP Rocket Advanced Rules
Advanced Rules allows you to specify URLs, cookies, and user agents that you want it to never cache. You can also specify which URLs to always purge and which query strings to cache. This is helpful for checkout pages, student pages, searches, or other pages where the information changes every time.

Database

WP Rocket Database
The Database tab includes lots of cleanup options. It allows you to permanently delete revisions, auto drafts, trashed posts, spam comments, trashed comments, expired transients, and all transients independently from a single dashboard. You can also optimize the tables and schedule automatic cleanup. This helps keep your database clean, which speeds up access to the data and saves server resources.

CDN

WP Rocket CDN
CDN allows you to add a CDN network and specify files to exclude from CDN. When you add a network you can also choose the types of files that it will handle. Select all files, images, CSS and JS together, and CSS and JS independently. This helps save resources for your CDN servers. Most cache plugins don’t have this level of detail for CDN control.

Heartbeat

WP Rocket Heartbeat
Heartbeat lets you have control over the Heartbeat API activity to save on server resources. You can enable heartbeat control and reduce or disable activity for the background, post editor, and frontend. It changes the activity from 1 heartbeat frequency per minute to 1 every two minutes.

Add-Ons

WP Rocket Add-Ons
The Add-ons tab makes it easy to expand WP Rocket. Enable most of the add-ons with a single button click. Add-ons include Google Analytics, Facebook Pixel, Varnish, Cloudflare, and Sucuri.
WP Rocket Add-Ons 2
The last two require some additional setup, but it’s still simple. This is Cloudflare, which requires a global API, email, and zone ID. You can then enable a few simple selections or clear the cache. Sucuri is even simpler with just a single API field.

Image Optimization

WP Rocket Image Optimization
Image optimization allows you to install a plugin called Imagify. This is an image compression tool that reduces the file sizes of images while keeping the image quality. You can also make adjustments to the quality to suit your needs. The free account has a limit on monthly usage.
WP Rocket Image Optimization 2
Imagify requires a separate account and API key. The account is free and setup is easy.
WP Rocket File Optimization 3
Once you’ve added your API key you can open the settings. The General Settings let you choose the optimization level. Choose between:
  • Normal – lossless with no visible change in quality.
  • Aggressive – highly optimizes images with no significant loss in quality.
  • Ultra – applies all available optimizations for maximum compression level.
You can also set them to optimize automatically on upload, backup the original images, and keep all of the information (EXIF data) for the images.
WP Rocket File Optimization 4
Optimization allows you to create webp version of images, resize larger images to your specs, and optimize based on image size. Each of the sizes counts toward your monthly usage. You can also add custom folders and your theme for optimization. I added the theme, and the site’s root and wp-content folders.
WP Rocket File Optimization 5
Display options let you enable the toolbar menu so you can have quick access to the tools. Once you’ve completed your settings, you can save and go to the bulk optimizer.
WP Rocket File Optimization 6
The bulk optimizer shows an overview with the number of files you’ve optimized and the percentage of space-savings. A circle graph shows the percentages. The overview will show information once you’ve done the optimization.
WP Rocket File Optimization 7
To do the optimization, you must first select media files to optimize. My choices are the media library and custom folders. Once you make your selections click the button.
WP Rocket File Optimization 8
This opens a modal that shows the amount of credit you have left and what to expect while the bulk optimizer is working.
WP Rocket File Optimization 9
It will show animated icons so you’ll know the optimizer is working. It also shows a percentage bar so you’ll know how much of the work is completed. You have to stay on this page until the optimization is completed. If you leave the page and come back later it will start where it left off. Optimization can take a while.
WP Rocket File Optimization 10

Once the optimization is completed you’ll see the results. In my case, I chose Ultra, which optimized 180 images and saved 71%. The files started at 21.7MB and were reduced to 6.3MB.

WP Rocket File Optimization 11
It optimized 38 media files in the media library and 171 media files in custom folders.
WP Rocket File Optimization 12
The images in my test site still look amazing. The level of compression you’ll need will depend on the purpose of your images. For most sites, I’d recommend Aggressive, which is the default.

Tools

WP Rocket Tools
Tools lets you export your settings, import your settings, and rollback the plugin to the previous version.

Tutorials

WP Rocket Tutorials
The Tutorials tab includes lots of embedded videos that take you step-by-step through using the plugin. They cover getting started, the best settings, checking your cache, measuring speed, troubleshooting display issues, finding which JS files to exclude, how external content slows down your website, preloading, and setting up the Cloudflare add-on. They play within a modal directly from this screen, so you’re not taken to another website.

WP Rocket and Divi

There are a few issues with using WP Rocket with Divi. Some can be fixed in code. Others require you to disable certain features for specific pages. Here are the issues that I’ve found.

A/B Testing

A/B split testing doesn’t work with WP Rocket. Split testing uses PHP. The cached pages are HTML, so PHP isn’t available on cached pages. You can exclude any pages from the cache that you want to test.

Blog Module

If you’re using the Divi blog module, you won’t be able to use WP Rocket’s Optimize CSS Delivery feature. The blog module won’t display with that feature enabled. You can either disable the feature on the page with the module or exclude the main Divi style sheet.

Slider Module

The lazy loading feature displaces slider images. You’ll need to disable lazy loading for any page using the slider module. This can be solved by adding some code to your child theme.

Masonry Post List

The Masonry list of posts doesn’t show up when you’re minifying JS. This can be solved by excluding a line of code from your builder script.

Shopping Cart Icon

The shopping cart in the menu caches the number of items in the shopping cart. This means the number of items in the shopping cart for the next visitor will be inaccurate since they’ll see a cached version of the page. Shopping carts that are updated with AJAX work fine.

Older Versions of Divi

Divi versions older than 3.26.8 have issues with Divi’s static CSS cache clearing not being synced with WP Rocket’s cache clearing. This can break the post and page styling. To fix it, you’ll need to disable Divi’s Static CSS File Generation feature in the theme options.

WP Rocket and SiteGround

WP Rocket and SiteGround

SiteGround offers multiple ways to improve your website’s performance. Their hosting provides caching on the server-side with their SG Optimizer WordPress plugin and their SuperCacher plugin that includes Varnish and Memcached support.

Of course, websites can be optimized further by utilizing browser caching. To improve caching and website speed even further, SiteGround has partnered with makers of WP Rocket to provide optimization for WordPress websites.

If you’re already using SG Optimizer and SuperCacher the results of adding WP Rocket could be small, but it’s still worth adding WP Rocket. WP Rocket does improve your cache and it adds a lot of features that are not available with the SG Optimizer such as Heartbeat API control, tracking of third-party scripts, and more. It works with all three levels of SiteGround’s caching, so they work together well.

WP Rocket has been extensively tested with SiteGround’s servers and they’ve added SuperCacher support. The SG Optimizer detects WP Rocket and disables its own duplicated features automatically. If you delete WP Rocket, your dynamic cache is automatically purged.

WP Rocket Before and After Tests

WP Rocket Before and After Tests

I’m using WP Rocket on a test site with the Divi builder and a single page that’s built with the landing page from the Digital Marketing layout pack. It includes several full-screen sections with graphics, testimonials, blurbs, embedded video, CTAs, opt-in form, social media buttons, etc.

For my WP Rocket settings, I’ve enabled all of the optimizations with the exception of adding a CDN. I’ve enabled image optimization separately in order to show results with and without the image compression add-on.

Also, keep in mind that the amount of speed improvement will vary depending on the types of pages and content your website has, plugins, hosting, etc. WP Rocket’s tests resulted in a 57% improvement. The results will vary.

I’m testing the site using GTmetrix. Here’s a look at the site before and after I activate WP Rocket. I’ve tested the site multiple times within the same time-frame in order to get the best average.

Before

WP Rocket Before
Here are the GTmetrix results before activating WP Rocket.
  • PageSpeed score = D (67%)
  • YSlow score = B (80%)
  • Fully Loaded Time = 4.9s
  • Total Page Size = 2.31MB
  • Requests = 53

PageSpeed recommends serving scaled images, optimizing images, defer parsing of JavaScript, minimizing redirects, and optimizing the order of styles and scripts. YSlow recommends using a CDN, making fewer HTTP requests, adding expires headers, avoid URL redirects, and reducing DNS lookups.

After

WP Rocket After
Here are the results after activating WP Rocket and enabling the settings.
  • PageSpeed Score = B (82%)
  • YSlow score = A (91%)
  • Fully Loaded Time = 2.8s
  • Total Page Size = 669KB
  • Requests = 17

The PageSpeed and YSlow scores have improved dramatically. The fully loaded time has reduced by almost half, the total page size has reduced by 72%. The number of requests has reduced by 68%. PageSpeed recommends serving scaled images. YSlow recommends using a CDN and adding expires headers.

After Compressing Images

WP Rocket After Compressing Images
Here are the results after running image compression.
  • PageSpeed Score = B (87%)
  • YSlow score = A (91%)
  • Fully Loaded Time = 2.4s
  • Total Page Size = 560KB
  • Requests = 17

The PageSpeed score has noticeably improved. The YSlow score has remained the same. The fully loaded time is .4s faster. The total page size is 109KB lower. The number of requests has remained the same. PageSpeed recommends serving scaled images, which is now a score of 10 instead of 0. YSlow recommends using a CDN and adding expiry headers.

Results

The overall results took the
  • PageSpeed score from D (67%) to B (87%)
  • YSlow score from B (80%) to A (91%)
  • Fully Loaded Time from 4.9 seconds to 2.4
  • Total Page Size from 2.31MB to 560KB
  • Requests from 53 to 17

The fully loaded time was reduced by 49% and the total page size was reduced by 76%. This is an impressive improvement that will see a major impact on the server load and the page-loading time, which will help reduce the bounce rate.

Price

WP Rocket Price
There are three purchasing options:
  • Single site – $49
  • 3 sites – $99
  • Unlimited sites – $249
Each option includes all of the features. Each comes with a year of support and updates. Support is handled through a ticket system Monday through Saturday during normal business hours.

Documentation

WP Rocket Documentation
Documentation includes lots of articles that cover the features, compatibility, tips and tutorials, troubleshooting, license, and codex. You can look through the topics and sort them. You can also search based on keywords. The articles include step-by-step instructions and links to related articles.

Ending Thoughts

I found WP Rocket to be among the easiest to use of all the cache plugins I’ve tried. It was highly intuitive and I never needed to check the tutorials or documentation, but I’m glad that it does have a lot of help available if I wanted it. The results of my test site were impressive; taking the load time down by half and reducing the page size by 76%. If you’re interested in a cache plugin that’s easy to use, expandable, and offers excellent results, WP Rocket is worth a look.

Have you tried WP Rocket? Tell us about your experience in the comments.

0 Comments

Submit a Comment

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

WP Rocket review
0 Shares
Share
Tweet
Pin
Buffer