Core Web Vitals: the handful of changes that actually move the numbers

Performance audits produce long lists. Long lists get triaged into nothing. On real sites, the same small number of issues cause most of the damage, and they are worth fixing in this order.

Largest Contentful Paint is usually one image

On the majority of marketing sites, LCP is the hero image or heading. If it is an image, three things matter: how big the file is, how early the browser discovers it, and whether anything blocks its download.

• Serve modern formats (AVIF or WebP) at the size the layout actually uses.
• Load the hero image eagerly and mark it high priority; lazy-load everything below the fold.
• Never place the hero behind a client-side fetch, a carousel script or an animation that waits for JavaScript.

Cumulative Layout Shift is almost always reserved space

Layout shift comes from content arriving without a slot: images without dimensions, embeds, banners injected at the top of the page, and fonts that change metrics when they swap in.

Set explicit width and height (or aspect-ratio) on every image and media container, reserve space for anything injected, and match your fallback font's metrics closely to the webfont.

Interaction to Next Paint is a main-thread problem

INP measures how long the browser takes to respond after someone interacts. It gets worse when the main thread is busy — large hydration payloads, heavy third-party scripts, scroll handlers doing layout work on every event.

• Split code by route so a page loads its own logic and nothing else.
• Delay non-essential third-party scripts until after interaction.
• Animate transform and opacity only; avoid animating width, height or box-shadow.
• Throttle scroll work with requestAnimationFrame and prefer IntersectionObserver over scroll listeners.

Measure on field data, not just lab scores

A local lab score on a fast laptop tells you very little. Chrome's field data reflects real devices and connections, which is what search engines evaluate and what your visitors experience.

Fix in the lab, verify in the field, and give changes a few weeks before drawing conclusions.

The honest summary

Right-size your images, reserve your space, ship less JavaScript, and be sceptical of third-party scripts. Do those four things properly and most sites move from failing to passing without an exotic architecture.