Most common causes
- Images and iframes without declared dimensions (width/height or aspect-ratio).
- Ads, embeds and banners loading above existing content.
- Web fonts causing text reflow (FOIT/FOUT).
- Content injected dynamically by JavaScript without reserved space.
How to improve CLS
Reserve space for media and dynamic content. Match fallback font metrics using size-adjust and metric overrides where appropriate, and inspect line wrapping; swap plus preload alone does not guarantee stability. Animate transform where suitable. The 500 ms exclusion applies to discrete input such as a click or key press, not scrolling, dragging or pinch zoom.
Example
An image without dimensions causes layout shift after loading. width, height or aspect-ratio reserve space upfront.
<img src="/summer-promo.jpg" alt="Summer promotion"><img src="/summer-promo.jpg" alt="Summer promotion"
width="1200" height="400" style="aspect-ratio: 3 / 1;">0.1 or less is good, 0.1–0.25 needs improvement, and over 0.25 is poor. The threshold applies to the 75th percentile of page loads.
Since 2021 it is not the sum of every shift on the page but the score of the worst session window: a burst of shifts where no gap exceeds one second and the whole window stays under five seconds. That stops a long visit from accumulating forever.
Images and iframes without declared dimensions, ads and embeds with no reserved space, content injected above existing content, and a fallback font swapping to a webfont with different metrics.
Shifts within 500 ms of discrete input such as a click are excluded. A later asynchronous response can count. Scrolling, dragging and pinch zoom do not receive this exclusion.