CLS Debugger
Find which elements cause layout shifts and fix the jank.
What is Cumulative Layout Shift?
CLS measures visual stability—how much elements move unexpectedly while the page loads. A high CLS score means users experience jarring shifts, like clicking a button that suddenly moves because an ad loaded above it.
Google considers CLS one of the three Core Web Vitals that directly affect search rankings. A score of 0.1 or below is considered good.
Layout Shift Example
Elements moving after render causes poor user experience and missed clicks.
Common CLS Causes & Fixes
Most layout shifts come from these common issues
Images without width/height push content when they load.
<img width="800" height="600" ...> Custom fonts can cause text to reflow when they load.
font-display: optional; Ads, embeds, and async content push existing content.
Reserve space with min-height Avoid animating properties that trigger layout.
Use transform, not top/left Banners, cookie notices, and alerts inserted at the top.
Use position: fixed or sticky Async content should have skeleton loaders.
Show skeleton while loading 01What is Cumulative Layout Shift (CLS)?
Cumulative Layout Shift (CLS) is a Core Web Vital that measures visual stability. It quantifies how much page content unexpectedly shifts during loading. A good CLS score is 0.1 or less, meaning minimal unexpected movement of visible elements.
02How do I find layout shift culprits on my page?
This CLS debugger identifies exactly which elements cause layout shifts by analyzing your page with Lighthouse. It shows you the specific DOM elements, their shift scores, and visual overlays highlighting problem areas. Common culprits include images without dimensions, ads, embeds, and dynamically injected content.
03What causes high CLS scores?
High CLS is typically caused by: images or videos without explicit width/height attributes, ads or embeds that resize after loading, web fonts causing FOUT/FOIT, dynamically injected content above existing content, and animations that trigger layout changes instead of using transform.
04How do I fix Cumulative Layout Shift issues?
To fix CLS: always set width and height on images and video elements, reserve space for ads and embeds with CSS aspect-ratio, use font-display: optional or swap with fallback fonts, avoid inserting content above existing content, and use CSS transforms for animations instead of properties that trigger layout.
05What is the difference between CLS in lab data vs field data?
Lab CLS measures layout shifts during initial page load in a controlled environment. Field CLS (from real users) captures shifts throughout the entire page session, including those from user interactions. Field data often shows higher CLS because it includes shifts from lazy-loaded content and user-triggered changes.
Explore more Core Web Vitals tools