The Three Metrics
Core Web Vitals now measure Largest Contentful Paint (LCP), Interaction to Next Paint (INP), and Cumulative Layout Shift (CLS). LCP measures load, INP measures interactivity, and CLS measures visual stability. All three must be green for a good score.
LCP Checklist
Preload your hero image or font. Serve images in modern formats (AVIF, WebP). Use a CDN. Eliminate render-blocking CSS and JavaScript. Lazy-load below-the-fold media. Your LCP element should load in under 2.5 seconds on a 4G connection.
INP Checklist
INP replaced FID and is much stricter — it measures the worst interaction latency. Break up long tasks with scheduler.yield(). Reduce JavaScript bundle size. Defer non-critical scripts. Use content-visibility: auto for long pages. Keep total blocking time under 200ms.
CLS Checklist
Always set width and height on images and embeds. Reserve space for ads and dynamic content. Avoid injecting content above existing content. Use CSS transform for animations, not properties that trigger layout. Aim for under 0.1.
Jordan Lee
Chief Technology Officer at ANERA Technologies