What do Core Web Vitals measure?
Short answer: LCP measures rendering of the largest visible content element, INP measures responsiveness after an interaction and CLS measures layout stability. Google recommends evaluating them at the 75th percentile, separately for mobile and desktop.
A website can look beautiful and be well written yet remain frustrating to use if its content appears late, it responds slowly or its elements move around.
Google uses Core Web Vitals in its page experience systems. Google also states that a good result does not guarantee first position and that content relevance remains essential. These metrics are therefore one aspect of an SEO audit, not a ranking formula.
75th
Google recommends evaluating LCP, INP and CLS at the 75th percentile of page loads, separately for mobile and desktop.
The three metrics must be read together and linked to the relevant page. A lab test helps diagnose; field data describes what real visitors experienced when sufficient volume is available.
The 3 Core Web Vitals explained simply
- LCP: the main contentThe moment the largest visible element appears.
- INP: the response to an actionThe delay until the next visual update.
- CLS: stabilityUnexpected content movements during loading.
LCP = Largest Contentful Paint
In plain English: how quickly does your page's main content load?
When you open a website, you first see a blank screen. Then images, text and other elements gradually appear. LCP is the moment the “biggest thing” (usually the hero image or main heading) appears.
Recommended “good” threshold: 2.5 seconds or less, at the 75th percentile.
Practical example: your blog article displays its main content in 1.2 seconds in a test, or in 4 seconds. Field data will show what visitors actually experience.
First identify the element actually measured as LCP. If it is an image, check its format, dimensions, loading priority and response time before changing the rest of the page.
INP = Interaction to Next Paint (interactivity)
In plain English: how quickly does your website respond when you click, type or take an action?
After you click a button, there is a delay before something happens. INP measures that delay.
Recommended “good” threshold: 200 milliseconds or less, at the 75th percentile.
Practical example: you click “Add to basket” and the next visual update arrives in 150 ms in a test, or in 800 ms.
CLS = Cumulative Layout Shift
In plain English: does your page “move” while it loads?
Imagine reading some text when an ad suddenly appears above it, the text moves down and you lose your place. Frustrating, isn't it? That is CLS.
Recommended “good” threshold: 0.1 or less, at the 75th percentile.
Practical example: your page content stays stable with a measured CLS of 0.02, or shifts with a CLS of 0.5.
An image without dimensions can push content as it loads. Declaring its width and height helps the browser reserve space.
Why does it matter so much?
Google Search
Core Web Vitals are among the page experience signals. They cannot predict the relative ranking of two pages and do not replace content relevance.
Conversion
Performance can influence visitor behaviour, but no universal rate applies to every website. Measure the effect using your own events, a comparable period and sufficient volume.
Mobile
Google primarily uses the mobile version of content for indexing. On that version, therefore, check useful content presence, accessibility and actual loading conditions.
How to measure your Core Web Vitals
PageSpeed Insights (free, official Google tool)
Go to pagespeed.web.dev and paste your URL. Depending on available data, you will see:
- CrUX field data if the URL or origin has sufficient volume
- a Lighthouse lab test run at the time of analysis
- Whether you are in green (good), orange (average) or red (poor)
- optimisation suggestions to validate in your context
Google Search Console (free, for your entire website)
Search Console groups URLs according to their field data when the website has enough information.
Chrome DevTools Performance panel (free)
Open the Performance panel in Chrome DevTools to inspect local measurements and, where available, field data. It has replaced the old Web Vitals extension since January 2025, as explained in the Chrome documentation.
Lighthouse (free, built into Chrome)
Open DevTools (F12), click “Lighthouse” and run an audit. It gives you an overall score plus details.
Solutions for improving LCP
Problem 1: an oversized hero image
Solution: adapt the image's file size, format and dimensions to how it is actually displayed, then measure again under comparable conditions.
- Use TinyPNG or ImageOptim
- Use modern formats (WebP instead of JPG)
- Resize images to their display size (there is no need for a 5000x3000 image if you display it at 800x600)
Problem 2: too much JavaScript slowing things down
Solution: load your JS lazily, meaning later rather than at startup.
- Add the
deferattribute to non-critical scripts - Use
asyncfor things that can wait
Problem 3: the server responds slowly (TTFB - Time to First Byte)
Solution:
- measure response time before deciding whether hosting needs to change
- Use a CDN (Cloudflare, Fastly) when audience location and architecture justify it
- Cache your pages (with a caching plugin if you use WordPress)
Solutions for improving INP (interactivity)
Problem 1: long-running blocking JavaScript
Solution: identify long tasks, remove unnecessary work and split processing to return control to the browser between stages.
Problem 2: too much processing on click
Solution: simplify interactions. If clicking a button triggers 10 operations, that is too much. Do only what is immediately necessary.
Problem 3: overly heavy JavaScript libraries
Solution: use lighter libraries or reduce the number of libraries.
Solutions for improving CLS (layout shifts)
Problem 1: images without defined dimensions
Solution: always declare image height and width in HTML. This reserves space before loading.
<img src="photo.jpg" width="800" height="600" alt="...">
Problem 2: content that loads later (ads, embeds)
Solution: reserve space for this dynamic content too.
Problem 3: changing fonts
Solution: use font-display: swap to show text in a fallback font while the custom font loads. Switching fonts can still shift the text: choose a fallback with similar metrics and measure CLS after the swap.
Priorities: where should you start?
- Step 1: establish a field and lab baseline, including measurement conditions.
- Step 2: identify the metric and element actually responsible for the problem.
- Step 3: apply one change at a time, then check appearance and functionality.
- Step 4: repeat tests and observe field data over a sufficient period.
Tools for optimisation
Cloudflare and other CDNs
A CDN and caching rules can reduce some transfer times. The effect depends on the origin, content, rules and visitors' locations. Measure before and after.
WordPress: WP Rocket or LiteSpeed Cache
On WordPress, these plugins can help configure caching and some optimisations. Test every option, as compatibility depends on the theme and other plugins.
Vercel or Netlify (for static sites/Next.js)
These platforms offer useful building blocks for deployment and caching. Code, media and third-party scripts remain decisive.
Audit or optimisation: which next step should you choose?
To place performance within a complete project, see our approach to website creation. If a problem has already been measured, explore performance and Core Web Vitals optimisation. If the cause remains unknown, start with a performance audit. The plan starts from a baseline and does not promise a universal score.
Conclusion: you can do it
Core Web Vitals are not complicated magic. LCP = loads quickly. INP = responds quickly. CLS = stays still. Three simple things.
The solutions are simple too: compress images, load JS intelligently and reserve space for dynamic content.
The timeline depends on the cause. An image or caching rule may be fixed quickly, while architecture or third-party scripts require more work. If a website has accumulated too much technical debt, a redesign may be worth considering.
Start today. Measure with PageSpeed Insights, improve one thing at a time, then measure again. That is what matters.