Jetpack Boost Is Good – But Not Good Enough

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:

1. Autoptimize
2. Async JavaScript

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!