About Core Web Vitals

LCP, INP, CLS — what they are, how to fix, how to measure. Part of the DevTools Surf developer suite. Browse more tools in the Info / Guides collection.

Use Cases

• Frontend devs optimizing Lighthouse scores for SEO and UX
• Performance engineers diagnosing slow LCP from large hero images
• E-commerce teams reducing CLS to improve conversion rates
• SEO specialists translating Web Vitals data into developer action items

Tips

• Focus on LCP first since it has the largest impact on perceived speed
• Use the CLS fixes section to eliminate layout shift from images and ads
• Check the measurement tools list for lab vs field data differences

Fun Facts

• Google introduced Core Web Vitals in May 2020 and made them a ranking signal in June 2021, directly linking UX metrics to search rankings.
• INP (Interaction to Next Paint) replaced FID (First Input Delay) as a Core Web Vital in March 2024, measuring all interactions instead of just the first one.
• A 2017 Google study found that as page load time goes from 1s to 3s, bounce probability increases by 32%; from 1s to 5s, it increases by 90%.

FAQ

What are LCP, INP, CLS?

Largest Contentful Paint (when main content loads, target <2.5s). Interaction to Next Paint (how fast UI responds, target <200ms). Cumulative Layout Shift (how much the page jumps, target <0.1).

Why do they matter?

Google ranks them as a direct signal — good scores improve SEO. They also correlate with user satisfaction and conversion.

How do I measure?

PageSpeed Insights, Chrome DevTools, or real-user monitoring (RUM) with CrUX or a third-party service. Lab data approximates; field data is ground truth.

What fixes help most?

LCP: preload hero images, optimize images. INP: reduce JS execution time. CLS: reserve space for dynamic content, size images explicitly.