What Is CLS and Why Does It Matter?
Cumulative Layout Shift (CLS) measures how much content shifts around during page loading. Unstable layouts may cause users to click on wrong elements, frustrating them and harming user experience. CLS is part of Google's Core Web Vitals, which affect SEO rankings, though Google uses thousands of ranking factors beyond this single metric.
General Strategies to Improve CLS#
- 1Optimise images and media, specify dimensions to allocate space before loading
- 2Use stable fonts, use web-safe fonts or configure font-display settings to prevent text reflow
- 3Lazy-load non-essentials, delay loading of non-critical content below the fold
- 4Optimise CSS and JavaScript, ensure efficient code that does not cause late layout recalculations
- 5Allocate space for ads, designate specific space for advertisements to prevent dynamic shifts
How to Check CLS Scores#
Use Google's PageSpeed Insights for a detailed web vitals breakdown, or run a Lighthouse audit directly in Chrome.
Using Lighthouse in Chrome
- 1Right-click your page and select Inspect to open Developer Tools
- 2Navigate to the Lighthouse tab and select the Performance category and device type
- 3Click 'Generate report' to run the audit
- 4Review results, a CLS score below 0.1 indicates good visual stability
- 5Implement any recommendations and retest after changes
Troubleshooting#
Focus on above-the-fold content stability first, this is what users see immediately and has the greatest impact on perceived performance. Avoid dynamic layout adjustments and use predictable animations instead.