Google's Agentic Browsing Lighthouse Scoring Factor: Layout Stability and CLS

Part 2 of the AI Visibility Series. Why a jumpy page loses customers and confuses AI, and the popular design trends that are quietly failing this test.

In Part 1, we met the accessibility tree, the machine-eye view of your website. This time we are looking at something you can actually feel when it goes wrong. The page that jumps. You go to tap a button, the page shifts, and you tap an ad instead. You start reading, and the text leaps down the screen. It is a small thing that makes a site feel cheap, and it is now one of the things AI is graded on too.

This is the second factor in Google's new agentic browsing score, and it has a name you may already know: layout stability.

Meet layout shift

When a page loads, the pieces do not all arrive at once. Text shows up first, then an image loads, then a font swaps in, then a cookie bar drops down from the top. Every time one of those late arrivals pushes the rest of the page around, that is a layout shift.

Google has measured this since 2020 with a Core Web Vital called Cumulative Layout Shift, or CLS. It adds up how much of the page moves and how far it travels. A calm, stable page scores near zero. A jumpy page scores high, and high is bad here. The goal most teams aim for is a CLS of 0.1 or less.

You have felt this as a person. You reach for the “Add to cart” button and the page shoves it down half a second before your tap lands, so you hit the wrong thing. Annoying on a good day. On a checkout page, it can cost a sale.

Why a jumpy page now loses you twice

Here is what changed. Layout stability used to be about human comfort and search rankings. Now it is also about whether an AI agent can use your site at all.

AI agents do not look at your page the way you do. Many of them work from screenshots and coordinates. They find the “Book appointment” button at a certain spot, then act on that spot. The trouble is that agents move fast, far faster than a person. A human sees the page twitch and pauses. An agent has already committed to the click. If the button moved in that instant, the agent taps empty space, or worse, taps the wrong control. Google's own guidance puts it plainly: agents that rely on screenshots get confused when your layout keeps shifting.

For an agent trying to complete a real task for your customer, a purchase, a booking, or a form, that is not a small glitch. It is a failed job. The agent understood your page and still got it wrong, because the page would not hold still.

So layout stability now counts in three places at once. It is a Core Web Vital that affects your search performance. It shapes whether a human taps the right thing. And it is the second pillar of the agentic browsing score that decides whether AI can act on your site. One fix, three wins.

The design trends that quietly fail this test

Here is the part that surprises people. Some of the most popular, most expensive-looking design choices of the last few years are the exact things that break layout stability. A site can win a design award and still fail this audit. These are the patterns I see most often.

One important thing, before you panic and strip every animation off your site. Motion is not the enemy. The problem is never movement in general. It is movement that pushes other content around. There is a clean line between the two, and it is worth learning the difference.

Animations that use transform and opacity, things like sliding, fading, scaling, and rotating, do not count against layout stability at all. The browser handles them in a separate layer, so they never shove the rest of the page. You can keep those. What hurts is animating the properties that change the document itself, like height, width, top, left, and margin, or revealing content that pushes everything below it down. Same beautiful effect, two very different results. A good developer simply chooses the version that does not move the furniture.

What a stable page looks like

A stable page is not a boring page. It is a page that reserves space for everything before that thing arrives, so nothing has to jump. Here is the practical checklist.

• Give every image and video a width and height. Or set an aspect ratio. This lets the browser hold the exact space before the file loads, so text never leaps when the picture shows up.
• Reserve space for anything that loads late. Embeds, maps, forms, and widgets should sit in a box with a set minimum height. Use a skeleton or placeholder while they load, not empty space that collapses and then expands.
• Animate with transform and opacity, never with size or position. Slide, fade, and scale all you like. Just do not animate height, width, top, left, or margin, because those push the page around.
• Handle a loading screen with care. If you want an intro animation, lay the real page out first, then fade the intro away on top of it with opacity. Keep it short, and respect the reduced-motion setting for visitors who get motion sick. A long intro that builds the page afterward delays everything and hides shifts from your own testing.
• Load fonts so text does not reflow. Preload your main font and choose a font-display setting on purpose. A swap can cause a small text jump when your brand font arrives, so pick the tradeoff with attention to detail.
• Put cookie bars, promo strips, and popups in their own space, or over the top. Never let them drop in and shove your content down. Reserve the strip, or float it as an overlay.
• Mind lazy-loaded sections. If you hide off-screen content to speed things up, tell the browser how tall it will be, so it does not collapse to nothing and then jump when the visitor scrolls to it.
• Test on a slow connection. Most shifts only show up when things load slowly. A fast laptop on fast internet hides the problem your customers actually have.

Do these, and your page holds still for everyone. People, search, and AI.

How to check your own site

You do not have to guess whether your page is stable. Here are the tools I trust, from the quickest look to the most thorough.

Start with the simplest test of all, and it costs nothing. Open your site on your phone, on a normal connection, and just watch it load with fresh eyes. Does anything jump? Does a button move right as you reach for it? Then run Lighthouse in Chrome, read your CLS number, and run the agentic browsing category to see the layout stability check for agents. For the truest picture, throttle your connection to a slow speed in the tools and watch again, because that is the version of your site a real visitor on a busy network actually gets.

One honest note. Layout shift is sneaky because it does not only happen on load. It can strike later too, when a popup fires, when you scroll into a lazy-loaded section, or when you click something that injects new content. So watch the whole experience, not just the first second.

How to fix it in Webflow

Good news for Webflow users. The platform gives you most of what you need, as long as you use it on purpose.

• Use real Image elements. Webflow sets the width and height for you on its Image element, which reserves the space automatically. Be more careful with background images and anything you drop in through an embed, since those need their space reserved by hand.
• Set an aspect ratio or minimum height on media boxes. For embeds, videos, and dynamic sections, give the container a fixed aspect ratio or a minimum height so it never collapses and then jumps.
• Build interactions with Move, Scale, and Opacity. Webflow interactions and GSAP both let you animate the safe way. Favor transform-based moves and fades. Avoid animations that grow an element's height or push the elements below it down the page.
• Reserve space for forms and embeds. Put third-party widgets and forms inside a sized container so the rest of the page does not shuffle when they load.
• Handle popups and cookie bars as overlays. Float them above the page with fixed positioning instead of letting them push your layout down.
• Mind your fonts. Preload your brand font and set a sensible font-display value so your headings do not jump as the font swaps in.
• Test the published page. The Designer canvas is not the real thing. Publish, then run Lighthouse and watch a throttled load on the live page.

Four myths worth retiring

• “Animations always hurt my score.” No. Animations that slide, fade, and scale with transform and opacity do not count against layout stability at all. You can keep your beautiful motion. You just animate the right properties.
• “Layout shift is only a phone thing, and only about looks.” No. It decides whether a person taps the right button and whether an AI agent finishes a task. It is a Core Web Vital and an agent readiness signal, not a cosmetic detail.
• “A big intro animation makes my brand feel premium.” It can, when it is done well. But a heavy loader that builds the page behind it delays your site and hides shifts from your own eyes. Premium and stable are not opposites. The best sites feel both calm and rich.
• “It passed once, so I am done.” Not quite. Layout shift can happen on load and after load, when a popup fires or a visitor scrolls. And a fix on your home page does not automatically cover your other templates. Stability is a habit, not a one-time check.

The bottom line

A stable page is a quiet kind of quality. Nobody notices when nothing jumps, and that is the point. Reserve space for what is coming, animate without shoving the page around, and your site holds still for every visitor, the human reaching for a button and the AI agent acting on their behalf. The same calm page that feels good to people reads as ready to search and to AI.

That is not a trend. That is just good building.

See where your site stands

Curious how your site scores on stability and the rest of the AI readiness checks? Get a free AI Visibility Report from certified accessibility and Webflow specialists. We will manually check how your business shows up when people ask Claude for a recommendation, then explain your new Lighthouse agentic browsing scores in clear, plain language. You get a personalized report within 24 hours. No sales pitch, just value.

Request yours at gracefulwebstudio.com/ai-visibility-report.

Next in the series, Part 3: the llms.txt file, what it is, the honest truth about whether you need one, and the two-worlds confusion between Google Search and AI agents.

Written by Crystal Scott, Certified Professional in Web Accessibility (CPWA) and founder of Graceful Web Studio.