Cumulative Layout Shift optimieren

Hier erfahren Sie, wie Sie plötzliche Layoutverschiebungen vermeiden und so die Nutzererfahrung verbessern können.

Der Cumulative Layout Shift (CLS) ist einer der drei Core Web Vitals-Messwerte. Die Instabilität von Inhalten wird gemessen, indem der Umfang des sichtbaren Inhalts, der sich im Darstellungsbereich verschoben hat, mit der Entfernung kombiniert wird, die die betroffenen Elemente bewegt haben.

Layoutänderungen können Nutzer ablenken. Stellen Sie sich vor, Sie haben mit dem Lesen eines Artikels begonnen, als plötzlich Elemente sich auf der Seite verschieben, Sie verwirrt werden und Sie wieder an der richtigen Stelle suchen müssen. 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 Erlebnisse sind visuell verwirrend und frustrierend. Sie treten häufig auf, wenn sichtbare Elemente verschoben werden müssen, weil plötzlich ein anderes Element zur Seite hinzugefügt oder ihre Größe geändert wurde.

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

<ph type="x-smartling-placeholder"></ph>

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 einen schlechten CLS-Wert sind:

• Bilder ohne Abmessungen
• Anzeigen, eingebettete Inhalte und iFrames ohne Abmessungen.
• Dynamisch eingefügte Inhalte wie Anzeigen, Einbettungen und Iframes ohne Dimensionen.
• Web-Schriftarten

Ursachen für Layoutänderungen

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

CLS in Labortools und im Fachgebiet

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 nur eine einfache Seite laden, um einige Web-Leistungsmesswerte zu erfassen und einige Hinweise zu geben. Mit Lighthouse-Nutzerflüssen können Sie jedoch über die Standardprüfung des Seitenladevorgangs 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.

Layout Shifts treten sehr häufig beim Seitenaufbau auf, da alle erforderlichen Ressourcen abgerufen werden, um die Seite anfänglich zu rendern. Layout Shifts können aber auch nach dem anfänglichen Ladevorgang auftreten. Viele Verschiebungen nach dem Laden können aufgrund einer Nutzerinteraktion auftreten und werden daher vom CLS-Wert ausgeschlossen, da es sich um erwartete Verschiebungen handelt – vorausgesetzt, sie erfolgen innerhalb von 500 Millisekunden nach dieser Interaktion.

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 CLS nach dem Laden zurückzuführen.

CLS-Probleme beim Laden identifizieren

Wenn die CrUX- und Lighthouse-CLS-Werte von PageSpeed Insights weitgehend übereinstimmen, weist das in der Regel darauf hin, dass ein Lade-CLS-Problem 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 sich diese Audits ansehen, indem Sie nach den CLS-Audits filtern:

Im Bereich Leistung in den Entwicklertools werden im Bereich Experience auch Layout Shifts hervorgehoben. Die Ansicht Zusammenfassung für einen Layout Shift-Eintrag enthält den kumulativen Wert für die Layoutverschiebung sowie ein Rechteck-Overlay, das die betroffenen Bereiche zeigt. 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.

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 können diese Verschiebungen schwierig zu ermitteln sein. Informationen zum Erheben von Felddaten finden Sie unter CLS-Elemente im Feld messen.

Mit der Web Vitals-Chrome-Erweiterung können Sie den CLS beobachten, während Sie mit einer Seite interagieren – entweder in einem Heads-up-Display oder in der Konsole. Dort finden Sie weitere Details über die verschobenen Elemente.

Alternativ zur Verwendung der Erweiterung 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. Eine weitere häufige CLS-Ursache nach dem Laden ist das Verschieben von Inhalten, wenn der Nutzer den Mauszeiger darüber bewegt. Content-Verschiebungen während einer dieser Interaktionen gelten als unerwartet, selbst wenn sie innerhalb von 500 Millisekunden erfolgen.

Weitere Informationen finden Sie unter Fehler in Layout Shifts beheben.

Nachdem Sie häufige Ursachen für CLS ermittelt haben, können Sie mithilfe des Nutzerflussmodus für Zeitspannen von Lighthouse auch dafür sorgen, dass typische Nutzerflüsse nicht durch Layoutverschiebungen zurückgehen.

CLS-Elemente im Feld messen

Die Überwachung von CLS in der Praxis kann von unschätzbarem Wert sein, um festzustellen, unter welchen Umständen CLS auftritt, und um die möglichen Ursachen einzugrenzen. Wie die meisten Labortools messen auch Feldtools nur die Elemente, die verschoben wurden. Dies liefert jedoch normalerweise genügend Informationen, um die Ursache zu identifizieren. Sie können auch CLS-Feldmessungen verwenden, um festzustellen, welche Probleme die höchste Priorität haben.

Die Bibliothek web-vitals verfügt über Attributionsfunktionen, mit denen Sie diese zusätzlichen Informationen erfassen können. Weitere Informationen finden Sie unter Leistung vor Ort analysieren. Auch andere RUM-Anbieter haben damit begonnen, diese Daten auf ähnliche Weise zu erheben und zu präsentieren.

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 zeigen wir Ihnen einige der häufigsten Gründe für CLS und wie Sie sie vermeiden können.

Bilder ohne Abmessungen

Fügen Sie Ihren Bild- und Videoelementen immer die Größenattribute width und height hinzu. 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.

Ä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 würde der Umbruch und das Layout minimiert werden.

<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 würde so gestreckt werden, dass es in diesen Raum passt, unabhängig davon, ob die tatsächlichen Abmessungen mit ihm übereinstimmen.

Als responsives Webdesign eingeführt wurde, mussten Entwickler width und height weglassen und stattdessen CSS verwenden, um die Größe von Bildern anzupassen:

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 ermitteln kann. Während Bilder geladen werden, wird der Text auf der Seite nach unten verschoben, um Platz für sie zu schaffen. Das führt zu einer verwirrenden und frustrierenden Nutzererfahrung.

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.

Das heißt, wenn wir eine der Dimensionen kennen, kann auch 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 ausreichend Platz für die Höhe und die entsprechende Fläche berechnen und reservieren.

Moderne Best Practices für die Bildabmessungen

Da moderne Browser das Standardseitenverhältnis von Bildern auf der Grundlage eines width und height des Bilds haben, können Sie Layout Shifts verhindern, indem Sie wenn Sie diese Attribute für das Bild festlegen und den vorherigen CSS-Code in Ihren .

<!-- 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.

Dadurch wird anhand der Attribute width und height das Seitenverhältnis berechnet, bevor das Bild geladen wird. Diese Informationen werden 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 berechnet, während der HTML-Code verarbeitet wird, und nicht mit einem standardmäßigen User-Agent-Style-Sheet. In diesem Beitrag erfährst du mehr über die Gründe. Daher wird der Wert etwas anders angezeigt. Chrome zeigt dies beispielsweise im Abschnitt „Stile“ des Bedienelements „Element“ so an:

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

Safari verhält sich ähnlich, wobei eine Stilquelle für HTML-Attribute verwendet wird. In Firefox wird diese berechnete aspect-ratio im Bereich Inspector nicht angezeigt, aber für das Layout verwendet.

Der auto-Teil des vorherigen Codes ist wichtig, da er dazu führt, dass die Bildabmessungen das Standardseitenverhältnis überschreiben, nachdem das Bild heruntergeladen wurde. 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 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 × 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 einen festen Wert für die Bildhöhe zu vermeiden.

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"
/>

Deine Bilder können sich auch je nach Art Direction. Sie können beispielsweise einen zugeschnittenen Screenshot eines Bildes hinzufügen, Darstellungsbereiche und zeigen das vollständige Bild auf dem Desktop an:

<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>

In Chrome, Firefox und Safari werden jetzt die Einstellungen width und height auf der <source>-Elemente innerhalb eines gegebenen <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 spät geladene Inhalte

Bilder sind nicht die einzige Art von Inhalten, die Layoutverschiebungen verursachen können. Anzeigen, Einbettungen, iFrames und andere dynamisch eingefügte Inhalte können dazu führen, dass Inhalte angezeigt werden, nachdem sie nach unten verschoben wurden, wodurch sich der CLS erhöht.

Anzeigen tragen am meisten zu Layout Shifts im Web bei. Werbenetzwerke und Publisher unterstützen häufig dynamische Anzeigengrößen. Anzeigengrößen steigern die Leistung bzw. den Umsatz aufgrund höherer Klickraten und mehr Anzeigen, die an der Auktion teilnehmen. Leider kann dies die Nutzererfahrung beeinträchtigen, da Anzeigen die sichtbaren Inhalte, die Sie sich gerade ansehen, nach unten verschieben.

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 erkennen jedoch häufig nicht, wie groß ihr Inhalt ist, 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 Verfahren, mit diesen umzugehen, sind alle ähnlich. Die Hauptunterschiede bestehen darin, wie viel Kontrolle Sie über den eingefügten Inhalt haben. Wenn sie von einem Drittanbieter, z. B. einem Werbepartner, eingefügt wird, kennen Sie möglicherweise nicht die genaue Größe des Contents und können auch keine Layoutverschiebungen innerhalb dieser Einbettungen steuern.

Platz für spät geladene Inhalte reservieren

Wenn Sie spät ladenden Inhalt in den Inhaltsfluss einbinden, können Layout Shifts vermieden werden, indem der Platz für sie im ursprünglichen Layout reserviert wird.

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.

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

Bei Content, der möglicherweise keine feste Höhe hat, z. B. Anzeigen, können Sie möglicherweise nicht genau den Platz reservieren, der erforderlich ist, um Layoutverschiebungen 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 Platzes für Elemente kann genauso viele CLS verursachen wie das Einfügen von Inhalten.

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

Dynamisch eingefügter Inhalt näher am oberen Rand des Darstellungsbereichs führt in der Regel zu größeren Layoutverschiebungen als Inhalt, der weiter unten in den Darstellungsbereich eingefügt wird. 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 dies häufig bei Bannern und Formularen, die den Rest des Seiteninhalts verschieben:

Wenn Sie diese Arten von UI-Angeboten anzeigen müssen, reservieren Sie dafür vorab ausreichend Platz im Darstellungsbereich (z. B. mithilfe eines Platzhalters oder einer skeletonbasierten Benutzeroberfläche), damit der Inhalt beim Laden nicht zu unerwarteten Verschiebungen auf der Seite führt. Stellen Sie alternativ sicher, dass das Element nicht Teil des Dokumentflusses ist, indem Sie den Inhalt dort ü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. beispielsweise beim Laden weiterer Produkte in eine Artikelliste oder beim Aktualisieren von Livefeedinhalten. Es gibt mehrere Möglichkeiten, in diesen Fällen unerwartete Layoutverschiebungen zu vermeiden:

• Ersetzen Sie den alten Inhalt durch den neuen Inhalt in einem Container mit fester Größe oder verwenden Sie ein Karussell und entfernen Sie den alten Inhalt nach dem Übergang. 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“). Es wird empfohlen, den Content vor der Nutzerinteraktion vorab abzurufen, damit er sofort angezeigt wird. Zur Erinnerung: Layoutverschiebungen, die innerhalb von 500 Millisekunden nach Nutzereingabe erfolgen, werden nicht beim CLS berücksichtigt.
• Sie können Inhalte nahtlos außerhalb des Bildschirms laden und dem Nutzer einen Hinweis einblenden, dass er verfügbar ist (z. B. mit einer Schaltfläche zum Scrollen nach oben).

<ph type="x-smartling-placeholder">

</ph>

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, ein Neu-Paint und ein Neu-Composite aus. Das Ändern der Eigenschaften top und left führt auch zu Layoutverschiebungen, auch wenn sich das zu verschiebende Element auf einer eigenen Ebene befindet. Vermeiden Sie Animationen mit diesen Eigenschaften.

Andere CSS-Eigenschaften können geändert werden, ohne dass Layoutänderungen ausgelöst werden. Dazu gehört die Verwendung von transform-Animationen zum Verschieben, Skalieren, Drehen oder Verzerren von Elementen.

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-Properties Layoutänderungen auslösen, finden Sie unter Hochleistungsanimationen.

Web-Schriftarten

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

• Die Fallback-Schriftart wird mit der Webschriftart ausgetauscht, wodurch ein Flash of Unstyled Text (FOUT) ausgelöst wird.
• „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 Layoutverschiebungen verursachen. Selbst wenn der Text nicht sichtbar ist, wird er mithilfe der Fallback-Schriftart dargestellt. Wenn die Webschriftart geladen wird, verschieben sich der Textblock und der umgebende Inhalt auf die gleiche Weise wie die sichtbare Schriftart.

Die folgenden Tools helfen Ihnen dabei, Textverschiebungen zu 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- und dem Web-Schriftschnitt 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 fehlerfrei 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 sichergestellt wird, dass die Seiten für den bfcache infrage kommen

Eine äußerst effektive Methode, um die 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.

Dies bedeutet zwar möglicherweise immer noch, dass beim anfänglichen Seitenaufbau Layoutverschiebungen auftreten, aber wenn ein Nutzer durch Seiten zurückkehrt, werden nicht wiederholt dieselben Layoutverschiebungen angezeigt. Sie sollten die Verschiebungen auch bei der Erstansicht vermeiden. Wenn das nicht vollständig möglich ist, können Sie die Auswirkungen zumindest verringern, indem Sie sie bei allen bfcache-Navigationen vermeiden.

Die Navigation zwischen vorherigen und nachfolgenden Seiten ist auf vielen Websites üblich. Beispielsweise eine Rückkehr zur Inhaltsseite, zu einer Kategorieseite oder zu den 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 die CLS-Gesamtbewertung Ihrer Website verbessern.

Fazit

Wie weiter oben in diesem Leitfaden beschrieben, gibt es eine Reihe von Techniken zum Identifizieren und Verbessern von CLS. Core Web Vitals verfügt über bestimmte Vorgaben. Auch wenn Sie CLS nicht vollständig eliminieren können, sollten Sie mit einigen dieser Methoden die Auswirkungen reduzieren. Auf diese Weise können Sie diese Grenzen hoffentlich einhalten und die Nutzererfahrung Ihrer Website verbessern.