7 Cumulative Layout Shift Mistakes That Are Hurting Your CLS Score

You ship a beautiful landing page, run a Lighthouse audit, and see a CLS score of 0.35 — well above the 0.1 threshold Google considers good. The culprit is almost never obvious on first look. Layout shifts happen in fractions of a second, invisible to the human eye during development but very visible to Google's ranking algorithm and to users on slower connections who watch the page visibly jump as they try to click something.

This post covers the most common Cumulative Layout Shift mistakes, how to identify each one, and the specific fix to apply.

Understanding Cumulative Layout Shift Before You Fix It

CLS measures the total amount of unexpected layout movement that occurs during the lifespan of a page. Every time an element moves — a heading that shifts down when an image loads above it, a button that jumps as a font swaps in, an ad slot that pushes content sideways — the browser records an impact fraction and a distance fraction and multiplies them. Your CLS score is the sum of those products across all shift sessions.

Good: CLS at or below 0.1. Needs improvement: 0.1 to 0.25. Poor: above 0.25.

Common Cumulative Layout Shift Mistakes and How to Fix Them

Mistake 1: Images Without Explicit Width and Height

When a browser parses an img tag with no width and height attributes, it cannot reserve space for the image while it downloads. It renders surrounding content, then shifts everything when the image arrives and claims its space.

The fix is simple: always declare both attributes on every img element, including srcset-responsive images. The values do not need to match the exact pixel size — they just need to reflect the correct aspect ratio. Modern browsers use those two values to calculate aspect-ratio-based reserved space automatically.

Mistake 2: Web Font Swap Causing Text Reflow

Using font-display: swap is often recommended as a performance improvement, and it does help perceived loading. But it trades one problem for another: the browser renders text in a fallback font first, then swaps in the custom font once it loads, causing the text block to reflow if the two fonts have different metrics.

Better approaches:

• Use font-display: optional for less critical fonts. The browser uses the custom font only if it is already cached; otherwise it falls back and does not swap.
• Use the CSS size-adjust, ascent-override, descent-override, and line-gap-override descriptors in a @font-face rule to make your fallback font match the custom font's metrics closely. This eliminates the visual shift even when a swap occurs.
• Self-host fonts and preload the primary font file in the document head to reduce the gap between fallback render and font availability.

Mistake 3: Ad Slots Without Reserved Space

Ads are the single most common cause of high CLS scores on content sites. An ad network injects content into a container at runtime, often pushing a full article or navigation bar downward.

Reserve explicit dimensions for every ad slot — even when the ad has not loaded yet. Use a min-height on the container. If the ad network sometimes serves different sizes, reserve for the largest variant. An empty reserved slot is much better than a page that jumps for every visitor.

Mistake 4: Dynamically Injected Content Above Existing Content

Cookie consent banners, notification bars, live chat widgets, and promotional ribbons that appear above existing page content after the initial render all cause layout shift. If the element is inserted above existing content, everything below it shifts down by the height of the inserted element.

Fixes:

• Reserve space for banners before they appear using a fixed-height placeholder.
• Animate them in from outside the viewport (top or bottom) rather than inserting them inline and pushing content.
• Use position: fixed or position: sticky for persistent UI elements so they do not participate in document flow.

Mistake 5: Late-Loading Embeds and Iframes Without Dimensions

YouTube embeds, Twitter cards, map iframes, and third-party widgets frequently load after the initial render and shift content when they arrive. The same rule applies: set explicit width and height on every iframe. For responsive embeds, use a CSS aspect ratio wrapper rather than letting the iframe determine its own size.

Mistake 6: Ignoring Layout Shift on Back/Forward Cache Restores

Chrome's back/forward cache (bfcache) restores pages from memory when users navigate back. Elements that animate or inject dynamically on page load — sliders, hero carousels, chat widgets — can cause a burst of CLS when the bfcache-restored page becomes active again.

Test bfcache explicitly. In Chrome DevTools, go to Application > Back/forward cache and test restore. Capture layout shift during that phase and treat it the same as initial load shift.

Mistake 7: CSS Transitions That Affect Layout Properties

Animating properties like height, width, top, left, margin, or padding forces layout recalculation and counts as a layout shift if the element affects others in the document flow. These shifts are counted in CLS even if they are intentional and smooth-looking.

Use animations that do not trigger layout:

• transform: translateY() instead of top or margin-top
• transform: scale() instead of width or height
• opacity instead of display

These properties are composited by the browser and do not affect the layout of sibling or parent elements.

How to Identify Layout Shifts in Practice

Chrome DevTools has a Layout Shift region visualizer in the Rendering panel. Enable "Layout Shift Regions" to see blue flashes whenever a shift occurs during a manual page interaction or load.

The Performance panel records shift events as purple triangles in the Experience row. Click any triangle to see which elements shifted, by how much, and what caused the shift.

For field data, the CrUX dashboard in Google Search Console shows CLS distribution across real users. If your lab (Lighthouse) CLS is good but field CLS is poor, you likely have shifts caused by dynamic content that your lab test does not trigger.

A Quick CLS Audit Checklist

• Every img and video has explicit width and height attributes
• Font loading uses metrics-matched fallbacks or font-display: optional
• All ad slots have min-height reserved before ad loads
• Dynamic injected banners use reserved space or fixed positioning
• All iframes and embeds have explicit dimensions
• No CSS transitions animate layout-affecting properties
• bfcache restore tested and CLS verified

A CLS score below 0.1 is achievable on almost any stack. Most fixes are CSS and HTML attribute changes that take less than a day to implement.

If your team is dealing with a complex layout shift problem — multi-variant ad serving, third-party widget proliferation, or CMS-driven dynamic content — Clixo can run a targeted Core Web Vitals audit and deliver fixes, not just a report.