Chasing down layout shift: the CLS fixes we reach for first

Few things make a site feel less trustworthy than content that jumps as you try to read or tap it. You go to press a button, an image loads above it, and you land on something else entirely. Cumulative Layout Shift measures this, and while it is often the easiest Core Web Vital to pass, it is also the one that regresses most quietly. A new banner, an ad slot or a font change can undo months of careful work. Here are the CLS causes we find most often, and the fixes we reach for first.

Find the shifts real users see

Lab tools only see shifts that happen during page load. Field CLS includes shifts throughout the visit, measured in session windows, and the worst window is reported. That is why a page can pass in Lighthouse and fail in Search Console. To find the real sources, we use real user monitoring with attribution, which records the element responsible for the largest shift in each visit along with the load state at the time.

We also reproduce shifts manually in DevTools with the Layout Shift Regions setting enabled, scrolling and interacting the way a real visitor would, on a throttled mobile profile. The Performance panel shows each shift and the nodes that moved, which makes the cause obvious once you catch it.

The usual suspects

Across dozens of audits, the same causes appear again and again.

1. Images and embeds without dimensions. An image with no width and height takes no space until it loads, then pushes everything below it down.
2. Late-injected banners. Cookie notices, promotional bars and app-install prompts inserted at the top of the page after render.
3. Web fonts swapping. A fallback font with different metrics renders first, then the web font loads and text reflows, changing the height of headings and paragraphs.
4. Ads and third-party widgets. Ad slots and review widgets that expand to their content size once their scripts run.
5. Client-rendered content. Recommendations, prices or personalized blocks that render empty and then fill in.
6. Animations using layout properties. Transitions on top, height or margin rather than transform.

Almost every layout shift is a promise the page failed to make: here is how much space this content will need.

The fixes

Reserve space for everything that arrives late

Give every image and video explicit dimensions or an aspect-ratio in CSS. For embeds, ad slots and widgets, reserve a minimum height based on their typical rendered size. It is better to reserve slightly too much space than none; a small gap is far less disruptive than a jump.

.review-widget { min-height: 420px; }
.ad-slot--leaderboard { aspect-ratio: 728 / 90; width: 100%; }
.product-card img { aspect-ratio: 4 / 5; width: 100%; height: auto; }

Overlay banners instead of inserting them

Cookie notices and promotions should be positioned as overlays fixed to the bottom of the viewport, not inserted into the document flow at the top. If a promotional bar must sit at the top, render it in the server HTML so its space exists from the first paint.

Match fallback font metrics

Use the CSS size-adjust, ascent-override and descent-override descriptors to make the fallback font occupy the same space as the web font. Combined with preloading the one or two most important font files, this usually eliminates font-related shift entirely. Modern frameworks and some font tools can generate these overrides automatically.

Render placeholders with real dimensions

For content fetched after load, render a skeleton with the same dimensions as the final content. Where possible, render the content on the server instead. A product recommendation block rendered in the initial HTML is both faster and more stable than one fetched by JavaScript.

Animate with transforms

Replace animations on layout properties with transform and opacity. They do not trigger layout, do not count toward CLS, and are smoother on low-end devices.

Interaction-driven shifts and back-forward cache

Shifts that occur within 500 milliseconds of a user interaction are excluded from CLS, which is why expanding an accordion on tap is fine. Problems arise when content changes without a direct interaction, such as a sticky header that changes height on scroll, or an infinite scroll feed that inserts content above the reading position. Those need to be reworked so the change happens in a reserved area or through transforms.

We also check whether pages are eligible for the back-forward cache. When a user returns to a page restored from that cache, it appears instantly and without shifts. Pages that are not eligible, often because of unload event listeners added by third-party scripts, reload fully and can generate a fresh round of layout shifts on every back navigation.

Preventing regressions

CLS regresses when someone adds a new component or third-party widget without reserving space. We guard against that with a few habits: component libraries that require dimensions on media, a code review checklist item for anything that renders asynchronously, and RUM alerts when a template's 75th percentile CLS moves above 0.1. On a recent retail client, those three habits kept CLS in the good range through two redesigns and a peak season of promotional banners.

CLS work is part of our Core Web Vitals optimization service. Many of the fixes land in design systems and component libraries, so they often run alongside our design systems work, and on Shopify stores they are covered by store speed tuning.

Stop the page from jumping

If Search Console is flagging CLS and you cannot reproduce it, we can find the sources in your field data and fix them. Ask us for a quote, and we will send a fixed price within 24 hours.