Ein Online-Shop, dessen Inhalte beim Laden noch hin und her springen, kostet Vertrauen und Umsatz. Genau das misst Cumulative Layout Shift (CLS) als eine der drei Core Web Vitals: die unerwartete Verschiebung sichtbarer Elemente während des Seitenaufbaus. Im Jahr 2025 erreichen zwar 72 Prozent (HTTP Archive Web Almanac 2025) der Desktop-Seiten und 81 Prozent (HTTP Archive Web Almanac 2025) der Mobilseiten einen guten CLS-Wert unter 0,1 - doch ausgerechnet datendichte Shop-Templates mit Bildern, Bewertungen, Werbeplätzen und nachladenden Skripten gehören regelmäßig zur instabilen Minderheit. Dieser Artikel zeigt die typischen CLS-Ursachen, ihre messbaren Auswirkungen und konkrete Gegenmaßnahmen für stabile Layouts. Wer seine Performance-Strategie ernst nimmt, behandelt Layout-Stabilität nicht als kosmetisches Detail, sondern als Conversion- und Ranking-Hebel.
Das Wichtigste in Kürze
- Cumulative Layout Shift bewertet unerwartete Verschiebungen aus Impact Fraction und Distance Fraction; unter 0,1 gilt als gut, gewertet wird die Summe des größten Sitzungsfensters im 75. Perzentil echter Nutzerdaten (Google web.dev).
- Bilder ohne reservierte Maße sind die häufigste Ursache: 62 Prozent (HTTP Archive Web Almanac 2025) der Mobilseiten haben mindestens eines. Abhilfe schaffen width- und height-Attribute oder ein Container mit fester aspect-ratio im Template.
- Web-Fonts lassen Text neu umfließen, sobald die Fallback-Schrift getauscht wird. Metrisch angepasste Fallbacks über size-adjust und Override-Werte sowie Preload entschärfen das; font-display: optional verzichtet ganz auf den Tausch.
- Werbeflächen, Bewertungs-Widgets und Consent-Layer gehören in eine fixierte Ebene außerhalb des Dokumentflusses oder in einen Slot mit vorab reservierter Höhe; Verschiebungen im sichtbaren Bereich wiegen im Score am schwersten.
- Vom Nutzer ausgelöste Änderungen innerhalb von 500 Millisekunden zählen nicht zu CLS, automatische Bewegungen dagegen voll. Animationen laufen deshalb über transform und opacity statt über height, top oder margin.
- CLS ist template-spezifisch: Produktseite, Kategorie und Warenkorb werden getrennt gemessen, Korrekturen gehören in die wiederverwendete Komponente, und ein CLS-Budget im Build fängt neue Plugins und Marketing-Skripte ab.
Was Cumulative Layout Shift genau misst
Cumulative Layout Shift quantifiziert, wie stark sich sichtbare Elemente während des Ladens unerwartet verschieben - also Bewegungen, die der Nutzer nicht selbst ausgelöst hat. Ein CLS-Wert unter 0,1 gilt als gut, zwischen 0,1 und 0,25 als verbesserungsbedürftig und darüber als schlecht (Quelle: Google web.dev). Anders als bei Ladezeitmetriken geht es nicht um Geschwindigkeit, sondern um visuelle Stabilität: Springt der Bestell-Button im Moment des Klicks nach unten, weil darüber noch ein Banner einrastet, landet der Klick auf dem falschen Element.
Der CLS-Score eines einzelnen Layout-Shifts berechnet sich aus zwei Faktoren: der Impact Fraction (welcher Anteil des Viewports von der Verschiebung betroffen ist) und der Distance Fraction (wie weit sich das Element relativ zur Viewport-Höhe bewegt). Ein Element, das die Hälfte des Sichtbereichs einnimmt und sich um ein Viertel der Viewport-Höhe nach unten schiebt, ergibt einen Shift-Score von 0,125 (0,5 mal 0,25) (Quelle: Google web.dev). Diese Scores werden nicht beliebig aufaddiert, sondern innerhalb von Sitzungsfenstern gruppiert. Genau diese Mechanik erklärt, warum ein einziger großer Sprung im sichtbaren Bereich schwerer wiegt als viele winzige Verschiebungen am unteren Seitenrand: Was der Nutzer gerade liest oder anklicken will, hat den größten Hebel auf den Wert.
Praktisch relevant ist auch die Abgrenzung zu erwünschten Bewegungen. Verschiebungen, die innerhalb von 500 Millisekunden nach einer Nutzerinteraktion auftreten, gelten als angefordert und fließen nicht in CLS ein - etwa ein Akkordeon, das sich nach einem Klick öffnet. Alles, was ohne Zutun des Nutzers passiert, zählt hingegen voll. Diese Unterscheidung ist entscheidend, um bei der Optimierung nicht an den falschen Stellen anzusetzen und legitime, vom Nutzer ausgelöste Interaktionen unnötig einzuschränken.
Session-Windowing: Wie der finale CLS-Wert entsteht
Wichtig für die Bewertung: Google nutzt für das Ranking ausschließlich Real-User-Felddaten aus dem 75. Perzentil. Ein im Labor sauberer Wert sagt also wenig aus, wenn echte Nutzer auf langsameren Geräten oder Verbindungen stärkere Verschiebungen erleben. Eine belastbare Performance-Analyse kombiniert daher Labor- und Felddaten, um sowohl die Ursache als auch die reale Häufigkeit eines Shifts zu erfassen.
0.1
CLS-Grenzwert gut (Google web.dev)
72%
Desktop-Seiten gut (Web Almanac 2025)
81%
Mobilseiten gut (Web Almanac 2025)
5s
max. Session-Window (Google web.dev)
Bilder ohne Dimensionen: die häufigste Ursache
Die mit Abstand häufigste CLS-Quelle sind Bilder und Medien ohne reservierte Abmessungen. Laut Web Almanac 2025 haben 62 Prozent (HTTP Archive Web Almanac 2025) aller mobilen Seiten mindestens ein Bild ohne explizite Dimensionen, und die Median-Seite enthält zwei solcher Bilder - am 90. Perzentil sogar 25 (Quelle: HTTP Archive Web Almanac 2025). Ohne width- und height-Attribut weiß der Browser vor dem Laden nicht, wieviel Platz das Bild benötigt, rendert den Folgeinhalt zunächst nach oben und schiebt ihn beim Eintreffen des Bildes nach unten.
Die Lösung ist unspektakulär, aber wirkungsvoll: Jedes - und