Cumulative Layout Shift (CLS) is an essential component of Core Web Vitals, alongside Largest Contentful Paint (LCP) and Interaction to Next Paint (INP). The metric focuses on quantifying and improving web performance.
Cumulative Layout Shift (CLS) is used to measure the visual stability of a webpage by tracking unexpected layout shifts during its lifecycle. These shifts can disrupt the user experience, such as when elements move unexpectedly while the page loads or when the user interacts. Layout shifts are often caused by elements like images or videos of unknown sizes, fonts loading at unexpected sizes compared to their fallback, or dynamically resizing third-party ads and widgets.
The updated Cumulative Layout Shift (CLS) metric focuses on the most disruptive layout shifts within specific user interaction windows rather than aggregating all shifts over the page's lifespan, as the old CLS did. This refined approach provides a more precise and more user-focused assessment of visual stability.
| Good | Needs Improvement | Poor |
|---|---|---|
| ≥ 0.1 | 0.1 - 0.25 | < 0.25 |
| The score of the page demonstrates excellent visual stability with minimal unexpected layout shifts. | The score of the page shows moderate layout shifts that could disrupt user experience and may need optimization. | The score of the page indicates significant layout instability, leading to a poor user experience that requires immediate attention. |
Cumulative Layout Shift (CLS) can be measured using field and lab data with tools designed for different scenarios. Field data, drawn from real user interactions, reveals CLS impact across various devices and conditions, while lab data, generated in controlled settings, helps developers identify and resolve issues pre-launch.
| Field Tools | Lab Tools |
|---|---|
| Google Search Console Chrome User Experience Report PageSpeed Insights Web-vitals.js library Wattspeed - CruX Report | Google Lighthouse Chrome DevTools PageSpeed Insights Wattspeed - Lighthouse Report |
Optimizing Cumulative Layout Shift (CLS) is essential for delivering a smooth and visually stable user experience. Addressing unexpected layout shifts caused by images, fonts, ads, and dynamic content can help enhance page performance and meet Core Web Vitals standards.
| Strategy | Actions |
|---|---|
| Defining dimensions for images and videos | → add width and height specifications to images and videos. → use CSS aspect-ratio to reserve space for media elements. |
| Optimizing ads, embeds, and late-loaded content | → reserve space in the initial layout for late-loading content using min-height or aspect-ratio CSS rules. → position late-loading content lower in the viewport to minimize its impact on CLS. → avoid adding new content without user interaction. |
| Creating high-performance animations | → use animations with transform instead of box-sizing and box-shadow to prevent layout recalculations. → avoid changing the top and left properties and use transform: translate() for positional changes. |
| Optimizing web fonts | → use font-display: optional: → specify the appropriate fallback font. → reduce the size disparity between the fallback font and the web font. → utilize the Font Loading API. → preload critical web fonts by using link rel="preload". |