Core Web Vitals Explained: A Practical Guide to LCP, INP and CLS

What Google's Core Web Vitals measure, why they matter for SEO and conversions, and the fixes that make the biggest difference.

Core Web Vitals are Google's user-centred performance metrics. They measure how fast your main content loads, how quickly the page responds and how stable the layout is while loading.

Largest Contentful Paint (LCP)

LCP measures when the largest visible element, usually a hero image or heading, finishes rendering. Aim for under 2.5 seconds.

// Prioritise your hero image in Next.js
<Image src={hero} alt="" priority sizes="100vw" fill />

Interaction to Next Paint (INP)

INP measures how quickly the page responds to clicks, taps and key presses. Keep it under 200 milliseconds by breaking up long JavaScript tasks and shipping less code.

Cumulative Layout Shift (CLS)

CLS measures unexpected layout movement. Reserve space for images, ads and embeds, and avoid inserting content above existing content.

/* Reserve space so nothing jumps */
.video-embed {
  aspect-ratio: 16 / 9;
}

Every 100ms of delay costs conversions. Performance isn't a technical detail, it's a business metric.

Share:LinkedInX