Key takeaways
- Core Web Vitals are three measures of real-user experience: Largest Contentful Paint (loading), Interaction to Next Paint (responsiveness) and Cumulative Layout Shift (visual stability).
- Google considers a page good when, at the 75th percentile of visits, LCP is 2.5 seconds or less, INP is 200 milliseconds or less and CLS is 0.1 or less.
- Most LCP problems come from oversized hero images, slow servers and render-blocking resources.
- Most INP problems come from too much JavaScript; most CLS problems from images and embeds without reserved space.
- Page experience is one ranking signal among many; relevant, helpful content still matters most.
What are Core Web Vitals?
Core Web Vitals are Google’s standardised measures of how a page feels to real visitors. They are part of the page experience signals Google uses in search, and they also correlate with conversion and bounce rates. There are three.
| Metric | What it measures | Good threshold |
|---|---|---|
| Largest Contentful Paint (LCP) | How quickly the main content becomes visible | 2.5 seconds or less |
| Interaction to Next Paint (INP) | How quickly the page responds to clicks, taps and key presses | 200 milliseconds or less |
| Cumulative Layout Shift (CLS) | How much the layout jumps around while loading | 0.1 or less |
Thresholds apply at the 75th percentile of real-user visits. INP replaced First Input Delay as a Core Web Vital in March 2024.
Checklist to improve LCP
- Identify the LCP element, usually the hero image or main heading, in PageSpeed Insights or Chrome DevTools.
- Serve images in modern formats such as WebP or AVIF, sized to the space they occupy, and compressed.
- Preload the LCP image and do not lazy-load it. Lazy-load images below the fold.
- Reduce server response time with caching, a CDN and efficient back-end code.
- Remove or defer render-blocking CSS and JavaScript, and inline critical CSS.
- Preload key fonts and use
font-display: swapso text appears immediately.
Checklist to improve INP
- Ship less JavaScript. Remove unused libraries and split bundles so pages load only what they need.
- Break up long tasks so the main thread stays free to respond to input.
- Defer or delay third-party scripts such as chat widgets, tag managers and heatmaps.
- Prefer server rendering or static generation, and hydrate only interactive components.
- Keep event handlers light and avoid forcing layout inside them.
Checklist to improve CLS
- Set explicit
widthandheight(or aspect ratio) on every image and video. - Reserve space for ads, embeds and cookie banners before they load.
- Avoid inserting content above existing content after the page has started rendering.
- Load fonts in a way that avoids large reflows, using preloaded fonts and matched fallback metrics.
- Animate with
transformandopacityinstead of properties that change layout.
How to test and monitor
Use both lab tests and real-user data. PageSpeed Insights shows Lighthouse lab results alongside field data from the Chrome User Experience Report. The Core Web Vitals report in Google Search Console groups your URLs by status and highlights issues across the site. WebPageTest and Chrome DevTools help diagnose what is slow. For ongoing monitoring, collect real-user metrics with a lightweight script or the web-vitals library, and set alerts when a metric regresses after a release.
Do Core Web Vitals affect SEO?
Yes, but modestly. Google uses page experience as a ranking signal, and a slow, unstable page can lose visitors before they read anything. However, relevance and content quality remain far more important than speed alone, so a fast page with weak content will not outrank a helpful page that is a little slower. Treat performance as a strong foundation that lets good content perform, and as a direct lever for conversions.
A sensible order of work
- Measure your key templates (home, service, article, checkout) with PageSpeed Insights.
- Fix LCP first: images, fonts and server response usually give the biggest gain.
- Fix CLS next; it is often quick and eliminates annoying jumps.
- Reduce JavaScript and third-party scripts to improve INP.
- Re-test, deploy and monitor with field data for the next 28 days.
Qodexify is a remote-first team of senior engineers building web apps, AI agents, workflow automation and websites. Learn more about our Website development service or talk to an engineer.
