What Actually Moved Our Largest Contentful Paint
A colleague asked me last week why our team cares so much about Core Web Vitals. I gave a rambling answer, so here is the longer, more organized version.
The first symptom was subtle. Nothing failed outright, but Core Web Vitals kept drifting in the wrong direction, and every fix seemed to make the next one harder.
Where we started
When we finally measured, the numbers were worse than anyone guessed. Around 26% of the time spent on a typical change went into working around Core Web Vitals rather than building anything.
Most of the complexity was accidental. Over the years we'd layered three different approaches to Core Web Vitals on top of each other, and each one made sense at the time.
Trying something different
We started by writing down the one rule we actually cared about, then deleted every bit of code that didn't serve it. It's not glamorous, but it works.
Stripped of the project-specific bits, it looks like this:
.card-list {
container-type: inline-size;
}
@container (min-width: 36rem) {
.card {
display: grid;
grid-template-columns: 12rem 1fr;
gap: 1.5rem;
}
}Nothing about this is clever, and that's the point. Anyone on the team can read it in a minute and know exactly what it does.
A few things that helped along the way:
- Keep the old path around until the new one has survived a real incident.
- Agree on what "done" means before the first pull request.
- Write the migration guide before writing the migration.
- Pair on the first few changes so the knowledge doesn't live in one head.
Where this breaks down
There are cases where this falls apart. If your team is very small or your traffic is very spiky, the extra moving parts may not pay for themselves.
The biggest cost was social, not technical. Changing how people think about Core Web Vitals takes much longer than changing the code.
Takeaways
If you take one thing away from this, let it be this: Core Web Vitals is a design decision, not a cleanup task. Make it early and make it on purpose.