Gotta regenerate Jetpack Boost’s Critical CSS whenever updating WordPress theme styles

Jetpack Boost is a performance module in the all-in-one Jetpack plugin for WordPress. I use it because it makes generating Critical CSS a trivial task which should help, erm, boost site performance.

(Perhaps I shouldn’t be using Critical CSS at all, but that’s another story for another day.)

Anyway, my local and live WordPress environments seemed out of sync. I went over to WebPageTest to get a filmstrip of the site loading:

See that shiz? Freeze it at the 0.2s mark:

I was scratching my head because my site does not have an off-white background color. Plus, the content was jumping around because there was a flash of different font sizing and styling.

I literally said out loud:

Gosh, it’s like I’m loading a different stylesheet or something.

And it turns out I was! I never regenerated the Critical CSS from some past iteration of my site. In other words, old styles were still lurking around and mucking things up.

Fixing it was easy: regenerate the CSS!

Hmm, that option to automatically regenerate things is enticing, but I’m honestly more tempted to flip the thing off (both turn it off and🖕), especially as I’m redesigning the site in the open and things change often.