WP Rocket 3.7

After our seventh anniversary celebrations in July and a month of August dedicated to product development, we open September with a bang: welcome WP Rocket 3.7!

The changelog of this new major version is rich with improvements, and you shouldn’t miss it. In this article, we’ll focus on the two queen features of 3.7: delay of JS execution and link preloading.

Curious to know more about them? You just have to keep reading!

What’s New in WP Rocket 3.7

There are many features that enrich this new major release. 

We leave you the curiosity to discover in our changelog those that will have a lighter impact on the user experience.

We want to focus instead on the two features that will produce a great improvement in your PageSpeed score, loading time, and the perceived speed of your website:

Also, because we want to keep our user interface always clean and as clear as possible, we have removed some options from the WP Rocket backend: we’ll detail these changes below in this article.

If you prefer to have a video preview of what’s new in this version, here is our presentation video:

To know v3.7 in detail, read on!

Delay of JavaScript Execution

Are you familiar with the concept of lazy-loading? You’ve probably heard about it in terms of image management and optimization. Lazy-loading for images is one of the first features we included in WP Rocket and now the latest version of WordPress, 5.5 “Eckstine”, has introduced it by default.

The principle behind lazy-loading is to load files only when the user visiting a page needs them. With WP Rocket 3.7, we are applying this same principle to JavaScript files.

Not all scripts are relevant for the initial page render and delaying them can improve the loading time

For example, think about a script managing an exit intent popup: such script is not relevant during the initial page load because it will be triggered only when the user is about to leave the page. 

The exit-intent popup on the WP Rocket website
The exit-intent popup on the WP Rocket website

This kind of JS script can be delayed, and, as a result, you can obtain a huge performance gain.

How Does It Work?

When you enable this option from the File Optimization tab, WP Rocket will reveal a text area where you can enter the scripts you want to delay. The Delay JavaScript Execution is an opt-in feature, so it’s up to you to tell WP Rocket which inline or JavaScript files to delay.

The area of pre-populated scripts in WP Rocket settings
The area of pre-populated scripts in WP Rocket settings

To do so, specify the keywords that identify the files to delay and WP Rocket will search for those keywords. Our plugin will analyze all the scripts found on the page, not only its URL.

This means that you can include keywords that target data attributes or any other attributes on the script tag; for inline JavaScript, you can use any keyword inside the code itself.

The only thing you have to pay attention to is the choice of unique keywords, so that WP Rocket doesn’t get confused with script identification. 

WP Rocket pre-populates this text area with some scripts, when it identifies some that are safe to delay. For example, this is the list of third-party scripts we are delaying on our website:

– Google Analytics
– Facebook Pixel
– Linkedin Pixel
– Twitter Pixel
– OptinMonster
– Olark Chat

If any of the scripts WP Rocket includes by default happen to cause issues, you can remove them from the list in a blink of an eye. 😉

Learn more about this new feature with our documentation.

What Can You Achieve with This Option?

Although we can’t predict precise numbers that apply to all websites (you know how difficult this is when it comes to speed testing!), we can show you the results we’ve achieved on the WP Rocket website.

Before

Before enabling the Delay of JS Execution option, we tested the speed of WP Rocket website with GTMetrix:

GTMetrix speed test before the delay of JS execution
GTMetrix speed test before the delay of JS execution

We also ran a few PageSpeed tests. While the score for the desktop version of our site was already very good (97), for the mobile version we started from a fairly low score:

PageSpeed score for WP Rocket’s mobile site before delaying JS execution
The PageSpeed score for WP Rocket’s mobile site before delaying JS execution

Ready to see what happened when we enabled the Delay JS Execution option? 🥁

After

As soon as WP Rocket started to delay JS execution, the GTMetrix report turned into a green field. 🍀

GTMetrix speed test after the delay of JS execution
GTMetrix speed test after the delay of JS execution

What about the PageSpeed score? See for yourself.

PageSpeed score for WP Rocket’s mobile site after delaying JS execution time
PageSpeed score for WP Rocket’s mobile site after delaying JS execution time

We have summarized the results in this table, so it is easier to evaluate them at a glance:

BeforeAfter
Loading time2,6 seconds0,9 seconds
PageSpeed Score Mobile4686

As you can see, we obtained an amazing 65% reduction in loading time (from 2,6s to 0,9s) and a 87% improvement in the mobile PageSpeed score!

Considering that mobile speed is more and more important in the eyes of Google and search engines every day, we are very happy with this outcome. 🌟

Preload Links

There are a myriad of ways to optimize the performance of your site and make it load objectively faster; WP Rocket already plays a big part in it. But what about optimizing your site to make it load psychologically faster

Perceived performance is a measure of how fast a user thinks your website is, not necessarily how fast speed tests say it is. The goal is to improve your website so it feels faster than the objective loading time.

We developed the Preload Links option to improve perceived performance

How Does It Work?

Preloading a link is technically called link prefetching. What does it mean?

A good definition is the one found in MDN Web Docs:

Link prefetching is a browser mechanism, which utilizes browser idle time to download or prefetch documents that the user might visit in the near future. A web page provides a set of prefetching hints to the browser, and after the browser is finished loading the page, it begins silently prefetching specified documents and stores them in its cache. When the user visits one of the prefetched documents, it can be served up quickly out of the browser’s cache.

How prefetching works
How prefetching works – Source

WP Rocket 3.7 is going to use an early prefetch strategy to anticipate what page the user may navigate to next. As a result, the user will perceive pages linked by those URLs as loading instantly. 

Does that mean we can predict the future now? Well, almost. 😉

WP Rocket has become an excellent observer of the actions that take place on a page: it senses when the user hovers the mouse over a link or when they touch a link while swiping, scrolling, or zooming.

When we detect that the user is interested in an URL, we preload that page automatically.

In the Preload tab, you will find a new section dedicated to Preload Links. It’s a checkbox to enable/disable the option:

Preload Links option in WP Rocket
Preload Links option in WP Rocket

To prevent unexpected results, we also thought of a list of URL types that WP Rocket 3.7 excludes automatically from this behavior:

❗️ Important: At the moment, this feature only works in Chrome. Safari, Opera, IE, and Edge don’t currently support link prefetching. Firefox does make a link prefetch request; however, there is a bug in Firefox which blocks the prefetched page from being served from FF prefetch cache.

Learn more about this new feature with our documentation.

Improving Core Web Vitals

Over the past few months, we have been closely following the evolution of Google’s Core Web Vitals, and we are working to ensure that WP Rocket meets these new standards.

Version 3.7 already makes good progress in improving Core Web Vitals. 🚀

For example, we are automatically adding font-display:swap to CSS files containing a font-face. 

By adding this property to the font, we instruct the browser to use a system font while the custom font is being downloaded. Once the custom font download is complete, the system font is replaced with the custom font. This means your users can interact with the website faster without waiting for the font to download.

At the same time, this enhancement improves rendering time and Largest Contentful Paint (LCP). It also improves user experience because it avoids the “flash of invisible text”, the invisible text during font loading.

On the other hand, the new Preload Links features we’ve just described in the previous paragraph, is going to improve metrics like First Contentful Paint and Time to Interactive; it can also often make subsequent navigations appear to load instantly.

And this is just the beginning!
A sneak-peek of what’s coming next? 👀

We are already working on some great news for the next versions of WP Rocket, like removing unused CSS or loading fonts asynchronously to optimize WebFont loading and rendering. 😎

A Cleaner UI: Options Removed from the User Interface

«Decisions, not options» is the motto that has been leading our development philosophy since the beginning, here at WP Rocket.

We don’t want people using our plugin to feel overwhelmed by dozens of options and choices to make before finishing the setup. 

Following this philosophy, over the years we have always tried to maintain a balance between basic and advanced options and clean user interface.

With WP Rocket 3.7, we took the opportunity to do some cleaning and focused on these two features:

Optimize Google Fonts

From now on, the Optimize Google Fonts feature is enabled by default in WP Rocket. Based on the data we have, around 94% of our customers keep this option enabled.

The rest of the users who don’t enable this option are probably not using Google Fonts on their site, or have voluntarily disabled it for some reason.

Incompatibilities due to this feature are rare, and we can count on the fingers of one hand the support tickets we receive related to it. 

These factors helped us in our decision to remove this option from the UI and keep it automatically enabled in the background. 😎

If you didn’t previously enable the option, you won’t have it active after updating to v3.7. To activate it, you can visit the Tools tab and use the “Optimize Google Fonts” button:

How to enable Google Fonts Optimization
How to enable Google Fonts Optimization

Minify HTML

We decided to remove this feature from WP Rocket altogether, as it is now obsolete.

GTMetrix eventually deprecated its recommendation to minify HTML as the effect on the overall performance is not significant anymore. Performance tools like PageSpeed Insight and Pingdom Tools have been ignoring this recommendation for a while, so we feel confident that the Minify HTML option is no longer needed. 

Following these changes, we are going to remove the Basic Settings area inside the File Optimization tab:

The "Basic Settings" area we are removing from WP Rocket settings
We are removing the “Basic Settings” area

Summary

WP Rocket 3.7 is focused on improving the perceived performance of your website and its PageSpeed score. 

It revolves around two new stellar options: Delay JavaScript Execution and Preload links. The first one applies a sort of lazy-loading technology to JS files, while the second preloads the URLs a user is about to visit.

There’s indeed some magic in this new version of WP Rocket! 🎩


Following our motto «Decisions, not options» we also removed two features from the user interface of WP Rocket: Google Fonts Optimization and HTML Minification. 

In our changelog you can find the complete list of enhancements WP Rocket 3.7 includes (yes, there’s more!). 

Update to v3.7 and leave your opinion in the comments section below! 

Author's avatar

Alice Orrù is a web content writer with strong experience in international customer service and B2B copywriting. She is an active member of the WordPress community: she loves translating WordPress into Italian and speaking at WordCamps.

10 comments

This is simply awesome, great job!

I'll run some more tests, but delaying the JS Execution is the best news I've heard in months.

My results are in line with what it is explained above:
https://www.meridionalevents.com/ went from 2,3s to 1,0s. Some others went from 2,4s to 0,8s (GTMetrix).

I must say that I haven't seen much improvement for the mobile ones in PageSpeed (from 35 to 55 as average).

Congrats!!

Yes, these major improvements explained here are exceptional. And kudos to Alice for some great explanations! Only bummer for me is, I use Chrome only for web development; I use Safari for everything else, like random surfing. I hope Apple will soon enable the link prefetching cache feature.

Absolutely amazing plugin, thanks!

Nice work, thanks!

Awesome! Site loading time has decreased by 2 times. Pingdom report the page loads in 1 second.

I am going to update this on pixahive.com and hoping to see some fantastic jump in pagespeed scores.

unbelievable, very nice job done...

Wow. I like that WP Rocket always pay attention to any factor not just only for caching, speed, score but here the preloading page before click make the whole different for user experience. I appreciated. Thank you so much. Can't wait for the future update.

Hello, love the new update. Made the loading speed improve quite a bit and also my score on GTMetrix and Google Page Speed also went up a lot! I saw great improvements on my Mobile loading speed and score as well. One side effect though, not 100% sure if it is related to the Delay JS Execution feature is, my Google Analytics stopped capturing data altogether. I currently use SiteKit on my site for Google Analytics. Has anyone else had an issue? Any suggestions? Thanks

Add a comment
Your email address will not be published. All fields are required. Comment policy: We love comments and appreciate the time that readers spend to shader ideas and give feedback. However, all comments are manually moderated and those deemed to be spam or solely promotional will be deleted.

Get a Faster Website in a Few Clicks

Setup Takes 3 Minutes Flat

Get WP Rocket Now What are you waiting for?

{"cart_token":"","hash":"","cart_data":""}