← Back to the library
FrontendCore · 6 min

Content jumps around while the page loads

“Text moves down as an image, ad, or cookie banner appears, users tap the wrong link, and Search Console or CrUX flags CLS as poor on mobile.”

THE PRINCIPLE

Every element that arrives late needs its final size known before it arrives. CLS is good at 0.1 or less and poor above 0.25, measured at the 75th percentile of real page loads.

FIRST MOVES

  1. Use field data first (CrUX or web-vitals in production); lab tools only see the load, while CLS counts shifts for the whole page life.
  2. Find the culprit element with web-vitals/attribution (largestShiftTarget) or the Layout Shifts track in the DevTools Performance panel.
  3. Give every img, video, and iframe width and height attributes or a CSS aspect-ratio; give ad and embed slots a min-height that stays even when empty.
  4. Render consent banners, toasts, and promos as overlays or below the fold, not inserted above existing content.
  5. For fonts: preload the critical file, use font-display: optional or a fallback tuned with size-adjust and ascent/descent-override.

TOOLS: THEN → NOW

Padding-top percentage hacks for responsive mediawidth/height attributes or CSS aspect-ratio
Measuring CLS in Lighthouse onlyField data with web-vitals attribution, CrUX, and RUM; Lighthouse for regression checks

PATTERN SNAPSHOT

<!-- Space is reserved before the image or ad loads. -->
<img src="/hero.avif" width="1200" height="630" alt="" fetchpriority="high" />
<div class="ad-slot" style="min-height: 250px"></div>

<style>
  img { max-width: 100%; height: auto; } /* keeps the ratio from the attributes */
  @font-face {
    font-family: "Brand Fallback";
    src: local("Arial");
    size-adjust: 104%; /* tune so fallback text wraps like the web font */
  }
</style>

CLOSE THE AI. EXPLAIN THIS.

Why does a layout shift right after a click not count toward CLS, but one that happens while the user scrolls does?

HOW IT WORKS UNDERNEATH

SOURCES

Guide reviewed