Cumulative Layout Shift optimieren

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 Erfassen von Felddaten finden Sie unter CLS-Elemente im Feld messen.

Mit der Chrome-Erweiterung für Web Vitals können Sie den CLS überwachen, während Sie mit einer Seite interagieren. Das ist entweder in einem Pop-up oder in der Console möglich. Dort können Sie über den verschobenen Elementen weitere Details abrufen.

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, während der Nutzer durch eine Seite scrollt, wenn Lazy-Loaded-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 die häufigsten Ursachen für CLS ermittelt haben, können Sie mit dem Nutzerfluss-Modus 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.

Ä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 begannen Entwickler, 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 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.

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 anhand der Attribute 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 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 darf, 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 bzw. den Umsatz steigern, da die Klickraten höher sind und mehr Anzeigen an der Auktion teilnehmen. 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.

Mithilfe von Medienanfragen müssen 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 stylen, 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:

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 beim Hochladen weiterer Produkte in eine Artikelliste oder beim Aktualisieren von Livefeed-Inhalten der Fall sein. 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 im Voraus 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“).

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. Wenn Sie die Eigenschaften top und left ändern, kommt es auch zu Layoutänderungen, auch 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- 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 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 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 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 verschiedene Methoden, um die CLS zu ermitteln 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 diese Limits hoffentlich einhalten und die Nutzerfreundlichkeit Ihrer Website verbessern.