A short guide to critical CSS

This is cheap to get right at the start and expensive to retrofit. Everything we would tell a client about critical CSS in the time it takes to drink a coffee.

Speed is a feature people notice only in its absence, and then they leave rather than complain. It is the sort of thing that looks like polish right up until it costs you an enquiry.

Why this earns attention

Inlining what is needed first shortens time to first paint. This is the sort of thing that compounds, quietly, in both directions. Most teams find the first pass takes an afternoon and the maintenance takes minutes a month.

How we handle it

The rest can load without blocking. None of that requires a large budget, only a decision and someone to own it. It rarely shows up as a line item, which is exactly why it slips.

The mistakes we see most

Only worth the complexity on high-traffic pages. None of that requires a large budget, only a decision and someone to own it. Anything you cannot measure here, you are deciding by taste, which is fine as long as everyone knows it.

In practice

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
• Only worth the complexity on high-traffic pages — and you know whether that is true here
• There is a way to tell whether the last change to this helped

Most of the value here comes from doing the first two things, not all of them.