Core Web Vitals
Ship pages that pass LCP, INP, and CLS thresholds out of the box — no hydration debt, no layout shift, no mystery.
LCP — Largest Contentful Paint
Preload hero images with <link rel="preload" as="image">. Inline critical CSS in <style> tags so the browser never waits on a render-blocking stylesheet. Keep the hero element above the fold and avoid lazy-loading it.
INP — Interaction to Next Paint
Break long tasks with setTimeout orscheduler.yield(). Defer non-critical work past the first interaction. Avoid synchronous layout reads inside event handlers — batch reads and writes separately.
CLS — Cumulative Layout Shift
Reserve space for every async element: images get explicitwidth andheight, ad slots get fixed containers, fonts use font-display: swapwith a fallback that matches metrics. Never inject content above existing content after load.
Quick Audit
- Run Lighthouse in incognito with no extensions.
- Check the Web Vitals extension for field data.
- Verify LCP sub-2.5s, INP sub-200ms, CLS sub-0.1.
- Monitor regressions in Search Console.