Cumulative Layout Shift

Why It Matters

• Unexpected shifts frustrate users. Few things are more annoying than reaching for a button and having it jump away. High CLS makes a site feel janky and unreliable, even if the content itself is excellent.
• It causes accidental clicks. When elements shift, users tap or click the wrong thing — opening an ad they did not mean to click, submitting a form prematurely, or navigating to the wrong page.
• Search engines use CLS as a ranking signal. As part of the Core Web Vitals, CLS directly factors into how search engines evaluate page experience. Pages with better CLS scores can outrank those with worse scores, all else being equal.
• It undermines trust. A page where elements jump around looks broken. Visitors may question the professionalism and reliability of a site that cannot keep its own content in place.

How to Reduce Layout Shift

1. Always set width and height on images and videos. When the browser knows the dimensions before the media loads, it reserves the correct space. Without dimensions, the content below gets pushed down once the image appears.
2. Use CSS aspect-ratio for responsive media. Modern CSS lets you define the aspect ratio of an element so the browser holds the right amount of space even before the asset loads.
3. Reserve space for ads and embeds. Ads, iframes, and third-party embeds often load late. Use placeholder containers with minimum heights to prevent them from shoving everything else around when they appear.
4. Avoid inserting content above existing content. Dynamically adding banners, cookie notices, or notifications above the fold pushes everything else down. Place dynamic content where it will not displace what users are already looking at.
5. Preload web fonts to prevent text reflow. When a custom font loads late and replaces a fallback font with different metrics, text blocks resize and shift. Use font-display: swap combined with font preloading to minimize this.

Common Mistakes

• Omitting image dimensions. This is the single most common cause of CLS. An image without explicit width and height attributes starts at zero size and expands to full size once loaded, shifting everything below it.
• Lazy-loading above-the-fold images. If images visible on initial load are lazy-loaded, they pop in late and cause shifts. Only lazy-load images that are below the fold.
• Injecting top banners after page load. Cookie consent bars, promotional banners, or alert messages that push content down after the page has already rendered are major CLS offenders.
• Using animations that change element size. CSS animations that alter an element's width, height, or position in the document flow can trigger layout shifts. Use transform properties instead, which do not affect layout.