Core Web Vitals CLS: why the elements that move on your landing page are costing you clicks

A visitor lands on your sales page, starts reading the main argument, and right as they're about to click the buy button, it shifts a couple of centimeters — while a cookie consent banner, a web font, or an image with no defined dimensions finishes rendering. The click lands somewhere else instead: a menu link, an image, empty space. This has a name and an official Google score since 2020: CLS, or Cumulative Layout Shift — a page's visual stability while it loads.

What CLS measures

CLS adds up, over a page's entire lifespan, the magnitude of every unexpected visual shift of an element that was already visible on screen — not the first appearance of content rendering into empty space, but the displacement of an element that already held a stable position. Each shift is weighted by two factors: the fraction of the screen affected by the movement, and the distance the shifting elements travel. A button that drops two centimeters counts for more in the score than a slight few-pixel adjustment on a secondary element. It's the third of Google's three Core Web Vitals, alongside LCP (render speed) and INP (click responsiveness), each of which we cover in a separate article.

The threshold that matters: 0.1

Google sets three tiers, measured at the 75th percentile of real visits over a rolling 28-day window (CrUX data): a CLS under 0.1 is rated "good," between 0.1 and 0.25 it "needs improvement," and past 0.25 it's "poor." Unlike LCP or INP, CLS has no unit of time: it's a dimensionless score, accumulated over the whole session, that can keep climbing well after the initial render if new elements — a banner, a popup, a third-party ad — disrupt the layout later in the visit.

Why it's not just a technical score

The mechanism behind CLS isn't unique to the web: it's the mechanism of interrupting a task in progress. A study by Brian P. Bailey and Joseph A. Konstan, published in Computers in Human Behavior in 2006, measured the effect of unexpected interruptions on users carrying out an on-screen task: interrupted participants took 3% to 27% longer to complete their task, made roughly twice as many errors, and reported a measurable rise in anxiety and frustration compared with uninterrupted groups (Bailey & Konstan, 2006). A layout shift at the exact moment a visitor is about to click reproduces that same pattern on the scale of a fraction of a second: the intended action fails, the visitor has to try again, and the experience leaves a negative impression — even if they eventually find the right button. On a landing page where every click needs to happen frictionlessly, that invisible cost translates directly into lost clicks and abandoned visits.

The most common causes on a landing page

• Images and videos with no defined dimensions — without a width/height attribute or a CSS aspect-ratio, the browser reserves no space and pushes the following content down the moment the file finishes loading.
• Web fonts that change the text size — a system-font fallback followed by the final font loading in (FOUT) can change the text's width and therefore a block's height, especially on headlines.
• A cookie consent banner injected at the top of the page — if it pushes content down instead of rendering as an overlay, it shifts everything already visible, often right as the visitor starts reading; see our article on the cookie banner.
• Popups and notifications injected after the fact — a welcome popup, a real-time purchase notification, or a live chat widget that opens a few seconds after loading and pushes content down instead of overlaying it.
• Third-party ads and embeds with no reserved slot — an ad iframe or embedded video that only reveals its final size once it has loaded.
• Content dynamically inserted above an existing element — a form error message, a stock alert, or a discount badge added right above the buy button instead of into an already-reserved spot.

Fixing CLS without sacrificing the design

The general rule is simple: any space meant to hold content that arrives later must be reserved ahead of time, at the exact size it will end up occupying. For images and videos, consistently setting width and height (or a CSS aspect-ratio property) lets the browser compute the required space before the file has even downloaded — Next.js's Image component enforces this dimension by default, which we cover in our article on deploying Next.js on Vercel. For web fonts, font-display: swap limits the wait without preventing the font swap itself, but it's really size-adjust (or choosing a visually close system font as the fallback) that keeps the font change from resizing the headline block. For banners, popups, and notifications, the most reliable fix is an overlay positioned with fixed or absolute rather than an insertion that pushes existing content down: the visitor sees the element appear on top of the page, never at the cost of shifting whatever they were already reading.

The special case of elements that appear after a delay

A countdown timer that initializes after a brief JavaScript delay, like on the Webinar & Masterclass template (demo), or a confirmation message that replaces a form after submission, both need to occupy, from the very first render, a space identical to their final state — an empty block of the right height, rather than a container that grows once the real content is injected. It's the same principle we cover for skeleton screens: they need to announce the exact shape of the content to come, not a rough estimate that shifts everything the moment it gets replaced.

Checking the result in the field

As with LCP and INP, the score that counts is the one measured in the field — Google Search Console's "Core Web Vitals" report aggregates real CrUX data from your visitors once traffic is sufficient. Locally, Chrome DevTools' Performance panel shows every detected shift along with the responsible element and its individual score, letting you fix the costliest shifts one by one instead of guessing. A clean CLS doesn't show up in a report: it's felt by scrolling and clicking through the page the way a visitor in a hurry would, never sensing that something is moving under their fingertips.

Starting from a base that's already visually stable

The 10 LanderKit templates natively reserve space for images, buttons, and dynamic sections from the very first render, with no banner or popup forced in that would disrupt the layout once ad traffic starts flowing. You can check a template's visual stability before adding your own scripts on the SaaS waitlist demo or the e-commerce demo ($89 per template, $229 for the full bundle).