Cumulative Layout Shift (CLS) measures how much page content unexpectedly shifts during loading, which can frustrate users and cause accidental clicks. This scorecard rule helps you identify and fix visual stability issues that negatively impact user experience and task completion.
About this scorecard rule
This cumulative layout shift rule is part of Level 2 (Proactive) in the digital experience maturity model. It evaluates whether your pages maintain visual stability during loading, preventing content from jumping around and disrupting user interactions.
Why this matters: Layout shifts cause users to accidentally click wrong elements, lose their place while reading, or abandon tasks in frustration. Good CLS scores indicate pages that load predictably, allowing users to interact confidently without unexpected content movement.
How this rule works
This rule evaluates whether the 75th percentile of your page's Cumulative Layout Shift (CLS) score exceeds 0.1, which is Google's threshold for "good" visual stability. CLS measures the sum of all unexpected layout shift scores during a page's entire lifecycle.
Important note: CLS is measured as a unitless score, not in seconds. The score represents the impact and distance of layout shifts combined.
Understanding your score
- Pass (Green): 75th percentile CLS score is 0.1 or lower (Good)
- Fail (Red): 75th percentile CLS score exceeds 0.1 (Needs Improvement or Poor)
- Target: Achieve CLS scores below 0.1 for optimal user experience
Google's CLS thresholds:
- Good: 0.1 or less
- Needs Improvement: 0.1 to 0.25
- Poor: Greater than 0.25
What layout shifts mean: A layout shift occurs when a visible element changes its position from one rendered frame to the next. CLS measures the largest burst of layout shift scores during the entire lifecycle of a page, affecting visual stability and user experience.
How to improve CLS scores
If your score shows poor visual stability, follow these steps to reduce layout shifts:
1. Identify problematic pages and elements
- Review CLS data in New Relic Browser: Identify which pages have the highest CLS scores
- Assess user impact: Determine how many users encounter layout shift issues
- Analyze shift patterns: Understand when during page load shifts occur most frequently
- Prioritize by business impact: Focus on pages critical to conversions and user tasks
2. Fix common causes of layout shifts
Reserve space for images:
- Always specify width and height attributes for images
- Use CSS aspect-ratio property for responsive images
- Implement proper image loading strategies
Handle dynamic content properly:
- Reserve minimum space for ads, widgets, and dynamic content
- Avoid inserting content above existing content
- Use placeholders while content loads
Optimize font loading:
- Preload critical fonts to reduce text layout shifts
- Use font-display: swap for better loading performance
- Choose web-safe fallback fonts similar to custom fonts
Manage third-party content:
- Set consistent dimensions for embedded content
- Load social media widgets and ads asynchronously
- Test third-party scripts for layout impact
3. Implement development best practices
Design for stability:
- Use CSS Grid and Flexbox for more predictable layouts
- Implement skeleton screens while content loads
- Test layouts across different content lengths and types
Monitor and validate:
- Use Chrome DevTools and Lighthouse for CLS testing
- Implement real user monitoring with New Relic Browser
- Set up alerts when CLS scores exceed thresholds
- Test on various devices and network conditions
Measuring improvement
Track these metrics to verify your CLS optimization efforts:
- CLS score reduction: Decreasing 75th percentile CLS values toward 0.1 or lower
- User experience metrics: Reduced bounce rates, improved task completion
- Conversion impact: Higher conversion rates on pages with better visual stability
- User feedback: Fewer complaints about "jumpy" or unstable page experiences
Common scenarios and solutions
E-commerce product pages:
- Reserve exact space for product images and customer reviews
- Use consistent layouts for product information and pricing
Content websites:
- Reserve space for advertisements to prevent content shifts
- Optimize font loading to reduce text reflow
Landing pages:
- Design forms with fixed spacing for error messages
- Ensure call-to-action buttons remain in stable positions
Important considerations
- Balance optimization with functionality: Some layout changes may be necessary for user experience
- Test across real conditions: Ensure optimizations work on various devices and network speeds
- Focus on user impact: Prioritize fixing shifts that affect critical user journeys and conversions
- Monitor continuously: CLS can change with content updates, new features, and third-party modifications
Next steps
- Immediate action: Identify pages with highest CLS scores and implement quick fixes for images and dynamic content
- Technical optimization: Address font loading, third-party scripts, and layout architecture
- Process integration: Add CLS monitoring to development workflow and performance budgets
- Continue optimization: Progress to other Core Web Vitals like LCP and INP
For detailed guidance on CLS optimization, see our Core Web Vitals documentation and performance monitoring best practices.