About

Tuesday, June 1, 2021

Jetpack Boost Handles Critical CSS For You

Critical CSS is one of those things I see in my performance reports but always seem to ignore. I know what it means. It means to put only the CSS required to render things immediately visible in a <style> tag in the <head> so it comes across in the first network request, then load the rest asynchronously, which will help the page load faster.

You’ve probably also seen the nag in Lighthouse performance reports as well:

Lighthouse tells me the critical CSS is an opportunity and even gives me a some WordPress-specific tips.

I’m not a big-complex-build-process sort of person, and unfortunately a lot of tooling for critical CSS involves including it within an existing build process.

I caught wind of Jetpack Boost and it’s designed to (among other performance-y things) make critical CSS easy for WordPress sites. Having a (free!) plugin that takes care of that really appeals to me.

Jetpack Boost is freely available in the WordPress Plugin Directory, so it installs just like any other plugin.

Screenshot of the WordPress Plugin Directory in the WordPress admin with an open search for Jetpack Boost, which is the first item in the results out of four total plugins displayed.
Search, install and activate! 🚀

Activating the plugin adds a “Jetpack Boost” item to the WordPress admin menu, and that leads to a handy screen that runs sorta like Lighthouse, but in WordPress. And wouldn’t you know, there’s an option to generate critical CSS right there. All I had to do was toggle the feature on and Jetpack Boost starts working.

The Jetpack Boost admin screen showing the overall performance score of the site, which is a letter B, a mobile score of 83% and desktop score of 86%. Below the scores are three toggle settings to enable critical CSS, deferring non-essential JavaScript, and lazy loading images.
My score can only go up from here, right?!

It doesn’t take long for the process to run. I switched windows to check my email for a minute and it was already done by the time I switched back. And, hey, look what it did for me while I slacked off:

The Jetpack Boost settings screen after critical CSS has been generated. The overall score is now a letter A, with a mobile score of 94, and desktop score of 91.

Not too shabby for clicking one button! But we’ve gotta compare apples to apples, right? Let’s go back into Lighthouse to see what it says.

Lighthouse open in Chrome DevTools. The Performance score is 99 and the opportunity for using critical CSS has passed the audit.
Now if only I could bring that initial server response time down. 🧐

We can even view the source to see that the proof is indeed in the pudding:

DevTools window showing the inline CSS code contained in a style tag in the HTML head. The inlined code is a giant block of white text on a black background.
Whoa, that’s more than I expected!

It’s seriously cool to see the Jetpack team so focused on performance, and to the extent that they’ve dedicated an entire plugin to it. Performance has always been part of Jetpack’s settings. But making it front-and-center like this really allows Jetpack to do more interesting things with performance, like grading and critical CSS, in ways that go beyond basic settings. I’d imagine we’ll see more of Jetpack’s performance settings making the move over to the new plugin at some point.

Kudos to the Jetpack team! This is really nice enhancement, and certainly timely, given Google’s recent push on Core Web Vitals and how they’ll affect SEO.


The post Jetpack Boost Handles Critical CSS For You appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.



source https://css-tricks.com/jetpack-boost-handles-critical-css-for-you/

No comments:

Post a Comment