Before you invest in critical CSS

There is no clever trick in this one, just a handful of decisions worth making deliberately. Before you spend anything on critical CSS, it is worth confirming a few things are already true.

Real-world numbers from actual visitors matter more than a score produced on a fast laptop. Doing this properly once is usually cheaper than doing it approximately three times.

Prerequisites

• You can describe the outcome you want in one sentence
• Someone owns it after the work is done
• Inlining what is needed first shortens time to first paint
• You have a way to tell whether it worked

Warning signs

The rest can load without blocking. Small and consistent beats large and occasional here. The teams that stay on top of it are the ones who put it on a calendar rather than a wish list.

Only worth the complexity on high-traffic pages. The teams that handle this well are rarely the ones with the biggest budgets. It rarely shows up as a line item, which is exactly why it slips.

How to tell if yours is fine

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.