After months in the works, our first major release of 2021 is finally here. And it’s nothing short of amazing.
Say hello to WP Rocket 3.9!
Whether you’re already ecstatic about these improvements or you’re not sure how they will impact your site, this article is for you.
Without further ado, let’s get started.
What’s New in WP Rocket 3.9?
During the development of version 3.9, our major focus was on helping our users prepare their WordPress site for Google’s big update of 2021.
That’s why the main changes we have made to the plugin should result in an improvement of your Core Web Vitals metrics and PageSpeed Insights score, on top of a better loading time and perceived speed of your website.
Here are the most relevant enhancements included in this version:
- Delaying JS execution 2.0 (New version of our Delay JS feature)
- Removing unused CSS (New beta feature)
- Removing specific add-ons
- Changing WordPress requirements
For the complete list of improvements, please check our changelog.
And if videos are more your thing than words, here’s a little presentation of the main features:
Curious to know more? Read on.
Are you having a feeling of déjà vu? You’re right. Well, kind of.
Not sure what this means for you? We’re getting there.
Take an exit intent popup, for example, it’s only relevant when the user wants to leave the page so you don’t actually need to load its script straight away. When you delay these scripts and only load the necessary ones, i.e. what is needed for the initial page render, the loading time will be significantly quicker.
Up until now, we asked you to decide which scripts to delay. While this was the safest option, it wasn’t necessarily the most effective one for a number of reasons.
First, it required quite a bit of work on your part. If coding was not your forte, manually adding the files could prove to be a hassle. Not to mention that having to maintain a list of scripts over time didn’t seem feasible in the long-term. Overall, it wasn’t the best experience for our users.
Second, the option was also not optimal in terms of addressing Core Web Vitals requirements. With the new Core Web Vitals metrics, the goal is indeed to provide the best user experience and, to do so, deliver content above the fold as fast as possible. It’s more important than ever to make sure all unnecessary files are delayed.
With this in mind, we decided to review the way we delay the execution of JS files. So, what’s happening now?
Let’s see an example to understand this better.
Take our homepage.
If you scroll down, you will encounter animated blocks. Because you don’t see them above the fold, we don’t need to load these scripts straight away: they can be delayed until you scroll. And in the meantime, the content you actually need above the fold is displayed in an ultra-fast manner.
What Can You Achieve with This Feature?
To tackle a poor LCP grade, Google specifically recommends to “Eliminate render-blocking resources” in its PageSpeed report. This includes JS files that aren’t displayed in the above-the-fold content.
Pretty impressive, right? Let’s see how you can achieve similar results!
How does it work?
Now, before you try the feature on your website (and be amazed by its incredible results), we just wanted to address the elephant in the room.
Some people consider this way of delaying JS “black hat SEO” with the sole purpose of artificially bumping the PageSpeed Insights score. While this new feature works well in addressing PageSpeed recommendations and improving your metrics, it does a lot more than that.
- This PageSpeed Insights score will not be taken into account for SEO. Google will rely on Core Web Vitals measured by CrUX. These metrics are measured with Real User Monitoring and won’t be affected by any workaround to trick PageSpeed Insights scores. On the other hand, delaying JS files, which is recommended by Google, will positively affect user data and thus Core Web Vitals.
Learn more about this enhancement with our documentation.
Removing (or Reducing) Unused CSS (Beta)
Last time you optimized your website for faster loading, there’s a good chance you encountered this particular red warning in the Opportunities section of the Google PageSpeed Insights report.
What Google does is it scans all your website’s stylesheets, and if it finds any CSS files with more than 2kb of unused code it will display this recommendation. No need to panic if that’s the case for you, we have you covered with this Beta feature.
So, how do we make Google happy and comply with that suggestion?
To answer the question, let’s first take a step back to understand what unused CSS is.
Unused CSS is simply code which is not being used on your web page. In other words, it just adds dead weight to your site, increases the size of your page and contributes to a slower site. Now, you wouldn’t want that, would you?
Let’s take an example.
When you install a pre-built theme on your WordPress website, the code contains everything that your theme may require, from widgets to fonts and background color and everything in between. The CSS is the code that styles web content.
However, you don’t actually use all of these elements on your website. You might decide that you don’t need that “latest posts” widget on your website at all or you might just want it displayed on the homepage only and not on any other page.
Nevertheless, the stylesheet that contains the code for this block is still being called from every page and loaded throughout the whole website, even if it’s not being used. A bit of a waste, eh?
Even though it may seem as though the CSS file size is only a few kb, all of these things add up and can really slow down your website performance. This is especially true since CSS styles are by default “render-blocking resources”. This means that the browser will have to read all the CSS before applying it, rendering the page, and displaying any content on the screens.
Now that you understand what unused CSS is and how it’s slowing down your website, you probably want to know what you can do about it.
This is where WP Rocket 3.9 comes in.
The new Beta feature will remove all the unused CSS from a page and generate only used CSS for this specific page. Time to say bye to all that excess code just bloating your website, wouldn’t you say?
What Can You Achieve with This Beta Feature?
Removing unused CSS styles should result in performance gains on different levels.
Firstly, enabling the Remove Unused CSS feature will reduce your overall page size. Indeed, removing all the unused CSS means that the size and number of files loaded by the browser will be smaller.
Secondly, enabling the Remove Unused CSS feature will also reduce your page load time. If browsers have less CSS to read, the overall time it takes to render the page will be lower.
The goal of this CSS cleanup is thus a faster loading page in your user’s browser. And since a faster website has better chances of ranking higher on the SERP, you should take the loading time of your website very seriously.
Cherry on top, this feature directly addresses Google’s recommendation to “Reduce unused CSS” (formerly “Remove unused CSS”) so you should also see better PageSpeed scores when enabling it. More specifically, it should have a significantly positive effect on the Largest Contentful Paint (LCP – measures loading performance) and the First Input Delay (FID – measures interactivity) metrics.
Although we can’t predict your exact performance gains, we can show you the results we achieved on this website.
Before enabling the Remove Unused CSS option, we ran a few PageSpeed tests. We were getting a warning from Google and our score was 77 on mobile.
As soon as we enabled the Remove Unused CSS option, our PageSpeed Insights score went up and we passed the Reduce Unused CSS audit.
In some cases, the Reduce Unused CSS recommendation still appears in the PageSpeed Insights report even though the feature is enabled. If this happens, you’ll see the weight of unused CSS drop but your website won’t actually pass the audit. For compatibility reasons and to prevent unexpected errors, we prefer to leave some CSS on the page, even if it’s considered unused by PageSpeed. So while you don’t pass the audit, we’re still removing all the unused CSS that’s unnecessary for your website… without breaking it! Better safe than sorry, right?
How does it work?
You will find this feature in the File Optimization tab but the option is disabled by default and needs to be enabled manually.
When you enable the Remove Unused CSS option, WP Rocket will reveal a text area where you can enter the CSS files (or CSS classes or IDs) you specifically do not want to remove. It’s up to you to add the content of Remove Unused CSS exclusions These can be anything with .css in the filename. Just make sure that you only add one item per line. This is your “safelist” and files in it will not be removed.
When the Remove Unused CSS feature is activated, unused CSS will be removed from the HTML, and Used CSS will be generated and added to the HTML of each page. Just like an engine that needs a bit of warming up, the first time you activate this feature, the entire process of removing the unused CSS from your website might take a few minutes.
A word of warning! Please note that this is a beta feature and we are still working on it to make it absolutely perfect for you. We’re providing you early access but some changes might be added later on. If you notice any glitches on your website, simply deactivate the feature.
Learn more about this beta feature with our documentation.
We’re all about adding new features. But sometimes, we clean the interface and remove options that have become obsolete and no longer provide any value from a performance standpoint.
With WP Rocket 3.9, we took the opportunity to clean the interface and decided to remove the « Google Analytics Tracking » and « Facebook Pixels » add-ons from WP Rocket.
Initially, we released these features to fix the « Leverage browser caching » PageSpeed Insights recommendation on Google Analytics and Facebook Pixels JS files.
At the time, the problem was that you couldn’t apply browser caching on files you do not host. We resolved this issue by storing the necessary files on your server, allowing browser caching to be applied to them.
Since then, Google itself recommends that lazy loading is the way to go when optimizing third-party JS files, which is precisely what we do with the delay JS execution feature. We now delay third-party scripts, including Google Tracking and Facebook Pixels. You can read more about reducing the impact of third-party scripts in our dedicated article.
To be sure the newer solution was more effective, we even ran some tests which showed that hosting locally Google Tracking and Facebook Pixels decrease the general Google PageSpeed score even if they aren’t delayed.
As a result, our add-ons to host locally Google Tracking and Facebook Pixels files are rendered useless.
On a side note, it’s worth mentioning that we also changed the minimum WordPress requirements to use this new major version of WP Rocket.
The minimum required WordPress version is now 5.3.
Over 98% of our users already use WordPress 5.3 or + but if you are using an older version, please update it to enjoy our plugin to the fullest.
Feel free to contact your hosting provider if you don’t feel confident doing that by yourself.
WP Rocket 3.9 is all about improving your PageSpeed Insights score and some Core Web Vitals metrics.
It revolves around two main enhancements which are Delaying JS execution and Removing Unused CSS.
The second one addresses Google’s recommendation to “Remove unused CSS” and should have a positive effect on the LCP and the FID metrics as a result.
We also removed two obsolete options from the user interface of WP Rocket: Google Tracking and Facebook pixel add-ons, and updated WordPress minimum requirements.
You can find the complete list of improvements for WP Rocket 3.9 in our changelog (yes, there’s more!).
Update to version 3.9 and tell us what you think in the comments section below!