Cumulative Layout Shift (CLS)
Visual stability of your page. Measures how much elements move around as your page loads, causing unexpected shifts that frustrate users.
What is Cumulative Layout Shift?
CLS measures the sum total of all individual layout shift scores that occur during the entire lifespan of a page. A layout shift occurs any time a visible element changes its position from one rendered frame to the next.
How CLS is Measured
Layout Shift Score
Calculated as impact fraction (how much of the viewport is affected) multiplied by distance fraction (how far elements moved).
What Counts
Unexpected layout shifts only. User-initiated changes (clicking links, typing) don't count toward CLS.
Good Score
Good: Under 0.1
Needs Improvement: 0.1-0.25
Poor: Over 0.25
Why CLS Matters for SEO
- •Directly impacts Google's Core Web Vitals ranking factor
- •Poor CLS frustrates users and increases bounce rates
- •Unstable layouts cause accidental clicks on wrong elements
- •Users lose their place when content shifts unexpectedly
Common CLS Issues
- •Images and videos without dimensions specified
- •Web fonts causing Flash of Invisible Text (FOIT)
- •Dynamically injected content without reserved space
- •Ads, embeds, or iframes without dimensions
- •Animations that change layout properties
How to Improve CLS
Four key areas to focus on for improving your Cumulative Layout Shift score.
Set Image and Video Dimensions
Always specify width and height attributes
- Add width and height attributes to all <img> elements
- Include aspect-ratio CSS for responsive images
- Set dimensions for video elements and their posters
- Use CSS aspect-ratio property for modern browsers
- Specify dimensions for iframes and embedded content
Optimize Web Fonts
Prevent font-related layout shifts
- Use font-display: swap to prevent invisible text
- Reserve space for fonts with fallbacks during loading
- Preload critical fonts with <link rel='preload'>
- Avoid dynamically injecting font styles
- Use system fonts for fastest rendering when possible
Use Transform-Based Animations
Animations that don't trigger layout
- Use transform and opacity for animations instead of changing layout properties
- Animate position with translate rather than top/left
- Scale elements with transform: scale() instead of width/height
- Use CSS transitions for smooth property changes
- Avoid animating properties that trigger re-layout
Reserve Space for Dynamic Content
Prevent content from shifting existing elements
- Reserve space for ads with fixed dimensions
- Pre-load comments and user-generated content areas
- Use skeleton screens for loading content
- Avoid inserting content above existing content
- Set explicit heights for dynamic content containers
Tools to Measure CLS
Use these tools to measure your CLS and track improvements.
- Mobile and desktop analysis
- Specific optimisation suggestions
- Lab and field data
- Layout Shifts panel in Performance tab
- Lighthouse audits
- Real-time metrics
Ready to Improve Your CLS?
Start by adding width and height attributes to all your images and videos. This typically provides the biggest improvements to CLS with minimal effort.
Pro Tip: Use the Layout Shifts panel in Chrome DevTools Performance tab to watch exactly which elements are shifting and by how much. This makes it easy to identify and fix the worst offenders.