Prevent layout shifts

Learn what makes your layout jump while it loads and how to reserve space so it stays put.

A layout shift isn't just a number. It's a visitor losing their place, tapping the wrong button, or giving up on your page. Cumulative Layout Shift (CLS) measures how much your content moves while it loads. It's also one you can fix yourself, because nearly every shift comes from something loading without a reserved spot.

Common causes of layout shifts

A layout shift happens when late-loading content changes the size or position of something already on screen. These are the usual causes:

• Images and video without reserved space — the browser doesn't know how tall a file is until it arrives, so everything below it jumps down
• Late-loading embeds — maps, video players, and forms from other services swap in a box of unknown size after your text has already rendered
• Font swaps — text shows in a fallback font, then jumps when your brand font arrives and its letters are wider or taller
• Injected banners — cookie notices, consent dialogs, and promo bars that appear after load can push your content down
• Content added above existing content — testimonials, feeds, and personalization scripts that add themselves above what's already rendered

Spot layout shifts on your page

Seeing the shifts makes them easier to fix. Chrome can highlight them for you.

To highlight layout shifts in Chrome DevTools:

1. Open your published site in a Chrome incognito window
2. Open DevTools — press F12, or press Cmd + Option + I on a Mac
3. Press Cmd + Shift + P on a Mac or Ctrl + Shift + P on Windows to open the command menu
4. Type in Show Rendering and press Enter
5. Check Layout Shift Regions
6. Reload the page and watch for areas that get highlighted as they shift

For a deeper look, read Chrome's guide to optimizing CLS.

Give embeds and video a fixed size

Wrap iframes, maps, and video players in a container with a set height or aspect ratio. The browser holds that space before the embed arrives, so nothing below it moves.

To reserve space for an embed:

1. Select the container that holds your embed on the canvas
2. Go to the Style panel > Size
3. Type in a height or minimum height, or choose an aspect ratio
4. Check the container at each breakpoint

Learn more about width and height.

Set a minimum height on sections that fill in late

Testimonials, reviews, social feeds, and anything else powered by a script can load after the rest of your page. Give those sections a minimum height so the space is reserved and the content arrives inside it.

Match your fallback fonts

Text appears in a fallback font before your brand font loads. If the two fonts have different letter shapes and widths, the swap moves your text. Pick a fallback that looks as similar as possible to your brand font.

If you upload custom fonts, Webflow creates a fallback for each font family automatically, and you can choose a different fallback font from a list. Learn more about uploading custom fonts.

Reserve space for banners

If a cookie notice or promo bar appears after the page loads, give it a container that already takes up its final size. You can also make it overlay your content instead of pushing it down. Learn more about managing site tracking consent.

Add late content below existing content

Where you control the order content loads in, add it below what's already on screen, not above. Content that appears above existing content pushes everything else down.

Keep your pages steady

• Optimize your fonts — load fewer fonts and weights so swaps move less
• Optimize your images — shrink file sizes without losing quality
• Optimize video and rich media — keep embeds and players from adding weight
• Understand Lighthouse and Core Web Vitals — learn what counts as a good CLS score
• Maintain site performance — re-check your layout after every release