What Cumulative Layout Shift measures

How it works

CLS is one of the three Core Web Vitals. Every time visible elements change position without the visitor doing anything, the browser scores the shift: how much of the screen is affected and how far the elements move. Shifts shortly after a click or key press don't count, as they are expected. CLS is the worst burst of shifts during the visit.

The value has no unit. Up to 0.1 is good, over 0.25 counts as poor, each for three out of four page views.

Typical causes:

• Images, videos and iframes without fixed dimensions.
• Banners, notices and adverts inserted above the content after the fact.
• Web fonts that run wider or narrower than the fallback font they replace.

That is why bytereport also checks whether the images in the HTML have width and height. If single images lack them, you get a warning; if more than half do and at least four, an error.

What matters

• Width and height for every image. Enter the real pixel size. The browser works out the aspect ratio from it and keeps the space free; with CSS the image still stays flexible.
• Room for embeds. Videos, maps and ad slots get a fixed height or an aspect-ratio before their content loads.
• Banners overlay rather than push. A cookie banner or notice sits on top of the content instead of pushing it down.
• Fonts with font-display. And a fallback font of similar width, see web fonts.

<img src="photo.webp" width="800" height="600" alt="…">

img { max-width: 100%; height: auto; }
.video { aspect-ratio: 16 / 9; }

How to improve it

Many CMSs set width and height themselves when you insert images from the media library; if they are missing, the theme or images added by hand are often the reason. Room for embeds and banners is reserved by your agency in the theme. The details name every image without dimensions.