Core Web Vitals are a set of real-world performance metrics that Google uses to assess the user experience your website delivers. They became an official Google ranking factor in 2021 and have remained central to technical SEO ever since.
The three Core Web Vitals are Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS), and Interaction to Next Paint (INP). Each measures a different aspect of how a page feels to use — speed, visual stability, and interactivity. Getting all three into the green is one of the most impactful technical improvements you can make to a website.
Understanding the Three Core Web Vitals
LCP measures how long it takes for the largest visible element on the page — usually a hero image or headline — to load. Google considers an LCP of 2.5 seconds or less to be good. A slow LCP is most often caused by large unoptimised images, slow server response times, or render-blocking resources.
CLS measures how much the page layout shifts unexpectedly while it’s loading. If images load without defined dimensions, or ads pop in and push content around, your CLS score suffers. A score of 0.1 or less is considered good. CLS is particularly frustrating for users on mobile, where an unexpected layout shift can cause them to tap the wrong element.
INP replaced First Input Delay (FID) in March 2024 and measures the responsiveness of a page to all user interactions — clicks, taps, and keyboard inputs — throughout the entire page lifecycle. A good INP score is 200 milliseconds or less. High INP is usually caused by heavy JavaScript execution that blocks the browser’s main thread.
How to Improve LCP
The most effective LCP improvements involve your largest above-the-fold element. Compress and resize your hero image, convert it to WebP, and add the `fetchpriority="high"` attribute so the browser prioritises it. Preload the image in your HTML `<head>` to give the browser a head start.
Improve your server response time (Time to First Byte) by upgrading your hosting, enabling server-side caching, or using a CDN to serve assets from locations closer to your users. Eliminate render-blocking CSS and JavaScript that delays the browser from painting the page.
How to Improve CLS and INP
To fix CLS, always define explicit width and height attributes on images and video elements. Reserve space for ads and embeds before they load, and avoid inserting content above existing content dynamically unless triggered by a user interaction.
To reduce INP, audit your JavaScript for long tasks that block the main thread. Break up long tasks into smaller chunks, defer non-critical scripts, and remove unused third-party scripts — social share buttons, chat widgets, and analytics tags can all contribute to a sluggish main thread. Tools like Chrome DevTools and the Performance panel can help you pinpoint exactly which scripts are causing the problem.
Common questions.
Where can I check my Core Web Vitals?
Do Core Web Vitals affect mobile and desktop rankings separately?
How long does it take to see improvements in Google Search Console after fixing Core Web Vitals?
More on web design & ux.
Want a hand putting this into practice?
Book a free, no-obligation consultation with a Norwich-based specialist.
Let's put your business in a better light.
Book a free, no-pressure consultation. We'll talk through your goals and tell you honestly what we'd do — whether you work with us or not.