A Core Web Vitals Guide: Fast Websites with INP, LCP and CLS
What are Core Web Vitals? INP, LCP and CLS thresholds, what slows your site down, and the technical steps that raise your PageSpeed score.
A visitor lands on your site, the page stays blank for three seconds and they hit the back button. No ad budget or great content can make up for that loss. To measure this experience, Google uses three metrics it calls Core Web Vitals and treats them as one of its ranking signals.
What are Core Web Vitals?
Core Web Vitals are three metrics that measure how real users experience your page: loading speed, responsiveness to interaction and visual stability. In March 2024, INP replaced FID as the interaction metric, which raised the bar especially for JavaScript-heavy sites.
| Metric | What it measures | Good | Poor |
|---|---|---|---|
| LCP (Largest Contentful Paint) | When the largest content on the page appears | 2.5 s or less | Over 4 s |
| INP (Interaction to Next Paint) | How fast the page visibly responds to clicks and taps | 200 ms or less | Over 500 ms |
| CLS (Cumulative Layout Shift) | How much content shifts while loading | 0.1 or less | Over 0.25 |
What slows LCP down, and how to speed it up
- Large images: serve the hero image as WebP/AVIF at sizes that fit the screen, and prioritize it with
fetchpriority="high". - Render-blocking resources: inline critical CSS and load the rest of the CSS and JavaScript after the first paint.
- A slow server: if the first byte (TTFB) arrives late, use a CDN, caching and server-side rendering.
- Web fonts: host only the character sets you use, with
font-display: swapand preload.
INP: the new bar and the hardest metric
INP measures one of the slowest of all a user’s interactions on the page. If the main thread is busy with another JavaScript task when someone taps a menu button, the response is delayed. The most common causes:
- Lots of third-party scripts (chat widgets, tracking codes, A/B testing tools).
- Large JavaScript bundles that all run at once during page load.
- Heavy components that recalculate the whole page on every click.
The fix is to break up long tasks, hydrate components when they become visible (lazy hydration) and defer third-party scripts until after user interaction. On this site, for example, the Meta Pixel library loads after the first interaction or a few seconds; events wait in a queue, so none are lost.
CLS: stopping pages from jumping
- Give every image and video
widthandheightvalues. - Reserve space for late arrivals such as ads, banners and cookie notices.
- Define a fallback font with matched metrics so text doesn’t resize when the web font loads.
Theme or custom build?
Ready-made themes and page builders load code for dozens of features you don’t need on every page, which strains INP and LCP, especially on mobile. Sites custom-built with modern frameworks such as Nuxt or Next.js load only the code they need, and server-side rendering delivers the content in the first response. This website is built with Nuxt too and scores above 90 on mobile PageSpeed despite all its animations.
How to test your own site
- Enter your address in PageSpeed Insights and look at the “real user experience” section at the top first.
- Find problem URL groups in the Core Web Vitals report in Search Console.
- Record slow interactions in the Performance panel of Chrome DevTools and inspect the long tasks.
- After fixes, allow about 28 days for field data to update.
Conclusion
Core Web Vitals aren’t just an SEO checkbox; they directly affect conversion rate, ad costs and brand perception. A fast site also welcomes visitors from Google’s AI search without losing them. Our professional website and e-commerce projects target PageSpeed 90+; write to us for a speed review of your current site.
Frequently asked questions
Will a low PageSpeed score lower my Google ranking?
Core Web Vitals are a ranking signal, but they don’t outweigh content relevance. Among pages of similar quality, the one with the better experience can come out ahead. The bigger effect is on conversions: a slow page loses visitors and ad budget.
Is FID still measured?
No. In March 2024 Google replaced FID with INP as the interaction metric. INP is more comprehensive because it accounts for all interactions on the page, not just the first.
How long until fixes show up in Search Console?
Field data is calculated from the last 28 days of user measurements, so improvements take about four weeks to be fully reflected. You can follow the process with the validate fix option in Search Console.
