Cumulative Layout Shift (CLS)
The Core Web Vital called Cumulative Layout Shift measures the extent to which a page's layout shifts during loading. CLS along with Largest Contentful paint (LCP) and First Input Delay (FID) are the three main metrics Google uses to measure user experience. LCP measures the loading speed and FID measures the responsiveness of the page. Nowadays, these three components are incredibly important for good search engine rankings. While loading a page, layout elements become visible in a certain order. This can cause the position of these elements to suddenly change during loading. When this happens, it can cause a poor page experience. Examples of layout errors during loading are:
- Something was visible at first and falls out of view during loading so the user has to scroll to get to this element
- An element shifts just when the user wants to click on something, causing them to unintentionally click on something else
Measuring the CLS
To measure Cumulative Layout Shift, Google looks at two things:
- How often the layout shifts
- How large these shifts are
A good CLS score means that 75% of page visitors experience a layout shift of 0.1 seconds or lower. At a score of 0.25 seconds, the Cumulative Layout Shift is "poor. You can measure the CLS on your Web site with a Cumulative Layout Shift test. The site vitality section in Google Search Console shows which pages possess a layout shift. You can also use PageSpeed Insight or discover layout shifts on your Web site.
A delayed element in Cumulative Shift can include the loading of an advertisement, the slow loading of fonts and images that have yet to become visible or change size. On the contrary, functional shifts do not count in CLS, these can actually be beneficial to the user experience because they are initiated by the user. Consider opening a hamburger menu or drop-down menu where navigation appears. To solve or prevent Cumulative Layout Shift you need to:
- Setting the size of images and videos
- Showing a charging indicator
- Making fonts load faster
- Placing(Banner) ads on the page
