This Jetpack Boost review is going take a deep look into the functional efficacy of this new plugin from Automattic – the company behind WordPress and the famous Jetpack plugin.
I mentioned earlier in a review of Jetpack that you should be avoiding this plugin, because it has memory usage issues, and it can slow down your website when you activate every module available.
Anyway, the core Jetpack plugin is not the focus here. We are talking about a separate plugin by Automattic that has been launched recently considering Google’s new Core Web Vitals that will play a major role in measuring a page’s overall user experience. User experience will become a major ranking factor.
If you are not aware of Core Web Vitals are, you can read about it here. I also created a list of plugins that you can use for improving your website’s Core Web Vitals. One of the listed plugins was Jetpack Boost.
This article here is dedicated to Jetpack boost where I will try to understand whether Jetpack boost will help to improve Core Web Vitals, or not!
The approach will be simple.
I will use a website with no caching and CDN on it. Test it on Google PageSpeed Insights and see how it performs.
I will then install Jetpack Boost and configure it. Once configured, I will then check the same page I tested earlier to see how it performs. A comparison will give a fair idea of whether the plugin really helps or not.
Note: If you do not use Jetpack, and you never intend to use it in the future, you can ignore this review, because Jetpack Boost cannot work independent of Jetpack core plugin. So, they must coexist on the same website.
Let’s begin…
The Test Without Jetpack and Jetpack Boost
The website in question is groots.org. Here is what I see when I run a specific URL through Google PageSpeed Insights’ lighthouse test for mobile devices:
You can notice that the Largest Contentful Paint has a terrible score. TTI (time to interactive) and CLS or cumulative layout shifts are acceptable.
The overall score is at 66.
That’s not acceptable.
What about desktop?
Here is what I observed:
While the LCP, TTI and CLS are all green, the score is still below 90.
Things will definitely change when I add caching and CDN.
But that’s something I will not do.
I need to see by how much the score increases when I install Jetpack Boost. That will give me a fair idea of whether Jetpack Boost is an effective plugin, or not.
Test With Jetpack and Jetpack Boost Installed
The test with Jetpack Boost installed yielded horrible results. There was a sudden jump in CLS with slight improvements in the overall speed.
Here is what the mobile test gave:
A score of 84 is much better than a score of 66.
The desktop results weren’t that impressive. Here is what I found:
The score improved from 85 to 88. That was a slight improvement, but the CLS also increased from 0 to 0.271.
That’s a massive jump!
Why Did CLS Increase After Installing Jetpack Boost?
CLS or cumulative layout shift is a horrible thing. It one of the three important factors used in measuring the user experience.
Layout shifts are awfully frustrating, to say the least.
The reason for a massive jump in CLS after installing Jetpack Boost can be attributed to just one factor – Lazy Loading.
But isn’t lazy loading supposed to increase the loading speed?
Yes, it is!
But here is the problem:
Lazy loading collapses the space where the image is supposed to show up. When the area of the webpage comes into the screen of the viewer, the collapsed area expands and then the image loads.
The collapsing and expanding of the space cause massive layout shifts, and Google is not going to accept it just because you have enabled lazy loading.
What is the way out?
You need to understand that lazy loading is important. It indeed helps in speeding up the site. You saw the before and after results.
But since lazy loading has a tendency of collapsing the space allocated for image, you need to prevent that from happening.
There are two possible ways.
First: Define image dimensions and reserve the space.
This is the best method. When you define the image dimensions, an empty placeholder is created. This placeholder reserves the space for the image and prevents it from collapsing. You can assign a color for the placeholder, or show a very low-quality image in that placeholder, which is later replaced by the image you want to display.
This is the method that many ad networks are now using to prevent layout shifts caused by suddenly appearing ads. One ad network I know about that implements this is Mediavine. It shows a placeholder first and then lazy loads the ads.
Second: Prevent lazy loading for above-the-fold
If you don’t know how to define and declare image dimensions, you can always prevent lazy loading for the images in the area called above-the-fold.
It is essentially the part of the web page that shows up first on the screen when the web page loads. So, if you have a featured image, you it will load normally, preventing CLS.
That is what was happening before I installed the Jetpack Boost plugin.
But preventing lazy loading for above-the-fold isn’t going to solve the problem for below-the-fold images. There will be layout shifts when a user scrolls down.
So, the question that now logically follow is, ‘what will happen if I disable lazy loading in Jetpack Boost?’
Let’s find out!
Here is what happens with Mobile:
And here is what happens with desktop:
Notice how the CLS issue is now resolved. Scores are still better with Jetpack Boost installed, but lazy loading turned off.
Here is the summary of the test results in a tabular format:
Jetpack Boost | Mobile Score | Desktop Score | CLS (Mobile | Desktop) |
Not installed | 66 | 85 | 0 | 0 |
Installed with all settings turned on | 84 | 88 | 0.329 | 0.271 |
Installed with lazy loading turned off! | 80 | 95 | 0.001 | 0 |
Did you notice how things changed?
Yes, Jetpack Boost indeed helps to improve the Core Web Vitals, but turning on lazy loading can be disastrous, to say the least.
You really should avoid CLS.
Okay, now that you know Jetpack Boost can indeed help, it is time to look at the plugin configuration options.
Let’s start!
Jetpack Boost Plugin Configuration
Jetpack Boost is an astonishingly simple plugin.
There are only three settings available. All you need to do is flip the ON switch for each option, and you are good to go.
Here is how the interface looks like:
By default, the Lazy Loading option is turned on.
When you turn on the Optimize CSS loading option, the plugin will start generating critical CSS or CCSS.
This is how it looks like:
The other option is to defer non-essential JavaScript.
That’s all!
So, what does the option of CSS optimization do?
From what I understood, toggling on the Optimize CSS Loading option does two things:
- It generates Critical CSS or CCSS that is essential for loading the above-the-fold segment of the website.
- It defers loading of all other CSS until the above-the-fold page loading is complete.
CSS is meant for styling your website. So, the plugin will generate only that portion of the CSS that is required for styling and loading the above-the-fold portion of the web page. The remaining CSS can be deferred, because by the time a reader finishing reading the content appearing in the above-the-fold portion of the webpage and starts interacting, the remaining CSS loads.
The CCSS that the plugin generates goes right before the starting of the HTML title tag of web page.
This method is used by any optimization plugin you may use.
What is the meaning of deferring non-essential JavaScript?
A web page is made of many components like HTML, CSS, JavaScript, scripts, etc. Some JavaScript are essential for proper loading of the web page. Some are not essential. Google Analytics code, for instance, is a non-essential JavaScript.
The Google Analytics code is not required for loading your web page. It is just an additional service you use. So, it is non-essential. There several such non-essential JavaScript present on a typical web page.
This plugin will take all those non-essential JS files and push them in the footer, forcing them to load only after the web page has loaded. This increases the speed of your web page.
Do you really need lazy loading?
Unless you are using WordPress version 5.5 or below, you really need lazy loading by another plugin. From later version of WordPress, lazy loading is a default feature. So, you can just shun away third-party plugins to do this for you.
You can turn off the lazy loading option of Jetpack Boost. You don’t need it. I showed you the results earlier. Lazy loading by Jetpack Boost does increase speed, but also increases CLS. It does more damage. So, turn it off!
Should You Use Jetpack Boost?
Jetpack Boost is a good plugin, but I will still not vote for it! Here are the reasons:
There is more to optimizing: Optimizing for Core Web Vitals involves more than just generating CCSS, deferring non-essential JS and lazy loading. This is something that any modern caching plugin will do by default. So, if you already have a caching plugin like Autoptimize, W3TC, WP-Rocket, LiteSpeed Cache, you don’t need Jetpack Boost.
No support for WebP: Most modern optimization plugins (which are essentially caching plugins) will convert your regular JPG, PNG, and GIF images into WebP version – something that Google wants you to do.
No support for prefetch: You will be using many third-party resources like Google Analytics, ads, etc. that are all served by third-party providers. All those elements load from external websites. So, prefetching their DNS helps to improve website speed. Jetpack Boost will not do that.
No localization support: You may be using web fonts or Google fonts. You may be using Google Analytics (highly likely). You can literally localize them and serve them from your server, thereby reducing DNS lookups. Jetpack Boost doesn’t do that for you.
No CDN support: Unless you are using Jetpack’s very own CDN, with Jetpack Boost you cannot use a third-party CDN like Cloudflare or CloudFront or StackPath CDN that have established themselves as leaders. CDN plays a very vital role in optimization. So, no! Sorry Mr. Jetpack Boost.
Conclusion
If you use Jetpack Boost, you will still have to use other optimization plugins for achieving even better results. While Jetpack Boost might be an ideal solution for no-fuss text-only blogs, it is certainly not an option for established blogs and websites that use various third-party services to improve user experience.
So, if you are serious about your blog or website, and you want to ensure that it performs well, there are better optimization plugins available. Jetpack Boost just doesn’t do it right! It can give you some boost, but still, it lacks the power you need to sail or glide or fly – whatever you want to call it. I recommend WP-Rocket if you want to achieve real website speed. This site is however using SG Optimizer Plugin and hosted on Siteground Cloud Hosting
