Earlier, I’d covered the plugin Jetpack Protect – a spinoff from the main Jetpack plugin that Automattic maintains. Today, I’m reviewing another plugin – Jetpack Boost, by Automattic. It’s a standalone plugin that you can install to improve your site speed in three key areas. While it’s good as a “set it and forget it” solution, it could be much better. Here’s how it works.
Getting Started with Jetpack Boost
Installing Jetpack Boost is easy – just download the plugin from your WordPress dashboard and activate it. You’ll see a welcome screen like this:
When you click “Get Started”, you’ll get the next screen asking you to take three actions.
1. Inlining Critical CSS
The first option will allow Jetpack to generate critical CSS for your site and move it to the top of the page. Here’s what it looks like:
When you enable this option, Jetpack Boost will start generating your critical CSS – it might take a few minutes. When it’s done, you can load your site, and it should render more quickly because all the important CSS is part of the page instead of in a separate file.
Earlier, I’d written a tutorial on how to inline critical CSS without a plugin. That method still works, and I prefer it to this because of the preloading.
2. Defer JavaScript
WordPress and the various plugins add external JavaScript files to ensure your site works as intended. Unfortunately, browsers pause to download and process these files before they finish rendering the page. Since JavaScript is usually used to add functionality to the page after it’s been rendered, we can safely defer most of the JavaScript. This is what the Jetpack Boost plugin allows you to do:
Note that this function doesn’t defer jQuery because that has its own problems.
3. Defer Lazy Image Loading
Because images are so large, loading them after the page has finished rendering is best. The Jetpack Book plugin uses a placeholder for the images and fills them in later when the user needs to see them. This is very useful, especially for those on slower Internet connections and mobile devices. No complaints here – it’s universally a good thing.
Why the Jetpack Boost Plugin is Insufficient
The Jetpack Boost plugin is good for those who just want something they can enable and forget about. But I don’t like it to use it for the following reasons.
You Can’t Customize the Critical CSS
Generating critical CSS is an art as much as a science. An automated tool like Jetpack Booster will inevitably miss some rules you want to be included. As a result, when your site loads, it might not look great until all the CSS files have been downloaded and applied to the final styling. In my tests, the Jetpack Booster critical CSS generator module doesn’t do a very good job catching all the above-the-fold styles.
You Can’t Exclude Certain JavaScript Files
Everyone’s website works differently, and there is no one-size-fits-all solution. When Jetpack Booster defers non-essential JavaScript, you might find that your site breaks, and you need a way to exclude specific JavaScript files for your site to work. Earlier, I’d written about the right way to defer JavaScript, and I suggest you follow that guide instead of Jetpack Booster.
Alternative to Jetpack Booster
To speed up your site, I suggest the following two plugins instead of Jetpack Booster:
These two plugins combined give you all the tools to inline critical CSS and defer JavaScript, including jQuery. You might also want to defer inline JavaScript for even faster speeds, which finally allows you to defer jQuery without consequences. Finally, use this site to generate critical CSS to input into Autoptimize. These are the tools I use on my site WP-Tweaks, and I hope you find them useful too!
I’m a NameHero team member, and an expert on WordPress and web hosting. I’ve been in this industry since 2008. I’ve also developed apps on Android and have written extensive tutorials on managing Linux servers. You can contact me on my website WP-Tweaks.com!
Prop Trading says
Thanks for sharing.
I’m facing the issue of critical LCP in Google Pagespeed, so I am looking for a way to resolve this. What do you think about Soledad theme?
So my question is, since I already installed Litespeed cache, do I still need the Autoptimize and Asynch Javascript plugins? Won’t it cause issues.
Looking forward to your answer.
layalia rashin says
Thank u for information