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 Erheben 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 das Schichtmonitoring eingerichtet haben, können Sie versuchen, alle CLS-Probleme nach dem Laden zu replizieren. 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. Eine weitere häufige CLS-Ursache nach dem Laden ist das Verschieben von Inhalten, wenn der Nutzer den Mauszeiger darüber bewegt. Jede Inhaltsänderung während einer dieser Interaktionen gilt als unerwartet, auch wenn sie innerhalb von 500 Millisekunden erfolgt.

Weitere Informationen finden Sie unter Fehler in Layout Shifts 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 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. Andere RUM-Anbieter haben ebenfalls 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

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. Dieser Ansatz stellt sicher, dass der Browser den richtigen Speicherplatz im Dokument zuteilen kann, während das Bild geladen wird.

Ä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 dem Bild erst dann Speicherplatz zugewiesen werden, wenn der Browser mit dem Herunterladen des Bildes beginnt und seine Abmessungen bestimmen kann. Wenn Bilder geladen werden, verschiebt sich der Text auf der Seite nach unten, um Platz für sie zu schaffen, was für den Nutzer verwirrend und frustrierend ist.

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 dies als zwei durch einen Doppelpunkt getrennte Zahlen ausgedrückt (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 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 auf Grundlage der width- und height-Attribute eines Bildes festlegen, können Sie Layoutverschiebungen verhindern, indem Sie diese Attribute für das Bild festlegen und den vorherigen CSS-Code in Ihr Style Sheet aufnehmen.

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

In allen Browsern wird dann ein Standardseitenverhältnis hinzugefügt, das auf den vorhandenen Attributen width und height 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 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 und verwendet eine Quelle im Stil von HTML-Attributen. Firefox zeigt dieses berechnete aspect-ratio-Element nicht im Bereich Inspector an, verwendet es aber für das Layout.

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, verursacht dies nach dem Laden des Bildes immer noch eine Layoutverschiebung. Dadurch wird jedoch sichergestellt, dass das Bildseitenverhältnis auch dann verwendet wird, wenn es verfügbar ist, falls der HTML-Code 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 das Bild in einem Container befindet, können Sie die Größe mit CSS an die Breite des Containers anpassen. 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, Einbettungen und andere spät geladene Inhalte

Bilder sind nicht die einzige Art von Inhalten, die Layoutverschiebungen verursachen 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. Anzeigengrößen steigern die Leistung bzw. den Umsatz aufgrund höherer Klickraten und mehr Anzeigen, die 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 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, was zu Layoutverschiebungen beim endgültigen Laden führt.

Die Vorgehensweise ist bei allen ähnlich. Die Hauptunterschiede bestehen darin, wie viel Kontrolle Sie über den eingefügten Inhalt 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.

Platz für spät geladene Inhalte reservieren

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 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 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 min-height verwenden, können Sie, wie bereits vorgeschlagen, das übergeordnete Element nach Bedarf vergrößern und gleichzeitig die Auswirkungen von Layout Shifts im Vergleich zur Standardgröße von 0 Pixeln eines leeren Elements reduzieren.

Vermeiden Sie es, den reservierten Bereich zu minimieren, indem Sie einen Platzhalter einblenden, 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ü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.

Fügen Sie keine neuen Inhalte ohne Interaktion des Nutzers ein.

Bestimmt haben Sie schon einmal Layoutverschiebungen erlebt, weil die Benutzeroberfläche beim Laden einer Website oben oder unten im Darstellungsbereich eingeblendet wird. Ä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 skeleton-basierten Benutzeroberfläche), damit der Inhalt beim Laden nicht zu unerwarteten Verschiebungen auf der Seite führt. 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. beispielsweise beim Laden weiterer Produkte in eine Artikelliste oder beim Aktualisieren von Livefeedinhalten. 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“).

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, selbst 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 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. Auch nicht zusammengesetzte Animationen führen nicht zu einer Layoutänderung. Weitere Informationen dazu, welche CSS-Properties 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.
• Die Font Loading API kann den Zeitaufwand für das Abrufen der erforderlichen Schriftarten reduzieren.
• 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 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 immer versuchen, die Verschiebungen auch beim anfänglichen Ladevorgang zu vermeiden. Wenn es jedoch schwieriger ist, die Verschiebung vollständig zu beheben, können Sie zumindest die Auswirkungen reduzieren, indem Sie sie bei allen bfcache-Navigationen vermeiden.

Auf vielen Websites wird vorwärts und rückwärts navigiert. Beispiele: Zurückkehren zu einer Inhalts- oder 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 bfcache-Leitfaden finden Sie weitere Informationen zum Testen und Erkennen von Problemen, die die Nutzung des bfcache verhindern. So können Sie sicherstellen, dass Sie diese Funktion voll ausschöpfen und so den CLS-Gesamtwert für Ihre Website 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.