call Contact
speed Optimization Tips

Cumulative Layout Shift (CLS) : Why Web Pages Shift While Loading

Cumulative Layout Shift (CLS) measures a web page's visual stability while it loads. We cover the most common causes of a poor CLS – and concrete solutions for TYPO3 websites.

history Letzte Änderung: 21.08.2026

What Is Cumulative Layout Shift (CLS)?

Cumulative Layout Shift (CLS) measures a web page's visual stability. It describes how much visible content unexpectedly shifts while the page is loading.

Everyone knows the problem: you're about to click a button – and suddenly the page jumps because an image, an ad, or a cookie banner loads in. Instead of the button you wanted, you accidentally click something else. This is exactly the behavior CLS measures.

The lower the CLS value, the more stable a website feels.

flag

Target values: Good: up to 0.1 · Needs improvement: 0.1–0.25 · Poor: over 0.25.

search Causes

The Most Common Causes of a Poor CLS

  1. Images without fixed dimensions: If no width and height are defined for images, the browser doesn't initially know how much space to reserve. As soon as the image loads, the entire page content shifts.

    Optimization:

    • specify width and height
    • use responsive images with correct aspect ratios

  2. Cookie banners that appear after the fact: Many consent managers push the entire page content down as soon as the banner appears.

    Optimization:

    • display the banner as an overlay
    • reserve space for it during initial page layout

  3. Dynamically loaded-in content: Newsletter prompts, ad banners, or promotional notices are often inserted only after the page has already been laid out.

    Optimization:

    • reserve space in the layout
    • don't insert elements above content that's already visible

  4. Web fonts cause layout jumps: If a default font is shown first and the actual web font loads later, line breaks and spacing often change.

    Optimization:

    • use font-display: swap
    • use similar fallback fonts
    • host fonts locally

  5. Ads and external content: Banners, YouTube videos, Google Maps, or social media posts are often loaded in later and then change the layout.

    Optimization:

    • define fixed container sizes
    • reserve space before the content loads

  6. Animations that change the layout: Animations that change width, height, or position can cause visible layout shifts.

    Optimization:

    • prefer animating transform and opacity
    • avoid animating layout properties where possible
terminal TYPO3 in Practice

Typical CLS Problems on TYPO3 Websites

With TYPO3, layout shifts often result from the combination of different content elements and extensions.

  1. Images without defined size: When images are output individually in the Fluid template, width and height attributes are sometimes missing.

    Solution:

    • use the TYPO3 ImageViewHelper correctly
    • output image dimensions automatically

  2. Content elements load in later: News lists, accordions, or other content elements are sometimes only generated via JavaScript.

    Solution:

    • render server-side wherever possible
    • reserve space in the layout

  3. Cookie consent solutions: Consent managers are among the most common causes of a poor CLS.

    Solution:

    • use an overlay instead of shifting the page content
    • reserve a fixed height for the banner

  4. Videos and maps: YouTube, Vimeo, or Google Maps are often embedded without a placeholder.

    Solution:

    • use a container with a fixed aspect ratio
    • combine lazy loading with reserved space

  5. Dynamic content elements: Forms, accordions, or personalized content sometimes change height after the fact.

    Solution:

    • define container sizes up front
    • make changes below the visible area wherever possible

How to Analyze Your CLS

CLS can easily be analyzed with tools such as:

  • Google PageSpeed Insights
  • Lighthouse in Chrome DevTools
  • Chrome Performance panel
  • Web Vitals extension for Chrome

The layout shift visualization in Chrome DevTools is especially helpful here. It shows exactly which elements shifted and what caused the CLS.

Conclusion

A good CLS gives visitors the impression that a website is calm, high-quality, and reliable. Unexpected layout jumps not only degrade the user experience, they can also lead to mis-clicks and a higher bounce rate.

On TYPO3 websites, most CLS problems can be avoided with correctly sized images, reserved placeholders for dynamic content, locally hosted web fonts, and a clean integration of consent managers and external media. Even small optimizations can significantly improve the CLS value and substantially raise a website's perceived quality.

Ready for a more stable CLS?

We analyze your TYPO3 website's CLS free of charge and show you concrete optimization measures.

chat Free Consultation