How to Fix Cumulative Layout Shift (CLS)

CLS is the most irritating metric to experience as a user and usually the cheapest of the three to fix, because the causes are a short and well-understood list.

1. Images without dimensions

The single most common cause.

Without width and height, the browser does not know how much space to reserve. Everything below reflows when the image arrives.

Set them on every image, even when CSS resizes it — the attributes give the browser an aspect ratio to reserve space with, and modern browsers use them for exactly that.

Same applies to video, iframe and anything embedded.

2. Web fonts

When a web font loads and it has different metrics from the fallback, text reflows. Sometimes noticeably.

• font-display: swap so text renders immediately in the fallback
• Preload the critical font so the swap happens early
• Choose a fallback with similar metrics, or use size-adjust to match them
• Use fewer families and weights

3. Content injected after load

Cookie banners, promotional bars, notification strips, ads. Anything inserted above existing content pushes everything down.

• Reserve the space in advance with a fixed-height container
• Or overlay it rather than inserting into the flow
• Never insert above content the user may already be reading

A cookie banner at the bottom as an overlay costs no CLS. The same banner inserted at the top of the document costs a lot.

4. Dynamically sized content

Anything whose height is not known until data arrives: product grids, comment counts, review stars, "N items in stock".

Reserve a minimum height, or render a skeleton of the right size.

5. Animations that affect layout

Animating height, width, top or margin causes layout recalculation and can register as shift.

Animate transform and opacity instead. Those are composited and do not affect layout at all.

Finding your shifts

Chrome DevTools → Performance → Experience track highlights layout shifts and shows which elements moved.

PageSpeed Insights lists the largest shift contributors under the CLS diagnostic.

The trick is to test on mobile, because most shifts are worse there — narrower viewport, more reflow.

The one that catches everyone

CLS is measured throughout the visit, not just at load. A shift caused by lazy-loaded content appearing as the user scrolls still counts.

Which means: test by scrolling the whole page, not by loading it and looking at the top.

Core Web Vitals explained covers the other two metrics, and the speed optimisation checklist includes the CLS items alongside everything else.