Cumulative Layout Shift: Why Your Page Jumps and How to Fix It

Short answer: Cumulative Layout Shift (CLS) measures how much visible content moves while the page loads. The usual causes are images without set dimensions, late-loading ads or embeds, and web fonts that swap in. Fix it by reserving space for everything before it loads. A score of 0.1 or below is considered good by Google's Core Web Vitals guidance.

You have seen the problem if you ever tapped a button and the page jumped so you hit something else. That is layout shift.

Step 1: find what is shifting

Run the page through PageSpeed Insights and open "Avoid large layout shifts" to see the elements responsible. For more detail, open Chrome DevTools, go to the Performance panel, record a page load and look for the "Layout Shift" markers. Real-visitor data appears at the top of PageSpeed Insights when your site has enough traffic.

Step 2: give images and video a size

The browser cannot reserve space for an image until it knows its size. Add width and height to every image so it can calculate the ratio:

<img src="/photo.jpg" width="800" height="450" alt="Team photo">

With CSS like img { max-width: 100%; height: auto; } the image still scales on mobile while the space is held. Do the same for videos and iframes, or use aspect-ratio: 16 / 9. Oversized files also load late, see large unoptimized images.

Step 3: reserve room for ads, embeds and banners

Anything injected after load pushes content down. Give the slot a fixed minimum height:

.ad-slot { min-height: 250px; }

For cookie notices and promo bars, overlay them on top of the page or place them in space that was already set aside, instead of inserting them above the content.

Step 4: control font swapping

When a custom font replaces a fallback font, text can change size and reflow. Use font-display: swap, preload your main font file, and pick a fallback font with similar proportions. Fewer font weights also means fewer swaps.

Step 5: avoid inserting content above existing content

Scripts that add elements at the top of the page, such as notification bars or "related" blocks, cause shifts. Add new content below what the visitor is already reading, or only after a user action like a click. Animations should use transform rather than changing top, height or margin. Late-loading scripts also contribute, see render-blocking resources.

Common mistakes

• Setting only width and no height on images.
• Lazy-loading the top image, which makes it pop in late.
• Injecting a cookie bar or newsletter box at the top of the page.
• Testing only on a fast desktop connection.
• Ignoring shifts that happen after the first screen, which still count.