Core Web Vitals Without the Marketing

Google's Core Web Vitals have real impact on both user experience and search rankings. Here is what each one actually measures, stripped of the marketing language.

LCP — Largest Contentful Paint

LCP measures when the largest visible element (usually a hero image or heading) finishes rendering. Target: under 2.5 s. The single biggest lever is the hero image: add priority to Next.js's <Image> for above-the-fold images, preload the font if a text block is your LCP element, and ensure the server response is fast.

CLS — Cumulative Layout Shift

CLS scores unexpected movement of page elements during load. Target: under 0.1. The usual culprit is images and embeds without explicit width/height — the browser doesn't know how much space to reserve. Always set dimensions or use an aspect-ratio wrapper. Late-loading fonts that change line heights are the second most common cause.

INP — Interaction to Next Paint

INP replaced FID in 2024. It measures the worst interaction latency across the whole page visit. Target: under 200 ms. Long JavaScript tasks on the main thread are the enemy. Break them up with scheduler.yield(), move heavy work off-main-thread with Web Workers, and be suspicious of third-party scripts that you don't control.

The 80/20 Checklist

• Add priority to the LCP image.
• Set explicit dimensions on every <img> and <video>.
• Self-host fonts and add font-display: swap.
• Audit third-party scripts — each one is an INP risk.
• Run Lighthouse in incognito to avoid extension interference.