Stop the page layout from jumping while it loads

perf.cwv.cls_needs_improvement · effort: about an hour

Why it matters

Cumulative Layout Shift measures how much the content moves around as it loads, and the value is above the good threshold. Setting image sizes and reserving space for late content usually fixes it.

Staged change. Do this in stages and check each one before the next, so a mistake does not break your site or your mail.

The fix

Give every image, video and iframe a width and height attribute (or a CSS aspect-ratio), so the browser can reserve the space before the file arrives.
Reserve space for things that appear late, such as ads, embeds, banners and cookie notices, using min-height or aspect-ratio on their container. Show a cookie or promotion banner as an overlay or place it at the bottom, so it does not push the page down.
Handle web fonts. Preload the main font file, set font-display, and choose a fallback font with similar size, so text does not reflow when the font arrives.
Do not insert new content above what the visitor already sees unless they asked for it, and animate with transform and opacity instead of top, left, width or height.
Check the result in PageSpeed Insights or the DevTools Performance panel, which highlights layout shifts and the element that moved.

html

<img src="/img/team.jpg" width="800" height="450" alt="Our team">

<style>
  .ad-slot { min-height: 250px; }
  .video-wrap { aspect-ratio: 16 / 9; }
  @font-face {
    font-family: "Brand";
    src: url("/fonts/brand.woff2") format("woff2");
    font-display: swap;
  }
</style>

Read the documentation (opens in a new tab)

Scan your domain to see whether this applies to you.

Why it matters

The fix

Related