What is Cumulative Layout Shift (CLS)
Cumulative Layout Shift (CLS) measures visual stability on web pages. It quantifies unexpected layout shifts that occur during the loading process. These shifts can frustrate users and negatively impact their experience.
What Causes Layout Shifts?
Layout shifts happen when elements on a webpage change position unexpectedly. This occurs while the page is loading and new content is being added. For instance, if an image or an advertisement loads after the rest of the page, it can push down existing content, causing the page to jump.
Layout shifts create issues for users. They may lead to accidental clicks, difficulty reading content, or confusion when interacting with the page. To manage this, the web community introduced the Cumulative Layout Shift metric.
How is CLS Calculated?
CLS is calculated by multiplying the impact fraction and the distance fraction for each layout shift event, then summing up the results.
- Impact Fraction: This represents the portion of the viewport affected by the layout shift. If a shift moves half of the viewport, the impact fraction is 0.5.
- Distance Fraction: This measures how far elements moved relative to the viewport size.
By multiplying the impact fraction and distance fraction for each event and summing the values, you obtain the cumulative layout shift score for the page.
Why is CLS Important?
Cumulative Layout Shift is crucial for user experience. A high CLS score can frustrate users, leading them to abandon a page or website. This is especially important for mobile users, who may have slower connections and be more susceptible to layout shifts.
Search engines consider CLS a ranking factor. Websites with good CLS scores are more likely to rank higher in search results due to better user experiences. Optimizing for CLS enhances user satisfaction and offers SEO advantages.
How to Improve CLS
To enhance CLS, developers can implement several best practices:
-
Element Sizing: Reserve space for images, ads, embeds, and other dynamic content. Use aspect ratio placeholders to prevent shifts when the actual content loads.
-
Preloading and Lazy-Loading: Preload critical resources to ensure availability when needed. Lazy-load non-critical resources to prevent initial layout shifts.
-
Avoid Dynamically Injected Content: If adding new content dynamically, ensure it doesn’t cause layout shifts. Reserve space or adjust the layout accordingly.
-
Optimize Font Loading: Use font-display descriptors to manage how fonts load. This avoids text shifting during font loading.
-
Limit Third-Party Content: Third-party scripts and iframes can affect CLS. Include only essential third-party content and ensure it is appropriately sized.
Implementing these practices can help reduce layout shifts and improve the CLS score of web pages.
Cumulative Layout Shift is a key metric for measuring visual stability on web pages. It quantifies layout shifts during loading and helps improve user experience. Optimizing CLS leads to more stable, user-friendly websites with higher user satisfaction and better search engine rankings.
