How to zero out CLS.
CLS measures how much content shifts unexpectedly while a page loads or is used, and Google counts under 0.1 as good.
Among the three Core Web Vitals metrics, this one maps to the most tangible experience: the text you started reading slides from under you, the button you were about to press moves, and you tap the wrong thing. A source of irritation everyone knows and nobody had named.
The math has two factors: how much of the screen the shifting area covers, and how far it moved. A small shift of a large element at the top of the screen is therefore punished more than a large shift of a small element at the bottom — and that is exactly what genuinely disturbs the user.
It must be unexpected
The metric counts only UNEXPECTED shifts. The shift that occurs when the user presses a button and opens a menu does not count, because the user expected it. The browser distinguishes this by checking whether a user interaction happened within the half second before the shift.
This exception means components like accordions and dropdowns are free — but only for shifts right after the interaction. A shift occurring after the half second still counts, and that is a trap in delayed animations.
Four common sources
On real sites the shift comes from almost always one of the same four places, and all four have known fixes.
- Images without dimensions — with no declared width and height the browser cannot reserve space; when the image arrives, it pushes everything below it down.
- The font swap — text painted with the fallback font occupies different space when the real font arrives.
- Content injected later — ads, notification bars, cookie banners. Inserted ABOVE existing content, they push everything.
- Embeds without dimensions — video players, maps, social media boxes. They report their own size late.
The first item is the most common and the cheapest to fix: write width and height on the image. Modern browsers compute the aspect ratio from those two values and reserve the right space even in responsive layouts. A one-line fix closes the bulk of CLS sources.
For the third item the rule is: content arriving later goes not on top of existing content but either into its own reserved space or onto a layer that does not affect the content flow. A notification bar injected at the very top of the page is one of the most destructive shift sources.
The value measured on this site
The measured layout shift of this site and the three live projects it manages is 0.001 — one percent of Google’s good threshold of 0.1. Not luck but the result of a discipline: every image arrives with dimensions, the fallback font matches metrically, and no injected layer enters the content flow.
The verification suite binds the threshold at 0.05 — half of what Google allows — and measures it on every run. Keeping the budget below the official threshold is deliberate: when a regression comes one day, it should show before hitting the threshold.
The budget is kept below the official threshold so a regression shows before it hits the threshold.
What the classic measurement cannot see
The most important warning comes last. Classic layout shift measurement looks at the page-load window. Shifts occurring after the user starts scrolling are invisible in that window — yet the user experiences exactly those.
Exactly such a blind spot was found on this site: the shift measured during load was near zero, but during scrolling, as a pinned section was released, a shift occurred. The classic measurement never saw it.
After the fix, a separate guard was added: the shift during scrolling is measured with Google’s session-window logic, and the worst window must stay under 0.08. This is a question no general tool asks, and it can only be caught by a test that asks it.
Animation and transitions
There are two ways to move an element, and they behave completely differently for CLS. Changing the element’s position or size through layout properties forces the browser to recompute the layout and shifts everything around it — that produces CLS directly.
Transform and opacity, by contrast, never touch the layout; the element moves on its own layer and its neighbors stay put. The rule of performant animation is therefore one sentence: use only transform and opacity.
The rule is also a speed win: these two properties can be processed on the browser’s GPU layer and do not occupy the main thread. The right animation technique thus protects both CLS and INP at once.
On this site the entire motion layer is built under this constraint, and the verification suite additionally measures the frame budget: the median frame time must stay under 12 milliseconds and the 95th percentile under 24. Both thresholds derive from the sixty-frames-per-second target.
The measurement window
There is a subtlety in the metric’s math worth knowing: the total shift is not accumulated over the whole page lifetime. Google splits shifts into session windows — shifts close to each other collect in one window, and the reported value is that of the WORST window.
On long pages this makes a real difference. A page producing hundreds of shifts can come out fine if they are all small and scattered; three large shifts collected in one spot push the page into the red. The problem is not the total but the density.
On this site the shift during scrolling is measured with exactly this logic: the windows are computed and the worst one must stay under 0.08. Using the same math as Google’s own guarantees the test really measures the same thing.
One last practical note: the most honest way to measure layout shift is testing with a slow network and a low-powered device simulation. On a fast machine everything arrives almost at once and the shifts never show; in a slowed environment they surface one by one and each source can be marked. The browser developer tools offer both simulations, and the most useful setting in a layout shift hunt is turning both on together.