Cumulative Layout Shift (CLS)

What it is: Measures layout shift scores for unexpected shifting of layouts that occur on your page. A layout shift occurs when a visible element on the page changes its position.

Goal: CLS score should be 0.1 or less. A shift of more than 0.25 is considered “Poor.”

(image via https://web.dev/cls/)

---

Improving CLS

One of the most common layout shift problems occurs when images are loaded. For example, if your blog post contains a 1200x600 pixel image, but you didn’t specify an exact size in your frontend code, the browser doesn’t know how much space to allocate for that image.

So, it will start by assuming that the image is 0 pixels tall. Once the image loads from the server, the image size will shoot up to 600 pixels tall, causing a large Cumulative Layout Shift that can be jarring to the reader. The quick fix here is to include correct size attributes on your images and videos, but if your CMS doesn’t support this feature, it can be quite cumbersome to fix.

You should also watch for slow-loading fonts that cause a layout shift. If you need to load fonts from an external server, be sure the default font you specify has the same line-height as the custom font.

More detailed information and actionable insights can be found on the official CLS Core Web Vitals page by Google. Keep in mind that some of these actionable items might require help from your engineering team: https://web.dev/cls/#how-to-improve-cls

---