How to Reduce CLS (Layout Shift) in Webflow Without Custom Code

You can reduce CLS in Webflow without custom code by reserving space for everything that loads late. Give image and embed wrappers a fixed size in the Style panel, make banners overlay the page, and animate with Move and Opacity instead of size and spacing. A handful of elements usually cause most of the shift.

What CLS measures

CLS scores how much visible content moves without the visitor causing it. Good is 0.1 or less. Shifts within half a second of a click or tap do not count, so a dropdown opening is fine. A banner that slides in by itself is not. See web.dev.

Find the elements that shift

1. Run PageSpeed Insights on mobile and open "Avoid large layout shifts".
2. Check Search Console's Core Web Vitals report to see which templates fail.
3. Scroll the published page slowly on a throttled connection. Field CLS includes shifts after load.

Reserve space for images

An image with no known size takes no height until it loads, then pushes content down. CMS card grids suffer most, since every upload has different proportions.

• Wrap the image in a div with a fixed height, or an aspect ratio if your Style panel offers that control.
• Set the image to 100% width and height with object fit set to cover.
• Repeat on each breakpoint where the size changes.

A method that always works with the Style panel: give the wrapper relative position, zero height and percent top padding, then place the image absolutely inside it.

.card-image-wrap { position: relative; height: 0; padding-top: 56.25%; }
.card-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }

Reserve space for embeds

Third-party forms, booking widgets and maps arrive after the page renders. Put each Embed element in a div and give that div a min-height equal to the widget's loaded height on each breakpoint. Measure it in DevTools on the published site.

Example: a hypothetical service page has a booking widget mid-page. The FAQ below jumps when it loads. A min-height on the wrapper keeps it still.

For YouTube or Vimeo, Webflow's native Video element is built to keep a responsive ratio. For other video iframes, use the same wrapper as for images.

Make banners overlay

• Set cookie banners to fixed position so they cover content instead of moving it.
• Build announcement bars into the page so they render with it, instead of revealing them later.

Use interactions that do not move layout

• Use Move, Scale and Opacity. They use transforms and do not shift other content.
• Avoid animating height, width, margin or padding.
• Keep a sticky navbar at a constant height while scrolling, or make it fixed.

Keep fonts from reflowing text

When a web font replaces its fallback, line breaks can change and push content down. Use fewer families and weights in Site settings > Fonts, and pick body fonts with proportions close to common system fonts.

Checklist

• Shifting elements identified
• Image wrappers have fixed height or ratio
• CMS card images share one wrapper size
• Embed wrappers have a min-height per breakpoint
• Cookie banner fixed
• Interactions use transforms and opacity only
• Font families and weights kept minimal

FAQ

Why does Lighthouse show low CLS while Search Console fails?

Lighthouse measures only the load. Field data covers the whole visit, including shifts while scrolling.

Can all CLS be fixed without code?

Most of it. Content injected by third-party tools may also need changes in that tool's settings.

Dealing with this on a live Webflow site? It is the kind of work I do in a Webflow audit. Send me your site and I will tell you what I would fix first.