--- title: "CLS" title_en: "Cumulative Layout Shift" description: "CLS (Cumulative Layout Shift) ist eine Core-Web-Vitals-Kennzahl für visuelle Stabilität: Sie summiert unerwartete Layout-Sprünge beim Laden. Gut ist ein Wert bis 0,1. Ursachen sind fehlende Bildmaße, späte Fonts und Cookie-Banner ohne Platzreserve." description_en: "CLS (Cumulative Layout Shift) is a Core Web Vitals metric for visual stability: it adds up unexpected layout shifts while a page loads. Good is 0.1 or less. Causes are missing image dimensions, late fonts and cookie banners without reserved space." summary_en: "CLS (Cumulative Layout Shift) is a Core Web Vitals metric for visual stability: it adds up unexpected layout shifts while a page loads. Good is 0.1 or less. Causes are missing image dimensions, late fonts and cookie banners without reserved space." direct_answer_en: "CLS (Cumulative Layout Shift) measures how much visible content unexpectedly moves while a page loads or is used. A score of 0.1 or less at the 75th percentile is rated good, above 0.25 poor. Reserve space for images, embeds, fonts and banners to keep it low." url: "https://modern-stack.de/glossar/cls" type: "glossary" kind: "glossary" language: de-DE updated_at: "2026-10-06T18:00:00+00:00" --- # CLS ## English Abstract CLS (Cumulative Layout Shift) is a Core Web Vitals metric for visual stability: it adds up unexpected layout shifts while a page loads. Good is 0.1 or less. Causes are missing image dimensions, late fonts and cookie banners without reserved space. ## Quick Answer (EN) CLS (Cumulative Layout Shift) measures how much visible content unexpectedly moves while a page loads or is used. A score of 0.1 or less at the 75th percentile is rated good, above 0.25 poor. Reserve space for images, embeds, fonts and banners to keep it low. ## Key Takeaways (EN) - CLS multiplies the share of the viewport that shifts by the distance it moves. - Thresholds at the 75th percentile are 0.1 (good) and 0.25 (poor). - Set width and height or aspect-ratio on media and reserve space for banners. - Layout jumps cause misclicks and lost trust, especially on mobile. ## English Summary Cumulative Layout Shift is the stability metric among the Core Web Vitals. Each unexpected movement of visible elements gets a score: the fraction of the viewport affected multiplied by the fraction of distance moved. Shifts are grouped into session windows of up to five seconds and the worst window counts. Shifts within 500 milliseconds of a user interaction are excluded. Typical fixes are explicit dimensions for images and iframes, reserved slots for consent banners and controlled font loading. ## Quick Answer **CLS:** CLS (Cumulative Layout Shift) misst, wie stark sichtbare Inhalte beim Laden oder Bedienen einer Seite unerwartet verrutschen. Ein Wert bis 0,1 im 75. Perzentil gilt als gut, über 0,25 als schlecht. Du hältst ihn niedrig, indem du für Bilder, Einbettungen, Schriften und Banner von Anfang an Platz reservierst. > Zitierfähigkeit entsteht, wenn Definition, Struktur und klare nächste Schritte zusammenkommen. > Steve Baka ## Key Takeaways - CLS multipliziert den betroffenen Anteil des Sichtfensters mit der Verschiebedistanz und summiert Sprünge im schlimmsten Zeitfenster. - Schwellen: bis 0,1 gut, bis 0,25 verbesserungswürdig, darüber schlecht. - Immer Breite und Höhe oder `aspect-ratio` für Medien setzen; Banner nicht nachträglich einschieben. - Stabilität schützt Klicks und Vertrauen — besonders auf dem Smartphone, Teil der [Core Web Vitals](/glossar/core-web-vitals). ## Was ist CLS? **Cumulative Layout Shift** beschreibt, wie ruhig eine Seite beim Laden bleibt. Jedes Mal, wenn ein sichtbares Element ohne Nutzeraktion seine Position ändert, entsteht ein Layout-Shift. Du kennst das: Du willst einen Link antippen, im selben Moment lädt ein Bild darüber nach, der Text rutscht nach unten, und du triffst eine Anzeige oder den falschen Button. CLS ist neben [LCP](/glossar/lcp) (Ladegeschwindigkeit des größten Elements) und [INP](/glossar/inp) (Reaktionszeit auf Eingaben) die dritte Kennzahl der [Core Web Vitals](/glossar/core-web-vitals). Anders als die beiden anderen wird sie nicht in Sekunden gemessen, sondern als dimensionslose Zahl. ## Wie wird CLS berechnet? Jeder einzelne Sprung erhält einen Wert aus zwei Faktoren: dem **Impact Fraction**, also dem Anteil des Sichtfensters, den die betroffenen Elemente vor und nach der Verschiebung abdecken, und der **Distance Fraction**, also dem größten Verschiebeweg im Verhältnis zur Fenstergröße. Beide werden multipliziert. Ein Element, das die Hälfte des Fensters einnimmt und um ein Viertel der Fensterhöhe springt, ergibt 0,5 × 0,25 = 0,125. Mehrere Sprünge werden zu Sitzungsfenstern gruppiert: höchstens fünf Sekunden lang, mit weniger als einer Sekunde Pause zwischen den Sprüngen. Das Fenster mit der höchsten Summe bestimmt den Messwert der Seite. Verschiebungen innerhalb von 500 Millisekunden nach einer Nutzereingabe wie einem Klick zählen nicht, weil sie als erwartet gelten. Bewertet wird im 75. Perzentil echter Besuche, getrennt nach Mobil und Desktop. Laborwerte aus einem Test sind hilfreich zur Fehlersuche, aber nicht maßgeblich. ## Was verursacht Layout-Sprünge? - **Bilder ohne Maße:** Der Browser kennt die Höhe erst nach dem Laden und schiebt Text nach unten. - **Nachladende Schriften:** Der Wechsel von Fallback- zu Webfont verändert Zeilenumbrüche und Höhen. - **Einbettungen und Anzeigen:** iframes, Karten, Videos oder Werbeflächen ohne reservierte Fläche. - **Cookie- und Consent-Banner:** Werden sie oberhalb des Inhalts eingeblendet, schieben sie alles herunter. - **Dynamisch eingefügte Inhalte:** Hinweisleisten, Newsletter-Boxen oder „Ähnliche Beiträge“ oberhalb des sichtbaren Bereichs. - **Pagebuilder-Skripte:** Spätes Initialisieren von Slidern oder Animationen verändert Abstände nach dem ersten Render, ein häufiges Muster bei [Elementor](/glossar/elementor) und [Divi](/glossar/divi). ## Wie behebst du CLS? 1. **Maße setzen:** `width` und `height` an Bildern und Videos oder CSS-`aspect-ratio`, damit der Platz vor dem Laden feststeht. 2. **Platz reservieren:** Für Banner, Karten, Anzeigen und Formulare Mindesthöhen vorsehen oder sie als überlagerte Ebene darstellen. 3. **Schriften steuern:** Webfonts vorladen, `font-display` bewusst wählen und Fallback-Schriften passend skalieren. 4. **Animationen mit transform:** Positionswechsel per `transform` statt `top` oder `margin`, damit kein Layout neu berechnet wird. 5. **Nichts über dem Fold nachladen:** Späte Injects gehören unter den sichtbaren Bereich oder in reservierte Slots. ## CLS bei Modern Stack Beim Neuaufbau auf [Next.js](/glossar/nextjs) liefert die Bildkomponente Maße und Platzhalter, Schriften werden lokal eingebunden, Layout-Slots sind fest definiert. Wir prüfen vor und nach der Modernisierung mit Feldmessung und Labor, besonders auf mobilen Geräten und mit aktivem Consent-Banner. Fehler, die wir oft sehen: ein Hero-Slider, der erst nach Skriptstart seine Höhe bekommt, und ein Banner, das nach 800 ms den Inhalt verdrängt. Gesamtbild: [Core Web Vitals & Modernisierung](/themen/core-web-vitals-modernisierung). ## Verwandte Themen - [Core Web Vitals](/glossar/core-web-vitals) - [LCP](/glossar/lcp) - [INP](/glossar/inp) - [Core Web Vitals & Modernisierung](/themen/core-web-vitals-modernisierung) ## Quellen - [web.dev — Cumulative Layout Shift (CLS)](https://web.dev/articles/cls) — Google web.dev; Offizielle Definition, Berechnung und Schwellenwerte der Kennzahl. - [web.dev — Optimize Cumulative Layout Shift](https://web.dev/articles/optimize-cls) — Google web.dev; Konkrete Maßnahmen gegen Layout-Verschiebungen. - [Core Web Vitals & Modernisierung](https://modern-stack.de/themen/core-web-vitals-modernisierung) — Modern Stack; Praxis, wie wir Performance und Stack gemeinsam modernisieren. ## FAQ ### Ist CLS nur Kosmetik? Nein. Springt ein Button im Moment des Tippens weg, klicken Nutzer das Falsche oder brechen ab. CLS misst deshalb nicht Schönheit, sondern Bedienbarkeit — und ist offizieller Teil der [[entity:core-web-vitals|Core Web Vitals]]. ### Wie wirken Cookie-Banner auf CLS? Ein Banner, das nachträglich Inhalte nach unten schiebt, erzeugt einen Sprung. Besser: Banner als überlagerte Ebene oder mit reserviertem Platz einbauen. Consent und Layout müssen gemeinsam geplant werden, vor allem mobil. ### Welcher CLS-Wert ist gut? Bis 0,1 gilt als gut, zwischen 0,1 und 0,25 als verbesserungswürdig, über 0,25 als schlecht. Maßgeblich ist das 75. Perzentil echter Besuche, nicht der Laborwert eines einzelnen Tests. ## Related - [Core Web Vitals](https://modern-stack.de/glossar/core-web-vitals) - [Core Web Vitals & Modernisierung](https://modern-stack.de/themen/core-web-vitals-modernisierung) - [LCP](https://modern-stack.de/glossar/lcp) - [INP](https://modern-stack.de/glossar/inp) ## Inline Entity Mentions - [[entity:core-web-vitals]] → https://modern-stack.de/themen/core-web-vitals - [[entity:lcp]] → https://modern-stack.de/themen/lcp - [[entity:inp]] → https://modern-stack.de/themen/inp - [[entity:elementor]] → https://modern-stack.de/themen/elementor - [[entity:divi]] → https://modern-stack.de/themen/divi - [[entity:nextjs]] → https://modern-stack.de/themen/nextjs - [[entity:core-web-vitals-modernisierung]] → https://modern-stack.de/themen/core-web-vitals-modernisierung ## Strukturierte Daten ```json { "@context": "https://schema.org", "@graph": [ { "@type": "WebSite", "@id": "https://modern-stack.de/#website", "url": "https://modern-stack.de", "name": "Modern Stack", "description": "Wir modernisieren bestehende Unternehmenswebseiten — schneller, klarer und besser lesbar für Suche und KI. Inhalte bleiben. Ab 500 €.", "publisher": { "@id": "https://modern-stack.de/#organization" }, "inLanguage": "de-DE" }, { "@type": [ "Organization", "ProfessionalService" ], "@id": "https://modern-stack.de/#organization", "name": "Modern Stack", "legalName": "Modern Stack", "url": "https://modern-stack.de", "logo": "https://modern-stack.de/brand/logo.png", "email": "info@modern-stack.de", "telephone": "+4915225317285", "sameAs": [ "https://www.google.com/search?kgmid=/g/11p1mc1kq_&q=Modern+Stack", "https://stevebaka.de", "https://www.linkedin.com/in/steve-baka/", "https://www.mallorca-expats.de" ], "foundingLocation": { "@type": "Place", "name": "Bad Schönborn, Deutschland" }, "address": { "@type": "PostalAddress", "streetAddress": "Glöckelsberg 13/2", "postalCode": "76669", "addressLocality": "Bad Schönborn", "addressRegion": "Baden-Württemberg", "addressCountry": "DE" }, "geo": { "@type": "GeoCoordinates", "latitude": 49.22167, "longitude": 8.65734 }, "areaServed": [ { "@type": "Place", "name": "Bad Schönborn", "url": "https://modern-stack.de/regionen/bad-schoenborn" }, { "@type": "Place", "name": "Mingolsheim", "alternateName": "Bad Mingolsheim", "url": "https://modern-stack.de/regionen/mingolsheim" }, { "@type": "Place", "name": "Langenbrücken", "alternateName": "Bad Langenbrücken", "url": "https://modern-stack.de/regionen/langenbruecken" }, { "@type": "Country", "name": "DE" }, { "@type": "Country", "name": "AT" }, { "@type": "Country", "name": "CH" } ], "knowsAbout": [ "Webseite-Modernisierung", "WordPress-Migration", "Generative Engine Optimization", "Lokale Sichtbarkeit Bad Schönborn" ], "founder": { "@id": "https://modern-stack.de/#person" } }, { "@type": "Person", "@id": "https://modern-stack.de/#person", "name": "Steve Baka", "jobTitle": "Gründer, Modern Stack", "url": "https://stevebaka.de", "email": "info@modern-stack.de", "telephone": "+4915225317285", "sameAs": [ "https://stevebaka.de", "https://www.linkedin.com/in/steve-baka/", "https://www.mallorca-expats.de", "https://geo-seo-aio.de" ], "worksFor": { "@id": "https://modern-stack.de/#organization" }, "knowsAbout": [ "Webseite-Modernisierung", "Generative Engine Optimization", "AI Search", "WordPress Migration", "Knowledge Graph", "Lokale Sichtbarkeit D-A-CH" ] }, { "@type": "WebPage", "@id": "https://modern-stack.de/glossar/cls#webpage", "url": "https://modern-stack.de/glossar/cls", "name": "CLS erklärt: Cumulative Layout Shift vermeiden — Glossar | Modern Stack", "description": "CLS (Cumulative Layout Shift) erklärt: Wie die Kennzahl berechnet wird, welche Schwellenwerte gelten, welche Ursachen Layout-Sprünge auslösen und wie du sie bei Modernisierungen behebst.", "isPartOf": { "@id": "https://modern-stack.de/#website" }, "about": { "@id": "https://modern-stack.de/glossar/cls#main" }, "breadcrumb": { "@id": "https://modern-stack.de/glossar/cls#breadcrumb" }, "dateModified": "2026-10-06T18:00:00+00:00", "inLanguage": "de-DE" }, { "@type": "DefinedTerm", "@id": "https://modern-stack.de/glossar/cls#main", "name": "CLS erklärt: Cumulative Layout Shift vermeiden — Glossar", "headline": "CLS erklärt: Cumulative Layout Shift vermeiden — Glossar", "alternateName": "CLS", "description": "CLS (Cumulative Layout Shift) ist eine Core-Web-Vitals-Kennzahl für visuelle Stabilität: Sie summiert unerwartete Layout-Sprünge beim Laden. Gut ist ein Wert bis 0,1. Ursachen sind fehlende Bildmaße, späte Fonts und Cookie-Banner ohne Platzreserve.", "abstract": [ { "@value": "CLS (Cumulative Layout Shift) ist eine Core-Web-Vitals-Kennzahl für visuelle Stabilität: Sie summiert unerwartete Layout-Sprünge beim Laden. Gut ist ein Wert bis 0,1. Ursachen sind fehlende Bildmaße, späte Fonts und Cookie-Banner ohne Platzreserve.", "@language": "de" }, { "@value": "CLS (Cumulative Layout Shift) is a Core Web Vitals metric for visual stability: it adds up unexpected layout shifts while a page loads. Good is 0.1 or less. Causes are missing image dimensions, late fonts and cookie banners without reserved space.", "@language": "en" } ], "url": "https://modern-stack.de/glossar/cls", "inLanguage": [ "de-DE", "en" ], "datePublished": "2026-08-31T18:00:00+00:00", "dateModified": "2026-10-06T18:00:00+00:00", "author": { "@id": "https://modern-stack.de/#person" }, "publisher": { "@id": "https://modern-stack.de/#organization" }, "mainEntityOfPage": { "@id": "https://modern-stack.de/glossar/cls#webpage" }, "speakable": { "@type": "SpeakableSpecification", "cssSelector": [ ".gb-direct-answer", ".gb-faq-answer" ] }, "encoding": { "@type": "MediaObject", "encodingFormat": "text/markdown", "name": "English direct answer", "text": "CLS (Cumulative Layout Shift) measures how much visible content unexpectedly moves while a page loads or is used. A score of 0.1 or less at the 75th percentile is rated good, above 0.25 poor. Reserve space for images, embeds, fonts and banners to keep it low." }, "citation": [ "https://web.dev/articles/cls", "https://web.dev/articles/optimize-cls", "https://modern-stack.de/themen/core-web-vitals-modernisierung" ], "mentions": [ { "@type": "DefinedTerm", "@id": "https://modern-stack.de/glossar/core-web-vitals#main", "name": "Core Web Vitals", "alternateName": "Core Web Vitals", "url": "https://modern-stack.de/glossar/core-web-vitals" }, { "@type": "Article", "@id": "https://modern-stack.de/themen/core-web-vitals-modernisierung#main", "name": "Core Web Vitals & Modernisierung", "alternateName": "Core Web Vitals and modernization", "url": "https://modern-stack.de/themen/core-web-vitals-modernisierung" }, { "@type": "DefinedTerm", "@id": "https://modern-stack.de/glossar/lcp#main", "name": "LCP", "alternateName": "Largest Contentful Paint", "url": "https://modern-stack.de/glossar/lcp" }, { "@type": "DefinedTerm", "@id": "https://modern-stack.de/glossar/inp#main", "name": "INP", "alternateName": "Interaction to Next Paint", "url": "https://modern-stack.de/glossar/inp" }, { "@type": "DefinedTerm", "@id": "https://modern-stack.de/glossar/elementor#main", "name": "Elementor", "alternateName": "Elementor", "url": "https://modern-stack.de/glossar/elementor" }, { "@type": "DefinedTerm", "@id": "https://modern-stack.de/glossar/divi#main", "name": "Divi", "alternateName": "Divi", "url": "https://modern-stack.de/glossar/divi" }, { "@type": "DefinedTerm", "@id": "https://modern-stack.de/glossar/nextjs#main", "name": "Next.js", "alternateName": "Next.js", "url": "https://modern-stack.de/glossar/nextjs" } ], "inDefinedTermSet": "https://modern-stack.de/glossar" }, { "@type": "BreadcrumbList", "@id": "https://modern-stack.de/glossar/cls#breadcrumb", "itemListElement": [ { "@type": "ListItem", "position": 1, "name": "Startseite", "item": "https://modern-stack.de/" }, { "@type": "ListItem", "position": 2, "name": "Glossar", "item": "https://modern-stack.de/glossar" }, { "@type": "ListItem", "position": 3, "name": "CLS", "item": "https://modern-stack.de/glossar/cls" } ] }, { "@type": "FAQPage", "@id": "https://modern-stack.de/glossar/cls#faq", "mainEntity": [ { "@type": "Question", "name": "Ist CLS nur Kosmetik?", "acceptedAnswer": { "@type": "Answer", "text": "Nein. Springt ein Button im Moment des Tippens weg, klicken Nutzer das Falsche oder brechen ab. CLS misst deshalb nicht Schönheit, sondern Bedienbarkeit — und ist offizieller Teil der [[entity:core-web-vitals|Core Web Vitals]]." } }, { "@type": "Question", "name": "Wie wirken Cookie-Banner auf CLS?", "acceptedAnswer": { "@type": "Answer", "text": "Ein Banner, das nachträglich Inhalte nach unten schiebt, erzeugt einen Sprung. Besser: Banner als überlagerte Ebene oder mit reserviertem Platz einbauen. Consent und Layout müssen gemeinsam geplant werden, vor allem mobil." } }, { "@type": "Question", "name": "Welcher CLS-Wert ist gut?", "acceptedAnswer": { "@type": "Answer", "text": "Bis 0,1 gilt als gut, zwischen 0,1 und 0,25 als verbesserungswürdig, über 0,25 als schlecht. Maßgeblich ist das 75. Perzentil echter Besuche, nicht der Laborwert eines einzelnen Tests." } } ] } ] } ```