Cumulative Layout Shift (CLS)
A Core Web Vitals metric measuring how much page content unexpectedly shifts during loading.
The Definition
Cumulative Layout Shift (CLS) measures the total amount of unexpected layout movement that occurs during the entire lifespan of a page. Layout shifts happen when visible elements change position without user interaction — typically caused by images without dimensions, dynamically injected content, or web fonts causing text reflow. Google considers CLS good below 0.1.
Why It Matters
High CLS frustrates users — buttons move just as they try to click, text jumps while reading, and ads push content down the page. It is a Core Web Vitals metric and Google ranking factor. Sites with good CLS provide noticeably better user experiences.
Best Practices
Always specify explicit width and height attributes on images and video elements so the browser reserves space before loading
Reserve space for dynamically injected content like ads, embeds, and iframes using CSS aspect-ratio or min-height
Use font-display: swap or font-display: optional to prevent layout shifts from web font loading
Avoid inserting content above existing content after page load — new content should appear below or in reserved spaces
Use CSS contain: layout on elements that should not affect surrounding layout during loading
Test CLS with real user monitoring, not just lab tools — field CLS includes shifts that happen throughout the page lifecycle
Mistakes to Avoid
- 1
Injecting cookie consent banners at the top of the page that push all content down, causing a large layout shift
- 2
Loading ads without reserved space, causing content to jump when the ad slot fills
- 3
Using images without width/height attributes in a responsive layout, causing reflow when images load
- 4
Dynamically changing font sizes or loading custom fonts that cause visible text reflow
Audit Checks
How Digispot AI identifies and fixes related issues
Cumulative Layout Shift (CLS) is high (CLS > 0.1).
Impact: High CLS causes visual instability, impacting user trust and usability.
Include size attributes for images and videos, avoid dynamically injected content.
Server response time is high (TTFB > 200ms).
Impact: Slow server response delays rendering and impacts user experience.
Optimize server configurations, use CDN, and cache responses.
Largest Contentful Paint (LCP) is slow (LCP > 2.5s).
Impact: Poor LCP negatively impacts user experience and SEO performance.
Optimize large above-the-fold images, fonts, and critical rendering paths.
Page load time is excessively high (> 4s).
Impact: Slow loading impacts user retention, SEO rankings, and conversions.
Optimize assets, use lazy loading, and implement server-side optimizations.
Total Blocking Time (TBT) is excessive (> 300ms).
Impact: High TBT delays user interactions and degrades UX.
Optimize JavaScript execution, reduce main thread work, and use web workers.
Time to Interactive (TTI) is slow (> 3.8s).
Impact: Delayed interactivity leads to frustrated users and lower engagement.
Minimize long tasks, reduce JavaScript, and optimize resource loading.