A practical checklist for critical CSS

The gap between knowing this and actually doing it is where most teams lose ground. Run through this the next time critical CSS comes up.

Speed is a feature people notice only in its absence, and then they leave rather than complain. The teams that stay on top of it are the ones who put it on a calendar rather than a wish list.

The checklist

• Inlining what is needed first shortens time to first paint
• The rest can load without blocking
• Only worth the complexity on high-traffic pages
• Someone is named as the owner
• There is a date to review it again

Why it matters

Inlining what is needed first shortens time to first paint. It is worth being explicit about, because assumptions differ quietly. The practical test is whether someone new to the project could tell, in a minute, that it had been handled.

The short version

Performance work is mostly subtraction, which makes it unpopular and effective. Three things worth confirming about critical CSS before you move on:

• Someone can say what the current setup is without going to look
• Inlining what is needed first shortens time to first paint — and you know whether that is true here
• There is a way to tell whether the last change to this helped

None of this needs a rewrite. Most of it is a morning's work once someone decides to do it.