A user-centric Core Web Vitals (CWV) metric, Cumulative Layout Shift (CLS) quantifies how often users experience unexpected layout shifts, such as a button moving just as they are about to click it, by calculating the impact fraction and distance fraction of unstable elements during the entire lifecycle of a page. It is one of the three pillars of Google’s performance signals, alongside Largest Contentful Paint (LCP), which measures loading speed, and Interaction to Next Paint (INP), which measures responsiveness.
Core Web Vitals Comparison
A good CLS score ensures that the page remains predictable and easy to read as resources load. This score is calculated as a product of the shift's impact on the viewport.
- Metric: The type of user experience being measured.
- Pillar: The aspect of page performance.
- Good Threshold: The maximum acceptable value for a good user experience.
- Poor Threshold: The minimum value where user experience becomes poor.
| Metric | Pillar | Good Threshold | Poor Threshold | Impact on UX |
| CLS | Visual Stability | ≤ 0.1 | > 0.25 | Does content jump unexpectedly? |
| LCP | Loading | ≤ 2.5s | > 4.0s | How fast does the main content appear? |
| INP | Interactivity | ≤ 200ms | > 500ms | How fast does the page react to input? |
Weighting in Performance Scores
In the Lighthouse Performance Score (v10+), CLS is a heavy hitter because visual instability is a major source of user frustration.
- CLS (Cumulative Layout Shift): ~25%
- LCP (Largest Contentful Paint): ~25%
- TBT (Total Blocking Time / Proxy for INP): ~30%
- Other metrics (FCP/Speed Index): ~20% combined
Key Technical Standards
To provide a good user experience, sites should:
- Rating: The quality of the CLS score.
- CLS Score: The measured value of CLS.
| Rating | CLS Score |
| Good | ≤ 0.1 |
| Needs Improvement | > 0.1 and ≤ 0.25 |
| Poor | > 0.25 |
Font Loading: FOIT vs. FOUT
One of the most common causes of layout shifts is the browser's handling of web fonts. This often results in two distinct behaviors that can negatively impact CLS:
- FOUT (Flash of Unstyled Text): The browser displays a fallback system font until the custom web font is ready. If the fallback font has different dimensions than the web font, the text will snap or resize when the new font loads, causing a layout shift.
- FOIT (Flash of Invisible Text): The browser hides the text until the web font is downloaded. While this avoids an ugly font swap, it can delay the rendering of the LCP element and lead to a sudden pop-in of content that shifts surrounding elements.
Common Factors Affecting CLS
- Images/Videos without Dimensions: Browsers cannot reserve space for an image if width and height attributes are missing, causing text to jump once the image finally downloads.
- Ads and Embeds: Dynamically injected ad slots that expand or appear above existing content.
- Late-loading CSS: Styles that arrive late and reposition elements that have already been painted.
- Web Fonts: As noted above, the swap between a fallback and a custom font frequently triggers shifts.
Optimization Strategies
- Set Explicit Dimensions: Always include width and height on images and video elements, or use CSS aspect-ratio.
- Reserve Space for Ads: Statically style the container where an ad will load so the page doesn't jump when the ad appears.
- Optimize Web Fonts: Use font-display: swap to manage FOUT/FOIT, and utilize Font Descriptors (like size-adjust) in your @font-face rule to match the fallback font's size to the web font, minimizing the shift.
- Preload Key Resources: Use <link rel="preload"> for fonts and hero images to ensure they arrive as early as possible.
Lighthouse is an open-source, automated tool for measuring the quality of web pages developed by Google. It can be run against any web page, public or requiring authentication. Lighthouse audits performance, accessibility, and search engine optimization factors of web pages, which is the major difference from Google PageSpeed, as Lighthouse provides more detailed technical information. It also includes the ability to test progressive web applications for compliance with standards and best practices. Lighthouse aims to help web developers; the tool can be run using a Chrome browser extension or via the terminal (command line) for batch auditing a list of URLs. Google's recommendation is to use the online version of PageSpeed Insights as of 15 May 2015. Lighthouse [Version 10 – May 2023] includes a metric for Progressive Web Applications to ensure that PWAs are fast, reliable, installable.
