Core Web Vitals: the three projects that actually move the needle

Measure in the field before optimising in the lab

An audit run on a developer machine over fibre describes an experience nobody has. Field data, collected from your real visitors, decides: only it includes older phones, slow networks and browser extensions.

A large gap between lab and field is a signal in itself: it often points to conditional loading, a cache that hides the first render, or a third party that only fires on certain pages.

Project 1: the image of the largest visible element

On the vast majority of editorial pages, the element that defines the LCP is a banner image. Three settings are enough: serve it in a modern format, size it for the actual display, and load it with priority rather than deferring it.

• Serve WebP or AVIF, with variants matched to screen width.
• Remove lazy loading on that specific image: it delays exactly what should be accelerated.
• Declare width and height to reserve the space and avoid shifting.
• Preload the resource when the browser discovers it late.

Project 2: the JavaScript that blocks interaction

Blocking time rarely comes from your application code: it comes from third-party scripts — tag manager, analytics, chat widgets, A/B tests — loaded as early as possible “so as not to miss anything”.

Inventory what loads, page by page, and ask one simple question for each script: what is lost if it loads three seconds later, or only after an interaction? The answer is almost always “nothing measurable”.

Project 3: visual stability

Layout shifts come from four recurring sources: images without dimensions, fonts replacing a fallback with different metrics, banners inserted at the top of the page, and content injected after the fact.

What almost never deserves the effort

Merging every CSS file, removing each unused rule or rewriting a component to save two kilobytes produces invisible gains as long as the three projects above are untouched. Start with what blocks the critical path.

Web performance is a matter of loading order far more than total weight: two hundred well-ordered kilobytes beat fifty badly placed ones.