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.