CLS (Cumulative Layout Shift)
Core Web Vital measuring visual stability as content loads.
What is CLS (Cumulative Layout Shift)?
Cumulative Layout Shift (CLS) measures how much page content unexpectedly shifts during loading. It quantifies the visual stability of a page. A low CLS means elements don't jump around as the page loads.
CLS is calculated by multiplying the impact fraction (percentage of viewport affected) by the distance fraction (how far elements moved). A good CLS score is under 0.1.
Why CLS (Cumulative Layout Shift) matters
Layout shifts frustrate users and can cause misclicks. Buttons moving as you try to click them, or content jumping as images load, creates a poor experience. CLS is a Core Web Vital and ranking factor.
How to implement
Set explicit width/height on images and videos
Reserve space for ads and embeds
Avoid inserting content above existing content
Use transform animations instead of layout-triggering ones
Preload web fonts
Use CSS aspect-ratio for responsive media
Code example
<!-- Set explicit dimensions -->
<img src="hero.jpg" width="800" height="600" alt="Hero">
<!-- Use CSS aspect-ratio -->
<div style="aspect-ratio: 16/9;">
<iframe src="..."></iframe>
</div>
<!-- Reserve space for ads -->
<div style="min-height: 250px;">
<!-- Ad will load here -->
</div>Common mistakes to avoid
- Not setting image dimensions
- Injecting content dynamically above existing content
- Late-loading ads pushing content down
- Font swaps causing text reflow
Examples
Good: Set width='800' height='600' on all images
Bad: Ad loads 2 seconds late, pushing content down
Good: Reserve space for dynamic content
Frequently asked questions
Images without dimensions, dynamically injected content, web fonts causing text reflow, ads loading late, and animations that trigger layout changes.
Under 0.1 is good, 0.1-0.25 needs improvement, over 0.25 is poor. Aim for as close to 0 as possible.