Cumulative Layout Shift misst, wie stark sich sichtbare Elemente während des Ladens ungeplant verschieben. Anders als reine Ladezeit-Werte beschreibt er kein technisches Detail, sondern eine Erfahrung: das Gefühl, dass die Seite unter dem Finger wegrutscht.
Die fünf üblichen Verursacher
- Bilder ohne Größenangabe: Der Browser weiß erst beim Laden, wie viel Platz gebraucht wird — und schiebt alles darunter nach unten.
- Schriften, die nachgeladen werden: Der Text erscheint zuerst in einer Ersatzschrift und springt beim Wechsel, wenn die Metriken nicht passen.
- Nachträglich eingefügte Elemente: Cookie-Banner, Hinweisleisten, Werbeflächen, die sich über oder in den Inhalt schieben.
- Eingebettete Inhalte ohne reservierten Raum: Videos, Karten, Formulare von Drittanbietern.
- Nachgeladene Inhalte: Empfehlungen, Bewertungen, Verfügbarkeitsanzeigen, die nach dem ersten Rendern erscheinen.
Die wirksamste Einzelmaßnahme kostet fünf Minuten: Breite und Höhe an jedem Bild angeben. Der Browser reserviert den Platz dann, bevor die Datei da ist. In vielen Projekten entfällt allein dadurch der größere Teil der gemessenen Verschiebung — noch vor jeder Optimierung an Skripten.
Platz reservieren statt nachträglich schaffen
Das Grundprinzip ist immer dasselbe: Jedes Element, das später erscheint, braucht schon vorher seinen Raum. Für Bilder und Videos über feste Seitenverhältnisse, für eingebettete Inhalte über einen Container mit definierter Mindesthöhe, für nachgeladene Bereiche über einen Platzhalter in der ungefähren Zielgröße.
Ein Platzhalter, der etwas zu groß ist, erzeugt einen kleinen leeren Bereich. Ein Platzhalter, der fehlt, erzeugt einen Sprung. Das erste ist ein Schönheitsfehler, das zweite ein Abbruchgrund.
Schriften: der unterschätzte Anteil
Wenn Ersatz- und Zielschrift unterschiedlich breit laufen, verschiebt sich beim Wechsel jeder Textblock — oft über die gesamte Seitenlänge. Drei Maßnahmen wirken zuverlässig: die Schrift lokal ausliefern statt über eine fremde Quelle, sie vorab anfordern, und die Ersatzschrift in den Metriken an die Zielschrift angleichen, sodass der Umbruch identisch bleibt.
Wie Schriften lokal eingebunden werden und was das zusätzlich für den Datenschutz bedeutet, behandelt der Beitrag zu lokal gehosteten Webfonts.
Banner und Leisten richtig einbauen
Ein Cookie-Hinweis, der den Inhalt nach unten schiebt, ist die vermeidbarste Ursache überhaupt. Die Lösung ist keine Frage der Technik, sondern der Positionierung: Solche Elemente gehören über den Inhalt gelegt, nicht in den Fluss eingefügt. Dasselbe gilt für Aktionsleisten, Cookie-Zustimmung und Hinweise auf Versandkosten.
Der Unterschied zwischen erwarteter und unerwarteter Bewegung
Nicht jede Verschiebung ist ein Problem. Öffnet sich ein Akkordeon, weil jemand darauf getippt hat, ist die Bewegung gewollt und wird auch nicht gewertet — vorausgesetzt, sie folgt unmittelbar auf eine Eingabe. Problematisch sind ausschließlich Verschiebungen ohne Zutun des Nutzers.
Diese Unterscheidung ist praktisch wichtig, weil sie den Handlungsspielraum vergrößert. Aufklappbare Bereiche, nachladende Detailansichten und Filter, die auf Klick reagieren, dürfen den Inhalt bewegen. Was nicht darf: alles, was während des Ladens von selbst passiert.
Werbung und Drittanbieter als Sonderfall
Eingebundene Inhalte fremder Anbieter sind die schwierigste Kategorie, weil ihre Höhe nicht vorhersehbar ist und sich von Aufruf zu Aufruf ändern kann. Ein fest reservierter Bereich löst das Problem nur halb: Ist er zu klein, springt es trotzdem, ist er zu groß, entsteht eine leere Fläche.
Der pragmatische Weg besteht aus zwei Schritten: eine Mindesthöhe auf Basis der tatsächlich beobachteten Größen festlegen, und solche Elemente nicht zwischen Inhaltsblöcke setzen, sondern an Positionen, unterhalb derer wenig Wichtiges folgt. Eine Verschiebung am Seitenende kostet deutlich weniger als dieselbe Verschiebung über dem Bestellknopf.
Messen, wo es passiert
Werte aus einem einzelnen Testlauf zeigen selten das reale Bild, weil Verschiebungen von Verbindungsgeschwindigkeit und Gerät abhängen. Aussagekräftig sind Felddaten echter Besucher, aufgeschlüsselt nach Seitentyp und Gerät. In den meisten Projekten konzentriert sich das Problem auf wenige Vorlagen — Startseite, Produktseite, Artikelseite — und lässt sich dort gebündelt beheben.
Der Effekt ist nicht kosmetisch. Eine Seite, die beim Laden ruhig bleibt, wirkt schneller als eine objektiv schnellere, die springt. Wahrgenommene Stabilität schlägt gemessene Millisekunden.