Understanding and Improving Your Cumulative Layout Shift Score

Cumulative Layout Shift (CLS) is a metric that measures the visual stability of a webpage's content as a user views it. It accounts for unexpected movement of elements in the viewport during page load, which can lead to a poor user experience.

The layout shift score in CLS is made up of two main components:

• Impact fraction: The visible area of the viewport that is affected by the shift.
• Distance fraction: The distance that the unstable elements have moved, relative to the viewport.

The layout shift score is calculated as layout shift score = impact fraction x distance fraction. The larger the elements that shift and the further they shift, the higher the CLS score will be.

To measure Cumulative Layout Shift (CLS) for a website, you can use tools like:

• Google’s PageSpeed Insights: Input your website’s URL and click “Analyze” to see a report of your CLS performance.
• Lighthouse in Chrome’s DevTools: Right-click on the page, select “Inspect”, then click the “Lighthouse” tab and “Analyze page load”.
• Semrush’s Site Audit Tool: Enter your domain name, start the audit, and view your CLS scores in the “Thematic Reports” widget under “Core Web Vitals”.

A good CLS score is 0.1 or lower. This indicates that the webpage's layout remains stable as it loads, allowing visitors to interact with the content without experiencing disruptive unexpected shifts.

To improve your Cumulative Layout Shift (CLS) score, consider the following strategies:

• Specify Image Dimensions: Set width and height attributes for images and media.
• Use CSS Aspect Ratio Boxes: Maintain consistent width-to-height ratios for content scaling.
• Reserve Space for Dynamic Content: Anticipate and allocate space for dynamic content like ads.
• Avoid Adding New Content Above Existing Content: Insert new content in a way that doesn't disrupt the current layout.
• Handle Fonts Properly: Preload essential fonts and use font-display to control font loading.
• Use the Transform CSS Property for Animations: Animate elements using transform to prevent layout shifts.