Cumulative Layout Shift (CLS)
Cumulative Layout Shift is a metric that measures the amount of unexpected layout shifts of visual page content during the loading of a webpage. It is one of the Core Web Vitals, a set of metrics introduced by Google to evaluate the user experience of a website.
CLS is calculated by the sum of all individual layout shifts that occur during the loading of a page.
Importance in SEO
CLS is important for SEO because it directly impacts the user experience. Pages with a high CLS can lead to a poor user experience, as content may jump around while the page loads, making it difficult for users to interact with the page.
Google considers CLS as a ranking factor, meaning that websites with better CLS scores are more likely to rank higher in search results.
Example
Imagine a user is trying to click on a button on a webpage, but before they can do so, the button shifts down due to an ad or a social media widget loading below it. This would be considered a layout shift and would contribute to the CLS score.
Do
- Optimize the loading order of page elements to minimize layout shifts.
- Use the
loading="lazy"attribute for images and iframes to ensure they don’t shift the content below them. - Prevent any new content from being added to the page that could cause a layout shift after the initial load.
Don’t
- Load large elements like ads or videos above the fold without using lazy loading.
- Allow third-party content to cause unexpected layout shifts.
- Ignore CLS in your development and testing processes; it should be part of your commitment to user experience.
- Fail to monitor and improve CLS over time; it’s an ongoing process to maintain a good CLS score.