How To Fix Cumulative Layout Shift (CLS) Issues
Cumulative Layout Shift measures whether page content moves around the page after it appears. It's one of the three Core Web Vitals metrics that impact Google rankings.
In this article we'll take a look at what you can do to identify and fix CLS issues on your website.
How to check CLS issues in Google Search Console
Search Console reports data on your Core Web Vitals, including Cumulative Layout Shift.
- Open the Core Web Vitals section in the sidebar
- Click Open report for mobile or desktop
You can then see how many pages on your website aren't passing the Core Web Vitals.
If you then scroll down to Why URLs aren't considered good you can see whether CLS is causing problems on your website. You'll see either:
- CLS issue: more than 0.1
- CLS issue: more than 0.25
A CLS score of 0.1 is the threshold you need to reach to provide a good user experience, according to Google. CLS over 0.25 is considered poor.
Click on the issue to see what page URL groups are impacted.
Investigate CLS using lab data
When monitoring your performance with DebugBear, or when running a free website speed test, you'll be able to see your website metrics at the top of your report.
Click on the CLS metric to view more detail about what page element has shifted and what its position was.
Here we can see that the issue is related to how the page header renders. When the rendering process is complete, the rest of the page shifts upwards on the screen.
Check origin-level CLS for your website
If you want to see your scores for CLS and other web vitals you can use the DebugBear CrUX Trends dashboard. Here you can also see the metrics for your competitors.
Find CLS issues using real user monitoring data
Often it's not possible to identify CLS issues in a lab test. That usually happens when layout shifts occur following a user interaction, for example when scrolling down the page or when clicking on a menu item.
To identify what elements cause layout shift for your real users, and what's triggering the shift, you can use real user monitoring data.
The CLS Elements tab in DebugBear shows the different elements affected, including how often they shift and how big the shift is.
How to fix CLS issues
Visual instability usually happens for two one of two reasons:
- Content loads gradually on the page, resulting in size changes
- JavaScript inserts new page content, pushing out existing content
When the issue is due to gradual content rendering you can set a fixed width and height on images and other content elements that load after the First Contentful Paint.
To handle JavaScript-inserted content, it's a good idea to insert a placeholder with a CSS min-height, so that new content is inserted into the existing container.
Check out our detailed guide on Cumulative Layout Shift.