The Three Metrics That Matter
Google’s Core Web Vitals program distills page experience into three numbers. As of 2024, they are Largest Contentful Paint (LCP), Interaction to Next Paint (INP), and Cumulative Layout Shift (CLS). Fail on these and you carry a mild but real ranking penalty.
LCP measures how quickly the main content loads. For most articles, the LCP element is either the hero image or the first large block of text. A good score is under 2.5 seconds.
INP replaced First Input Delay in 2024. It measures the delay between a user interaction — click, key press, tap — and the next visible update. Under 200ms is good; over 500ms is poor.
CLS measures visual instability: elements that shift position after the page loads. Images without explicit dimensions, ads injected late, or fonts that swap are common causes.
The Fastest Fix for LCP
If your LCP element is an image, two changes cover most sites: convert to a modern format (WebP or AVIF), and add loading="eager" plus fetchpriority="high" to that one image. Everything else can lazy-load.
For text-based LCP, eliminate render-blocking CSS and keep the critical stylesheet small. Inline the above-the-fold CSS if you can.
Fixing CLS Without a Rewrite
Set explicit width and height attributes on every image and video element. This lets the browser reserve layout space before the asset loads, eliminating the most common shift source.
For custom fonts, use font-display: optional if you can tolerate the fallback font, or font-display: swap plus <link rel="preload"> for the critical woff2 file if you need the custom face on first paint.
Measuring Progress
Google’s PageSpeed Insights gives you field data (from real users via CrUX) and lab data in one place. Focus on field data for ranking purposes — that’s what Google uses. Lab data is useful for debugging.
Run PageSpeed Insights on your three highest-traffic pages once a month. Fix LCP first; it has the largest ranking weight of the three.