How Do I Reduce Cumulative Layout Shift (CLS) on a Webflow Site in 2026?

Why does my Webflow page jump around while it loads?

Your page jumps because elements load at different times and push each other around. An image arrives late and shoves the text down. A web font swaps in and reflows a heading. Each shove is a layout shift, and together they add up to a score Google measures called Cumulative Layout Shift.

Cumulative Layout Shift, or CLS, is one of Google's three Core Web Vitals. It measures visual stability, which is a fancy way of saying how much your content moves around unexpectedly while the page loads. A high score means a jumpy page. A low score means a page that settles fast and stays put.

CLS matters for two reasons. First, users hate it. Everyone has tried to tap a button that jumped, and ended up tapping an ad instead. Second, Google uses Core Web Vitals as a ranking signal. A jumpy page can quietly cost you rankings, and most site owners never connect the dots.

What counts as a good CLS score in 2026?

A good CLS score is 0.1 or less. Between 0.1 and 0.25 needs improvement, and above 0.25 is poor. Google measures this at the 75th percentile of real visits, which means 75 percent of your visitors need a good experience for the page to pass. These thresholds come straight from Google's web.dev docs.

The number itself is a ratio, not seconds. It combines how much of the screen moved with how far it moved. You do not need to calculate it by hand. Chrome's Lighthouse, PageSpeed Insights, and the Core Web Vitals report in Google Search Console all report it for you, using real Chrome user data where available.

CLS sits alongside the other two Core Web Vitals. Largest Contentful Paint measures loading, and Interaction to Next Paint measures responsiveness. I covered that responsiveness metric in optimizing Interaction to Next Paint on Webflow. All three need to pass for a page to earn an overall good rating.

What causes layout shift on a Webflow site?

Four things cause most layout shift. Images without set dimensions, embeds and iframes with no reserved space, web fonts that swap and reflow text, and content that gets injected above what is already on screen. Fix these four and your CLS usually drops into the good range.

Images are the classic culprit. If the browser does not know an image's size before it loads, it reserves no space. The image then pops in and pushes everything below it down. The good news is that Webflow sets width and height attributes on images you upload through the Designer, so native images are mostly handled for you.

The trouble starts with custom code and third-party content. A banner from an ad network, a chat widget, a video embed, or an iframe often loads with no reserved height. It appears, and the page lurches. Injected content is the same problem in a different shape. A cookie bar or a promo that inserts itself at the top pushes the whole page down.

How do I stop images and embeds from shifting the page?

Reserve the space before the content arrives. Give images explicit width and height, and give embeds a fixed height or a set aspect ratio in their wrapper. When the browser knows how much room to leave, the late-arriving content drops into a spot that is already waiting for it.

For images placed through the Webflow Designer, this is mostly automatic. For images inside custom embeds or rich text, add the width and height attributes yourself, or set a CSS aspect-ratio on the element. Modern browsers use those values to hold the space open, so nothing jumps when the file finishes downloading.

For iframes, video embeds, and ad slots, wrap them in a div with a fixed min-height that matches the expected size. It is better to reserve slightly too much space than none at all. If you are also tuning your hero image for speed, pair this with the ideas in using fetchpriority to fix hero LCP, because a fast, stable hero helps both metrics at once.

Do web fonts really cause layout shift?

Yes. Web fonts cause shift when the browser swaps from a fallback font to your web font and the text reflows. If the two fonts have different widths and heights, lines rewrap and headings jump. This is a real and common source of CLS that people rarely suspect.

There are two versions of the problem. A flash of invisible text, where the text is hidden until the font loads, and a flash of unstyled text, where a fallback shows first and then swaps. The swap is what moves things. The wider the gap between the fallback metrics and the web font metrics, the bigger the shift.

To reduce it, self-host your fonts so they load faster and preload the ones your hero and headings use. Webflow lets you upload custom fonts and control this. Picking a fallback font with similar proportions also helps, because a closer match means a smaller reflow when the real font arrives.

How do I measure CLS on a real Webflow page?

Use both lab and field tools. Lighthouse in Chrome DevTools gives you a lab score you can test on demand. The Core Web Vitals report in Google Search Console and PageSpeed Insights show field data from real visitors. The field data is what Google actually uses, so trust it over the lab number.

Here is a habit that catches hidden shifts. Open the page in Chrome, throttle the network to a slow connection in DevTools, and reload while watching. On a slow connection, late content arrives in slow motion, so every jump becomes obvious. A shift that is invisible on fast wifi can be ugly on a phone with weak signal.

Do not chase a perfect lab score and forget the field. Lab tools load the page once in a clean room. Real visitors arrive with different devices, connections, and cache states. That is why Google reports CLS at the 75th percentile of real sessions, and why the Search Console number is the one I report to clients.

Which CLS fix should I do first?

Start with whatever moves the most screen. Usually that is a large hero image or an embed near the top of the page, because a shift high up drags everything below it. Fix the biggest offender first, remeasure, then move down the page. One good fix often takes a page from poor to good.

My order is simple. Reserve space for the hero and any above-the-fold media. Then handle fonts, because a heading reflow is right where the eye lands. Then reserve space for anything injected, like banners and widgets. By the time I reach small below-the-fold images, the score is usually already passing.

Keep performance work connected. CLS, LCP, and INP are separate metrics, but they share fixes. Reserving space, loading media smartly, and trimming heavy scripts help all three. If loading speed is your weak point too, my notes on lazy loading images to fix LCP pair well with the stability fixes here.

How stable is stable enough?

Aim for 0.1 or less at the 75th percentile, then stop optimizing and start maintaining. Once a page passes, the risk is that new content reintroduces shift. Every time you add an embed, a font, or an injected banner, recheck the score. Stability is a state you keep, not a box you tick once.

I treat CLS as a habit, not a one-time project. When I build a Webflow template, I reserve space by default, self-host fonts by default, and test on a throttled connection before handoff. Building it in from the start is far easier than chasing shifts after a site is live and full of content.

If your Webflow site feels jumpy, or Search Console is flagging Cumulative Layout Shift and you are not sure where it comes from, I am happy to take a look. Reach out and we can walk through your Core Web Vitals together and find the shifts that are costing you.