Performance

How to Fix Cumulative Layout Shift (CLS)

CLS measures unexpected layout shifts during page load. Anything above 0.1 hurts your Google ranking. The four common causes: images without dimensions, ads/embeds that load late, web fonts swapping, and content injected above existing content.

Try our Speed test

Set explicit width and height on images

. The browser reserves the space before the image loads eliminating shift. Use aspect-ratio CSS for responsive images.

Reserve space for ads and embeds

Wrap ad slots in a fixed-height container before the ad loads. Same for YouTube embeds social widgets etc.

Use font-display: optional or swap with size-adjust

Web fonts cause shifts when they swap in. font-display: optional skips the swap entirely if the font isn't cached. font-display: swap with @font-face size-adjust matches the fallback font's metrics.

Don't inject content above existing content

If you must show banners or notifications render them above the fold from the start (with display: none → visible) rather than pushing existing content down.

Want to verify your setup?

Run the check now