Understanding CLS
Cumulative Layout Shift (CLS) measures visual stability by quantifying unexpected layout shifts during the page lifecycle. A good CLS score is under 0.1.
Common Causes of Layout Shifts
- Images without explicit width and height attributes
- Ads, embeds, and iframes without reserved space
- Dynamically injected content above existing content
- Web fonts causing Flash of Invisible Text (FOIT) or Flash of Unstyled Text (FOUT)
- Actions waiting for a network response before updating DOM
How to Fix CLS Issues
1
Always include size attributes on images and videos
Add width and height attributes to all <img> and <video> elements, or use CSS aspect-ratio.
2
Reserve space for ads and embeds
Use min-height or aspect-ratio containers for ads, iframes, and embedded content.
3
Avoid inserting content above existing content
Never inject banners, notices, or other content above the fold that pushes content down.
4
Use font-display: optional or swap
Prevent font-related layout shifts with proper font loading strategies.