intermediate

Core Web Vitals

Measure user-visible loading, interaction, and visual stability through LCP, INP, CLS, field data, and lab diagnostics.

Core Web Vitals are Google’s user-centric metrics for page experience. For interviews focus on **LCP** (loading), **INP** (interaction responsiveness; replaces FID), and **CLS** (visual stability). Field data (CrUX, RUM) matters more than lab-only Lighthouse scores.

| Metric | Measures | Common causes of poor scores | |--------|----------|------------------------------| | LCP | Largest contentful paint | Slow server/TTFB, large hero image, render-blocking JS/CSS | | INP | Worst interaction latency | Long tasks on main thread, heavy hydration, sync work in handlers | | CLS | Unexpected layout shift | Images/fonts without dimensions, injected banners, late web fonts |

					<img src="/hero.webp" width="1200" height="630" fetchpriority="high" alt="…" />

Prioritize the LCP element: preload critical image/font, reduce blocking scripts, improve CDN and HTML caching. For INP, break up long tasks, defer non-critical JS, and avoid synchronous layout thrashing in event handlers.

On interviews: LCP vs FCP; INP vs FID; field vs lab; how a deploy regression appears in CrUX percentiles.

Common pitfalls: optimizing CLS in lab while ads inject late in production; measuring desktop only; chasing 100 Lighthouse while p75 INP fails on Android.

The trade-off is rich interactivity versus main-thread budget on low-end devices.

Checklist:

Track p75 field vitals on money routes.
Reserve space for media and fonts.
Reduce blocking JS on critical path.
Validate on real devices and networks.