You open a page. You start reading the first paragraph. Suddenly, everything jumps down because an image loaded above the text. You scroll to a button, tap it, and the page shifts right as you click, sending your finger to the wrong element. That is Cumulative Layout Shift (CLS), and it is the most frustrating performance problem users experience.
CLS is also the cheapest Core Web Vital to fix. Unlike LCP and INP, which often require server changes, code optimization, and asset work, CLS is almost always caused by a few specific, easy-to-fix issues. Most sites can go from poor CLS to good CLS in under an hour of work.
What CLS actually measures
CLS tracks how much visible page content shifts unexpectedly during the page's lifetime. "Unexpectedly" is the key word. Shifts caused by user interaction (clicking a dropdown, scrolling to expand content) do not count. Only shifts that happen without user input count toward the score.
The score is calculated based on two factors: how much of the viewport moved (impact fraction) and how far it moved (distance fraction). A small element shifting slightly produces a low score. A large block of content shifting significantly produces a high score.
The Core Web Vitals threshold for CLS is 0.1 or below for a good rating. Most sites with CLS problems score between 0.15 and 0.5, which falls into the needs-improvement or poor range.
The most common causes
Missing image dimensions
This is the number one cause of CLS on the web. When an image tag does not include width and height attributes, the browser does not know how much space to reserve for it. The page renders with zero space for the image. When the image finishes loading, it appears and pushes everything below it down.
The fix is simple: add width and height attributes to every image tag.
<img src="photo.webp" width="800" height="600" alt="Description">
The browser uses these values to calculate the aspect ratio and reserves the correct amount of space before the image downloads. When the image loads, it fills the reserved space without shifting anything.
In Webflow, most image elements include dimensions automatically. But background images, CMS-driven images, and custom code images often miss them.
Font swapping
When custom fonts load and replace the fallback font, the text can reflow because the two fonts have different metrics. Characters are different widths. Line heights differ. Paragraphs take up more or less space.
This produces a small but measurable CLS, typically 0.01-0.05. On pages where the hero text is the largest element, even this small shift can push the total CLS above the threshold.
The fix: match your fallback font metrics as closely as possible to your custom font. Use CSS size-adjust and ascent-override properties. I covered this in more detail in my post on fonts slowing your site.
Want a website that turns visitors into customers, not just compliments?
Book a 15-min introInjected content above existing elements
Any content that appears after the initial render and pushes existing content down causes layout shift. Common culprits:
- Cookie consent banners that insert into the page flow instead of overlaying on top of it
- Ad units that load after the page renders and push content down
- Notification bars that slide in at the top of the page
- Late-loading embeds (social media widgets, maps, video players) that expand when their content arrives
The fix depends on the element. For consent banners and notification bars, use a fixed or sticky position so they overlay content instead of displacing it. For ads and embeds, reserve space for them with explicit dimensions or min-height in CSS.
Dynamic content insertion
Single-page applications and JavaScript-rendered content can cause CLS when new elements are inserted into the page. A product listing that loads via API and renders 20 items pushes the footer and any below-fold content down.
The fix: reserve space for dynamically loaded content. If you know a product grid will display 20 items, set a min-height on the container that matches the expected content height. This prevents the shift when the content arrives.
How to diagnose CLS on your site
Chrome DevTools Performance panel. Record a page load, then look for the "Layout Shift" entries in the timeline. Each entry shows which element shifted and by how much. This is the most precise diagnostic tool.
PageSpeed Insights. The diagnostics section identifies elements that contribute to CLS and suggests fixes. It will call out images without dimensions, ads without reserved space, and fonts causing layout shifts.
Web Vitals Chrome extension. Install this extension and browse your site. It shows CLS (and other Core Web Vitals) in real time as you navigate. Look for shifts that happen during page load and during scrolling.
Layout Shift Debugger. Open Chrome DevTools console and run:
new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
console.log('CLS:', entry.value, entry.sources);
}
}).observe({type: 'layout-shift', buffered: true});
This logs every layout shift with its source elements, so you can identify exactly what is moving.
Fixing CLS by page type
Homepage and landing pages: Check hero images for dimensions, check font loading for shift, check for late-loading elements (consent banners, chat widgets, notification bars).
Blog posts: Check for images in the content body that might not have dimensions. Check for ad placements that load after the content. Check for social share widgets that inject into the page.
Product pages: Check for product image carousels that resize when images load. Check for "add to cart" sections that shift when variant options load. Check for review widgets that expand.
E-commerce listings: Check for product grid items that resize when images load. Check for filters that expand and shift the grid. Check for pagination or infinite scroll that shifts content.
The 0.1 target
CLS under 0.1 is achievable on virtually every site. The fixes are:
- Add width and height to all images
- Reserve space for ads and embeds
- Use overlay positioning for banners and notifications
- Match fallback font metrics to custom font metrics
- Avoid inserting content above existing visible content
These are straightforward, low-risk changes that do not require a redesign or architectural work. They just require someone to go through the page systematically and fix each source of shift.
If your pages are jumping around and your CLS score reflects it, that is one of the quickest wins in a performance optimization engagement. It is low effort, high impact, and immediately improves the experience for every visitor.