CLS — Layout Stability

High CLS —
Layout Shifts from Ads

Your page jumps every time an ad loads. Users hate it. Google measures it.

Where to find it: Chrome DevTools > Performance Panel > Layout Shift Regions (pink highlights) > Ad Slot Sources

What It Is

CLS — Cumulative Layout Shift — measures the total amount of unexpected visual movement on a page as it loads. Ads are one of the most common causes of high CLS because they're loaded asynchronously: the page renders first, then the ad network injects content into slots. If those slots don't have reserved space, the entire layout below them shifts down when the ad loads. Google's target CLS score is under 0.1. A single large ad loading without reserved space can push CLS above 0.25 — into the Poor range.

Why It Matters

CLS is a confirmed ranking signal. High CLS scores create a frustrating user experience: buttons shift out from under clicks, text jumps while being read, form fields move as users are typing. Users who experience layout shifts have significantly higher bounce rates and lower conversion rates. For publisher clients running display advertising, high CLS is particularly damaging because the ads themselves are causing the ranking penalty that suppresses the traffic those ads depend on.

Root Diagnostics

Common Causes

Understanding why this failure occurs is the first step to fixing it permanently.

Ad Slots Without Reserved Height

Ad containers have no height defined before the ad loads. The browser renders surrounding content, then shifts everything when the ad injects its content.

Variable Ad Sizes

The ad network serves different sized creatives (300x250, 300x600, etc.) into the same slot. Without knowing which size will load, the page can't reserve the right space in advance.

Ads Loaded in Viewport

Ads loading in the visible viewport (above the fold) cause the highest CLS scores because the shift happens while the user is actively viewing and interacting with that content.

No Placeholder or Skeleton

There's no visual placeholder in the ad slot while the ad is loading. A placeholder of the correct height eliminates the shift because the layout space is already occupied.

Interactive Standard Operating Procedure

The Fix Blueprint (Interactive SOP)

Check off each step to monitor your implementation progress live!

Implementation Progress: 0% Completed (0/7)

1. Identify Ad Slot CLS Sources

Open Chrome DevTools, go to the Performance panel, record a page load, and look for pink Layout Shift regions in the timeline. Click each shift region to identify its source. Confirm which are ad-related.

2. Set min-height on Every Ad Container

For each ad slot, add a min-height CSS value matching the tallest ad creative that could load in that slot. Example: a leaderboard slot should have min-height: 90px; a rectangle slot should have min-height: 250px.

3. Add a Background Placeholder

Set a subtle background color on the ad container (e.g., background-color: #f0f0f0) so the reserved space is visually indicated to the user while the ad loads. This confirms the space is intentional, not broken.

4. Handle Variable Ad Sizes

If multiple ad sizes are served into one slot, reserve height for the largest possible creative. When a smaller creative loads, center it within the reserved space rather than collapsing the container.

5. Move Above-the-Fold Ads Below Viewport

Ads that load in the initial viewport cause the most damaging CLS. Where possible, move ad placements below the fold — after the first screenful of content. This reduces CLS score significantly even with imperfect height reservation.

6. Implement Lazy Loading for Below-Fold Ads

Load ads below the fold only as the user scrolls toward them. This eliminates layout shifts for ads the user never reaches and reduces initial page load weight.

7. Validate CLS Score After Changes

Re-run the page through PageSpeed Insights and Chrome DevTools Performance panel. CLS score should move below 0.1 (Good) after height reservation is implemented. Field data will take 28 days to fully reflect changes.

Tools

Chrome DevTools Performance Panel
Free | Record page load to visualize layout shifts with pink region highlights — identifies exactly which elements are shifting and when
PageSpeed Insights
Free | CLS score with breakdown of contributing elements — use alongside DevTools for full picture
Google Publisher Console
Free | For Google AdSense/Ad Manager — shows ad slot dimensions and creative sizes being served

Time to Fix

1 hour

To identify ad slots causing CLS

1–3 hours

CSS min-height + placeholder implementation

Pro Tip

Reserve height for the maximum creative size, not the average.

Agencies often make the mistake of reserving height for the most common ad size served. But CLS is caused by the ad sizes that are larger than the reserved space — which means the occasional 600px tall creative causes a massive shift even though most ads load at 250px. Always reserve for the maximum possible creative height and center smaller creatives within that space.

High CLS — Layout Shifts from Ads