Cumulative Layout Shift vermeiden: stabile Shops
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-Strategie1 ernst nimmt, behandelt Layout-Stabilität nicht als kosmetisches Detail, sondern als Conversion- und Ranking-Hebel.
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-Analyse1 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