01 / Foundation
Understand the concept
Core Web Vitals are user-centric metrics defined by Google to evaluate the real-world experience of a webpage.
The primary metrics are Largest Contentful Paint (LCP), Interaction to Next Paint (INP), and Cumulative Layout Shift (CLS). Optimizing them improves both user experience and search visibility.
02 / Implementation
Measuring Web Vitals in Next.js
web-vitals.ts
import { useReportWebVitals } from "next/web-vitals";
export function reportWebVitals(metric) {
console.log(metric);
}04 / Interview