Cumulative Layout Shift optimieren

So vermeiden Sie plötzliche Layoutverschiebungen, um die Nutzerfreundlichkeit zu verbessern

Addy Osmani

Barry Pollard

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

Cumulative Layout Shift (CLS) ist einer der drei Core Web Vitals-Messwerte. Er misst die Instabilität von Inhalten, indem er kombiniert, wie viel sichtbarer Inhalt im Darstellungsbereich verschoben wurde, mit der Distanz, die die betroffenen Elemente zurückgelegt haben.

Layout Shifts können Nutzer ablenken. Stellen Sie sich vor, Sie lesen einen Artikel und plötzlich verschieben sich Elemente auf der Seite. Sie werden abgelenkt und müssen Ihre Leseposition neu finden. 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 störend und frustrierend. Sie treten häufig auf, wenn sichtbare Elemente verschoben werden müssen, weil ein anderes Element plötzlich auf der Seite hinzugefügt oder in der Größe geändert wurde.

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

Im Gegensatz zu den anderen Core Web Vitals, die zeitbasierte Werte in Sekunden oder Millisekunden sind, ist der CLS-Wert ein einheitenloser Wert, der auf einer Berechnung basiert, wie viel Inhalt sich verschiebt und um wie viel.

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

Die häufigsten Ursachen für einen schlechten CLS sind:

• Bilder ohne Abmessungen.
• Anzeigen, Einbettungen und iframes ohne Abmessungen
• Dynamisch eingefügte Inhalte wie Anzeigen, Einbettungen und iFrames ohne Abmessungen.
• Webfonts

Ursachen von Layoutverschiebungen

Bevor Sie sich mit Lösungen für häufige CLS-Probleme befassen, sollten Sie Ihren CLS-Wert und die Ursachen für die Verschiebungen kennen.

CLS in Lab-Tools im Vergleich zum Feld

Häufig sind Entwickler der Meinung, dass der vom Chrome UX Report (CrUX) gemessene CLS-Wert falsch ist, da er nicht mit dem CLS-Wert übereinstimmt, den sie mit den Chrome-Entwicklertools oder anderen Labortools messen. Webleistungstools wie Lighthouse zeigen möglicherweise nicht den vollständigen CLS einer Seite an, da sie in der Regel einen einfachen Seitenaufruf durchführen, um einige Web-Leistungsstatistiken zu messen und einige Hinweise zu geben. Mit Lighthouse-Nutzerflows können Sie jedoch mehr als nur den Standard-Seitenaufruf-Audit messen.

CrUX ist der Google-Datensatz des Web Vitals-Programms. Daher wird CLS über den gesamten Lebenszyklus der Seite hinweg gemessen und nicht nur während des ersten Seitenaufbaus, wie es bei Labortools üblich ist.

Layoutverschiebungen sind beim Laden von Seiten sehr häufig, da alle erforderlichen Ressourcen abgerufen werden, um die Seite zu rendern. Sie können aber auch nach dem ersten Laden auftreten. Viele Layoutverschiebungen nach dem Laden können aufgrund einer Nutzerinteraktion auftreten und werden daher aus dem CLS-Wert ausgeschlossen, da es sich um erwartete Verschiebungen handelt – sofern sie innerhalb von 500 Millisekunden nach dieser Interaktion auftreten.

Andere Verschiebungen nach dem Laden, die für den Nutzer unerwartet sind, können jedoch auch ohne qualifizierende Interaktion auftreten, z. B. wenn Sie weiter auf der Seite scrollen und verzögert geladene Inhalte geladen werden, was zu Verschiebungen führt. Andere häufige Ursachen für CLS nach dem Laden sind Interaktionen von Übergängen, z. B. in Single-Page-Apps, die länger als der Kulanzzeitraum von 500 Millisekunden dauern.

In PageSpeed Insights wird sowohl der von Nutzern wahrgenommene CLS einer URL im Abschnitt „Discover what your real users are experiencing“ (Erfahren Sie, was Ihre Nutzer erleben) als auch der labbasierte Lade-CLS im Abschnitt „Diagnose performance issues“ (Leistungsprobleme diagnostizieren) angezeigt. Unterschiede zwischen diesen Werten sind wahrscheinlich auf CLS nach dem Laden zurückzuführen.

Probleme mit dem CLS beim Laden identifizieren

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

Der Bereich „Leistung“ in den DevTools bietet eine Fülle von Informationen zu Layoutverschiebungen:

Layout Shifts werden im Track Layout Shifts hervorgehoben. Die violette Linie gruppiert Shifts in Shift-Clustern. Die Rauten stehen für einzelne Shifts in diesem Cluster. Die Größe der Raute ist proportional zur Größe der Änderung. So können Sie sich auf die größten Änderungen konzentrieren.

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

Außerdem enthält die Ansicht Zusammenfassung für einen Layout Shift-Datensatz die Startzeit, den Shift-Score und die verschobenen Elemente. Das ist besonders hilfreich, um mehr Details zu CLS-Problemen beim Laden zu erhalten, da diese sich leicht mit einem Profil für die Reload-Leistung reproduzieren lassen.

Außerdem wird auf die Statistik Ursachen für Layoutverschiebungen verwiesen, die im Bereich Statistiken auf der linken Seite angezeigt wird. Dort sehen Sie oben den gesamten CLS-Wert sowie mögliche Gründe für Layoutverschiebungen.

CLS-Probleme nach dem Laden identifizieren

Wenn sich die CLS-Werte von CrUX und Lighthouse unterscheiden, deutet das oft auf CLS nach dem Laden hin. Ohne Felddaten lassen sich solche Veränderungen nur schwer nachvollziehen. Informationen zum Erfassen von Felddaten finden Sie unter CLS-Elemente im Feld messen.

In der Ansicht mit Live-Messwerten des Bereichs „Leistung“ können Sie mit der Seite interagieren und den CLS-Wert beobachten, um Interaktionen zu ermitteln, die große Layout-Shifts verursachen.

Alternativ zu den DevTools können Sie Ihre Webseite aufrufen, während Sie Layoutverschiebungen mit einem Performance Observer aufzeichnen, der in die Konsole eingefügt wurde.

Nachdem Sie die Schichtüberwachung eingerichtet haben, können Sie versuchen, CLS-Probleme nach dem Laden zu reproduzieren. CLS tritt häufig auf, wenn der Nutzer durch eine Seite scrollt und lazy-geladene Inhalte vollständig geladen werden, ohne dass dafür Platz reserviert wurde. Eine weitere häufige Ursache für CLS nach dem Laden ist, dass sich Inhalte verschieben, 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 debuggen.

Nachdem Sie häufige Ursachen für CLS ermittelt haben, können Sie auch den Lighthouse-Modus „Zeitraumbasierter Nutzerfluss“ verwenden, um sicherzustellen, dass typische Nutzerflüsse durch die Einführung von Layoutverschiebungen nicht beeinträchtigt werden.

CLS-Elemente im Feld messen

Die Überwachung von CLS in der Praxis kann sehr hilfreich sein, um festzustellen, unter welchen Umständen CLS auftritt, und die möglichen Ursachen einzugrenzen. Wie die meisten Labortools messen Feldtools nur die Elemente, die sich geändert haben. Das reicht aber in der Regel aus, um die Ursache zu ermitteln. Sie können auch CLS-Feldmessungen verwenden, um zu ermitteln, welche Probleme am dringendsten behoben werden müssen.

Die web-vitals-Bibliothek enthält Attributionsfunktionen, mit denen Sie diese zusätzlichen Informationen erfassen können. Weitere Informationen finden Sie unter Leistung in der Praxis debuggen. Auch andere RUM-Anbieter haben begonnen, diese Daten auf ähnliche Weise zu erheben und zu präsentieren.

Häufige Ursachen für CLS

Sobald Sie die Ursachen für 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 Möglichkeiten zur Vermeidung von CLS 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 Ähnlichem reservieren. So kann der Browser den richtigen Platz im Dokument zuweisen, während das Bild geladen wird.

Verlauf der Attribute width und height für Bilder

In den Anfangstagen des Internets haben Entwickler ihren <img>-Tags width- und height-Attribute hinzugefügt, um sicherzustellen, dass auf der Seite genügend Platz zugewiesen wurde, bevor der Browser mit dem Abrufen von Bildern begann. Dadurch werden Reflow und Neugestaltung minimiert.

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

width und height enthalten in diesem Beispiel keine Einheiten. Mit diesen „Pixel“-Abmessungen wird sichergestellt, dass der Browser im Seitenlayout einen Bereich von 640 × 360 Pixel reserviert. Das Bild würde gestreckt, um diesen Bereich zu füllen, unabhängig davon, ob die tatsächlichen Abmessungen dazu passen.

Als responsives Webdesign eingeführt wurde, ließen Entwickler width und height weg und verwendeten stattdessen CSS, 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. Wenn Bilder geladen werden, wird der Text auf der Seite nach unten verschoben, um Platz für die Bilder zu schaffen. Das kann für Nutzer verwirrend und frustrierend sein.

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 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 das Seitenverhältnis eines Bildes bekannt ist, kann der Browser ausreichend Platz für die Höhe und den zugehörigen Bereich berechnen und reservieren.

Moderne Best Practice zum Festlegen von Bildabmessungen

Da moderne Browser das Standard-Seitenverhä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 oben genannte CSS in Ihr Stylesheet einfügen.

<!-- 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 Standard-Seitenverhältnis basierend auf den vorhandenen width- und height-Attributen des Elements hinzu.

Dabei wird ein Seitenverhältnis auf Grundlage der Attribute width und height berechnet, bevor das Bild geladen wurde. Diese Informationen werden ganz am Anfang der Layoutberechnung bereitgestellt. Sobald für ein Bild eine bestimmte Breite angegeben 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 das HTML verarbeitet wird, und nicht mit einem Standard-User-Agent-Stylesheet (in diesem Beitrag finden Sie weitere Informationen dazu). Daher wird der Wert etwas anders angezeigt. In Chrome wird es beispielsweise so im Bereich „Stile“ des Bereichs „Element“ angezeigt:

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

Safari verhält sich ähnlich und verwendet eine Stilquelle vom Typ HTML-Attribute. Firefox zeigt diesen berechneten aspect-ratio im Bereich Inspector überhaupt nicht an, verwendet ihn aber für das Layout.

Der auto-Teil des vorherigen Codes ist wichtig, da er bewirkt, dass die Bildabmessungen das Standardseitenverhältnis nach dem Herunterladen des Bildes überschreiben. Wenn die Bildabmessungen unterschiedlich sind, kommt es nach dem Laden des Bildes immer noch zu einer Layoutverschiebung. So wird jedoch sichergestellt, dass das Bildseitenverhältnis verwendet wird, sobald es verfügbar ist, falls die HTML-Datei fehlerhaft ist. Auch wenn das tatsächliche Seitenverhältnis vom Standard abweicht, führt es immer noch zu weniger Layoutverschiebungen als die Standardgröße von 0 × 0 eines Bildes ohne angegebene Abmessungen.

Einen ausführlichen Artikel zum Thema Seitenverhältnis mit weiteren Überlegungen zu responsiven Bildern finden Sie unter Jank-free page loading with media aspect ratios.

Wenn sich Ihr Bild in einem Container befindet, können Sie es mit CSS an die Breite des Containers anpassen. Wir legen height: auto; fest, um keinen festen Wert für die Bildhöhe zu verwenden.

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

Was ist mit responsiven Bildern?

Bei responsiven Bildern wird mit srcset festgelegt, zwischen welchen Bildern der Browser auswählen darf und welche Größe die einzelnen Bilder haben. Damit die Attribute für 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. Beispiel: Sie möchten für schmale Viewports einen Ausschnitt eines Bildes einfügen und das vollständige Bild auf dem Desktop 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>

In Chrome, Firefox und Safari können jetzt width und height für die <source>-Elemente innerhalb eines bestimmten <picture>-Elements festgelegt werden:

<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, Einbettungen und andere Inhalte, die erst später geladen werden

Bilder sind nicht die einzigen Inhalte, die Layout Shifts verursachen können. Anzeigen, Einbettungen, iFrames und andere dynamisch eingefügte Inhalte können dazu führen, dass nachfolgende Inhalte nach unten verschoben werden, was den CLS erhöht.

Anzeigen sind einer der größten Verursacher von Layout Shifts im Web. Werbenetzwerke und Publisher unterstützen häufig dynamische Anzeigengrößen. Anzeigengrößen steigern die Leistung und den Umsatz, da höhere Klickraten erzielt werden und mehr Anzeigen an der Auktion teilnehmen. Leider kann dies zu einer suboptimalen Nutzererfahrung führen, da Anzeigen sichtbare Inhalte, die Sie gerade ansehen, auf der Seite nach unten verschieben.

Mit einbettbaren Widgets können Sie portable Webinhalte wie Videos von YouTube, Karten von Google Maps und Beiträge in sozialen Medien auf Ihrer Seite einfügen. 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, was zu Layoutverschiebungen führt, wenn sie schließlich geladen werden.

Die Techniken zum Umgang mit diesen sind alle ähnlich. Der Hauptunterschied besteht darin, wie viel Kontrolle Sie über die eingefügten Inhalte haben. Wenn der Code von einem Drittanbieter wie einem Werbepartner eingefügt wird, kennen Sie möglicherweise nicht die genaue Größe der einzufügenden Inhalte und können auch keine Layoutverschiebungen 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 Contentfluss einfügen, können Sie Layoutverschiebungen vermeiden, indem Sie den Platz dafür im ursprünglichen Layout 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. Browser nutzen diese Eigenschaft automatisch für Bilder mit angegebenen Abmessungen.

Möglicherweise müssen Sie mithilfe von Media-Queries geringfügige Unterschiede bei der Größe von Anzeigen oder Platzhaltern auf verschiedenen Formfaktoren berücksichtigen.

Bei Inhalten, die möglicherweise keine feste Höhe haben, z. B. Anzeigen, können Sie möglicherweise nicht den genauen 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 Layoutverschiebungen zu vermeiden. Alternativ kann er anhand von Verlaufsdaten die wahrscheinlichste Größe für den Anzeigen-Slot auswählen. Der Nachteil dieses Ansatzes ist, dass er die Menge an Leerraum auf der Seite erhöht.

Stattdessen können Sie die Anfangsgröße auf die kleinste Größe festlegen, die verwendet wird, und eine gewisse Verschiebung bei größeren Inhalten in Kauf nehmen. Wenn Sie min-height verwenden, wie oben vorgeschlagen, kann das übergeordnete Element nach Bedarf vergrößert werden. Gleichzeitig werden Layout Shifts im Vergleich zur Standardgröße von 0 px eines leeren Elements reduziert.

Vermeiden Sie es, den reservierten Platz zu minimieren, indem Sie beispielsweise einen Platzhalter einblenden, wenn keine Anzeige zurückgegeben wird. Wenn Sie den für Elemente reservierten Platz entfernen, kann das genauso viel CLS verursachen wie das Einfügen von Inhalten.

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

Dynamisch eingefügte Inhalte, die sich näher am oberen Rand des Darstellungsbereichs befinden, verursachen in der Regel größere Layoutverschiebungen als Inhalte, die weiter unten im Darstellungsbereich eingefügt werden. Wenn Inhalte jedoch an einer beliebigen Stelle im Darstellungsbereich eingefügt werden, kommt es trotzdem zu einer Verschiebung. Wenn Sie keinen Platz für eingefügte Inhalte reservieren können, empfehlen wir, sie weiter unten 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 erlebt, die durch Benutzeroberflächenelemente verursacht wurden, die beim Laden einer Website oben oder unten im Viewport eingeblendet wurden. Ähnlich wie bei Anzeigen passiert das häufig bei Bannern und Formularen, die den restlichen Inhalt der Seite verschieben:

Wenn Sie diese Arten von UI-Elementen anzeigen müssen, reservieren Sie im Voraus ausreichend Platz im Viewport dafür, z. B. mit einem Platzhalter oder einer Skelett-UI. So wird verhindert, dass sich der Content auf der Seite verschiebt, wenn die Elemente geladen werden. Alternativ können Sie dafür sorgen, dass das Element nicht Teil des Dokumentflusses ist, indem Sie die Inhalte überlagern, sofern dies sinnvoll ist. Weitere Empfehlungen zu diesen Arten von Komponenten finden Sie im Beitrag Best Practices für Cookie-Hinweise.

In einigen Fällen ist das dynamische Hinzufügen von Inhalten ein wichtiger Bestandteil der Nutzerfreundlichkeit. Das kann beispielsweise beim Laden weiterer Produkte in eine Liste von Artikeln oder beim Aktualisieren von Live-Feed-Inhalten der Fall sein. Es gibt mehrere Möglichkeiten, unerwartete Layoutverschiebungen 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 dem Übergang. Deaktivieren Sie alle Links und Steuerelemente, bis die Übergangsphase abgeschlossen ist, um versehentliche Klicks oder Berührungen 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, die Inhalte vor der Nutzerinteraktion vorab abzurufen, damit sie sofort angezeigt werden. Zur Erinnerung: Layoutverschiebungen, die innerhalb von 500 Millisekunden nach einer Nutzerinteraktion auftreten, werden nicht auf die CLS angerechnet.
• Laden Sie die Inhalte nahtlos im Hintergrund und blenden Sie dem Nutzer eine Benachrichtigung ein, dass sie verfügbar sind (z. B. mit der Schaltfläche „Zum Seitenanfang scrollen“).

Animationen

Änderungen an CSS-Property-Werten können dazu führen, dass der Browser auf diese Änderungen reagieren muss. Einige Werte, z. B. box-shadow und box-sizing, lösen ein erneutes Layout, Rendern und Compositing aus. Wenn Sie die Eigenschaften top und left ändern, kommt es ebenfalls zu Layoutverschiebungen, auch wenn sich das verschobene Element auf einer eigenen Ebene befindet. Vermeiden Sie Animationen mit diesen Eigenschaften.

Andere CSS-Eigenschaften können geändert werden, ohne dass das Layout neu berechnet wird. Dazu gehört die Verwendung von transform-Animationen zum Übersetzen, 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 erneuten Layout. Weitere Informationen dazu, welche CSS-Eigenschaften Layoutverschiebungen auslösen

Webschriftarten

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

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

Beide Ansätze können Layout Shifts verursachen. Auch wenn der Text unsichtbar ist, wird er mit der Fallback-Schriftart gerendert. Wenn die Web-Schriftart geladen wird, verschieben sich der Textblock und der umgebende Inhalt also genauso wie bei der sichtbaren Schriftart.

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

• font-display: optional kann ein erneutes Layout vermeiden, da die Web-Schriftart nur verwendet wird, wenn sie zum Zeitpunkt des ersten 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 Fallback-Schriftart sans-serif des Browsers verwendet, während "Google Sans" geladen wird. Wenn Sie keine Fallback-Schriftart angeben, indem Sie nur font-family: "Google Sans" verwenden, wird die Standardschriftart verwendet. In Chrome ist das „Times“, eine Serifenschriftart, die weniger gut passt als die Standardschriftart sans-serif.
• Minimieren Sie die Größenunterschiede zwischen der Fallback-Schriftart und der Webschriftart mithilfe der neuen APIs size-adjust, ascent-override, descent-override und line-gap-override, wie im Beitrag Improved font fallbacks beschrieben.
• Mit der Font Loading API lässt sich die Zeit verkürzen, die zum Abrufen erforderlicher Schriftarten benötigt wird.
• Wichtige Webschriftarten sollten so früh wie möglich mit <link rel=preload> geladen werden. Bei einer vorab geladenen Schriftart ist die Wahrscheinlichkeit höher, dass sie für den ersten Paint verwendet wird. In diesem Fall kommt es zu keinem Layout-Shift.

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

CLS reduzieren, indem Sie dafür sorgen, dass Seiten den Back-Forward-Cache verwenden können

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

Der bfcache speichert Seiten für kurze Zeit im Arbeitsspeicher des Browsers. Wenn Sie zu diesen Seiten 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 die Verschiebungen, die normalerweise beim Laden aus einem der oben genannten Gründe auftreten können.

Das bedeutet zwar, dass es beim ersten Laden der Seite möglicherweise immer noch zu Layoutverschiebungen kommt, aber wenn ein Nutzer Seiten durchläuft, werden ihm nicht wiederholt dieselben Layoutverschiebungen angezeigt. Sie sollten immer versuchen, die Verschiebungen auch beim ersten Laden zu vermeiden. Wenn das nicht möglich ist, können Sie zumindest die Auswirkungen verringern, indem Sie sie bei bfcache-Navigationen vermeiden.

Auf vielen Websites wird häufig vorwärts und rückwärts navigiert. Das kann beispielsweise eine Inhaltsseite, eine Kategorieseite oder Suchergebnisse sein.

Als diese Funktion in Chrome eingeführt wurde, konnten wir deutliche Verbesserungen bei CLS feststellen.

Der Back-Forward-Cache wird standardmäßig von allen Browsern verwendet. Einige Websites können ihn jedoch aus verschiedenen Gründen nicht nutzen. Weitere Informationen zum Testen und Ermitteln von Problemen, die die Verwendung von bfcache verhindern, finden Sie im bfcache-Leitfaden. So können Sie diese Funktion optimal nutzen und den CLS-Wert Ihrer Website insgesamt verbessern.

Fazit

Wie bereits in diesem Leitfaden beschrieben, gibt es eine Reihe von Techniken, um CLS zu ermitteln und zu verbessern. Bei Core Web Vitals sind bestimmte Toleranzen vorgesehen. Selbst wenn Sie CLS nicht vollständig vermeiden können, sollten Sie mit einigen dieser Techniken die Auswirkungen reduzieren können. So können Sie hoffentlich die Grenzwerte einhalten und die Nutzerfreundlichkeit Ihrer Website verbessern.