The "speed" of a website affects not only user experience but also search rankings. Core Web Vitals, proposed by Google, are three metrics that quantify that speed and comfort. In this article, we explain what each metric means and the concrete steps to improve it from a practical, hands-on perspective.
The Three Metrics
| Metric | What it measures | Good target |
|---|---|---|
| LCP Largest Contentful Paint | Time until the largest element finishes rendering (loading speed) | Within 2.5 seconds |
| INP Interaction to Next Paint | How quickly the screen responds to interactions (responsiveness) | Within 200 ms |
| CLS Cumulative Layout Shift | How much the layout shifts while loading (visual stability) | 0.1 or lower |
Improving LCP (Loading Speed)
In most cases, the LCP element is a large above-the-fold image or hero text. The standard ways to improve it are as follows.
- Optimize images: Use lightweight formats such as WebP / AVIF and serve them at appropriate sizes.
- Preload critical resources: Speed up the initial response with
<link rel="preload">andpreconnect. - Lazy loading: Add
loading="lazy"to images outside the first view. - CDN and caching: Shorten delivery distance and speed up repeat visits.
Improving INP (Responsiveness)
When the response to clicks or input is slow, users feel that the page has "frozen." The main cause is heavy JavaScript occupying the main thread.
- Split JavaScript: Reduce the initial load with code splitting.
- Break up long tasks: Divide heavy processing into smaller pieces to leave room for interactions to interrupt.
- Cut unnecessary work: Review unused libraries and third-party scripts.
Improving CLS (Visual Stability)
When buttons or images suddenly move while loading, it causes mis-taps and frustration.
- Specify sizes for images and video: Reserve the display area with the
width/heightattributes. - Reserve space for ads and embeds: Set aside space in advance for elements that are inserted later.
- Handle web fonts carefully: Suppress text flicker with
font-display: swapand similar techniques.
Measurement Tools
Improvement starts with "measurement." Use the major tools for the right purpose.
- PageSpeed Insights: Just enter a URL to check the score and improvement suggestions.
- Lighthouse (built into Chrome DevTools): Diagnose your local environment in detail during development.
- Search Console: Grasp overall trends with real-user data (field data).
Summary
Core Web Vitals quantify user experience from three perspectives: LCP (speed), INP (responsiveness), and CLS (stability). For all of them, the golden rule is to "measure first, identify the bottleneck, and then take action." Improving perceived quality also leads to lower bounce rates and better search evaluation.
If you are struggling with performance improvements for your site or system, feel free to reach out via our contact page.
Frequently Asked Questions (FAQ)
What are the three Core Web Vitals metrics and the targets for a good score?
LCP (the time until the largest element finishes rendering — how fast the page loads) should be within 2.5 seconds, INP (how quickly the screen responds to interactions — responsiveness) should be within 200 ms, and CLS (how much the layout shifts while loading — visual stability) should be 0.1 or lower to be considered good.
Was FID replaced by INP?
Yes. In 2024 the responsiveness metric was replaced from the previous FID (First Input Delay) to INP (Interaction to Next Paint). INP evaluates the response speed of all interactions during a visit, not just the first one.
Which tools should I use to measure Core Web Vitals?
Use PageSpeed Insights, where you simply enter a URL to see the score and improvement suggestions; Lighthouse, built into Chrome DevTools, to diagnose your local environment in detail during development; and Search Console, which uses real-user field data to capture overall trends. It is efficient to base your final evaluation on real-user data while using lab data for quick feedback during improvement work.