Cumulative Layout Shift optimieren

Plötzliche Layoutänderungen vermeiden, um die Nutzerfreundlichkeit zu verbessern

Veröffentlicht: 5. Mai 2020, zuletzt aktualisiert: 7. Februar 2025

Der Cumulative Layout Shift (CLS) ist einer der drei Core Web Vitals-Messwerte. Er misst die Instabilität von Inhalten, indem er die Verschiebung sichtbarer Inhalte im Darstellungsbereich mit der Entfernung kombiniert, die die betroffenen Elemente zurückgelegt haben.

Layoutänderungen können Nutzer ablenken. Stellen Sie sich vor, Sie beginnen, einen Artikel zu lesen, und plötzlich verschieben sich Elemente auf der Seite. Sie verlieren die Orientierung und müssen Ihre Leseposition wiederfinden. Das ist im Web sehr häufig der Fall, z. B. beim Lesen von Nachrichten oder beim Klicken auf die Schaltflächen „Suchen“ oder „In den Warenkorb“. Solche Erfahrungen sind visuell irritierend und frustrierend. Sie treten häufig auf, wenn sichtbare Elemente gezwungen werden, sich zu bewegen, weil der Seite plötzlich ein anderes Element hinzugefügt oder die Größe eines Elements geändert wurde.

Für eine gute Nutzerfreundlichkeit sollten Websites bei mindestens 75% der Seitenaufrufe einen CLS-Wert von 0, 1 oder weniger anstreben.

Gute CLS-Werte liegen unter 0,1, schlechte Werte über 0,25.Werte dazwischen müssen optimiert werden.
Gute CLS-Werte liegen bei 0,1 oder darunter. Schlechte Werte sind größer als 0,25.

Im Gegensatz zu den anderen Core Web Vitals, die zeitbasierte Werte sind, die in Sekunden oder Millisekunden gemessen werden, ist der CLS-Wert ein wertloser Wert, der auf der Berechnung basiert, wie viel und wie weit sich Inhalte verschieben.

In diesem Leitfaden erfahren Sie, wie Sie häufige Ursachen für Layoutänderungen optimieren.

Die häufigsten Ursachen für eine schlechte CLS sind:

  • Bilder ohne Abmessungen
  • Anzeigen, eingebettete Inhalte und Iframes ohne Dimensionen
  • Dynamisch eingefügte Inhalte wie Anzeigen, Einbettungen und Iframes ohne Dimensionen.
  • Webschriften

Ursachen für Layoutänderungen

Bevor Sie sich Lösungen für häufige CLS-Probleme ansehen, ist es wichtig, Ihren CLS-Wert zu kennen und herauszufinden, woher die Änderungen kommen.

CLS in Lab-Tools im Vergleich zum Einsatz im Feld

Entwickler sind oft der Meinung, dass der CLS, der im Chrome UX-Bericht (CrUX) gemessen wird, falsch ist, da er nicht mit dem CLS übereinstimmt, den sie mit den Chrome DevTools oder anderen Lab-Tools messen. Web Performance Lab-Tools wie Lighthouse zeigen möglicherweise nicht den vollständigen CLS einer Seite an, da sie in der Regel eine grundlegende Ladezeit der Seite durchführen, um einige Web-Leistungsmesswerte zu erfassen und einige Hinweise zu geben. Mit Lighthouse-Nutzerflüssen können Sie jedoch über die Standardprüfung der Seitenladezeit hinausgehen.

CrUX ist der offizielle Datensatz des Web Vitals-Programms. Daher wird der CLS während der gesamten Lebensdauer der Seite gemessen und nicht nur beim ersten Seitenaufbau, wie es bei Lab-Tools üblich ist.

Layoutverschiebungen sind beim Seitenaufbau sehr häufig, da alle erforderlichen Ressourcen abgerufen werden, um die Seite anfänglich zu rendern. Layoutverschiebungen können aber auch nach dem ersten Laden auftreten. Viele Verschiebungen nach dem Laden können als Folge einer Nutzerinteraktion auftreten und werden daher aus dem CLS-Wert ausgeschlossen, da sie erwartet sind, sofern sie innerhalb von 500 Millisekunden nach dieser Interaktion auftreten.

Andere nach dem Laden auftretende Verschiebungen, die für den Nutzer unerwartet sind, können jedoch auch berücksichtigt werden, wenn keine Interaktion stattgefunden hat. Das ist beispielsweise der Fall, wenn Sie weiter auf der Seite scrollen und Lazy-Loaded-Inhalte geladen werden, was zu Verschiebungen führt. Andere häufige Ursachen für eine CLS nach dem Laden sind Interaktionen von Übergängen, z. B. bei Single-Page-Apps, die länger als der Kulanzzeitraum von 500 Millisekunden dauern.

In PageSpeed Insights sehen Sie im Abschnitt „Ergebnisse Ihrer echten Nutzer“ den CLS, den Nutzer wahrnehmen, und im Abschnitt „Leistungsprobleme diagnostizieren“ den CLS, der im Labor ermittelt wurde. Unterschiede zwischen diesen Werten sind wahrscheinlich auf den CLS nach dem Laden zurückzuführen.

PageSpeed Insights mit Daten auf URL-Ebene, die den tatsächlichen CLS für Nutzer zeigen, der deutlich höher ist als der CLS von Lighthouse
In diesem Beispiel wird in CrUX ein viel höherer CLS als in Lighthouse gemessen.

CLS-Probleme beim Laden identifizieren

Wenn die CLS-Werte von CrUX und Lighthouse in PageSpeed Insights weitgehend übereinstimmen, liegt in der Regel ein CLS-Problem bei der Ladezeit vor, das von Lighthouse erkannt wurde. In diesem Fall hilft Lighthouse mit zwei Prüfungen, um weitere Informationen zu Bildern zu erhalten, die aufgrund fehlender Breite und Höhe zu CLS führen. Außerdem werden alle Elemente aufgelistet, die sich beim Laden der Seite verschoben haben, zusammen mit ihrem Beitrag zum CLS. Sie können diese Prüfungen aufrufen, indem Sie nach den CLS-Prüfungen filtern:

Lighthouse-Screenshot mit den CLS-Analysen, die weitere Informationen zur Identifizierung und Behebung von CLS-Problemen enthalten
Die detaillierte CLS-Diagnose von Lighthouse.

Der Bereich Leistung in den DevTools bietet viele Informationen zu Layoutänderungen:

Layout-Shift-Einträge, die im Chrome DevTools-Bereich „Leistung“ angezeigt werden
Nachdem Sie im Bereich „Leistung“ eine neue Aufzeichnung erstellt haben, werden im Ergebnisbereich im Track Layoutänderungen lilafarbene Balken mit Layout Shift-Clustern angezeigt. Wenn Sie auf die Rauten klicken, wird eine Animation der Verschiebung und Details im Bereich Zusammenfassung angezeigt.

Layoutänderungen werden im Track Layoutänderungen hervorgehoben. Die lila Linie gruppiert Verschiebungen in Verschiebungsclustern. Die Raute zeigt einzelne Verschiebungen in diesem Cluster. Die Größe des Rautensymbols ist proportional zur Größe der Verschiebung, sodass Sie sich auf die größten Verschiebungen konzentrieren können.

Wenn Sie auf eine Verschiebung klicken, wird ein Pop-up mit einer Animation der Verschiebung angezeigt und die Verschiebung der Elemente wird lila hervorgehoben.

Außerdem enthält die Ansicht Zusammenfassung für einen Layout Shift-Eintrag den Beginn, den Wert für die Verschiebung sowie die verschobenen Elemente. Das ist besonders hilfreich, um mehr Details zu Problemen mit der Ladezeit des CLS zu erhalten, da diese mit einem Leistungsprofil für das Neuladen leicht repliziert werden können.

Außerdem wird ein Link zur Statistik Ursachen für Layoutverschiebungen angezeigt, die im Bereich Statistiken links zu sehen ist. Dort werden oben der CLS insgesamt sowie mögliche Gründe für Layoutverschiebungen angezeigt.

CLS-Probleme nach dem Laden identifizieren

Abweichungen zwischen den CLS-Werten von CrUX und Lighthouse deuten oft auf eine CLS nach dem Laden hin. Ohne Felddaten sind diese Verschiebungen nur schwer zu erkennen. Informationen zum Erfassen von Felddaten finden Sie unter CLS-Elemente im Feld messen.

In der Livemesswertansicht des Bereichs „Leistung“ können Sie mit der Seite interagieren und den CLS-Wert beobachten, um Interaktionen zu identifizieren, die zu großen Layoutänderungen führen.

Layout-Shift-Einträgnisse, die im Chrome DevTools-Leistungsbereich auf dem Bildschirm mit Livemesswerten angezeigt werden
In der Ansicht mit Livemesswerten des Leistungsbereichs können Sie den CLS-Wert einer Webseite überwachen, während Sie mit der Seite interagieren.

Alternativ zu den DevTools können Sie Ihre Webseite durchsuchen und dabei Layoutänderungen mit einem Performance Observer aufzeichnen, den Sie in die Console einfügen.

Nachdem Sie die Schichtüberwachung eingerichtet haben, können Sie versuchen, alle CLS-Probleme nach dem Laden zu reproduzieren. CLS tritt häufig auf, wenn Nutzer durch eine Seite scrollen und die verzögert geladenen Inhalte vollständig geladen werden, ohne dass dafür Platz reserviert wurde. Ein weiterer häufiger Grund für eine CLS nach dem Laden ist das Verschieben von Inhalten, wenn der Nutzer den Mauszeiger darauf bewegt. Jede Inhaltsverschiebung während einer dieser Interaktionen gilt als unerwartet, auch wenn sie innerhalb von 500 Millisekunden erfolgt.

Weitere Informationen finden Sie unter Layoutverschiebungen beheben.

Nachdem Sie alle häufigen Ursachen für CLS ermittelt haben, können Sie mit dem Nutzerflussmodus mit Zeiträumen in Lighthouse dafür sorgen, dass typische Nutzerflüsse nicht durch Layoutänderungen beeinträchtigt werden.

CLS-Elemente im Feld messen

Wenn Sie die CLS-Werte vor Ort überwachen, können Sie besser nachvollziehen, unter welchen Umständen CLS auftritt, und die möglichen Ursachen eingrenzen. Wie die meisten Labortools messen auch Feldtools nur die Elemente, die sich verschoben haben. Das liefert in der Regel jedoch genügend Informationen, um die Ursache zu ermitteln. Sie können auch CLS-Feldmessungen verwenden, um festzustellen, welche Probleme mit höchster Priorität behoben werden müssen.

Die web-vitals-Bibliothek bietet Attributionsfunktionen, mit denen Sie diese zusätzlichen Informationen erfassen können. Weitere Informationen finden Sie unter Leistung vor Ort analysieren. Andere RUM-Anbieter haben ebenfalls damit begonnen, diese Daten auf ähnliche Weise zu erheben und darzustellen.

Häufige Ursachen für CLS

Sobald Sie die Ursachen für die CLS ermittelt haben, können Sie mit der Behebung der Probleme beginnen. In diesem Abschnitt werden einige der häufigsten Gründe für CLS und die entsprechenden Maßnahmen zur Vermeidung beschrieben.

Bilder ohne Abmessungen

Geben Sie für Ihre Bilder und Videoelemente immer die Größenattribute width und height an. Alternativ können Sie den erforderlichen Platz mit CSS aspect-ratio oder ähnlich reservieren. So kann der Browser während des Ladens des Bildes den richtigen Platz im Dokument zuweisen.

Bilder ohne angegebene Breite und Höhe.
Bilder mit angegebener Breite und Höhe.
Lighthouse-Bericht mit den Auswirkungen auf die kumulative Layoutverschiebung vor und nach dem Festlegen von Abmessungen für Bilder
Auswirkungen der Bildabmessungen in Lighthouse 6.0 auf den CLS.

Änderungen an den Attributen width und height für Bilder

In den frühen Tagen des Webs fügten Entwickler ihren <img>-Tags die Attribute width und height hinzu, um sicherzustellen, dass auf der Seite genügend Platz zugewiesen wurde, bevor der Browser mit dem Abrufen von Bildern begann. Dadurch werden Neuformatierungen und Neulayouts minimiert.

<img src="puppy.jpg" width="640" height="360" alt="Puppy with balloons">

width und height in diesem Beispiel enthalten keine Einheiten. Mit diesen Pixelabmessungen wird sichergestellt, dass der Browser im Layout der Seite einen Bereich von 640 x 360 Pixeln reserviert. Das Bild wird so gestreckt, dass es in diesen Bereich passt, unabhängig davon, ob die tatsächlichen Abmessungen übereinstimmen.

Mit der Einführung des responsiven Webdesigns haben Entwickler begonnen, width und height wegzulassen und stattdessen CSS zum Ändern der Größe von Bildern zu verwenden:

img {
  width: 100%; /* or max-width: 100%; */
  height: auto;
}

Da die Bildgröße jedoch nicht angegeben ist, kann erst dann Speicherplatz dafür zugewiesen werden, wenn der Browser mit dem Herunterladen beginnt und die Abmessungen bestimmen kann. Während Bilder geladen werden, wird der Text auf der Seite nach unten verschoben, um Platz dafür zu schaffen. Das ist verwirrend und frustrierend für die Nutzer.

Hier kommt das Seitenverhältnis ins Spiel. Das Seitenverhältnis eines Bildes ist das Verhältnis zwischen seiner Breite und seiner Höhe. Üblicherweise wird das Seitenverhältnis durch zwei Zahlen dargestellt, die durch einen Doppelpunkt getrennt sind (z. B. 16:9 oder 4:3). Bei einem Seitenverhältnis von x:y ist das Bild x Einheiten breit und y Einheiten hoch.

Wenn wir also eine der Dimensionen kennen, kann die andere bestimmt werden. Für ein Seitenverhältnis von 16:9:

  • Wenn „puppy.jpg“ eine Höhe von 360 Pixeln hat, beträgt die Breite 360 × (16 ÷ 9) = 640 Pixel.
  • Wenn „puppy.jpg“ eine Breite von 640 Pixeln hat, beträgt die Höhe 640 × (9 ÷ 16) = 360 Pixel.

Wenn der Browser das Seitenverhältnis eines Bildes kennt, kann er genügend Platz für die Höhe und den zugehörigen Bereich berechnen und reservieren.

Moderne Best Practices für die Bildabmessungen

Da moderne Browser das Standardseitenverhältnis von Bildern basierend auf den Attributen width und height eines Bildes festlegen, können Sie Layoutverschiebungen verhindern, indem Sie diese Attribute für das Bild festlegen und das vorangestellte CSS in Ihr Stylesheet aufnehmen.

<!-- set a 640:360 i.e a 16:9 aspect ratio -->
<img src="puppy.jpg" width="640" height="360" alt="Puppy with balloons">

Alle Browser fügen dann ein Standardseitenverhältnis hinzu, das auf den vorhandenen width- und height-Attributen des Elements basiert.

Hier wird ein Seitenverhältnis basierend auf den Attributen width und height berechnet, bevor das Bild geladen wurde. Diese Informationen werden gleich zu Beginn der Layoutberechnung bereitgestellt. Sobald für ein Bild eine bestimmte Breite festgelegt wird (z. B. width: 100%), wird das Seitenverhältnis verwendet, um die Höhe zu berechnen.

Dieser aspect-ratio-Wert wird von den wichtigsten Browsern bei der Verarbeitung von HTML berechnet und nicht mit einem Standard-User-Agent-Stylesheet. In diesem Beitrag erfahren Sie mehr dazu. Daher wird der Wert etwas anders angezeigt. In Chrome wird es beispielsweise im Bereich „Styles“ des Elements-Steuerfelds so angezeigt:

img[Attributes Style] {
  aspect-ratio: auto 640 / 360;
}

Safari verhält sich ähnlich und verwendet eine Quelle im Stil von HTML-Attributen. In Firefox wird diese berechnete aspect-ratio im Bereich Inspector nicht angezeigt, aber für das Layout verwendet.

Der Teil auto des vorherigen Codes ist wichtig, da er dazu führt, dass das Standardseitenverhältnis nach dem Herunterladen des Bildes durch die Bildabmessungen überschrieben wird. Wenn die Bildabmessungen unterschiedlich sind, führt dies zwar nach dem Laden des Bildes zu einer gewissen Layoutverschiebung, aber das Seitenverhältnis des Bildes wird trotzdem verwendet, sobald es verfügbar ist, falls die HTML-Datei falsch ist. Auch wenn das tatsächliche Seitenverhältnis vom Standard abweicht, führt es zu weniger Layoutänderungen als die Standardgröße von 0 x 0 Pixeln eines Bildes ohne angegebene Abmessungen.

Weitere Informationen zum Seitenverhältnis und zu responsiven Bildern finden Sie unter Ruckfreies Laden von Seiten mit Medienseitenverhältnissen.

Wenn sich Ihr Bild in einem Container befindet, können Sie mit CSS die Größe des Bildes auf die Breite des Containers festlegen. Wir haben height: auto; festgelegt, um keinen festen Wert für die Bildhöhe zu verwenden.

img {
  height: auto;
  width: 100%;
}

Was ist mit responsiven Bildern?

Bei der Arbeit mit responsiven Bildern definiert srcset die Bilder, zwischen denen der Browser auswählen kann, und die Größe der einzelnen Bilder. Damit die Attribute „Breite“ und „Höhe“ von <img> festgelegt werden können, sollte jedes Bild dasselbe Seitenverhältnis haben.

<img
  width="1000"
  height="1000"
  src="puppy-1000.jpg"
  srcset="puppy-1000.jpg 1000w, puppy-2000.jpg 2000w, puppy-3000.jpg 3000w"
  alt="Puppy with balloons"
/>

Das Seitenverhältnis Ihrer Bilder kann sich auch je nach Art Direction ändern. Sie können beispielsweise ein zugeschnittenes Bild für schmale Ansichten einfügen und das vollständige Bild auf dem Computer anzeigen:

<picture>
  <source media="(max-width: 799px)" srcset="puppy-480w-cropped.jpg" />
  <source media="(min-width: 800px)" srcset="puppy-800w.jpg" />
  <img src="puppy-800w.jpg" alt="Puppy with balloons" />
</picture>

Chrome, Firefox und Safari unterstützen jetzt die Einstellung von width und height für die <source>-Elemente innerhalb eines bestimmten <picture>-Elements:

<picture>
  <source media="(max-width: 799px)" srcset="puppy-480w-cropped.jpg" width="480" height="400" />
  <source media="(min-width: 800px)" srcset="puppy-800w.jpg" width="800" height="400" />
  <img src="puppy-800w.jpg" alt="Puppy with balloons" width="800" height="400" />
</picture>

Anzeigen, eingebettete Inhalte und andere Inhalte, die erst später geladen werden

Bilder sind nicht die einzige Art von Inhalten, die zu Layoutänderungen führen können. Anzeigen, eingebettete Inhalte, iFrames und andere dynamisch eingefügte Inhalte können dazu führen, dass Inhalte, die nach ihnen erscheinen, nach unten verschoben werden, was den CLS erhöht.

Anzeigen sind einer der Hauptverursacher von Layoutverschiebungen im Web. Werbenetzwerke und Publisher unterstützen häufig dynamische Anzeigengrößen. Mit größeren Anzeigen können Sie die Leistung und den Umsatz steigern, da Sie aufgrund höherer Klickraten und mehr Anzeigen, die in der Auktion berücksichtigt werden, mehr Gebote abgeben können. Leider kann dies zu einer suboptimalen Nutzererfahrung führen, da sichtbare Inhalte, die Sie sich ansehen, durch Anzeigen auf der Seite nach unten verschoben werden.

Mit eingebetteten Widgets können Sie portable Webinhalte auf Ihrer Seite einfügen, z. B. Videos von YouTube, Karten von Google Maps und Beiträge aus sozialen Medien. Diese Widgets wissen jedoch oft nicht, wie groß ihre Inhalte sind, bevor sie geladen werden. Daher reservieren Plattformen, die Einbettungen anbieten, nicht immer Platz für ihre Widgets. Das führt zu Layoutverschiebungen, wenn sie schließlich geladen werden.

Die Vorgehensweise ist bei allen ähnlich. Der Hauptunterschied besteht darin, wie viel Kontrolle Sie über die eingefügten Inhalte haben. Wenn diese Inhalte von einem Drittanbieter wie einem Werbepartner eingefügt werden, kennen Sie möglicherweise nicht die genaue Größe der Inhalte, die eingefügt werden, und können auch keine Layoutänderungen in diesen Einbettungen steuern.

Speicherplatz für Inhalte reservieren, die erst später geladen werden

Wenn Sie Inhalte, die erst später geladen werden, in den Inhaltsfluss einfügen, können Layoutverschiebungen vermieden werden, indem Sie im ursprünglichen Layout Platz für sie reservieren.

Eine Möglichkeit besteht darin, eine min-height-CSS-Regel hinzuzufügen, um Platz zu reservieren. Bei responsiven Inhalten wie Anzeigen können Sie auch die CSS-Eigenschaft aspect-ratio verwenden, ähnlich wie Browser dies automatisch für Bilder mit angegebenen Abmessungen tun.

Drei Mobilgeräte mit nur Textinhalt auf dem ersten Gerät, der auf dem zweiten Gerät nach unten verschoben wird. Durch Reservieren von Platz mit einem Platzhalter wie auf dem dritten Gerät wird die Verschiebung verhindert.
Durch das Reservieren von Platz für Anzeigen können Layoutänderungen verhindert werden.

Mithilfe von Medienanfragen können Sie möglicherweise geringfügige Unterschiede bei Anzeigen- oder Platzhaltergrößen bei verschiedenen Formfaktoren berücksichtigen.

Bei Inhalten ohne feste Höhe, z. B. Anzeigen, können Sie möglicherweise nicht genau den erforderlichen Platz reservieren, um die Layoutverschiebung vollständig zu vermeiden. Wenn eine kleinere Anzeige ausgeliefert wird, kann ein Publisher einen größeren Container gestalten, um Layoutänderungen zu vermeiden, oder anhand von Verlaufsdaten die wahrscheinlichste Größe für den Anzeigenblock auswählen. Der Nachteil dieses Ansatzes ist, dass dadurch mehr Weißraum auf der Seite entsteht.

Sie können stattdessen die anfängliche Größe auf die kleinste Größe festlegen, die verwendet werden soll, und eine gewisse Verschiebung für größere Inhalte akzeptieren. Wenn Sie wie bereits vorgeschlagen min-height verwenden, kann das übergeordnete Element bei Bedarf wachsen, während sich die Auswirkungen von Layoutänderungen im Vergleich zur Standardgröße von 0 px eines leeren Elements verringern.

Versuchen Sie, die reservierte Fläche nicht zu minimieren, indem Sie einen Platzhalter anzeigen, wenn beispielsweise keine Anzeige zurückgegeben wird. Das Entfernen des für Elemente vorgesehenen Bereichs kann genauso zu einer hohen CLS führen wie das Einfügen von Inhalten.

Inhalte, die erst später geladen werden, weiter unten im Darstellungsbereich platzieren

Dynamisch eingefügte Inhalte, die sich näher am oberen Rand des Darstellungsbereichs befinden, führen in der Regel zu größeren Layoutänderungen als Inhalte, die weiter unten im Darstellungsbereich eingefügt werden. Das Einfügen von Inhalten an einer beliebigen Stelle im Darstellungsbereich führt jedoch immer noch zu einer gewissen Verschiebung. Wenn Sie keinen Platz für eingeblendete Inhalte reservieren können, empfehlen wir, sie später auf der Seite zu platzieren, um die Auswirkungen auf den CLS zu verringern.

Vermeiden Sie das Einfügen neuer Inhalte ohne Nutzerinteraktion.

Wahrscheinlich haben Sie schon einmal Layoutverschiebungen aufgrund von UI-Elementen erlebt, die beim Laden einer Website oben oder unten im Darstellungsbereich eingeblendet werden. Ähnlich wie bei Anzeigen passiert das häufig bei Bannern und Formularen, die den Rest des Seiteninhalts verschieben:

Dynamische Inhalte ohne reservierten Platz.

Wenn Sie diese Arten von UI-Affordances anzeigen müssen, reservieren Sie im Voraus ausreichend Platz im Darstellungsbereich (z. B. mit einem Platzhalter oder einer Skelett-UI), damit beim Laden keine Inhalte auf der Seite verschoben werden. Alternativ können Sie dafür sorgen, dass das Element nicht Teil des Dokumentflusses ist, indem Sie den Inhalt überlagern, wo dies sinnvoll ist. Weitere Empfehlungen zu diesen Arten von Komponenten finden Sie im Hilfeartikel Best Practices für Cookie-Benachrichtigungen.

In einigen Fällen ist das dynamische Hinzufügen von Inhalten ein wichtiger Bestandteil der Nutzererfahrung. Das kann beispielsweise passieren, wenn Sie weitere Produkte in eine Artikelliste laden oder Livefeedinhalte aktualisieren. Es gibt mehrere Möglichkeiten, unerwartete Layoutänderungen in diesen Fällen zu vermeiden:

  • Ersetzen Sie die alten Inhalte durch die neuen Inhalte in einem Container mit fester Größe oder verwenden Sie ein Karussell und entfernen Sie die alten Inhalte nach der Umstellung. Deaktiviere alle Links und Steuerelemente, bis die Umstellung abgeschlossen ist, um versehentliche Klicks oder Tippaktionen zu vermeiden, während die neuen Inhalte geladen werden.
  • Lassen Sie den Nutzer das Laden neuer Inhalte initiieren, damit er nicht von der Änderung überrascht wird (z. B. mit einer Schaltfläche „Mehr laden“ oder „Aktualisieren“). Wir empfehlen, die Inhalte vor der Nutzerinteraktion vorab zu laden, damit sie sofort angezeigt werden. Zur Erinnerung: Layoutverschiebungen, die innerhalb von 500 Millisekunden nach einer Nutzereingabe auftreten, werden nicht auf die CLS angerechnet.
  • Laden Sie die Inhalte nahtlos außerhalb des Bildschirms und blenden Sie eine Benachrichtigung ein, dass sie verfügbar sind (z. B. mit einer Schaltfläche „Nach oben scrollen“).
Beispiele für das Laden dynamischer Inhalte ohne unerwartete Layoutänderungen von Twitter und der Chloé-Website
Beispiele für das Laden dynamischer Inhalte, ohne dass unerwartete Layoutänderungen auftreten. Links: Livefeedinhalte werden auf Twitter geladen. Rechts: Beispiel für „Mehr laden“ auf der Website von Chloé. Sehen Sie sich an, wie das YNAP-Team die CLS beim Laden weiterer Inhalte optimiert hat.

Animationen

Änderungen an den Werten von CSS-Properties können dazu führen, dass der Browser darauf reagieren muss. Einige Werte wie box-shadow und box-sizing lösen ein Neu-Layout, Malen und Zusammensetzen aus. Wenn Sie die Eigenschaften top und left ändern, kommt es auch zu Layoutänderungen, selbst wenn sich das verschobene Element auf einer eigenen Ebene befindet. Verwenden Sie diese Properties nicht für Animationen.

Andere CSS-Eigenschaften können geändert werden, ohne dass ein Neu-Layout ausgelöst wird. Dazu gehören transform-Animationen, mit denen Elemente verschoben, skaliert, gedreht oder verzerrt werden können.

Zusammengesetzte Animationen mit translate können sich nicht auf andere Elemente auswirken und werden daher nicht auf den CLS angerechnet. Nicht zusammengesetzte Animationen führen auch nicht zu einem Neulayout. Weitere Informationen dazu, welche CSS-Eigenschaften Layoutänderungen auslösen, finden Sie unter Hochleistungsanimationen.

Webschriften

Das Herunterladen und Rendern von Webschriften erfolgt in der Regel auf eine von zwei Arten, bevor die Webschrift heruntergeladen wird:

  • Die Fallback-Schriftart wird durch die Webschriftart ersetzt, was zu einem Flash of Unstyled Text (FOUT) führt.
  • „Unsichtbarer“ Text wird mit der Fallback-Schriftart angezeigt, bis eine Webschriftart verfügbar ist und der Text sichtbar wird (FOIT – Flash of Invisible Text).

Beide Ansätze können zu Layoutänderungen führen. Auch wenn der Text nicht sichtbar ist, wird er mit der Fallback-Schriftart layoutet. Wenn der Webfont geladen wird, verschieben sich der Textblock und die umgebenden Inhalte auf die gleiche Weise wie bei der sichtbaren Schriftart.

Mit den folgenden Tools können Sie das Verrutschen von Text minimieren:

  • font-display: optional kann ein Neulayout vermeiden, da die Webschrift nur verwendet wird, wenn sie zum Zeitpunkt des ursprünglichen Layouts verfügbar ist.
  • Achten Sie darauf, dass die richtige Fallback-Schriftart verwendet wird. Wenn Sie beispielsweise font-family: "Google Sans", sans-serif; verwenden, wird die sans-serif-Fallback-Schriftart des Browsers verwendet, während "Google Sans" geladen wird. Wenn Sie keine Fallback-Schriftart angeben, wird nur font-family: "Google Sans" verwendet. In Chrome ist das die Schriftart „Times“, eine Serifenschrift, die weniger gut zu sans-serif passt.
  • Mit den neuen APIs size-adjust, ascent-override, descent-override und line-gap-override können Sie die Größenunterschiede zwischen dem Fallback-Schriftbild und dem Web-Schriftbild minimieren. Weitere Informationen finden Sie im Beitrag Verbesserte Schrift-Fallbacks.
  • Mit der Font Loading API lässt sich die Zeit verkürzen, die zum Abrufen der erforderlichen Schriftarten benötigt wird.
  • Laden Sie wichtige Webschriftarten mit <link rel=preload> so früh wie möglich. Bei einer vorab geladenen Schriftart ist die Wahrscheinlichkeit höher, dass die erste Darstellung innerhalb des Zeitlimits erfolgt. In diesem Fall kommt es nicht zu einer Layoutverschiebung.

Weitere Best Practices für Schriftarten finden Sie unter Best Practices für Schriftarten.

CLS reduzieren, indem dafür gesorgt wird, dass Seiten für den Back-Forward-Cache infrage kommen

Eine sehr effektive Methode, um CLS-Werte niedrig zu halten, besteht darin, dafür zu sorgen, dass Ihre Webseiten für den Back-/Forward-Cache (bfcache) infrage kommen.

Der bfcache speichert Seiten für kurze Zeit im Browserspeicher, nachdem Sie sie verlassen haben. Wenn Sie zu ihnen zurückkehren, werden sie genau so wiederhergestellt, wie Sie sie verlassen haben. Das bedeutet, dass die vollständig geladene Seite sofort verfügbar ist – ohne Verschiebungen, die normalerweise während des Ladevorgangs aus einem der oben genannten Gründe auftreten können.

Das bedeutet zwar möglicherweise, dass beim ersten Laden der Seite Layoutänderungen auftreten, aber wenn ein Nutzer die Seiten zurückgeht, sieht er nicht wiederholt dieselben Layoutänderungen. Sie sollten die Verschiebungen auch bei der Erstansicht vermeiden. Wenn das nicht vollständig möglich ist, können Sie die Auswirkungen zumindest minimieren, indem Sie sie bei allen bfcache-Navigationen vermeiden.

Die Navigation zwischen vorherigen und nachfolgenden Seiten ist auf vielen Websites üblich. Beispielsweise eine Rückkehr zu einer Inhaltsseite, einer Kategorieseite oder zu Suchergebnissen.

Nach der Einführung in Chrome konnten wir erhebliche Verbesserungen bei der CLS feststellen.

Der bfcache wird standardmäßig von allen Browsern verwendet. Einige Websites können ihn jedoch aus verschiedenen Gründen nicht nutzen. Im Leitfaden zum bfcache finden Sie weitere Informationen dazu, wie Sie Probleme testen und identifizieren, die die Verwendung des bfcache verhindern. So können Sie diese Funktion optimal nutzen und den CLS-Wert Ihrer Website insgesamt verbessern.

Fazit

Wie bereits weiter oben in diesem Leitfaden erwähnt, gibt es eine Reihe von Methoden, um die CLS zu identifizieren und zu verbessern. In Core Web Vitals sind Toleranzen eingebaut. Selbst wenn Sie CLS nicht vollständig beseitigen können, sollten Sie mit einigen dieser Techniken die Auswirkungen reduzieren können. So können Sie hoffentlich innerhalb dieser Limits bleiben und die Nutzerfreundlichkeit Ihrer Website verbessern.