CLS thresholds
Google defines three performance bands for CLS:
- Good: under 0.1
- Needs improvement: 0.1 to 0.25
- Poor: over 0.25
CLS is calculated as the sum of all unexpected layout shift scores during the page's lifespan. Each shift score is the product of the impact fraction (how much of the viewport shifted) and the distance fraction (how far elements moved).
What causes poor CLS
Images without dimensions — when images load without explicit width and height attributes, the browser cannot reserve space for them. When the image loads, it pushes surrounding content down.
Web fonts causing FOUT or FOIT — fonts that load after initial render can cause text to reflow, shifting surrounding elements.
Dynamically injected content — ads, banners, cookie notices, or other elements inserted above existing content after load cause layout shifts.
Animations that affect layout — CSS animations that change box model properties (width, height, margin, padding) cause layout shifts. Animations using transform and opacity do not.
Late-loading embeds — iframes and embedded content without reserved dimensions shift surrounding content when they load.
How to fix CLS
- Always set explicit width and height on images and video elements
- Use font-display: optional or preload web fonts to prevent reflow
- Reserve space for dynamic content such as ads and cookie banners before they load
- Use CSS transform instead of position changes for animations
- Set explicit dimensions on iframe and embed elements
Grupa Insight implementation example
Grupa Insight's own website achieves CLS of 0 in PageSpeed Insights on mobile. Key implementation decisions: all images use next/image with explicit dimensions, the Montserrat font uses display: optional to prevent reflow, no above-the-fold dynamic content injection, and animations use CSS transform exclusively.
How to measure CLS
- PageSpeed Insights: pagespeed.web.dev — lab measurement per URL
- Google Search Console: Core Web Vitals report — real user CLS data
- Chrome DevTools: Performance tab — layout shift markers in the timeline
- Web Vitals Chrome extension — real-time CLS measurement while browsing
Source
CLS is documented at web.dev/cls and in Google Search Central at developers.google.com/search/docs/appearance/core-web-vitals