Visitors leave slow websites, and a page that jumps around while loading or freezes when someone taps a button feels broken. If your site feels sluggish, Core Web Vitals tell you exactly where the problem is.
Core Web Vitals are three Google metrics for real user experience: Largest Contentful Paint (LCP) for loading, Interaction to Next Paint (INP) for responsiveness and Cumulative Layout Shift (CLS) for visual stability. Good scores are LCP of 2.5 seconds or less, INP of 200 milliseconds or less and CLS of 0.1 or less, measured at the 75th percentile of real visits.
What are the three Core Web Vitals?
| Metric | What it measures | Good | Needs improvement | Poor |
|---|---|---|---|---|
| LCP (Largest Contentful Paint) | How long the main content (often a hero image or heading) takes to appear | 2.5 s or less | Up to 4 s | Over 4 s |
| INP (Interaction to Next Paint) | How quickly the page responds visually to clicks, taps and key presses across the visit | 200 ms or less | Up to 500 ms | Over 500 ms |
| CLS (Cumulative Layout Shift) | How much visible content moves unexpectedly | 0.1 or less | Up to 0.25 | Over 0.25 |
INP replaced First Input Delay (FID) as a Core Web Vital in March 2024. Unlike FID, which only looked at the delay before the first interaction was handled, INP considers the responsiveness of interactions throughout the visit.
Do Core Web Vitals affect SEO?
Core Web Vitals are part of Google's page experience signals, which its ranking systems take into account. Relevance and content quality still matter far more, so a fast page with weak content will not outrank a helpful one. The bigger benefit is usually commercial: faster, more stable pages are easier to use, which supports conversions. For the wider picture, see our technical SEO checklist for business websites.
How do you measure Core Web Vitals?
There are two kinds of data, and you need both:
- Field data comes from real Chrome users through the Chrome User Experience Report (CrUX). It is what Google uses and what you see in the Core Web Vitals report in Google Search Console and the top section of PageSpeed Insights.
- Lab data comes from a simulated test, such as Lighthouse in Chrome DevTools or the lower section of PageSpeed Insights. It is useful for debugging, but it cannot fully measure INP because no real user is interacting; Total Blocking Time is a helpful lab proxy.
For your own real-user monitoring, Google's open-source web-vitals JavaScript library can report the metrics to your analytics.
How do you improve LCP?
- Speed up the server response. Use caching, a CDN and efficient database queries so the HTML arrives quickly.
- Prioritise the LCP element. Do not lazy-load the hero image; consider
fetchpriority="high"or a preload for it. - Optimise images. Serve correctly sized images in modern formats such as WebP or AVIF, with responsive
srcset. - Remove render-blocking resources. Inline critical CSS, defer non-critical scripts and limit web font files.
- Render on the server where it helps. Frameworks such as Next.js can server-render or statically generate pages so content does not wait for client-side JavaScript.
How do you improve INP?
- Break up long tasks. JavaScript that runs for a long time blocks the main thread; split work into smaller chunks and yield between them.
- Ship less JavaScript. Remove unused libraries, split bundles by route and load heavy widgets only when needed.
- Audit third-party scripts. Chat widgets, tag managers and ad scripts are frequent culprits. Load them later or remove ones you do not use.
- Give instant visual feedback. Update the UI first, then do expensive work, so the next paint happens quickly.
How do you improve CLS?
- Set dimensions (width and height or
aspect-ratio) on images, videos and iframes. - Reserve space for ads, embeds and banners that load later.
- Avoid inserting content above existing content, unless it responds to a user action.
- Manage web fonts with sensible
font-displaysettings and matched fallback fonts to reduce shifts. - Animate with transforms rather than properties that trigger layout changes.
How do you keep a website fast over time?
Performance tends to degrade quietly as new features, images, tracking scripts and plugins are added. To prevent that, treat speed as an ongoing requirement rather than a one-off fix. Check the Core Web Vitals report in Search Console regularly, run Lighthouse on key templates before major releases, and consider a performance budget (for example, a limit on JavaScript bundle size or the number of third-party scripts) that new work must respect. Because field data in CrUX is based on a rolling 28-day window, improvements take a few weeks to show fully in reports, so be patient after a fix.
Are there platform-specific fixes?
Yes. WordPress sites often suffer from heavy themes and too many plugins; our WordPress speed and security checklist covers those. Shopify stores tend to slow down through installed apps that inject scripts. Custom web apps usually gain the most from rendering strategy, image handling and JavaScript bundle size.
Key takeaways
- Core Web Vitals are LCP, INP and CLS; aim for 2.5 s, 200 ms and 0.1 or better at the 75th percentile.
- Use field data (Search Console, CrUX) to judge, and lab tools (Lighthouse) to debug.
- The biggest wins usually come from image optimisation, less JavaScript, fewer third-party scripts and reserved layout space.
Want a faster website that passes Core Web Vitals? Ask AppifyDevs for a web development quote, or see examples of our work in the portfolio.