Our Core Web Vitals report flagged our homepage with a CLS score of 0.28 (Needs Improvement). The visual shift seems to happen when custom Google Fonts load and when ad banner containers resize dynamically.
What CSS properties and font loading strategies will stabilize layout geometry?
To reduce Cumulative Layout Shift (CLS) below 0.1, implement these three rules:
@font-face declaration, specify font-display: swap; and match fallback font metrics using size-adjust to prevent layout jumping when web fonts swap.min-height or aspect-ratio on banner containers so the browser reserves layout space before media finishes loading.<link rel="preload" href="/fonts/font.woff2" as="font" type="font/woff2" crossorigin> in the HTML head.