Loading…
Stop content from jumping around as the page loads. Target a CLS score under 0.1.
CLS measures unexpected layout shifts — the reason you tap the wrong button when an ad or image loads late. Google targets under 0.1. The usual causes are images and embeds without dimensions, and late-loading web fonts.
width and height (or an aspect-ratio) on images, iframes, ads and embeds so the browser reserves the slot before they load.font-display: swap and a size-adjusted fallback font so swapping the webfont in does not reflow the text.<img src="product.jpg"> /* no dimensions → reflow when it loads */<img src="product.jpg" width="600" height="400" alt="...">
/* or in CSS */ img { aspect-ratio: 3 / 2; width: 100%; height: auto; }Modern themes add image dimensions automatically — but check ad/embed plugins, which are the top CLS offenders. Reserve a fixed-height container for each ad slot.
next/image requires width/height (or fill with a sized parent), which eliminates image-driven CLS by design.
Run a free audit and get a prioritized fix list with auto-generated code.
Run a free audit