Updated on: 2021-11-29
Referred To As: CLS – Visual Stability
Category: On Page SEO / Technical SEO / UX
Description: The CLS or Cumulative Layout Shift is a metric for the visual stability of a page during loading. It is part of the CWV (Core Web Vitals) parameters which is a subset of the Page Experience analysis that Google uses to feed into its algorithm.
Appropriate Values: 0-1
Our take: CLS is an important parameter to pay attention to. Its not going to make or break your SEO but the nature of SEO is to improve every little thing that matters in a structured, prioritized and organized manner.
When you visit a web page and see page elements pop up and push the page around as items like images and fonts load, this is the layout shift that is being reviewed. It is distracting and unpleasant to view and some sites can be almost unusable with ads loading and pushing the content around.
Quite commonly there are render-blocking resources that need an image or script to load before they can be properly rendered due to the size of the frame being unknown at the time or parsing. This represents a significant bottleneck in a page load. Implementation of a CDN can mask and deal with a lot of these issues but it’s always better to fix the root problem at the source.
Extra reading
Do: Ensure that you have a low CLS score
Don’t:
- Let a fancy font kill your CLS
- Have multiple elements that change
Tip: Pay attention to the CLS value.
Review the Google Page Speed Insights report.
Filter it down to the category where you have the biggest issue under -> Show audits relevant to: -> All FCP / TBT / LCP / CLS, on the Google Page Speed Insights Tool
Introduced: July 2021 (as per of the page experience update and the core web vitals CWV subset)
What Google Says: