Japp
What I changed to improve my Core Web Vitals

What I changed to improve my Core Web Vitals

Three concrete changes, no frills, that had the biggest impact on LCP, CLS and INP across the projects I maintain.

Every time I review a project’s Core Web Vitals in Search Console, I run into the same three usual suspects. You don’t need to rewrite anything from scratch to improve them — it’s almost always a handful of concrete, somewhat boring changes that get forgotten between projects until you look at the report again.

LCP: it’s almost always an image

The Largest Contentful Paint measures how long the largest visible element takes to render on load. In ninety percent of the cases I’ve reviewed, that element is a header image. The change with the biggest impact: marking it with fetchpriority="high" and removing loading="lazy" — lazily loading precisely the image the user sees in the first fraction of a second is contradictory, and yet it’s the mistake I’ve run into most often, including in my own years-old code.

CLS: it’s almost always a missing aspect-ratio

The Cumulative Layout Shift measures how much content jumps around while the page loads. It almost always comes from an image with no reserved dimensions: the browser doesn’t know how tall it’s going to be until it finishes downloading it, so it pushes the text below it downward as soon as it arrives. The fix is so simple it’s surprising how often it’s missing: setting an explicit aspect-ratio calculated from the image’s real width and height, so the browser reserves the exact space from the very first instant, before the file has even arrived.

INP: it’s almost always JavaScript blocking the main thread

The newest of the three, the Interaction to Next Paint, measures how long the page takes to respond visually after the user clicks or taps something. Here the culprit is almost always a heavy block of JavaScript running all at once — a big calculation, a bunch of components hydrating simultaneously. Splitting that work into smaller chunks, or deferring what isn’t critical for the first interaction, usually brings the number down noticeably without touching the logic itself.

What I don’t do

I don’t chase 100 in Lighthouse as a goal in itself — it’s a lab tool, not the real experience of a user with bad coverage on the subway. I trust Search Console’s field data, which comes from real users, more than a perfect score in a controlled test environment that nobody else sees.

Leave without saving?

You have unsaved changes in this form. If you leave now, they'll be lost.

esen