How to Reduce Cumulative Layout Shift for Better UX?

TL;DR

To reduce Cumulative Layout Shift (CLS) and improve user experience, define explicit dimensions for images and iframes to prevent unexpected movement. Optimize web font loading and use SVGs instead of icon fonts to minimize shifts. Tools like Lighthouse can help measure CLS, but real-world user data provides the most accurate insights.

Transcript

[MUSIC PLAYING] PATRICK KETTNER: So you know that thing when you start to read a website when all of a sudden, the page just kind of jumps like hundreds or thousands of pixels, and you have no idea where you were? Or when you go to tap on a button, and the button just has a popup that pops up right where your finger is, leaving you desperately smas... Read More

Key Insights

• Cumulative Layout Shift (CLS) measures the visual stability of a webpage, indicating how much visible content shifts during loading.
• A good CLS score ensures a stable and predictable user experience, with minimal unexpected layout shifts.
• CLS is calculated based on the percentage of the viewport affected by layout shifts, with scores ranging from 0 (no shift) to 1 (complete shift).
• User interactions causing layout shifts have a 500-millisecond grace period before they contribute to the CLS score.
• Images, iframes, and dynamically loaded content should have explicit dimensions to prevent layout shifts.
• Web fonts can cause layout shifts; optimizing font loading and using SVGs for icons can mitigate this issue.
• CLS can be measured using tools like Lighthouse and Chrome DevTools, but real-world user data provides the most accurate insights.
• Using visibility change events and performance observers in JavaScript can help track and report CLS data effectively.

Questions & Answers

Q: What is Cumulative Layout Shift (CLS)?

Cumulative Layout Shift (CLS) is a metric that measures the visual stability of a webpage by tracking how much visible content shifts during the page loading process. It is an important aspect of user experience, as unexpected layout shifts can lead to user frustration. The CLS score ranges from 0 to 1, with 0 indicating no shifts and 1 indicating significant shifts.

Q: How can I achieve a good CLS score?

To achieve a good CLS score, ensure that images, iframes, and dynamically loaded content have explicit dimensions to prevent layout shifts. Additionally, optimize web font loading to reduce shifts caused by font changes. Aim for a CLS score of 0.1 or less for 75% of page views to provide a stable and predictable user experience.

Q: How is CLS measured?

CLS is measured by calculating the percentage of the viewport affected by layout shifts during the page loading process. Tools like Lighthouse and Chrome DevTools can provide CLS measurements, but the most accurate insights come from real-world user data. JavaScript can be used to track CLS data using performance observers and visibility change events.

Q: What factors contribute to layout shifts?

Layout shifts can be caused by images, iframes, and dynamically loaded content lacking explicit dimensions, as well as web fonts loading in a way that changes the layout. User interactions can also cause shifts, but they are given a 500-millisecond grace period before contributing to the CLS score.

Q: How can web fonts cause layout shifts?

Web fonts can cause layout shifts if they are loaded in a way that changes the layout after the initial render. To mitigate this, optimize font loading by preloading essential fonts and using SVGs for icons. Avoid using font display swap, as it can lead to significant layout shifts if fonts load slowly.

Q: What tools can I use to measure CLS?

CLS can be measured using tools like Lighthouse and Chrome DevTools, which provide insights into the visual stability of a webpage. However, real-world user data offers the most accurate measurements. JavaScript performance observers can be used to track CLS data in real-time, providing valuable insights into user experience.

Q: How can JavaScript be used to track CLS?

JavaScript can track CLS by using performance observers to subscribe to layout shift events in the browser. Each layout shift event provides data that can be used to calculate the CLS score. Visibility change events can be used to report CLS data when a page's visibility changes, ensuring that the most accurate data is collected.

Q: What is the importance of a good CLS score?

A good CLS score is crucial for providing a stable and predictable user experience. Unexpected layout shifts can lead to user frustration and negatively impact engagement. By minimizing layout shifts, websites can improve user satisfaction, reduce bounce rates, and potentially improve search engine rankings as part of Google's Core Web Vitals.

Summary & Key Takeaways

• Cumulative Layout Shift (CLS) is a metric that measures the visual stability of a webpage by tracking layout shifts during loading. A good CLS score ensures a stable and predictable user experience, minimizing unexpected shifts.

• To achieve a low CLS score, it's crucial to define explicit dimensions for images, iframes, and dynamically loaded content. Optimizing web font loading and using SVGs for icons can also help reduce layout shifts.

• CLS can be measured using tools like Lighthouse and Chrome DevTools, but real-world user data provides the most accurate insights. JavaScript can be used to track and report CLS data using performance observers and visibility change events.