Core Web Vitals Explained

01What are Core Web Vitals?

Core Web Vitals are a subset of page-experience metrics defined by Google to capture how a website actually feels to use. They are measured from real visits (the Chrome User Experience Report) and are also reported in Search Console.

They are one of many ranking signals; relevance of content still plays the main role. Yet between two pages of similar value a better experience can make the difference — and, more importantly, satisfied visitors stay longer and convert more.

02LCP: loading the main content

Largest Contentful Paint measures when the largest visible element on the page (usually an image or a heading block) is rendered. A good value is 2.5 seconds or less.

• Compress the main image, serve it as WebP or AVIF and give it the right dimensions.
• Use fetchpriority="high" on the main image and do not lazy-load it.
• Reduce server response time (TTFB) with caching and a CDN.
• Reduce or defer render-blocking CSS and JavaScript.

For more hands-on ways to cut loading time, see our guide to optimising page load speed.

03INP: responsiveness to input

Interaction to Next Paint replaced FID in 2024. It measures the time from an interaction (click, tap, key press) until the next visual update, across the whole visit. A good value is 200 milliseconds or less.

• Break long JavaScript tasks into smaller pieces.
• Remove or delay unnecessary third-party scripts.
• Avoid heavy DOM updates and repeated layout calculations.

04CLS: layout stability

Cumulative Layout Shift adds up unexpected movements of elements — that moment when a button jumps just before you click it. A good value is 0.1 or less.

<img src="cover.webp" width="1200" height="630" alt="…">

• Always set width and height (or aspect-ratio) for images and video.
• Reserve space for banners and ads in advance.
• Handle fonts with font-display: swap and sensible preloading.
• Do not insert content above content that is already visible.

Stable layouts are built from tracks with defined sizes — see responsive design with CSS Grid for examples.

05How to measure

There are two kinds of data. Field data shows what real users experienced and is what Google judges. Lab data runs in a controlled environment and is best for finding the cause of a problem.

• PageSpeed Insights: shows both kinds of data for a URL.
• The Core Web Vitals report in Search Console: status across the site and page groups.
• Lighthouse and the DevTools Performance panel: detailed debugging.

Track field data in Search Console and on web.dev, and review it alongside the rest of your technical SEO. If you want help shipping the improvements, our web design service covers it.