Cumulative Layout Shift (CLS)

Overview

• Data Source: Page Speed Insights
• Type: Numeric (Score)

Description

Cumulative Layout Shift (CLS) measures the sum total of all individual layout shift scores for unexpected layout shifts that occur during the entire lifespan of the page. A layout shift occurs whenever a visible element changes its position from one rendered frame to the next. Page Speed Insights categorizes CLS scores into three groups:

• Good CLS Score (Green): CLS of 0.1 or less.
• Needs Improvement (Orange): CLS between 0.1 and 0.25.
• Poor CLS Score (Red): CLS greater than 0.25.

CLS is an important metric because it quantifies how visually stable a page is, which is crucial for user experience. Unexpected layout shifts can be frustrating and lead to poor user satisfaction.

Use Cases

1. User Experience Optimization: Optimize CLS to ensure that pages are visually stable and free from unexpected layout shifts, improving user experience and reducing frustration.
2. Performance Monitoring: Regularly monitor CLS using Page Speed Insights to identify and address elements causing layout shifts, ensuring a consistent and stable visual experience.
3. Web Development Focus: Prioritize development tasks that reduce layout shifts, such as reserving space for images and ads, and avoiding inserting content above existing content without a user action.
4. SEO Performance Enhancement: Improve CLS to enhance overall page performance, contributing to better search engine rankings as search engines prioritize pages with better user experiences.
5. Conversion Rate Improvement: Increase conversion rates by ensuring that the page layout remains stable, preventing users from accidentally clicking the wrong elements due to unexpected shifts.

Indicators

• Positive Indicator: A low CLS score (0.1 or less) indicates that the page is visually stable, contributing to a positive user experience and potentially higher search engine rankings.
• Negative Indicator: A high CLS score (greater than 0.25) suggests that the page experiences significant layout shifts, leading to poor user experience, higher bounce rates, and reduced SEO effectiveness. A CLS between 0.1 and 0.25 indicates room for improvement to enhance visual stability and user satisfaction.