Beheben Sie Cumulative Layout Shift, indem Sie unerwartete Layoutänderungen auf ihre Ursache zurückführen und den benötigten Platz vorab reservieren. Beginnen Sie mit Medienabmessungen, Anzeigenflächen, Einbettungen, Hinweisen und Schriftwechseln. Zeichnen Sie auch die Nutzung nach dem Laden auf: Ein anfangs stabiler Bildschirm kann später noch springen.
Ein CLS von höchstens 0,1 am 75. Perzentil gilt als gut. Der Wert beschreibt unerwartete visuelle Bewegung ohne Maßeinheit, keine Wartezeit. Schnelleres Laden kann einzelne Verschiebungen vermeiden helfen; ein vorhersehbares Layout setzt unmittelbarer an der Ursache an.
Verstehen Sie den Wert vor der Ursachenanalyse
Der Wert einer einzelnen Verschiebung ergibt sich aus dem Produkt von Impact Fraction und Distance Fraction. Die Impact Fraction beschreibt die vereinigten alten und neuen sichtbaren Flächen instabiler Elemente relativ zur Viewportfläche. Die Distance Fraction teilt die größte horizontale oder vertikale Bewegung durch die längere Viewportdimension. CLS bündelt Verschiebungen in Sitzungsfenstern: weniger als eine Sekunde Abstand und höchstens fünf Sekunden Gesamtdauer. Maßgeblich ist das Fenster mit der höchsten Summe.
Auf lange geöffneten Seiten wächst CLS somit nicht zwangsläufig während der gesamten Nutzung. Eine störende späte Folge kann den Wert dennoch bestimmen, obwohl die erste Ansicht stabil war.
Einige Verschiebungen kurz nach einer Nutzereingabe werden ausgeschlossen. Das gilt nicht für jede verzögerte Änderung, die sich auf einen früheren Klick zurückführen lässt. Ein Ausschluss bedeutet außerdem nicht automatisch gute Bedienbarkeit. Erhalten Sie Leseposition und Kontrolle unabhängig vom Messwert.
Der Browser zeigt verschobene Elemente, nicht zwingend die Ursache. Wird eine Überschrift durch eine Anzeige nach unten gedrückt, ist die Überschrift das betroffene Element; die wachsende Anzeige muss untersucht werden. Prüfen Sie die zeitgleichen Änderungen in ihrer Umgebung.
Die Einführung in Core Web Vitals erläutert die übergreifende Bewertung. Trennen Sie den CLS einer Aufzeichnung vom p75 vieler Besuche.
Zeichnen Sie Laden und spätere Nutzung auf
Erfassen Sie einen repräsentativen Ablauf im Performance-Panel der Chrome DevTools. Untersuchen Sie Layout-Shift-Ereignisse und die zugehörige Darstellung. Die Rendering-Werkzeuge können betroffene Bereiche während der Reproduktion hervorheben.
Berücksichtigen Sie Erstbesuch, Einwilligung, verspätete Anzeigen, Scrollen zu Einbettungen und Schriften ohne warmen Cache. Testen Sie mehrere Viewportbreiten. Eine auf dem Desktop passende Reservierung kann auf Mobilgeräten falsch wachsen oder zusammenfallen.
Nicht jede sichtbare Bewegung ist ein CLS-Ereignis. Scrollen verändert den sichtbaren Ausschnitt, und Transformationen können Elemente bewegen, ohne den Dokumentfluss entsprechend zu ändern. Orientieren Sie sich an aufgezeichneten Ereignissen statt allein am visuellen Eindruck.
Dokumentieren Sie Ursache und betroffenes Element getrennt. „Mediencontainer vergrößert sich und verschiebt die folgende Überschrift“ ist hilfreicher als „Überschrift defekt“. Dadurch wird die Aufgabe für die zuständige Person nachvollziehbar.
Googles Anleitung zur CLS-Optimierung unterscheidet Probleme beim Laden und während der späteren Nutzung. Verwenden Sie die Beispiele zur Einordnung, nicht als Liste vermeintlich nachgewiesener Fehler Ihrer Website.
Geben Sie Bildern und Videos früh eine feste Geometrie
Mit width und height kann der Browser das Seitenverhältnis vor dem Bilddownload bestimmen. Responsives CSS bleibt möglich. Die Attribute müssen die tatsächlichen Proportionen beschreiben, keine beliebigen Prüfwerte.
Dieses Beispiel reserviert ein Querformat, das sich dem Container anpasst. Die Bilddatei steht stellvertretend für ein Projekt-Asset.
<img class="article-image"
src="/images/diagram.webp"
width="1600" height="900"
loading="lazy"
alt="A page layout with space reserved for media">.article-image {
display: block;
max-width: 100%;
height: auto;
}Lazy Loading passt nur zu Bildern außerhalb des wichtigen anfänglichen Ausschnitts. Übernehmen Sie es nicht für das LCP-Bild. Die Geometrie unterstützt Stabilität; die Ladeentscheidung beeinflusst den Verfügbarkeitszeitpunkt.
Bei Art Direction können unterschiedliche Breakpoints andere Proportionen verwenden. Prüfen Sie, ob die Reservierung zur ausgewählten Variante passt. Ein Desktop-Seitenverhältnis für ein mobiles Hochformat kann Beschnitt oder nachträgliche Korrekturen verursachen.
Kontrollieren Sie auch den Rahmen: Bildunterschriften, Ränder und Bedienelemente können später Höhe hinzufügen. Der ganze Baustein muss vorhersehbar sein. Die Anleitung zur Bildoptimierung verbindet diese Entscheidungen mit responsiver Ressourcenauswahl.
Reservieren Sie Anzeigenplätze vor der Auslieferung
Die endgültige Anzeige steht beim ersten Layout möglicherweise noch nicht fest. Definieren Sie unterstützte Größen je Breakpoint und reservieren Sie den Platz von Anfang an. Stimmen Sie CSS und Anzeigenkonfiguration ab, statt eine Höhe zu erraten.
Die folgenden Abmessungen zeigen das Prinzip und sind keine Empfehlung für ein bestimmtes Werbenetzwerk.
.ad-slot {
min-height: 250px;
display: grid;
place-items: center;
}
@media (min-width: 64rem) {
.ad-slot {
min-height: 280px;
}
}Eine Mindesthöhe verhindert das Hochrutschen bei kleinen oder fehlenden Anzeigen nur, wenn sie erhalten bleibt. Wird ein leerer Platz nach einer erfolglosen Auslieferung zusammengeklappt, entsteht genau die unerwünschte Verschiebung.
Reservierter und ungenutzter Platz stehen in einem Gestaltungszielkonflikt. Entscheiden Sie bewusst, besonders im ersten sichtbaren Bereich. Begrenzen Sie Formate, wählen Sie eine weniger störende Position oder behalten Sie einen neutralen Container. Berücksichtigen Sie immer den verdrängten Inhalt.
Prüfen Sie die Zustände Laden, gefüllt, leer und Fehler in einer geeigneten Umgebung. Ein Mock, der stets dieselbe passende Anzeige liefert, belegt keine stabile Produktionsintegration.
Halten Sie Einbettungen während der Initialisierung stabil
Videoplayer und soziale Einbettungen ersetzen manchmal einen kleinen Platzhalter durch einen höheren interaktiven Bereich. Definieren Sie die erwartete Geometrie vor dem externen Code und erhalten Sie sie auch bei Ladeproblemen.
Dieser Wrapper reserviert Raum für einen vorgesehenen 16:9-Baustein, ohne dessen sofortiges Laden zu verlangen.
.video-frame {
position: relative;
aspect-ratio: 16 / 9;
background: #0c1222;
}
.video-frame > iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}Nicht jede Einbettung besitzt ein festes Videoformat. Beiträge und interaktive Diagramme können inhaltsabhängige Höhen haben. Nutzen Sie unterstützte Größenmechanismen des Anbieters, realistische Startflächen und Positionen, an denen eine Erweiterung die aktuelle Leseposition nicht stört.
Eine Fassade kann den teuren Player erst nach Aktivierung laden. Behalten Sie beim Austausch die Abmessungen bei, ermöglichen Sie Tastaturbedienung und zeigen Sie einen verständlichen Fehlerzustand.
Die Anleitung zu Drittanbieter-Skripten behandelt die Ausführungskosten, die trotz stabiler Geometrie bleiben. Layoutstabilität beweist noch keine gute Reaktionsfähigkeit.
Verhindern Sie nachträgliches Einschieben oberhalb des Inhalts
Einwilligungsdialoge, Ankündigungen und Empfehlungen erscheinen oft nach dem ersten Layout. Bestimmen Sie ihre Position vorher. Reservierter Raum oder eine sorgfältig entworfene Überlagerung verhindern einen unerwarteten Block über dem Artikel.
Eine Überlagerung darf wesentlichen Inhalt nicht dauerhaft verdecken, den Tastaturfokus falsch einsperren oder bei großer Schrift unbedienbar werden. Testen Sie schmale Ansichten und Zoom. Eine feste Höhe passt nicht automatisch zu jeder Übersetzung.
Auch Empfehlungen brauchen realistische Ladezustände. Ein zu kurzes Skeleton verhindert keinen späteren Sprung. Bild- und Zeilenstruktur sollten zum Ergebnis passen; alternativ darf das Wachstum die aktuelle Aufgabe nicht unterbrechen.
Vermeiden Sie späte JavaScript-Messungen für Größen, die sich im anfänglichen CSS ausdrücken lassen. Sonst konkurriert das Skript mit dem ersten Layout. Dynamik ist sinnvoll, wenn der Inhalt sie tatsächlich benötigt.
Stimmen Sie Ersatz- und Webschrift aufeinander ab
Beim Schriftwechsel können Zeichenbreite, Ober- und Unterlängen sowie Zeilenabstand das Layout verändern. Eine zusätzliche Titelzeile verschiebt erheblich mehr als den Titel selbst.
font-display: swap zeigt Ersatztext während des Downloads, garantiert aber keine stabile Geometrie. font-display: optional kann unter bestimmten Bedingungen einen späten Wechsel vermeiden; Besucher behalten dann möglicherweise für diesen Besuch die Ersatzschrift.
Wählen Sie eine passende Ersatzschrift und nutzen Sie bei Bedarf size-adjust, ascent-override, descent-override und line-gap-override. Die Werte müssen zum konkreten Schriftpaar passen. Fremde Prozentwerte können die Abweichung vergrößern.
Prüfen Sie tatsächlich verwendete Schriftsysteme. Hebräisch, Koreanisch und lateinischer Text können andere Dateien und Fallbacks verwenden. Ein kurzer englischer Titel deckt lange Übersetzungen und gemischte Schrift nicht ab.
Laden Sie nur wirklich früh benötigte Schriften vor. Alle Schnitte vorzuladen kann wichtige Bilder verdrängen. Prüfen Sie Netzwerk und Layout gemeinsam, damit die Schriftkorrektur kein Ladeproblem erzeugt.
Animieren Sie ohne laufende Layoutänderungen
Animationen von Breite, Höhe, top oder anderen layoutwirksamen Eigenschaften können wiederholte Berechnungen auslösen und Nachbarn bewegen. Transformationen und Opazität eignen sich häufig besser für Übergänge ohne Änderung des umgebenden Flusses.
Das ist kein Grund für unnötige Animation. Bewegung kann auch ohne CLS-Ereignis ablenken. Respektieren Sie reduzierte Bewegung und stimmen Sie Fokus sowie Klickflächen mit der sichtbaren Position ab.
Bei Akkordeons zählen Erwartung und Position benachbarter Bedienelemente. Halten Sie den Zusammenhang zwischen Aktivierung und Inhalt klar. Vermeiden Sie verspätete, sachfremde Einfügungen, die die Seite anschließend verschieben.
Suchen Sie mit Felddaten nach übersehenen Abläufen
Ein Ladetest kann vor einer Anzeigenaktualisierung oder einer später erreichten Einbettung enden. Ist Feld-CLS schlechter, reproduzieren Sie die längere Nutzung, bevor Sie den Bericht verwerfen.
RUM kann betroffene Vorlagen und Bausteine eingrenzen. Browser-API-Abdeckung und iframe-Sichtbarkeit können sich von CrUX unterscheiden. Ein JavaScript-Sammler im Hauptdokument sieht daher möglicherweise nicht alles. Dokumentieren Sie diese Grenze.
Prüfen Sie die Zurück-Navigation. Eine Wiederherstellung aus dem Back/Forward Cache ist etwas anderes als Neuladen. Erhalten Sie die Eignung dafür und beheben Sie trotzdem die Verschiebungen beim ersten Besuch.
Priorisieren Sie gemeinsame Ursachen. Ein Medienwrapper für viele Seiten ist ein besseres Reparaturziel als manuelle Artikelkorrekturen. Prüfen Sie Ausnahmen wie fehlende Bilder, lange Beschriftungen und Ladefehler.
Prüfen Sie Geometrie und Messwert gemeinsam
Wiederholen Sie nach der Änderung den ursprünglichen Ablauf und untersuchen Sie dasselbe Ereignis. Der Inhalt soll an seinem Platz bleiben, ohne durch Reservierungen abgeschnitten zu werden, überzulaufen oder unnötiges Scrollen zu erzeugen.
Vergleichen Sie Viewports, Textlängen und Ladezustände. Prüfen Sie Fokus, Zoom und Übersetzungen. Eine feste Box, die Inhalte abschneidet, ist keine akzeptable Stabilitätskorrektur.
Bewahren Sie Messwert und Bedingungen zusammen mit der Änderung auf. Beobachten Sie nach der Veröffentlichung Felddaten mit neuen Besuchen. Eine stabile lokale Aufzeichnung aktualisiert Search Console nicht sofort.
Machen Sie spätes Laden zum Bestandteil der Komponentenprüfung
Dokumentieren Sie je Baustein reservierten Raum, Verhalten bei fehlendem Inhalt und mögliche Höhenänderungen nach Interaktionsbeginn. So wird Stabilität eine Gestaltungseigenschaft statt wiederkehrender Notfallarbeit.
Verwenden Sie den Core-Web-Vitals-Prüfer für Messwerte und die Core-Web-Vitals-Anleitungen für weitere Probleme. Stabilität bedeutet vorhersehbares Verhalten im normalen, verzögerten und fehlgeschlagenen Zustand, nicht nur im fertigen Screenshot.
