How to Fix CLS: Cumulative Layout Shift Guide
What CLS Measures
Cumulative Layout Shift (CLS) measures unexpected movement in the visible page layout. If a user is about to tap a button and the page jumps, that is a layout stability problem. The metric exists because visual stability is not a cosmetic issue; it affects trust, usability, and conversion.
From an engineering perspective, CLS is usually a contract problem. The browser is not given enough information about how much space a component will occupy before it loads. The fix is to reserve space before the content arrives. The broader Core Web Vitals context is covered in our performance pillar page.
The Common Causes of CLS
CLS problems are usually predictable. They come from components that enter the layout late or change size after render.
| Cause | Why It Shifts | Prevention |
|---|---|---|
| Images without dimensions | Browser does not know the aspect ratio | Add width, height, or CSS aspect-ratio |
| Ads and embeds | Slot size changes after third-party content loads | Reserve fixed or minimum dimensions |
| Web fonts | Text reflows when custom fonts load | Use font-display strategy and metric-compatible fallbacks |
| Cookie banners | Banner pushes content after load | Reserve space or overlay carefully |
| Dynamic recommendations | Personalised content arrives late | Use skeleton containers with fixed dimensions |
| Injected UI components | DOM changes above visible content | Avoid inserting content above existing content |
The rule is simple: if a component can appear late, allocate its space early.
Create Layout Contracts for Components
A layout contract defines how much space a component is allowed to use before it loads. This is especially important for design systems, product cards, review widgets, video embeds, related posts, ads, and recommendation modules.
Practical rules:
- Every image component needs dimensions or an aspect ratio.
- Every embed component needs a reserved wrapper.
- Every ad slot needs a known size range.
- Every dynamic module needs a minimum height.
- Every skeleton state should match the final component dimensions.
- No component should inject new content above the user's current viewport without intent.
This is where teams often go wrong. They fix one image and call the issue solved. The better approach is to fix the component pattern so the same problem does not return on the next template.
Images, Video Embeds and Aspect Ratios
Images and video embeds are easy to fix when the team is disciplined. Add dimensions, preserve aspect ratios, and make sure responsive behaviour is predictable.
Image and Embed Checklist
- Add
widthandheightattributes to images. - Use CSS
aspect-ratiofor responsive media wrappers. - Reserve space for YouTube, Vimeo, and iframe embeds.
- Avoid swapping placeholder images for final images with different dimensions.
- Keep captions and controls inside predictable containers.
- Test mobile layouts where aspect ratio changes are more obvious.
Video-heavy pages should also connect this work with video SEO. If the page contains an important video, pair stable embeds with accurate VideoObject schema and a video sitemap where relevant.
Fonts and Late UI Elements
Fonts can cause layout shift when fallback text renders at one size and the custom font renders at another. The fix is not always to remove custom fonts. The fix is to make font loading predictable.
Use sensible fallbacks, control font-display, preload critical fonts only when justified, and avoid loading multiple unnecessary font weights. Where possible, use fallback fonts with similar metrics to the final font.
Late UI elements need the same discipline. Cookie banners, newsletter boxes, sticky bars, chat widgets, and promo modules should either reserve space or overlay without moving core content. If a commercial widget causes layout shift and does not drive measurable revenue, remove it or redesign it.
How to Debug CLS
CLS debugging should be visual and repeatable. Use tools that show exactly which elements moved.
Workflow:
- Use PageSpeed Insights to identify affected templates.
- Open Chrome DevTools Performance panel.
- Record page load and interactions.
- Inspect layout shift events.
- Identify the shifting element and the element that caused it.
- Fix the component pattern, not only the single page.
- Re-test on mobile and slow network profiles.