In this article we're going to discuss how to use WP Rocket to optimize your WordPress website. We will be taking a step by step look at how to use this plugin to pass the most commonly failed PageSpeed audits. We've ordered this article by most common audit to fail to least common audit to fail, but you can easily use the table of contents on the left of this post to quickly navigate.

If your website isn't properly optimized, Google will give you a list of opportunities that you can pursue to increase the performance of your website. Additionally, they will provide you with a list of audits that you have either passed or failed. If you fail an audit, they will give you recommendations on how best to address it.

It's not essential that you score a perfect 100 out of 100 on Google PageSpeed. It is essential though, that your website is able to load quickly as speed is a ranking factor for the Google search. Additionally, there are tons of statistics out there (all you need to do is search Google) that explain why a faster website leads to higher conversion rates and lower bounce rates. You definitely want to be scoring under a 2.0 for your speed index.

Now that we know why speed is important, let's go over why we're choosing WP Rocket for our website optimization.

We use WP Rocket to optimize all WordPress websites. This includes the websites that we've built as an agency, as well as the websites that we work on when running an optimization service with SpeedOpp (professional WordPress speed optimization). The reason we choose WP Rocket is because it's the fastest in the industry, and it's also extremely easy and simple to implement.

Don't get us wrong, it's a super powerful tool, and is designed in such a way that makes it easy to understand and use - saving us a lot of time. It's a premium plugin ($49/yr), but it's simple, and leads to the fastest web sites (we've tested this).

Now, let's get into the actual optimization Tutorials for each individual page speed audit that you can fail. We're going to be covering the most common opportunities that Google PageSpeed will give you when generating a report for your WordPress website. These opportunities and audits can also be found in a Lighthouse report. Let's get into it.

Eliminate render-blocking resources

This is probably the most common error that you're going to encounter with your WordPress website. If you haven't done anything to optimize your website, render blocking resources are running rampant. The Google opportunity suggests that you should eliminate render blocking resources.

First up, what are render blocking resources? You can learn more here, but in short they are scripts or files that slow the loading time of your website. when a specific type file is loaded in a specific manager, the browser stops rendering the webpage to load that file, reads it, And then continues rendering the web page. Having multiple render blocking resources adds up, and leads to a much slower website.

WP Rocket addresses render blocking resources in three ways. First, the second you install the plugin on the website, it generates a cache automatically.

2nd, the tool offers 2 settings that you can activate to optimize the delivery of JavaScript and CSS period to do that, head to the file optimization tab in the WP Rocket dashboard.

On that page, you can activate the following two settings:

• optimize CSS delivery - This is an extremely powerful, yet automatic feature. It happens in two steps. First, WP Rocket will identify all of the CSS and necessary to loading the website. This is called critical path CSS, Which is necessary to load the initial viewport. Then, it will asynchronously load all additional CSS removing the render blocking aspect of it.
• load JavaScript deferred - deferring the load of JavaScript removes the render blocking aspect of it.

We also recommend merging and minifying CSS and JavaScript files as well. This combines all of the individual files into one larger file reducing the amount of HTTP requests and render blocking resources.

Defer Unused CSS

By optimizing CSS delivery, you defer unused CSS. Unused CSS is any CSS that isn't necessary when loading the initial viewport of the page.

Simply head to WP Rocket --> File Optimization, and activate the "optimize CSS delivery" feature. This is the same “optimize CSS delivery” setting that was just discussed in eliminate render blocking resources.

That was quick and easy, wasn't it?

Minify CSS and Minify JavaScript

WordPress websites commonly fail these two audits because they're using multiple plugins and theme. There's nothing wrong with that, and it's fairly easy and simple to merge and minify CSS and JavaScript in WordPress using WP Rocket.

First off, minification refers to removing whitespace and unused characters from the code that makes up JavaScript scripts and CSS files on your WordPress website. You can go ahead and do this manually, but WP Rocket will do this automatically for you.

Under the file optimization tab in WP Rocket, simply check off minify CSS and minified JavaScript. There are additional features and functionality that you will find in this tab such as minifying HTML, merging CSS files, and more.

When minifying files, WP Rocket will warn you that this could break things. That's a valid warning because it's changing the underlying code that your WordPress website relies upon. If anything breaks, you can just uncheck the setting and everything will go back to normal.

Preload key requests

99% of the time, if you're failing the preload key requests audit, it has to do with your fonts. This is especially true with the Elementor page builder and other plugins that call third party fonts Without including the preloading tag. Luckily, this is an extremely easy thing to remedy.

When you fail this audit, Google will alert you to the files that are not being preloaded. If they're font files, simply copy and paste the relevant URL From Google to WP Rocket. The input field for preloading fonts can be found under the preload tab in WP Rocket.

You can also prefetch external files and DNS requests . That's found in the pre loading section just above the preload fonts input.

Defer offscreen images

If you fail this audit, it means that you are loading all of your images when your page loads. Even if visitors don't scroll to the image and view it, it still loads transferring data and slowing down the loading of your website.

To defer offscreen images, all you need to do is lazy load them.

Under the media tab in WP Rocket, activate the lazy loading for images, iframes, and videos. If you have many YouTube videos on your website, chances are they are severely impacting your page speed. We recommend enabling lazy loading for high frames and videos if you have YouTube videos Embedded on your website.

That's because the YouTube player takes a while to load due to render blocking JavaScript. By loading the video when the user scrolls to it, you remove this issue altogether.

After you enable the lazy loading for your YouTube videos, you can also opt to replace the YouTube iframe with a preview image. This is another massively beneficial thing to you if you’re running a lot of YouTube embeds on your WordPress website.

By replacing the player with a preview image, the video and player aren't loaded unless the user specifically clicks on the preview image. This means you're only loading the necessary data, and seriously improves the loading time of the respective web page.

Reduce Server Response Times (TTFB)

We thought we would include this in our article, even though you can't do anything to improve this metric with WP Rocket.

Reduce server response times (also known as time to 1st byte) typically means that you are on inadequate hosting. Specifically if you're on shared hosting (Bluehost, GoDaddy, HostGator…) server response times are always extremely poor.

The best way to improve server response times is to simply migrate to a more premium host. This doesn't always need to be expensive. We've created several in depth articles about migrating to premium hosts for the same cost as shared hosting.

Our recommendation for reducing time to 1st byte would be switching From your existing WordPress host to Cloudways. They have a plan that costs only $10 per month, and allow you to host your website an enterprise level cloud hosting. You can try out their platform (even migrate a copy of your website) free for three days without entering the credit card number. You can also get 30% off your first month of hosting by using the discount code “ISOTROPIC”.