CLS
Category: Design
What is CLS?
Cumulative Layout Shift (CLS) is a metric for visual stability that measures how often users experience unexpected layout shifts of the page content during its loading. It quantitatively determines the total number of individual layout shifts for each unexpected shifted element.
CLS is one of the three key metrics in Google's Core Web Vitals and directly affects user experience.
How does CLS look in reality? - Typical scenario:
- User clicks on a navigation button
- The page starts loading and displays content
- Unexpected images, ads or other elements shift
- The user accidentally clicks on the wrong element
Why is CLS important?
User experience
Unexpected shifts make the site difficult to use
Interactivity
Users may click on the wrong elements
Professional impression
The stable site looks more professional and reliable
SEO influence
Google penalizes sites with bad CLS in search results
How is CLS calculated?
Formula: CLS = Impact Fraction × Distance Fraction
Impact Fraction (Impact fraction)
What part of the viewport is affected by the shift (0-1)
Distance Fraction (Distance fraction)
How far the element has moved (0-1)
Evaluation standards for CLS:
Good <= 0.1
The page is visually stable and provides excellent user experience
Needs improvement 0.1 - 0.25
There are some visual shifts that need to be addressed
Poor > 0.25
The page has significant visual shifts and needs immediate improvement
Common causes of bad CLS:
Images without dimensions
Problem: Images without width and height attributes
Solution: Always set width and height attributes
<img src="image.jpg" width="800" height="600" alt="...">Ads, iframes and embed elements
Problem: Dynamic loading of content without reserved space
Solution: Reserve space with CSS or use aspect ratio boxes
Dynamically added content
Problem: New content, inserted above the existing one
Solution: Add new content below the existing one or reserve space
Web Fonts with FOUT/FOIT
Problem: Change in text size when loading fonts
Solution: Use font-display: swap and reserve space
Animations that allocate layout properties
Problem: Animations that change properties like width, height, top, left
Solution: Use transform and opacity for animations
Techniques for optimizing CLS:
Images and video
- Always set width and height attributes
- Use CSS aspect ratio boxes
- Apply reserved space for lazy-loaded images
- Use modern formats like WebP
Ads and embed elements
- Reserve space for ad containers
- Use static placeholders
- Apply aspect ratio for iframes
- Use CSS reserved containers
Fonts
- Use font-display: swap
- Preload critical fonts
- Use system fonts as fallback
- Apply size-adjust for better correspondence
CSS and layout
- Avoid inserting content above existing
- Use transform instead of changing layout properties
- Apply CSS containment
- Use content-visibility for large lists
Tools for measuring CLS:
- Chrome DevTools Performance panel shows layout shifts with red blocks
- Lighthouse Full check including CLS metric
- PageSpeed Insights Online analysis of CLS for desktop and mobile
- Web Vitals Extension Real-time measurement while navigating
- Chrome UX Report Aggregated data from real users
Good practices for CLS:
- Always reserve space for asynchronously loaded content
- Test on mobile devices - most problematic
- Monitoring in production - track CLS with real users
- Avoid inserting content above existing
- Use stable CSS techniques for layout
- Prioritize critical content for first load
- Test with different network speeds