Skip to main content

CLS Root Causes

The four classic CLS sources: images without explicit dimensions, ads and embeds, dynamically injected content above existing content, and fonts loading after the initial render.Fi…

March 18, 2026 Performance chris 1 min read Accessibility

Article takeaway

The four classic CLS sources: images without explicit dimensions, ads and embeds, dynamically injected content above existing content, and fonts loading after the initial render.Fi…

The four classic CLS sources: images without explicit dimensions, ads and embeds, dynamically injected content above existing content, and fonts loading after the initial render.

Fixes: set width and height on every <img> (the browser computes aspect-ratio), reserve space for ads and embeds with a wrapper, and append injected content below existing content.

For fonts, font-display: swap + size-adjust on the @font-face rule keeps layout stable across the swap.

Share X / Twitter LinkedIn

Leave a comment

Related Posts