Products Solutions Templates Pricing Resources

Core Web Vitals explained: LCP, CLS, and INP

Home / Everything About / Everything About Analytics / Core Web Vitals explained: LCP, CLS, and INP

Core Web Vitals are three metrics Google uses to measure page experience. LCP measures loading speed. CLS measures visual stability. INP measures responsiveness.

Each metric measures different aspect of performance. Together they paint picture of user experience.

Largest Contentful Paint (LCP)

LCP measures time until main content loads. Main content is largest image or text block on page. For homepage, LCP is hero image. For article, LCP is article headline and main image.

LCP is measured from when user clicks link until main content appears on screen. If LCP is one second, user sees main content one second after clicking. If LCP is three seconds, user waits three seconds.

Target: LCP under two point five seconds is good. LCP between two point five and four seconds is needs improvement. LCP over four seconds is poor.

Example: homepage hero image is five megabytes. Takes three seconds to download. LCP is three seconds. Target is two point five seconds. Performance needs improvement.

Cumulative Layout Shift (CLS)

CLS measures visual stability. Layout shift happens when content moves after page loads. Example: user starts reading article. Ad loads. Article moves down. User loses place. Frustrating.

CLS quantifies total layout shift. If content moves down two hundred pixels, CLS increases. If content moves multiple times, CLS accumulates.

Target: CLS under zero point one is good. CLS between zero point one and zero point two five is needs improvement. CLS over zero point two five is poor.

Example: ad loads after page loads. Ad takes up three hundred pixels of height. Content below ad moves down. CLS is zero point fifteen. Needs improvement.

Interaction to Next Paint (INP)

INP measures responsiveness. User clicks button. System processes click. Updates page. Paints change on screen. INP is time from click to visual update.

INP is important for interactive pages (forms, buttons, menus). Less important for static pages (articles, blogs).

Target: INP under two hundred milliseconds is good. INP between two hundred and five hundred milliseconds is needs improvement. INP over five hundred milliseconds is poor.

Example: user clicks Add to Cart button. System processes request. Updates cart counter. INP is three hundred milliseconds. Needs improvement.

Why three metrics instead of one

Single metric cannot capture user experience. Loading speed matters (LCP). Visual stability matters (CLS). Responsiveness matters (INP). Page can be fast to load but unstable (high CLS). Or fast and stable but unresponsive (high INP). Three metrics together measure quality of user experience.

Real example: e-commerce site Core Web Vitals

Baseline

E-commerce product page baseline:

LCP: two point eight seconds (above target of two point five). CLS: zero point twelve (above target of zero point one). INP: two hundred twenty milliseconds (above target of two hundred).

All three metrics need improvement.

Optimization

LCP: optimize hero image, lazy load below-fold content. Result: one point eight seconds.

CLS: reserve space for ads, lazy load non-critical content. Result: zero point zero five.

INP: minimize JavaScript, optimize event handlers. Result: one hundred eighty milliseconds.

All three metrics now meet Google standards.

How Core Web Vitals relate to user experience

Good LCP: user sees content fast. Feels responsive.

Poor LCP: user waits for content. Feels slow.

Good CLS: layout is stable. User can read without content jumping. Comfortable.

Poor CLS: layout shifts. User loses place. Frustrating.

Good INP: user clicks button, sees response immediately. Feels interactive.

Poor INP: user clicks button, waits for response. Feels unresponsive.

Good Core Web Vitals create good user experience. Poor Core Web Vitals create poor user experience.

Measuring Core Web Vitals

Google measures Core Web Vitals from real users (real user monitoring). Lab testing tools like Lighthouse estimate Core Web Vitals but may not match real user experience (network conditions differ).

Check Core Web Vitals in Google Search Console. Google aggregates real user data and shows whether site meets standards (good, needs improvement, poor).

Also check in PageSpeed Insights. Lighthouse scores plus real user data from Google's database.