Core Web Vitals Explained: LCP, INP and CLS

In this guide: Core Web Vitals explained in plain English: what LCP, INP, and CLS measure, how to improve each one, and the best tools to measure them.

Core Web Vitals are Google’s way of measuring how a web page feels to real users: how fast the main content appears, how quickly the page responds, and whether the layout stays stable. They’re part of Google’s page experience signals and a practical guide to building better websites.

Here’s what each metric means and how to improve it.

What Core Web Vitals are

There are three Core Web Vitals:

Google evaluates them using real-user data from Chrome users (the Chrome User Experience Report), at the 75th percentile — meaning 75% of visits should meet the “good” threshold.

INP replaced the older FID (First Input Delay) metric in 2024 because it better reflects responsiveness throughout the whole visit.

LCP and how to improve it

LCP measures when the largest visible element — usually a hero image, featured image, or large heading — finishes rendering.

Common causes of poor LCP:

• Slow server response (high Time to First Byte).
• Large, unoptimized hero images.
• Render-blocking CSS and JavaScript.
• Lazy-loading the hero image (it should load immediately).
• Web fonts delaying text rendering.

How to improve:

1. Improve server response: quality hosting, page caching, and a CDN.
2. Optimize the LCP image: correct dimensions, WebP/AVIF, and compression.
3. Don’t lazy-load the hero image; consider adding fetchpriority="high" to it.
4. Preload critical resources such as the hero image or main font.
5. Reduce render-blocking resources: inline critical CSS and defer non-critical JavaScript.

INP and how to improve it

INP measures how quickly the page visually responds after a user interaction — a click, tap, or key press. It reports one of the slowest interactions during the visit.

Common causes of poor INP:

• Heavy JavaScript running on the main thread.
• Third-party scripts (chat widgets, ads, trackers).
• Large, complex DOM (too many HTML elements).
• Expensive event handlers (for example, filters or menus that do too much work).

How to improve:

1. Reduce and delay JavaScript, especially third-party scripts.
2. Break up long tasks so the browser can respond between chunks of work.
3. Keep the DOM smaller — simpler themes and page builders help.
4. Load scripts only where needed (for example, a slider script only on pages with sliders).
5. Test with real interactions — open menus, submit forms, filter products.

CLS and how to fix it

CLS measures unexpected layout movement — when text jumps because an image, ad, or banner loads late. It’s why you sometimes click the wrong button.

Common causes:

• Images and videos without width and height attributes.
• Ads, embeds, and iframes without reserved space.
• Cookie banners or notices inserted at the top of the page.
• Web fonts swapping and changing text size.
• Content injected above existing content.

How to fix:

1. Always set width and height (or aspect-ratio) on images and videos.
2. Reserve space for ads and embeds with fixed containers.
3. Show banners as overlays instead of pushing content down.
4. Use font-display strategies and matching fallback fonts to reduce shifts.
5. Avoid inserting content above what the user is already reading.

Tools to measure them

• PageSpeed Insights: real-user field data (if available) plus lab diagnostics for a single URL.
• Google Search Console → Core Web Vitals report: site-wide status grouped by similar pages.
• Chrome DevTools → Performance panel: record interactions and find long tasks and layout shifts.
• Lighthouse: lab testing for LCP and CLS (INP requires real interactions; Lighthouse uses Total Blocking Time as a proxy).
• Web Vitals Chrome extension: see metrics live as you browse your site.

Field vs lab data: field data reflects real users over the past 28 days; lab data is a single simulated test. Prioritize field data for decisions, and use lab data to diagnose.

After fixing issues, it can take up to 28 days for field data to fully reflect improvements. Use Validate Fix in Search Console to track progress.

Further reading: OWASP Top 10 web security risks

Key Takeaways: Core Web Vitals

• LCP = loading, INP = responsiveness, CLS = visual stability.
• Aim for LCP ≤ 2.5 s, INP ≤ 200 ms, and CLS ≤ 0.1 at the 75th percentile.
• Fix LCP with faster servers and optimized hero images.
• Fix INP by reducing JavaScript and third-party scripts.
• Fix CLS by reserving space for images, ads, and banners.