What is CLS (Cumulative Layout Shift)?
CLS measures a page's visual stability. A poor CLS means elements move around during loading.
What is a layout shift?
A layout shift occurs when a visible element unexpectedly changes position. For example: a button that moves because an image loads above it.
Ideal score
- ●Good: < 0.1
- ●Needs improvement: 0.1 – 0.25
- ●Poor: > 0.25
Common causes
- ●Images without defined dimensions (width/height)
- ●Ads or iframes that load dynamically
- ●Web fonts causing text "flash"
- ●Dynamically injected content without reserved space
Solutions
- ●Always define width and height on images
- ●Reserve space for ads
- ●Use
font-display: swapwith fallback fonts - ●Avoid injecting content above existing content
SEO Impact
Poor CLS frustrates users and can lower your Google ranking.
Related Terms
What are Core Web Vitals?
Core Web Vitals are 3 Google metrics measuring the speed, responsiveness, and visual stability of a web page.
What is LCP (Largest Contentful Paint)?
LCP measures the loading time of the largest visible element on a page. Target: under 2.5 seconds.
What is Page Loading Speed?
Loading speed measures the time needed to fully display a web page. It's a Google ranking factor.
What is Lazy Loading?
Lazy loading is a technique that delays loading images and videos until they're visible on screen.
What is Google Lighthouse?
Lighthouse is a Google tool that audits a web page's performance, accessibility, SEO, and best practices.
What is TBT (Total Blocking Time)?
TBT measures the total time a page is blocked and unresponsive to user interactions.