Cumulative Layout Shift (CLS)

Cumulative Layout Shift, or CLS, measures the most annoying thing a web page can do: move content around after you have started reading or tapping. You go to click a link, an ad loads above it, the whole page shifts, and suddenly you have clicked something you never wanted. CLS puts a number on exactly how much that jumping happens, and Google uses it as one of the three Core Web Vitals. Of the three, it is the one users feel most viscerally, because a layout that lurches under your finger is not just slow, it is actively working against you. Here is why Google bothers to measure it: layout shift is one of the clearest signals of a page that was assembled carelessly. A page that holds still while it loads was built by someone who reserved space for everything in advance. A page that jumps was built by someone who let the browser figure it out on the fly.

What CLS actually measures

CLS looks at unexpected layout shifts, meaning content that moves without the user causing it. A shift you trigger yourself by clicking a button does not count. A shift that happens because an image or ad loaded late and pushed everything down absolutely does. The metric combines how much of the screen moved with how far it moved, so a small element nudging slightly is cheap while a big block jumping a long way is expensive. It is also measured across the whole life of the page, not just the initial paint, so something that pops in three seconds later still counts against you.

Almost every layout shift traces back to the same root cause: the browser did not know how much space something would need, so it drew the page without it and then had to redraw once the content arrived. Once you internalize that, the list of fixes writes itself. The usual culprits are images and videos with no dimensions, late-loading ads and embeds, web fonts that swap in and reflow the text, and JavaScript that injects content like a cookie banner above what is already on screen. Every one of those is the same mistake wearing a different costume: space that was not reserved up front.

• Images and videos without explicit width and height attributes, so the browser does not reserve space.
• Ads, embeds, and iframes that load late and push content down.
• Web fonts that swap in and reflow the text once they download.
• Content injected by JavaScript above existing content, like a cookie banner or promo bar.

1. 1Open the page in PageSpeed Insights and look at the elements flagged as contributing to layout shift.
2. 2Add width and height or an aspect-ratio container to every image, embed, and ad slot above the fold.
3. 3Preload your primary web font, then reload and actually scroll and interact to confirm the score drops.