A user-centric Core Web Vitals (CWV) metric that measures visual stability. It is one of the three pillars of Google’s performance signals, alongside:
- Largest Contentful Paint (LCP), which measures loading speed
- Interaction to Next Paint (INP), which measures responsiveness
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.
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 | 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 1. Because CLS is a unitless score (calculated by multiplying the impact fraction by the distance fraction), even seemingly small shifts can quickly push a page into the poor category.
| 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
widthandheightattributes 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
widthandheighton images and video elements, or use CSSaspect-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: swapto manage FOUT/FOIT, and utilize Font Descriptors (likesize-adjust) in your@font-facerule 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.
