Core Web Vitals — the playbook we run

Chapter 01

Diagnose against real users, not lab

Lab synthetic numbers (Lighthouse) are useful for regression testing but are a poor proxy for what real users experience. Deploy real-user monitoring first — we use Vercel Analytics or web-vitals.js piped to a custom collector — then fix the pages furthest over budget.

Chapter 02

LCP — the usual suspects

Largest Contentful Paint is almost always one of: an image (not preloaded, not sized for breakpoint, not served as AVIF), a font (not preloaded, not subset, blocking render), or a third-party script (blocking the main thread when the LCP element should render).

• Preload the LCP image with an explicit fetchpriority='high'.
• Serve images as AVIF, sized to the breakpoint, with explicit width/height attributes.
• Subset fonts to glyphs in use, served from origin, preloaded.
• Defer all third-party scripts to post-LCP — gate by consent where applicable.

Chapter 03

INP — the post-LCP killer

Interaction to Next Paint replaced FID as a Core Web Vital in March 2024. It measures close to the worst interaction latency on the page, not the first. The biggest wins come from breaking up long tasks (chunked rendering, time-sliced state updates) and from removing unnecessary event handlers.

Chapter 04

CLS — the layout shift detective

Cumulative Layout Shift is mostly a function of: images without dimensions, web fonts without size-adjust, and ads/embeds that load after the page paints. We aim for 0.00 and treat any per-page CLS over 0.05 as a regression.

Chapter 05

Lock it in with CI

We run Lighthouse CI on every PR with our standard thresholds. PRs that blow the budget are blocked. The team agrees to this in writing at engagement start — without that agreement, the budget becomes a wish.