A Practical Guide to Perfect Core Web Vitals in Next.js
How we consistently ship marketing sites that score 95+ on Lighthouse — the patterns, the pitfalls, and the metrics that matter.
Why vitals are business metrics
Core Web Vitals correlate directly with conversion and search ranking. LCP measures perceived speed, CLS measures visual stability, and INP measures responsiveness. Google uses them as ranking signals; users feel them as trust.
The patterns that work
Statically generate every page you can. Use next/font to self-host fonts and eliminate layout shift. Serve images through next/image with explicit dimensions. Keep client-side JavaScript to interactive islands — a header menu and a form rarely justify shipping a component library.
The pitfalls that hurt
Third-party scripts are the silent killer: load analytics after interaction, defer chat widgets, and audit tag managers quarterly. Animation libraries that touch layout properties cause CLS; prefer CSS transforms and opacity.
Measure in the field
Lab scores are a starting point — real-user monitoring through the Chrome UX Report or GA4 tells the truth. Set budgets (LCP < 2s, CLS < 0.05), wire them into CI, and treat regressions like failing tests.
