Cumulative Layout Shift (CLS) measures the sum of all individual layout shift scores for every unexpected layout shift that occurs during the entire lifespan of the page.
What causes layout shifts?
Layout shifts occur when visible elements change position from one frame to the next without user interaction. Common causes include:
- Images without dimensions
- Ads, embeds, and iframes without dimensions
- Dynamically injected content
- Web fonts causing FOIT/FOUT
CLS thresholds
- Good: 0.1 or less
- Needs Improvement: Between 0.1 and 0.25
- Poor: More than 0.25
How CLS is calculated
CLS is calculated by multiplying the impact fraction (how much of the viewport was affected) by the distance fraction (how far the elements moved).
Improving CLS
- Always include size attributes on images and videos
- Reserve space for ad slots
- Avoid inserting content above existing content
- Use CSS transforms for animations instead of properties that trigger layout changes
Related Terms
Core Web Vitals
A set of three metrics defined by Google that measure the loading performance, interactivity, and visual stability of a web page.
Image Optimization
The process of reducing image file sizes and improving delivery to enhance web performance without significantly affecting visual quality.
Interaction to Next Paint (INP)
A Core Web Vital that assesses page responsiveness by measuring the latency of all user interactions throughout the page lifecycle.
Largest Contentful Paint (LCP)
A Core Web Vital that measures how long it takes for the largest content element visible in the viewport to render.