Understanding Core Web Vitals (and How to Improve Them)

Google’s Core Web Vitals are three metrics that quantify how a page feels to use. They feed into search ranking, but more importantly they correlate with whether people stick around.

The three metrics

Largest Contentful Paint (LCP)

LCP measures how long until the biggest visible element — usually a hero image or headline — finishes rendering. Aim for under 2.5 seconds.

Biggest wins:

• Serve correctly sized images in modern formats (AVIF/WebP).
• Preload the LCP image and mark it fetchpriority="high".
• Cut render-blocking CSS and JavaScript.

Interaction to Next Paint (INP)

INP measures responsiveness — the delay between a user interacting and the page visibly responding. Aim for under 200 milliseconds.

Biggest wins:

• Ship less JavaScript. Every script competes for the main thread.
• Break up long tasks and defer non-critical work.
• Prefer static HTML and progressive enhancement over heavy client frameworks.

Cumulative Layout Shift (CLS)

CLS measures unexpected movement — content that jumps as the page loads. Aim for under 0.1.

Biggest wins:

• Always set width and height (or an aspect ratio) on images and embeds.
• Reserve space for ads and iframes before they load. This is the single most common cause of bad CLS on monetized sites.
• Avoid injecting content above existing content.

Why static sites have an advantage

A static-first stack ships minimal JavaScript, sends fully-formed HTML, and lets the CDN do the heavy lifting. That directly helps LCP and INP, and disciplined layout (reserved image and ad slots) keeps CLS near zero.

Measuring

• Lab data: Lighthouse in Chrome DevTools, for repeatable testing.
• Field data: the Chrome User Experience Report and Search Console, for what real visitors experience.

Fix the metric that’s furthest from its target first — you’ll get the biggest perceived improvement for the least effort.