Cumulative Layout Shift: Find and Fix Every Jumping Element

1 What CLS actually measures

CLS is the sum of how much content shifts during the page load, weighted by how visible the shifted element is. A small shift in a tiny corner barely counts; a big shift right where you're reading is heavily penalised.

2 How to find shifting elements

1. 1Open Chrome DevToolsRight-click anywhere on the page, choose Inspect, then open the Performance tab.
2. 2Record a fresh page loadClick the record button (circle) and reload the page. Stop recording after the page is fully loaded.
3. 3Look at the Experience trackEach shift event is marked with a red bar. Hover to see exactly which element moved and by how much.
4. 4Open the CLS Debugger toolFor a faster overview, run performance-tools.html#cls-debugger which lists every shifting element with the fix recommendation.

3 The 5 most common CLS causes

Cause	Symptom	Fix
Images without dimensions	Text below image jumps down when image loads	Add width and height attributes to every
Web fonts swapping	Headlines and paragraphs reflow when font loads	Use font-display: swap and matching fallback metrics
Ads loaded after content	Whole page jumps when ad slot appears	Reserve ad height with min-height CSS
Embeds (YouTube, Twitter)	Page jumps when embed renders	Use aspect-ratio CSS to reserve space
Cookie banners/alerts	Content pushed down by banner	Use position: fixed instead of pushing content

4 Real example: fixing CLS from 0.32 to 0.04

A typical WordPress site fix sequence:

1. 1Add image dimensions site-wideFor WordPress: use a plugin like "Add Image Dimensions" or add to functions.php. For custom sites: add width/height to every .
2. 2Reserve hero image spaceIn CSS: .hero-img { aspect-ratio: 16/9; } so the layout doesn't change as the image loads.
3. 3Switch banner from push to overlayCookie banners should be position: fixed at the bottom, not above the page content pushing everything down.
4. 4Defer Twitter/YouTube embedsLazy-load embeds with intersection observer; reserve their height with CSS so the page doesn't shift when they appear.