Core Web Vitals — Three Parameters of Web Health
Your website loads quickly—but is it really good? Google measures this with three specific metrics: LCP, INP, and CLS, which together form Core Web Vitals.Core Web Vitals determines the quality of your website experience for real users.
What Are Core Web Vitals?
Core Web Vitals are a set of standardized metrics introduced by Google that measure a web page's real user experience. They are part of the Page Experience signal and are used in the search algorithm alongside other factors such as HTTPS and mobile-friendliness.
The main difference from traditional speed metrics is that Core Web Vitals focus on user perception—how a user feels on the page, not just technical loading speed.
Measures how quickly the largest content element on the page appears, such as a heading, image, or video.
Measures how quickly the page responds to user interactions, like clicks or taps.
Measures visual stability—how much elements shift during page load.
1. LCP — Largest Contentful Paint
LCP measures how many seconds it takes for the largest content element in the viewport to appear, such as a heading, image, or background element.
Why LCP Matters
Research shows that if LCP exceeds 3 seconds, 53% of users leave the page. In e-commerce, improving LCP by 100ms can increase conversions by about 1%.
Ways to Improve LCP
- 01Reduce server response time (TTFB) — use a CDN, caching, and server optimization. A good TTFB is ≤800ms.
- 02Preload LCP images — the
<link rel="preload">tag in the HTML<head>helps the browser prioritize them. - 03Optimize images and formats — use WebP or AVIF instead of JPEG/PNG.
- 04Remove render-blocking resources — minify CSS and JavaScript, inline critical CSS in HTML, and use defer or async on unnecessary scripts.
2. INP — Interaction to Next Paint
From March 2024, INP replaced FID (First Input Delay). INP measures all interactions during a session, not just the first one.
INP considers clicks, key presses, taps, and identifies the slowest interaction, which determines the page’s final score.
Improving INP
- 01Break up long tasks — tasks over 50ms on the main thread cause delays.
- 02Move heavy computations to the background — use Web Workers to keep the main thread free.
- 03Remove unused JavaScript — excess code increases load times.
- 04Reduce input delays — use debounce or throttle for event handlers.
3. CLS — Cumulative Layout Shift
CLS measures visual instability—how much elements shift during page load. A classic example: you are reading an article, an ad banner loads at the top, and everything moves down.
Causes of CLS
- 01Specify image dimensions — always set width and height on
<img>tags. - 02Dynamic content — reserve space for banners and pop-up notifications.
- 03Web fonts — use
font-display: swap;oroptionalfor optimization. - 04Embedded content (iframe) — specify width and height or use CSS
aspect-ratio.
Measurement Tools
Core Web Vitals can be measured with two types of data: Lab Data (controlled test environment, e.g., Lighthouse) and Field Data (real user data—this is what Google uses for search ranking).
| Tool | Type | Usage |
|---|---|---|
| PageSpeed Insights | Lab + Field | Official Google tool, integrated with CrUX |
| Chrome DevTools (Lighthouse) | Lab | Developer optimization, local testing |
| Google Search Console | Field | Real user Core Web Vitals reports |
| web-vitals JS library | Field | Send metrics to Analytics |
| WebPageTest | Lab | Waterfall analysis, various networks and devices |
| CrUX Dashboard (Looker) | Field | Visualize Chrome User Experience Report |
Core Web Vitals and SEO
Since June 2021, Google has incorporated Core Web Vitals into the Page Experience update. This means that among pages with similar content, the one with better Core Web Vitals will have an advantage.
* Average website values according to HTTP Archive 2024
Research confirms that pages with "good" Core Web Vitals are twice as likely to appear on the first page in SEO. INP is often the weakest metric on websites, providing an opportunity to stand out from competitors.
Conclusion: Where to Start?
Optimizing Core Web Vitals is an ongoing process. Recommended priority order:
- 1.First, measure — check Field Data using PageSpeed Insights.
- 2.CLS can be fixed quickly — specifying image dimensions is an easy solution.
- 3.Improve LCP — optimize images, preload, use a CDN.
- 4.INP is difficult — requires full JavaScript analysis and optimization.
- 5.Ongoing monitoring — regularly check Core Web Vitals reports in Search Console.
Core Web Vitals answers one simple question: "Do users like my website?" — and Google tries to turn that answer into numbers.