{"id":352,"slug":"cls-killers-catalogue","title":"Reference: the 5 most common CLS killers — and the fixes","kind":"reference","scope":"business","status":"current","audiences":["claude-code","dev","candid-team"],"topics":["core-web-vitals"],"reference_body":"**Ranked by observed frequency:**\n\n1. **Images and embeds without explicit `width`/`height`** or `aspect-ratio` — browser allocates wrong space, then reflows.\n2. **Web fonts with `font-display: swap`** when swap font has different metrics from fallback (FOUT-induced shift). **Web Almanac 2025: median site uses 4 fonts; only 0.5% use the CLS-safe `font-display: optional`.**\n3. **Late-loading ads, embeds, cookie banners** that inject above-the-fold content.\n4. **App-injected banners** on Shopify and similar (promo bars, free-shipping bars).\n5. **Dynamically-loaded above-the-fold content** from JavaScript (consent managers, geo-personalisation).\n\n**Remediation pattern:** Reserve space with `aspect-ratio` or `min-height` → use `font-display: optional` with preload, or `swap` plus `size-adjust` metric overrides → place cookie banners outside document flow (bottom-anchored fixed) → audit every plugin/app that can inject above-the-fold DOM.","rationale_body":null,"metadata":null,"links":{"outgoing":[{"slug":"web-almanac-2025-cwv-pass-rates","title":"Web Almanac 2025: 48% mobile / 56% desktop origins pass all 3 CWV; LCP is the bottleneck","kind":"reference","scope":"business","link_type":"relates-to"}],"incoming":[{"slug":"research-brief-page-speed-moat","title":"Research brief: Page Speed as a Moat — why CWV separates the agencies from the freelancers (piece 9 of 15)","kind":"reference","scope":"business","link_type":"relates-to"}]},"created_at":"2026-05-22T20:03:33.385Z","updated_at":"2026-05-22T20:03:33.385Z"}