CLS Debugger Example Report — Cumulative Layout Shift Root Causes
This example shows the AIPageSEO CLS Debugger for a news article page with CLS 0.18 — above the 0.1 threshold. Three shift sources are identified: a sticky ad unit loading late (contributes 0.09), a web font swap causing text reflow (0.06), and a product recommendation widget injected without reserved space (0.03).
Sticky ad unit — div#sticky-ad-bottom — loads after content
A 90px sticky ad banner loads 1.2 seconds after the main content, pushing all page content up by 90px. Fix: Reserve space for the ad with min-height: 90px on the container before the ad loads. Use a placeholder div with the correct dimensions.
Web font swap — "Merriweather" swapping from Georgia fallback
Merriweather loads 800ms after the fallback font (Georgia) is rendered, causing text reflow as character widths differ. Fix: Add font-display: optional to the @font-face declaration and use size-adjust: 105% to match Georgia metrics. Add <link rel="preload"> for the font file.
Product recommendation widget — injected without reserved space
A "You might also like" widget is dynamically injected at the bottom of the article 2.4 seconds after load without reserved space. Fix: Use CSS min-height or aspect-ratio on the container div to reserve space before the widget loads.
Related Demo Reports
Run CLS Debugger on Your Own Site
Get your real audit report with specific issues, fixes and actionable improvements — free to start.