Cumulative Layout Shift (CLS) is a metric that measures visual stability, by quantifying the amount of unexpected layout shift of visible page content. A low CLS ensures that the page is delightful and that content does not shift around as the site loads, preventing accidental interactions and user frustration. CLS is computed by summing all individual layout shift scores for every unexpected layout shift that occurs during the entire lifespan of the page. A CLS score of 0.1 or less is considered good. To improve CLS, web developers should ensure images have dimensions, dynamically injected content is placed below existing content, and animations are used responsibly.
Common Issues Affecting CLS:
- Images without dimensions
- Ads, embeds, and iframes without dimensions
- Dynamically injected content
- Web fonts causing FOIT/FOUT
- Actions waiting for a network response before updating DOM
Solutions to Improve CLS:
- Always include size attributes on images and video elements to reserve space.
- Ensure ads, embeds, and iframes have a reserved space; avoid inserting content above existing content unless necessary.
- Use transform animations instead of animations of properties that trigger layout changes.
- Preload fonts to avoid FOIT/FOUT.
- Avoid inserting new content above existing content unless it’s in response to user interaction.
