Introduction
Cumulative Layout Shift (CLS) is a vital Core Web Vital metric that quantifies the visual stability of a webpage by measuring unexpected layout shifts. Since its introduction as a Google ranking factor in May 2021 as part of the Page Experience update, CLS has become a critical consideration for website owners and developers. Beyond its SEO implications, minimizing CLS is paramount for ensuring a seamless and positive user experience. Unexpected shifts can disrupt reading flow, cause accidental clicks, and lead to user frustration, ultimately impacting key business metrics like bounce rate and session duration. This report provides a comprehensive analysis of CLS, exploring its definition, measurement, impact, common causes, and effective optimization strategies.
Understanding Cumulative Layout Shift
Defining Layout Shifts and CLS
A layout shift occurs when a visible element on a webpage changes its position from one rendered frame to the next. These shifts are often unexpected and can be jarring for users. Cumulative Layout Shift (CLS) specifically measures the total of all unexpected layout shift scores that occur during the entire lifespan of a page.
To quantify these shifts, CLS uses the concept of a session window, which is a burst of layout shifts occurring within a short timeframe. Shifts are grouped into a session window if they happen within 1 second of each other, up to a maximum window duration of 5 seconds. The CLS score for a page is the largest burst of layout shifts, representing the maximum cumulative score within any session window during the page’s lifecycle.
Acceptable CLS Scores
Google has established clear thresholds for CLS to categorize website performance:
- Good: A CLS score of 0.1 or less. This is the target to achieve for at least 75% of page loads, across both mobile and desktop devices.
- Needs Improvement: A CLS score between 0.1 and 0.25. Websites falling in this range should consider optimization efforts to enhance visual stability.
- Poor: A CLS score greater than 0.25. This indicates a significant issue with layout shifts that requires immediate attention to improve user experience.
Calculating the Layout Shift Score
The layout shift score is calculated by multiplying two key fractions: the impact fraction and the distance fraction.
Layout Shift Score = Impact Fraction × Distance Fraction
-
Impact Fraction: This measures how much of the viewport is affected by unstable elements. It is calculated by considering the union of the visible areas of all unstable elements in both the previous and current frames, relative to the total viewport area. Essentially, it represents the proportion of the viewport that was impacted by the shift.
-
Distance Fraction: This measures the greatest distance that any unstable element has moved relative to the viewport’s largest dimension (width or height). It represents the extent of the shift.
Example 1: Button and Boxes
Imagine a scenario where adding a button within a gray box pushes a green box below it downwards. If the green box initially occupied 50% of the viewport and shifted down 14% of the viewport height, the calculation is as follows:
- Impact Fraction: 0.5 (Green box area)
- Distance Fraction: 0.14 (Shift distance relative to viewport height)
- Layout Shift Score: 0.5 × 0.14 = 0.07
Example 2: Dynamic List Update
Consider a sorted list (‘Dog’, ‘Horse’, ‘Zebra’) where new items are dynamically added, causing existing items to shift. If the combined area of ‘Dog’, ‘Horse’, and ‘Zebra’ covers 60% of the viewport (impact fraction 0.60), and ‘Zebra’ moves the most, shifting by 30% of the viewport height (distance fraction 0.3), the layout shift score is:
- Impact Fraction: 0.60
- Distance Fraction: 0.3
- Layout Shift Score: 0.60 × 0.3 = 0.18
Example 3: Element Resizing
An element initially occupies 35% of the screen, then resizes to occupy 50%.
- Impact Fraction: 0.5 (Larger area occupied after shift)
- Distance Fraction: 0.15 (Change in size relative to viewport, assuming a linear shift in one dimension)
- Layout Shift Score: 0.5 × 0.15 = 0.075
User-Initiated vs. Unexpected Shifts
It’s crucial to differentiate between expected and unexpected layout shifts. Layout shifts that occur within 500 milliseconds of user input (like clicks, taps, or typing) are considered expected as they are a direct result of user interaction. These user-initiated shifts are generally acceptable and, importantly, can be excluded from CLS calculations using the hadRecentInput flag in the Layout Instability API. CLS focuses on unexpected layout shifts that users did not trigger, as these are the ones that negatively impact user experience.
Impact of Cumulative Layout Shift
User Experience Degradation
Poor CLS scores directly translate to negative user experiences. Unexpected layout shifts are disruptive and can lead to:
- Reading Disruption: Content moving unexpectedly makes it difficult for users to read and follow text, leading to frustration and a sense of unease.
- Accidental Clicks: Layout shifts can cause users to accidentally click on the wrong links or buttons as elements move under their cursor, leading to unintended actions and frustration. In severe cases, this can even result in costly mistakes like unintentionally confirming an incorrect order during online shopping.
- Increased Bounce Rates: Frustrated users are more likely to abandon a webpage. High CLS contributes to higher bounce rates as users leave due to a poor and unstable browsing experience.
- Shorter Session Lengths: Users are less likely to engage deeply with a website that is visually unstable. Poor CLS contributes to shorter session durations, indicating decreased user engagement.
- “Rage Clicks”: Repeated, rapid clicks in the same area, often indicating user frustration or confusion. High CLS can trigger rage clicks as users try to interact with elements that keep shifting.
- Negative Brand Perception: A website with frequent layout shifts can appear unprofessional and untrustworthy, damaging brand reputation and potentially leading to customer loss and negative reviews.
Search Engine Optimization (SEO)
CLS is a critical Core Web Vital metric and a direct Google ranking factor. A poor CLS score can negatively impact a website’s search engine rankings, reducing organic visibility. CLS constitutes 5% of the weighted average in Google Lighthouse scoring, highlighting its significant contribution to overall page performance assessment. Optimizing CLS is therefore not only crucial for user experience but also essential for maintaining and improving SEO performance.
Common Causes of Cumulative Layout Shift
Unexpected layout shifts typically arise from web pages becoming visually unstable due to resources loading asynchronously or dynamic content being added to the Document Object Model (DOM) without reserving sufficient space. Specific common causes include:
- Images and Videos without Dimensions: When images and videos lack explicitly defined
widthandheightattributes in HTML or corresponding CSS styles, the browser may not know how much space to reserve for them while the page is loading. Once the images or videos load, they can push down surrounding content, causing a layout shift. - Fonts Rendering Differently than Fallbacks: If custom fonts are used without proper optimization, there can be a delay before the custom font is loaded and rendered. During this time, a fallback font is displayed. If the fallback font has different metrics (size, line height) compared to the custom font, a noticeable layout shift can occur when the custom font finally loads and replaces the fallback.
- Dynamically Resizing Third-Party Ads and Widgets: Ads and embedded content from third-party providers often lack pre-defined dimensions. These elements can dynamically resize themselves after initial page rendering, leading to significant layout shifts as they push surrounding content around. Dynamically injected content like YouTube video widgets also fall into this category.
- Dynamically Injected Content: Inserting new content above existing content without user initiation is a primary cause of CLS. This can include banners, forms, or any other dynamically added elements.
- Using CSS for Responsive Images Incorrectly: While CSS is used for responsive images, solely relying on CSS styles for sizing without setting
widthandheightattributes in HTML can contribute to CLS. Proportional aspect ratios in conjunction with HTML attributes are crucial for preventing shifts. - Differences Between Development and Production Environments: Discrepancies between development and production environments can exacerbate CLS issues. Factors like personalized content loading differently, caching mechanisms, and variations in API call speeds can lead to layout shifts in production that are not apparent during development.
Strategies to Minimize Cumulative Layout Shift
Preventing and mitigating CLS requires adopting best practices throughout the website development lifecycle. Key strategies include:
- Always Include Size Attributes for Images and Videos: Declare
widthandheightattributes on<img>and<video>tags in the HTML. For responsive images, use proportional aspect ratios in conjunction with these attributes and CSS to ensure consistent space allocation regardless of screen size. - Reserve Space for Ads and Embeds: Style ad containers and embed placeholders with specific dimensions in advance. This prevents layout shifts when ads or embedded content finally load. If the exact dimensions are unknown, estimate and reserve sufficient space to minimize potential shifts.
- Avoid Inserting Content Above Existing Content: Refrain from injecting new content above existing content unless it is a direct and expected response to user interaction. If content must be added dynamically, ensure it doesn’t push down existing content unexpectedly.
- Optimize Font Loading: Utilize CSS font-display property, particularly
font-display: swap, to display fallback fonts immediately while custom fonts are loading, minimizing the visual impact of font swapping. Consider usingrel="preload"to prioritize fetching important font files to speed up their availability. - Animate with CSS
transformProperty: For animations and transitions, prefer using the CSStransformproperty (e.g.,transform: scale()andtransform: translate()) as these generally do not trigger layout shifts. Avoid animating properties that affect layout, such asheight,width,top,right,bottom, orleft.
Measuring Cumulative Layout Shift
Monitoring and diagnosing CLS issues is crucial for effective optimization. A range of tools are available for measuring CLS in both field and lab environments.
Field Tools (Real User Data):
- Chrome User Experience Report (CrUX): Provides real-world CLS data aggregated from Chrome users.
- PageSpeed Insights: Offers both lab and field data, including CLS from CrUX.
- Google Search Console (Core Web Vitals report): Shows CLS data for your website as experienced by Google Search users.
web-vitalsJavaScript library: A JavaScript library that can be integrated into your website to collect and report CLS metrics from real users.
Lab Tools (Simulated Environments):
- Chrome DevTools: Performance panel in Chrome DevTools can record and analyze layout shifts during page load.
- Lighthouse: Provides a comprehensive performance audit, including CLS, with actionable recommendations. Accessible directly in Chrome DevTools or via PageSpeed Insights.
- WebPageTest: A web performance testing tool that includes CLS measurements.
Technical Measurement Details:
The Layout Instability API in JavaScript is the underlying mechanism used to detect and measure layout shifts. The web-vitals JavaScript library provides a reference implementation for calculating the CLS metric based on this API, handling complexities such as:
- Ignoring background pages: CLS is not reported for pages running in the background.
- Excluding back/forward cache restores: Layout shifts occurring during back/forward cache navigation are excluded from CLS calculations.
- Considering the entire page lifespan: CLS aggregates shifts throughout the entire page lifecycle, not just during initial load.
- Accounting for iframe shifts: Unlike the raw Layout Instability API, the CLS metric, as calculated by
web-vitals, includes layout shifts occurring within iframes.
Conclusion
Cumulative Layout Shift is a critical metric that directly impacts both user experience and SEO. By understanding what CLS is, how it’s measured, and its common causes, website owners and developers can proactively implement strategies to minimize layout shifts and create more visually stable and user-friendly web pages. Prioritizing CLS optimization is essential for achieving good Core Web Vitals scores, improving search engine rankings, and, most importantly, ensuring a positive and engaging online experience for users. By adopting the recommended best practices and consistently monitoring CLS using available tools, websites can significantly enhance their visual stability and reap the benefits of improved user satisfaction and search performance.