murattunalı.

CLS.

Cumulative Layout ShiftDEFINITION

CLS measures how much content shifts unexpectedly while a page is loading or in use, and Google counts anything under 0.1 as good.

The calculation has two factors: how much of the screen the shifting area covers and how far it moves. That is why a small shift of a large element at the top is penalised more than a large shift of a small element further down.

Only UNEXPECTED shifts are counted. Shifts occurring within half a second of a user interaction are exempt — which is what makes accordions and dropdowns free.

There are four common sources: images without dimensions, font swapping, content inserted later, and embedded frames without dimensions. The first is the most common and the cheapest to fix — writing a width and a height on the image.

Total shift is not summed across the whole life of the page; shifts are divided into session windows and the reported value is that of the WORST window. The problem, in other words, is not the total but the concentration.

The measured value for this site and the three projects it manages is 0.001 — one hundredth of the good threshold. The verification suite ties the threshold to 0.05; leaving room below the official threshold is deliberate, so that a regression shows before it hits the limit.

The most overlooked source lies where classic measurement cannot see: shifts occurring during scrolling. Auditing tools look at the page load window and do not scroll; the user, meanwhile, experiences exactly those shifts.

On this site that blind spot was found by measurement and closed with its own guard: the worst window computed with session-window logic across the whole scroll has to stay under 0.08.

  1. Write a width and a height on images — a one-line fix that closes the most common source.
  2. Match the fallback font metrically — so there is no shift at the moment of the swap.
  3. Do not push later content into the flow — show it as a layer or reserve its space from the start.
  4. Give embedded frames a ratio — video, maps, social boxes.
  5. Animate only with transform and opacity — layout properties trigger a reflow on every frame.
  6. Test on a throttled network — on a fast connection the shifts are invisible.

The last item is a precondition for measuring at all: on a fast machine everything arrives almost simultaneously, so the shifts never appear.

Knowing that the measurement window works on session logic matters too: the reported value is not the total but that of the worst window formed by shifts close together. The problem is not how many shifts there are but that they gather in one place.

SOURCES