Cumulative Layout Shift (CLS) and How to Use it?

If you've ever visited a website where the website layout changed as it loaded then you've experienced a layout shift. This can be especially pesky when you try to click on a link and the page suddenly changes and you click on an ad instead. This is common on lots of news and magazine websites as well as blogs. In order to improve user experience across the web, Google created the Cumulative Layout Shift tool to help web designers measure how layout shift affects their website.

Cumulative Layout Shift is a part of Google's Page Experience signals. The signals are like factors that capture and quantify the technical aspects of a website's user experience. What CLS measures specifically is any layout shift that isn't triggered by the user. It studies the amount that was moved and how far it was moved. Then it gives you a score based on a scale from 0 to 1.0. What you want is a score that's just under 1.0. Anywhere between 0.25 and 1.0 means it could use improvement (especially on the lower end of that) and anything below 0.25 is a poor score.

As of June 2021, cumulative layout shift factors into your SEO ranking with Google. While it's not clear, it's likely a very small factor and is in place to help Google improve its overall user experience.

There are a few simple things that anyone can do to improve their CLS score:

• Aspect Ratios: always add the width and height measurements to images and videos
• Space for Ads: make sure that you factor in the number of space ads will take on your pages
• Pre-Load Fonts: use a plugin like the Font-Loading API to help text load faster

In the end, if you have a well-designed website, cumulative layout shift shouldn't affect your users too badly.