---
title: "CLS Debugger - Free Layout Shift Testing Tool · Unlighthouse"
canonical_url: "https://unlighthouse.dev/tools/cls-debugger"
last_updated: "2026-06-30T08:48:11.880Z"
meta:
  description: "Free CLS testing tool. Enter a URL to find which elements cause Cumulative Layout Shift and get actionable fixes. No signup required."
  "og:description": "Free CLS testing tool. Enter a URL to find which elements cause Cumulative Layout Shift and get actionable fixes. No signup required."
  "og:title": "CLS Debugger - Free Layout Shift Testing Tool · Unlighthouse"
---

</h1>

```

Unlighthouse on GitHub

# **CLS **Debugger

Find which elements cause layout shifts and fix the jank.

**CLS Analysis**

Enter a URL to debug layout shifts

## **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~~](https://web.dev/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

**Unsized Images**

Images without width/height push content when they load.

`<img width="800" height="600" ...>`

**Font Loading**

Custom fonts can cause text to reflow when they load.

`font-display: optional;`

**Dynamic Content**

Ads, embeds, and async content push existing content.

`Reserve space with min-height`

**CSS Animations**

Avoid animating properties that trigger layout.

`Use transform, not top/left`

**Injected Elements**

Banners, cookie notices, and alerts inserted at the top.

`Use position: fixed or sticky`

**Missing Placeholders**

Async content should have skeleton loaders.

`Show skeleton while loading`

## **Frequently Asked Questions **

<details>

<summary>**01**### **What is Cumulative Layout Shift (CLS)?**

</summary>

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.

</details>

<details>

<summary>**02**### **How do I find layout shift culprits on my page?**

</summary>

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.

</details>

<details>

<summary>**03**### **What causes high CLS scores?**

</summary>

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.

</details>

<details>

<summary>**04**### **How do I fix Cumulative Layout Shift issues?**

</summary>

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.

</details>

<details>

<summary>**05**### **What is the difference between CLS in lab data vs field data?**

</summary>

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.

</details>

Explore more Core Web Vitals tools

[**LCP Finder **](https://unlighthouse.dev/tools/lcp-finder) [** Full Performance Report **](https://unlighthouse.dev/tools/pagespeed-insights-performance) [** CLS Optimization Guide **](https://unlighthouse.dev/learn-lighthouse/cls)