` for an ad, then the ad loads at 250px tall, everything below it jumps. ## How to detect it CrUX field data via PageSpeed Insights is the canonical number. For real-time debugging, the Web Vitals JS library reports each shift with its source: ``` ``` Chrome DevTools → Performance → record a load → the Experience track highlights every layout shift with the source element. This is the fastest way to identify exactly which elements are jumping. ## The fix ### Fix 1 - Always set image and iframe dimensions ```

``` `width` and `height` attributes give the browser an aspect ratio it can reserve. CSS can override visual size: ``` img { width: 100%; height: auto; } ``` For responsive images with multiple aspect ratios per breakpoint, use the `aspect-ratio` CSS property: ``` .hero-image { aspect-ratio: 16 / 9; width: 100%; } ``` ### Fix 2 - Stabilize font swap with metric overrides Match the fallback font’s metrics to the web font so the swap is invisible: ``` @font-face { font-family: "Brand"; src: url("/brand.woff2") format("woff2"); font-display: swap; size-adjust: 105%; ascent-override: 90%; descent-override: 22%; line-gap-override: 0%; } ``` The `font-display: optional` value avoids CLS entirely by suppressing the swap on slow connections - the page just uses the fallback if the brand font hasn’t loaded by first paint. Trade-off: some users never see the brand font on the first visit. ### Fix 3 - Reserve space for dynamic content Cookie banners, A/B test variants, hero sections that load late - give them a placeholder with the right height before they arrive: ``` ``` ```

``` ### Fix 4 - Don’t insert content above existing content If you must add content dynamically after first paint, add it below the fold or use `position: fixed` / `position: absolute`. Any DOM insertion that pushes existing visible content down is a CLS event. ### Next.js (App Router) ``` import Image from "next/image";

; ``` `next/font` automatically generates metric-override CSS for Google Fonts and local fonts: ``` import { Inter } from "next/font/google"; const inter = Inter({ subsets: ["latin"], display: "swap", adjustFontFallback: true, }); ``` ### WordPress WP automatically adds `width` and `height` to images uploaded through the media library. Images embedded as raw HTML in post content often lack these - audit with a SQL query for `