intermediate
Core Web Vitals
Measure user experience through LCP, CLS, INP, lab versus field data, attribution, and regression monitoring.
Core Web Vitals summarize real user experience: LCP for loading the main content, CLS for visual stability, and INP for interaction responsiveness. Serious optimization distinguishes lab and field data, uses attribution to locate causes, protects regressions with monitoring, and avoids improving one metric by damaging another.
- LCP: largest visible content paint — optimize hero image/font and server delay.
- CLS: unexpected layout shifts — reserve space and avoid late injections.
- INP: slow interactions — reduce main-thread work and input delay.
On interviews: LCP images, hydration/input delay, layout shifts, and why Lighthouse alone is insufficient.
Common pitfalls: optimizing only a fast local lab run misses slow devices and real networks. Chasing scores can harm product behavior.
The trade-off is convenience versus control — pick the mechanism that matches your coupling and performance budget.
Checklist:
- Measure field data (RUM) continuously.
- Use attribution to find element-level causes.
- Prioritize user-visible wins.
- Monitor regressions after releases.