Cumulative Layout Shift

The tap that lands on the wrong thing

You open a page on your phone, go to tap the phone number, and in that half second an image finishes loading above it. Everything slides down. Your thumb lands on a form instead, or on something you did not want. You did not move. The page did.

That is a layout shift. Cumulative Layout Shift scores the worst run of them during a visit and reports a number where lower is better, and zero means nothing moved after it was drawn.

The word cumulative is the point. One small nudge on its own is forgivable. A page that jumps again and again while somebody is trying to read it is a different experience, and the score is built to catch that run of jumps rather than a single stray one.

Movement a person asked for does not count against you. If a visitor taps a menu and it expands, or opens an accordion and the text below it moves down, that is expected and the score leaves it alone. Only the moves nobody requested get added up.

The usual causes are ordinary:

• Images and videos placed without their dimensions set, so the browser does not know how much room to leave.
• Banners, notice bars, and promo strips inserted above content that has already been drawn.
• Custom fonts that swap in at a different size than the fallback they replace.
• Anything that arrives late: a chat bubble, a review widget, a slot waiting on a third party.

A good score is a small decimal, much closer to zero than to one. The exact target gets revised from time to time, so look up the current one rather than memorizing a number.

Jumpy pages lose the visitor who had already decided

A slow page loses people who were only half interested. A shifting page loses people who were interested enough to reach for the button, which makes it the more expensive of the two problems.

It also reads as carelessness in a way people feel without naming it. A homeowner comparing three contractors on a phone does not think that a site has a layout stability issue. They think the business looks slapdash, and they tap back.

The useful news is that this is one of the cheapest things on a website to get right, and one of the easiest to get wrong by accident. Room has to be reserved in advance for anything that will arrive late, and that is a decision made while a page is being laid out rather than a cleanup task bolted on at the end, which is why it belongs to custom web design.

The accidental version usually shows up months later, when a widget or a notice bar gets pasted into a page that was perfectly stable the day it launched.

How it differs from the other two speed numbers

Three measurements get grouped together and they answer three different questions. Largest Contentful Paint asks how quickly the main thing appeared. Interaction to Next Paint asks how quickly the page reacted when somebody tapped. Cumulative Layout Shift asks whether anything moved while they were reading.

All three are gathered from real visits rather than one lab test, and a page can pass one and fail another. That is why a single overall speed grade is a poor way to decide what to fix. The three point at different parts of the build, and they get fixed by different people doing different work.