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.
New INP: one hundred fifty milliseconds (good).
CLS and INP together
CLS makes page feel unstable. INP makes page feel unresponsive. Together they affect user perception of quality.
Page with good LCP but poor CLS (fast but jumpy) feels frustrating. User blames slowness even though it is stability issue.
Page with good LCP and CLS but poor INP (fast and stable but unresponsive) feels broken. Buttons do not respond to clicks.
All three Core Web Vitals matter for good user experience.
Frequently asked questions
How do we detect CLS issues?
Use Chrome DevTools. Right-click page. Inspect. Performance tab. Record page load. DevTools shows layout shifts during load. Also check PageSpeed Insights. Lighthouse identifies CLS issues. Also check Search Console Core Web Vitals report. Shows pages with poor CLS. With WEMASY's website builder, you can set this up directly on your website.
Should we reserve space for all ads or just critical ads?
Reserve space for ads above fold (ads that load immediately). Do not reserve space for below-fold ads (ads that load after scroll). Below-fold ads can shift below-fold content, but user does not see the shift.
How do we optimize INP for complex applications with heavy JavaScript?
Move heavy computation to Web Workers. Web Worker runs on separate thread. Does not block main thread. Main thread stays responsive to user input. Also use React Suspense or similar frameworks that defer heavy computation until after interaction is handled.
Is CLS important for mobile vs desktop?
More important for mobile. Mobile screen is smaller. Layout shifts are more visible. Mobile user is more likely to notice shift and get frustrated. Prioritize CLS optimization on mobile.
Can good CLS and INP compensate for poor LCP?
No. If page takes five seconds to load, user is already frustrated before CLS and INP matter. User leaves before interacting. Fast loading (good LCP) is prerequisite for good experience. Good CLS and INP improve experience of fast page, not slow page.
How do we measure and track CLS and INP improvements?
Baseline: measure before optimization. Implement optimization. New measurement: measure after. Use Web Vitals library (JavaScript library that measures Core Web Vitals) to track in real user monitoring. Set up alerts: if CLS or INP regresses, alert notifies team.