Products Solutions Templates Pricing Resources

Cumulative Layout Shift and Interaction to Next Paint: visual stability and responsiveness

Home / Everything About / Everything About Analytics / Cumulative Layout Shift and Interaction to Next Paint: visual stability and responsiveness

CLS and INP are Core Web Vitals measuring different aspects of user experience than speed.

CLS measures visual stability. Layout shift happens when content moves after loading. User reads article. Ad loads. Article moves down. User loses place. CLS quantifies annoyance.

INP measures responsiveness. User clicks button. System responds. How long does response take. INP quantifies responsiveness delay.

Cumulative Layout Shift (CLS) in detail

What causes CLS

Ads load and take up space. Embeds load and take up space. Images load without height specified. Fonts change and text reflows. Content is injected from JavaScript.

Real example

Page layout is stable. User starts reading. Ad loads. Ad is three hundred pixels tall. Content below ad shifts down three hundred pixels. User loses place. Frustrating.

Measurement

CLS is measured as percentage of viewport shifted. If viewport is one thousand pixels tall and content shifts three hundred pixels, CLS is zero point three. Target is under zero point one (ten percent shift is acceptable, thirty percent shift is not).

Optimizing CLS

Strategy one: reserve space

Reserve space for ads, embeds, images. Tell layout engine: ad will take three hundred pixels. Reserve space. Ad loads into reserved space. No shift.

Strategy two: inject at bottom

Avoid injecting content into middle of page. Inject at bottom (content below is already scrolled out of viewport). Or inject in sticky header (user expects header to change).

Strategy three: avoid font changes

Avoid changing font mid-page load. Font changes cause text reflow. All text using that font shifts. Use `font-display: optional` or `font-display: swap` to minimize shift.

Strategy four: specify image height

Use fixed height for images. Image loads. Height specified. Image fills reserved space. No shift.

Real example: e-commerce product page CLS optimization

Baseline CLS: zero point two five (poor).

Analysis

Product images load without height specified. Images shift content. Contributes zero point ten CLS. Ad below product loads after page load. Ad takes space. Content shifts. Contributes zero point twelve CLS. User reviews load from API. Inject into page. Content shifts. Contributes zero point three CLS.

Optimization

Specify image height in HTML. Images fill reserved space. CLS contribution: zero. Reserve space for ad. Ad loads into reserved space. CLS contribution: zero. Lazy load user reviews below fold. Do not inject above fold. CLS contribution: zero (shift happens below viewport).

New CLS: zero point zero five (good).

Interaction to Next Paint (INP) in detail

What INP measures

INP measures responsiveness. User clicks button. System processes click. Updates state. Renders change. Paints to screen. INP is time from click to first paint of visual update.

Real example

User clicks Add to Cart button. System checks inventory. Updates cart counter. Paints new count on screen. If INP is one hundred milliseconds, user sees cart counter update instantly. If INP is one second, cart counter updates one second later. Feels unresponsive.

Measurement

INP is measured in milliseconds. Target under two hundred milliseconds is good.

Optimizing INP

Strategy one: reduce JavaScript execution time

Long JavaScript blocks rendering. Break long task into smaller tasks. Use async, defer, or Web Workers for heavy computations.

Strategy two: optimize event handlers

Event handlers should do minimal work. Offload heavy work to background.

Strategy three: optimize CSS

Heavy CSS can delay paint. Use CSS containment to tell browser: this element is self-contained, do not recalculate styles for entire page when this element changes.

Strategy four: use faster rendering technique

CSS updates are faster than JavaScript DOM updates. Use CSS transforms instead of left/top positioning. Use CSS opacity instead of visibility changes.

Real example: form interaction responsiveness

Baseline INP: four hundred milliseconds (poor).

Analysis

Form has validation JavaScript. User types in field. Validation runs. Validation is synchronous. Blocks input field update. Input field does not update until validation completes. Feels unresponsive.

Optimization

Move validation to background (Web Worker or setTimeout). Input field updates immediately. Validation happens in background. Use CSS containment on form. Tell browser: form is self-contained, do not recalculate styles for entire page. Use CSS transform for animation instead of JavaScript positioning.