Core Web Vitals in Plain English: LCP, INP, and CLS Explained

Largest Contentful Paint measures how long it takes the biggest visible element — usually a hero image or headline — to fully render. Google wants this under 2.5 seconds. The single most common cause of a slow LCP is an unoptimized hero image loading without a preload hint, competing with a dozen other requests for bandwidth. Fix: compress the image, serve it in a modern format like WebP, and add a preload link for it specifically so the browser fetches it before anything else. Interaction to Next Paint replaced First Input Delay in 2024 and measures how responsive the page feels across every interaction during the visit, not just the first click. A score under 200ms is good. The usual culprit is a long JavaScript task blocking the main thread — often a third-party script (a chat widget, an analytics tag, an ad script) doing more work than it needs to on load. Fix: defer non-critical third-party scripts until after the page is interactive, and break up any of your own long-running JS into smaller chunks. Cumulative Layout Shift measures how much visible content jumps around as the page loads. Under 0.1 is good. This is almost always caused by images or ads loading without a reserved space — the browser doesn't know how tall an image will be until it's downloaded, so it collapses the space, then shoves everything down once the image arrives. Fix: always set explicit width and height (or aspect-ratio in CSS) on images and embeds, so the browser reserves the space before the content loads in. Three fixes, roughly 80% of failures: preload the LCP image, defer third-party scripts, and set explicit dimensions on images. Run a real audit before guessing which one applies — the fix for a slow LCP and the fix for high CLS look completely different in the dev tools, and applying the wrong one wastes a deploy cycle.