Cumulative Layout Shift (CLS)

What is Cumulative Layout Shift (CLS)?

Cumulative Layout Shift (CLS) is a Core Web Vitals metric developed by Google to measure the visual stability of a webpage. It quantifies the total of all unexpected layout shifts that occur during the entire lifespan of the page. Layout shifts happen when a visible element changes its position from one rendered frame to the next.

How CLS is Measured

CLS scores range from 0, representing no shifting, to values above 0 indicating varying degrees of instability. The formula considers the impact fraction and distance fraction of each shift, calculating how much the elements move and how much of the viewport they cover.

CLS Score Interpretation

• Good: 0 - 0.1
• Needs Improvement: 0.1 - 0.25
• Poor: Above 0.25

Why is CLS Important?

CLS is critical for user experience as unexpected layout shifts can lead to user frustration. For instance, if a user is about to click a button and the layout shifts, causing them to click something else unintentionally, it can result in poor user experience and potential loss of conversions.

Common Causes of Poor CLS

1. Images Without Dimensions:

   • Including images in your HTML without specifying their width and height can cause layout shifts as the browser doesn't know how much space to allocate initially.

2. Ads, Embeds, and Iframes Without Dimensions:

   • These elements can load dynamically and cause layout shifts if their dimensions are not specified in advance.

3. Dynamically Injected Content:

   • Adding content above existing content in the DOM can push elements down, causing shifts.

4. Web Fonts Causing FOIT/FOUT:

   • Flash of Invisible Text (FOIT) and Flash of Unstyled Text (FOUT) can cause layout shifts as the browser loads web fonts.

Best Practices to Minimize CLS

1. Include Size Attributes on Images and Videos:

   • Always define the width and height of images and videos in the HTML to reserve space in the layout before they load.

2. Reserve Space for Ads and Embeds:

   • Use CSS to set dimensions for ad slots, iframes, and embeds to avoid layout shifts when they load.

3. Avoid Dynamically Injecting Content Above Existing Content:

   • Add new content below the fold or within containers that already have a reserved space.

4. Use Font Loading Strategies:

   • Utilize font-display CSS property to control how web fonts are displayed and minimize shifts due to FOIT/FOUT.

5. Use CSS Transform for Animations:

   • Use the transform property instead of top, bottom, left, or right to animate elements without causing layout shifts.

Conclusion

Cumulative Layout Shift (CLS) is a vital metric in ensuring a stable and visually appealing user experience. By understanding the factors that contribute to layout shifts and implementing best practices to minimize them, you can improve your webpage's CLS score and enhance overall user satisfaction.

For more information on improving CLS and other Core Web Vitals, consider exploring Google's Web Vitals documentation.