How to Fix Cumulative Layout Shift (CLS) on Your Website

Cumulative Layout Shift (CLS) is a crucial metric in web performance, representing the unexpected movement of web page elements during the loading process. High CLS can lead to a poor user experience, as it causes content to shift around the page, making it difficult for users to interact with the site. This issue not only frustrates users but also affects your website’s search engine ranking, as CLS is a key component of Google’s Core Web Vitals.

Addressing CLS is essential for ensuring a smooth and stable user experience. This article will help you understand CLS, identify its causes, and implement effective strategies to reduce it on your website. By following these steps, you can improve your site’s usability and SEO performance.

Understanding CLS

Definition and Components of CLS

Cumulative Layout Shift (CLS) measures the sum of all unexpected layout shifts that occur during a web page’s lifespan. A layout shift happens when a visible element changes its position between two frames. CLS quantifies how much the page’s content moves around, indicating the page’s visual stability.

How CLS is Measured and Its Impact on Core Web Vitals

CLS is calculated by multiplying the impact fraction by the distance fraction:

  • Impact Fraction: The portion of the viewport affected by the shifting element.
  • Distance Fraction: The distance the element has moved relative to the viewport size.

A low CLS score (below 0.1) indicates a stable page, while a high score (above 0.25) suggests significant layout instability. Google includes CLS as one of its Core Web Vitals, which are critical metrics for assessing a website’s overall user experience. A poor CLS score can negatively impact your SEO ranking, as search engines prioritize websites that offer a seamless user experience.

Common Causes of High CLS on Websites

Several factors can contribute to a high CLS score, including:

  1. Images and Videos Without Dimensions: When pictures and videos are loaded without defined dimensions, they can cause the content to shift as they load.
  2. Ads, Embeds, and Iframes Without Reserved Space: Dynamic content, such as ads and embeds, can push other content around if space isn’t reserved for them.
  3. Dynamically Injected Content: Inserting new content above existing content can cause the page to shift unexpectedly.
  4. Web Fonts Causing FOIT/FOUT: Flash of Invisible Text (FOIT) and Flash of Unstyled Text (FOUT) occur when web fonts load, causing text to shift.
  5. Animations and Transitions: Poorly implemented animations and transitions can result in layout shifts, affecting the CLS score.

Identifying CLS Issues

Before you can fix CLS issues, you need to identify where they occur on your website. Several tools can help you measure and diagnose CLS problems effectively.

Using Google’s Lighthouse Tool

Google’s Lighthouse is an automated tool for improving the quality of web pages. It includes audits for performance, accessibility, SEO, and more.

  1. Access Lighthouse:
    • Open Chrome and navigate to the web page you want to test.
    • Right-click on the page and select “Inspect” to open Chrome DevTools.
    • In DevTools, go to the “Lighthouse” tab.
  2. Generate a Report:
    • Select the desired categories for the audit (Performance, Best Practices, Accessibility, SEO).
    • Click “Generate Report” and wait for Lighthouse to analyze the page.
  3. Review CLS Score:
    • Once the report is generated, look under the “Performance” section.
    • Find the “Cumulative Layout Shift” score. A score below 0.1 is good, while a score above 0.25 needs improvement.
    • Lighthouse also provides specific recommendations and diagnostics to help you address CLS issues.

Using Chrome DevTools

Chrome DevTools offers detailed insights and controls to diagnose CLS issues in real time.

  1. Open Chrome DevTools:
    • Right-click on the page and select “Inspect” to open DevTools.
  2. Analyze Layout Shifts:
    • Go to the “Performance” tab.
    • Click the record button (a circular icon) and reload the page to start recording.
    • Stop the recording after the page has fully loaded.
    • Look for the “Experience” section, where layout shifts are highlighted. Each shift is marked, showing which elements caused the shifts.

Other Third-Party Tools for Measuring CLS

In addition to Google’s tools, several third-party tools can help you measure CLS:

  1. WebPageTest:
    • WebPageTest provides a detailed analysis of various performance metrics, including CLS.
    • Run a test and review the results to see a breakdown of layout shifts and their causes.
  2. GTmetrix:
    • GTmetrix offers a comprehensive report on web performance metrics, including CLS.
    • Use the tool to identify elements causing layout shifts and get recommendations for fixing them.
  3. PageSpeed Insights:
    • Google PageSpeed Insights analyzes a web page’s content and provides suggestions for making it faster, including insights on CLS.
    • Enter your URL and review the provided CLS score and recommendations.

Strategies to Fix CLS

Once you’ve identified the sources of CLS on your website, you can implement various strategies to reduce or eliminate layout shifts. Here are some effective methods:

Set Size Attributes for Media

One common cause of CLS is loading images and videos without defined dimensions. By specifying width and height attributes, you can reserve the necessary space for these elements before they load.

  1. Specify Image Dimensions:

Add width and height attributes to your <img> tags:
html
<img src=”example.jpg” width=”600″ height=”400″ alt=”Example Image”>

This ensures the browser allocates the correct space for the image, preventing layout shifts.

  1. Define Video Dimensions:

Similarly, specify dimensions for <video> tags:
html
<video width=”800″ height=”450″ controls>

  <source src=”example.mp4″ type=”video/mp4″>

  Your browser does not support video tags.

Reserve Space for Ads, Embeds, and Iframes

Dynamic content like ads, embeds, and iframes can cause significant layout shifts if space is not reserved for them.

  1. Allocate Space for Ads:

Use CSS to define fixed dimensions for ad containers:
CSS
ad-container {width: 300px;height: 250px;}

This reserves space for the ad, preventing layout shifts when the ad loads.

  1. Reserve Space for Embeds and Iframes:

Similarly, use CSS or HTML attributes to set dimensions for embeds and iframes:
html
<iframe src=”example-embed.html” width=”600″ height=”400″></iframe>

This ensures the content does not cause shifts when it loads.

Avoid Inserting Content Above Existing Content

Inserting new content above existing content can cause layout shifts. Instead, add new elements below existing content or in a reserved space.

  1. Insert Content Below Existing Elements:

Ensure new content is added below existing content to avoid shifts.
html
<div id=”existing-content”>Existing Content</div>

<div id=”new-content”>New Content</div>

  1. Reserve Space for New Content:

Use CSS to create a placeholder for dynamic content:
CSS
placeholder {height: 200px;}

This reserves space for the content, preventing layout shifts when it loads.

Use CSS Aspect Ratio Boxes

  1. Create Aspect Ratio Boxes:

Use CSS to create a container with a specific aspect ratio:
CSS
aspect-ratio-box {position: relative;width: 100%;

  padding-top: 56.25%; /* 16:9 Aspect Ratio */}

aspect-ratio-box iframe {position: absolute;top: 0;left:0;width: 100%;height: 100%;}

This ensures the container maintains its aspect ratio, preventing layout shifts.

Ensure Fonts Load Properly

Font loading can cause layout shifts if the dimensions of text elements change. Using font-display settings can help mitigate this issue.

  1. Use Font-Display Settings:

Add font-display properties to your @font-face definitions:
CSS
@font-face {font-family: ‘Example Font’;src: url(‘example-font.woff2’) format(‘woff2’);font-display:swap;}

The swap value ensures text is displayed with a fallback font until the custom font loads, preventing shifts.

Optimize Animations and Transitions

Poorly implemented animations and transitions can result in layout shifts. Use CSS animations and transitions carefully to avoid this.

  1. Use Transform Properties:

Use transform properties instead of top, left, right, or bottom for animations:
CSS

animate {transition: transform 0.3s ease;}

This ensures the element moves without causing layout shifts.

Conclusion

  • Identify CLS Sources: Use tools like Google Lighthouse and Chrome DevTools to pinpoint elements causing layout shifts.
  • Implement Fixes: Set dimensions for media, reserve space for dynamic content, and avoid inserting new content above existing elements.
  • Monitor and Test: Regularly monitor CLS metrics, conduct real-user monitoring, and test across devices and browsers.
  • Maintain Best Practices: Optimize third-party content, prioritize critical resource loading, minimize animations, and stay updated with web standards.
  • User Feedback: Incorporate user feedback to refine and improve CLS performance continuously.
Latest Post
Scroll to Top