Core Web Vitals: how to measure and improve LCP, CLS and INP

Core Web Vitals are the three metrics Google uses to evaluate user experience: LCP (loading speed), CLS (visual stability) and INP (responsiveness). Since 2021, they're a ranking factor. Stores with good scores gain advantage in organic positioning and convert more.

LCP: Largest Contentful Paint

Measures time until the largest visible element is rendered. Ideal is below 2.5 seconds. Common causes of poor LCP: large unoptimized images, slow server response (high TTFB), render-blocking CSS/JS and slow web fonts. Solutions: preload hero image, optimize TTFB with CDN, inline critical CSS and use font-display swap.

CLS: Cumulative Layout Shift

Measures unexpected visual displacements. Ideal is below 0.1. Common causes: images/videos without dimensions, dynamically injected ads/banners, swapping web fonts and async-loaded content that pushes layout. Solutions: set width/height on all media, reserve space for dynamic content and use size-adjust for font fallbacks.

INP: Interaction to Next Paint

Measures time between user interaction and next paint. Ideal is below 200ms. Common causes: heavy JavaScript on main thread, complex event handlers, heavy SPA hydration and blocking third-party scripts. Solutions: code splitting, web workers for heavy tasks, debounce on handlers and defer non-essential scripts.

How to measure

Field data (real users): PageSpeed Insights, Chrome UX Report (CrUX), Search Console. Lab data (simulated): Lighthouse in DevTools, WebPageTest. The difference matters: lab data shows potential, field data shows your users' reality. Optimize based on field data.

Prioritization

If all three are poor, start with LCP. It has the biggest impact on perceived speed and the most direct solutions (optimize images, CDN, TTFB). Then CLS (define dimensions, reserve space). Finally INP (code splitting, defer scripts). Each improvement should be measured before and after.