Stop layout shifting (CLS)
Reserve space for images and embeds so the page stops jumping while loading.
What it means
CLS (Cumulative Layout Shift) measures how much visible content moves around while the page loads. Buttons that dodge your cursor and text that gets pushed down are layout shifts.
Why it matters
Shifting layouts cause mis-taps and frustration — and Google penalises them directly in mobile rankings. High CLS is one of the fastest ways to make a site feel broken.
How to fix it
- Add explicit width and height (or an aspect-ratio CSS property) to every <img> and <video> tag so the browser can reserve space before loading.
- Reserve space for embeds (ads, videos, social posts, maps) with a fixed-height container.
- Never inject banners, cookie bars, or sign-up prompts above existing content after the page has loaded — overlay them instead.
- Load web fonts with font-display: swap and preloaded font files so text doesn't reflow when the real font arrives.
- Verify with PageSpeed Insights until CLS is below 0.1.
Helpful tools
- PageSpeed Insights
- Chrome DevTools → Performance panel
Not sure if this affects your site? Analyze your website for free or compare it with a competitor.
Related guides
- Fix slow Largest Contentful Paint (LCP): Make the biggest visible element on your page load in under 2.5 seconds.
- Reduce Total Blocking Time (TBT): Break up long JavaScript tasks so the page stays responsive to taps and clicks.
- Improve mobile page performance: Cut image weight, JavaScript, and server lag so the page loads fast on phones.
- Convert images to WebP or AVIF: Modern image formats are 25–50% smaller than JPEG/PNG at the same visual quality.