What Is Cumulative Layout Shift (CLS)?
Cumulative Layout Shift (CLS) is a Core Web Vital metric developed by Google that quantifies the visual stability of a webpage by measuring the sum of all unexpected layout shift scores occurring during the page's entire lifespan. Each shift score is calculated as the product of the impact fraction (how much of the viewport moved) and the distance fraction (how far elements moved), producing a unitless score where values below 0.1 are considered 'Good' by Google's thresholds. CLS was introduced to the Web Vitals initiative in 2020 and directly influences Google Search ranking through the Page Experience signal.
What Is Cumulative Layout Shift (CLS)?
Cumulative Layout Shift (CLS) is a Core Web Vital metric developed by Google that quantifies the visual stability of a webpage by measuring the sum of all unexpected layout shift scores occurring during the page's entire lifespan. Each shift score is calculated as the product of the impact fraction (how much of the viewport moved) and the distance fraction (how far elements moved), producing a unitless score where values below 0.1 are considered 'Good' by Google's thresholds. CLS was introduced to the Web Vitals initiative in 2020 and directly influences Google Search ranking through the Page Experience signal.
How Cumulative Layout Shift (CLS) Works
CLS is calculated using the Layout Instability API, a browser-level specification that fires 'layout-shift' PerformanceEntry events whenever visible DOM elements move unexpectedly between two rendered frames. The browser tracks which elements shifted, computes what fraction of the viewport they occupied before and after the shift (impact fraction), then multiplies that by the greatest distance any shifted element traveled relative to the viewport height or width (distance fraction). The product of these two values is a single shift's score. CLS accumulates these individual scores, but only for shifts not preceded by user interaction within 500ms — intentional shifts triggered by clicks, taps, or keyboard input are excluded from the score. Google updated the CLS calculation methodology in 2021 to use 'session windows' rather than summing every shift across the entire page lifecycle. A session window groups layout shifts that occur within 1 second of each other, with a maximum window duration of 5 seconds. The final CLS score reported is the score of the worst such session window, not the total of all windows. This change was made to avoid penalizing long-lived pages like single-page applications unfairly for shifts that occur after extended user interaction. The most common causes of poor CLS are images and media without explicit width and height attributes, dynamically injected content such as ads or cookie banners that push existing content down, web fonts causing Flash of Invisible Text (FOIT) or Flash of Unstyled Text (FOUT), and CSS animations that affect layout properties like top, left, margin, or padding instead of transform. Each of these forces the browser to recalculate layout (reflow), which can displace elements the user is already reading or interacting with. CLS can be measured in both lab and field contexts. Lab tools like Lighthouse and WebPageTest simulate page loads and capture shifts programmatically, while field data is collected via the Chrome User Experience Report (CrUX) and the web-vitals JavaScript library using real user sessions. Because CLS is sensitive to content loaded asynchronously — ads, embeds, third-party widgets — lab scores can differ significantly from field scores, making real-user monitoring (RUM) essential for accurate diagnosis.
Best Practices for Cumulative Layout Shift (CLS)
Always declare explicit width and height attributes on every img, video, and iframe element so the browser can reserve space in the layout before the asset downloads — modern browsers use these attributes to compute aspect-ratio automatically even in responsive designs. For web fonts, use font-display: optional or font-display: swap combined with preloading the font file via a <link rel='preload'> tag to prevent invisible or unstyled text from shifting surrounding content after the font loads. Reserve space for dynamically injected content like ads and banners by using CSS min-height or fixed-dimension containers before the content is fetched, rather than letting JavaScript inject elements that push existing DOM nodes downward. When animating elements, restrict CSS animations to transform (translate, scale, rotate) and opacity exclusively, since these properties are composited on the GPU and do not trigger layout recalculation or contribute to CLS scores. Audit third-party scripts and embeds — social share buttons, chat widgets, and ad networks are leading sources of late-loading content that causes layout instability — and lazy-load or sandboxed-iframe them with reserved containers.
Cumulative Layout Shift (CLS) & Canvas Builder
Canvas Builder's AI generates Bootstrap 5 HTML with utility classes like ratio and img-fluid applied by default, which pre-allocates aspect-ratio-aware space for images and embeds before assets load — directly addressing the most common source of CLS violations. The clean, minimal HTML output avoids the pattern common in JavaScript-heavy frameworks where components mount asynchronously and inject content that displaces existing elements, meaning Canvas-generated pages typically achieve 'Good' CLS scores without additional optimization work. Because Canvas Builder produces static, self-contained HTML files rather than client-rendered applications, the browser can parse and paint a stable layout from the first response, giving developers a solid CLS baseline to maintain rather than a deficit to recover from.
Try Canvas Builder →