Hier erfahren Sie, wie Sie plötzliche Layoutverschiebungen vermeiden und so die Nutzererfahrung verbessern können.
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 Shifts können Nutzende 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 wieder an der gewünschten Stelle suchen müssen. Dies kommt im Web sehr häufig vor, zum Beispiel beim Lesen von Nachrichten oder dem Klicken auf „Suchen“ oder „In den Warenkorb“ Schaltflächen. 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">
Im Gegensatz zu den anderen Core Web Vitals, bei denen es sich um zeitbasierte Werte handelt, die in Sekunden oder Millisekunden gemessen werden, handelt es sich beim CLS-Wert um einen einheitlosen Wert, der darauf basiert, wie stark sich der Content verschiebt und um welchen Grad es sich handelt.
In diesem Leitfaden beschäftigen wir uns mit der Optimierung häufiger Ursachen für Layoutverschiebungen.
Die häufigsten Ursachen für einen schlechten CLS-Wert sind:
- Bilder ohne Abmessungen.
- Anzeigen, Einbettungen und iFrames ohne Abmessungen.
- Dynamisch eingefügter Content wie Anzeigen, Einbettungen und iFrames ohne Abmessungen.
- Web-Schriftarten
Die Ursachen von Layout Shifts verstehen
Bevor Sie sich mit Lösungen für häufige CLS-Probleme befassen, sollten Sie Ihren CLS-Wert verstehen und wissen, woher die Änderungen kommen.
CLS in Labortools und im Fachgebiet
Es kommt häufig vor, dass Entwickler der Meinung sind, dass der im Chrome UX Report (CrUX) gemessene CLS falsch ist, da er nicht mit dem CLS übereinstimmt, den sie mit den Chrome-Entwicklertools oder anderen Lab-Tools messen. Web Performance Lab-Tools wie Lighthouse zeigen möglicherweise nicht den vollständigen CLS einer Seite, da sie in der Regel einen einfachen Ladevorgang der Seite durchführen, um einige Messwerte zur Webleistung zu messen und eine Orientierungshilfe zu bieten. Allerdings lassen sich mit Lighthouse-Nutzerflüssen Messwerte erfassen, die über die standardmäßige Prüfung des Seitenaufbaus hinausgehen.
CrUX ist das offizielle Dataset des Web Vitals-Programms. Daher wird der CLS über die gesamte Lebensdauer der Seite gemessen und nicht nur während des anfänglichen Seitenaufbaus, der normalerweise von Lab-Tools gemessen wird.
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 Verschiebungen nach dem Laden, die für den Nutzer unerwartet auftreten, können jedoch auch dann eingefügt werden, wenn es keine entsprechende Interaktion gab, z. B. wenn Sie weiter auf der Seite scrollen und Lazy-Loading-Inhalte geladen werden, die zu Verschiebungen führen. Andere häufige Ursachen für CLS nach dem Laden sind Interaktionen von Übergängen, z. B. bei Single-Page-Apps, die länger als den Kulanzzeitraum von 500 Millisekunden dauern.
PageSpeed Insights zeigt sowohl die vom Nutzer wahrgenommenen CLS aus einer URL in der Tabelle „Das passiert bei echten Nutzern“ Abschnitt, und den laborbasierten Last-CLS unter „Leistungsprobleme diagnostizieren“ . Unterschiede zwischen diesen Werten sind wahrscheinlich auf CLS nach dem Laden zurückzuführen.
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">Last-CLS-Probleme 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 unterstützt Lighthouse bei zwei Prüfungen, um mehr Informationen zu Bildern zu liefern, die aufgrund fehlender Breite und Höhe zu CLS führen. Außerdem werden alle Elemente, die sich beim Seitenaufbau verschoben haben, zusammen mit ihrem CLS-Beitrag aufgelistet. Sie können sich diese Audits ansehen, indem Sie nach den CLS-Audits filtern:
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">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 Layout Shift-Wert sowie ein rechteckiges Overlay mit den betroffenen Regionen. Dies ist besonders hilfreich, um mehr Details zu Lade-CLS-Problemen zu erhalten, da dies einfach mit einem Neuladeleistungsprofil repliziert werden kann.
<ph type="x-smartling-placeholder">Layout Shift-Eintrag anzeigt. Wenn Sie auf den Eintrag klicken, können Sie die betroffenen Elemente aufschlüsseln, indem Sie Details wie die Spalte „Verschoben von“ und „verschoben nach“ Einträge in diesem Bild.
CLS-Probleme nach dem Laden identifizieren
Abweichungen zwischen CrUX- und Lighthouse-CLS-Werten weisen häufig auf CLS-Werte nach dem Laden hin. Diese Veränderungen können ohne Felddaten schwer zu finden 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 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.
Als Alternative zur Erweiterung können Sie Ihre Webseite durchsuchen und Layoutverschiebungen mit einem in die Konsole eingefügten Performance Observer aufzeichnen.
Nachdem Sie das Schichtmonitoring eingerichtet haben, können Sie versuchen, alle CLS-Probleme nach dem Laden zu replizieren. CLS tritt oft auf, während der Nutzer durch eine Seite scrollt. Dabei werden Lazy-Loading-Inhalte vollständig geladen, ohne dass Platz für sie reserviert ist. 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 werden als unerwartet gezählt, 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 vor Ort 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 Fehler bei der Leistung beheben. 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 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 was Sie tun können, um sie zu vermeiden.
Bilder ohne Abmessungen
Fügen Sie Ihren Bild- und Videoelementen immer die Größenattribute width und height hinzu. Alternativ können Sie den erforderlichen Speicherplatz über das Preisvergleichsportal aspect-ratio oder einen vergleichbaren Anbieter reservieren. Dieser Ansatz stellt sicher, dass der Browser den richtigen Speicherplatz im Dokument zuteilen kann, während das Bild geladen wird.
<ph type="x-smartling-placeholder">Verlauf der Attribute width und height bei Bildern
In den Anfängen des Webs fügten Entwickler ihren <img>-Tags die Attribute width und height hinzu, um dafür zu sorgen, dass genügend Platz auf der Seite vorhanden war, 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. Diese „Pixel“ würde der Browser eine Fläche von 640 x 360 im Layout der Seite reservieren. 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 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 seiner Breite zu seiner Höhe. Häufig werden diese Zahlen als zwei durch einen Doppelpunkt getrennte Zahlen ausgedrückt, zum Beispiel 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 Practice zum Festlegen der 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">
In allen Browsern wird dann ein Standardseitenverhältnis hinzugefügt, das auf den vorhandenen Attributen width und height 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 einem Bild eine bestimmte Breite (z. B. width: 100%) mitgeteilt wird, wird das Seitenverhältnis zur Berechnung der Höhe verwendet.
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. Firefox zeigt dieses berechnete aspect-ratio-Element nicht im Bereich Inspector an, verwendet es aber für das Layout.
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, 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 Standardwert abweicht, verursacht dies eine geringere Layoutverschiebung als die Standardgröße 0 x 0 eines Bildes ohne angegebene Abmessungen.
Einen fantastischen detaillierten Einblick in das Seitenverhältnis und weitere Überlegungen zu responsiven Bildern finden Sie unter Unterbrechungsfreies 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, damit kein fester Wert für die Bildhöhe verwendet wird.
img {
height: auto;
width: 100%;
}
Wie sieht es mit responsiven Bildern aus?
Bei der Arbeit mit responsiven Bildern definiert srcset die Bilder, zwischen denen der Browser auswählen kann, und die jeweilige Größe. Damit die <img>-Attribute für Breite und Höhe festgelegt werden können, muss für jedes Bild dasselbe Seitenverhältnis verwendet werden.
<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, Einbettungen 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 erscheinen, 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 einbettbaren Widgets können Sie mobile Webinhalte in Ihre Seite einbinden, etwa Videos von YouTube, Karten aus Google Maps und Beiträge in sozialen Medien. Diese Widgets erkennen jedoch häufig nicht, wie groß ihr Inhalt ist, bevor sie geladen werden. Infolgedessen reservieren Plattformen, die Einbettungen anbieten, nicht immer Platz für ihre Widgets, was zu Layoutverschiebungen beim endgültigen Laden führt.
Die Verfahren, mit diesen umzugehen, sind alle ähnlich. Die Hauptunterschiede bestehen darin, wie viel Kontrolle Sie über den Content haben, der eingefügt wird. 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 aufnehmen, können Layout Shifts vermieden werden, indem der Platz für sie im ursprünglichen Layout reserviert wird.
Ein möglicher Ansatz besteht darin, eine min-height-CSS-Regel hinzuzufügen, um Platz zu reservieren oder – z. B. für responsive Inhalte wie Anzeigen – die CSS-Eigenschaft aspect-ratio auf ähnliche Weise zu verwenden, wie Browser sie automatisch für Bilder mit angegebenen Abmessungen verwenden.
<ph type="x-smartling-placeholder">Möglicherweise müssen Sie kleine Unterschiede bei Anzeigen- oder Platzhaltergrößen bei den Formfaktoren mithilfe von Medienabfragen 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 der Publisher einen größeren Container gestalten, um Layoutverschiebungen zu vermeiden, oder die Größe für die Anzeigenfläche anhand der Verlaufsdaten auswählen. Der Nachteil dieser Methode besteht darin, dass auf der Seite mehr Leerräume vorhanden sind.
Sie können stattdessen die anfängliche Größe auf die kleinste Größe festlegen, die verwendet wird, 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.
Später geladene Inhalte 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 eine beliebige Stelle im Darstellungsbereich führt jedoch immer noch zu einer Verschiebung. Wenn Sie keinen Platz für eingefügte Inhalte reservieren können, empfehlen wir, ihn weiter unten auf der Seite zu platzieren, um die Auswirkungen auf den CLS zu reduzieren.
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 geschieht dies häufig bei Bannern und Formularen, die den Rest des Seiteninhalts verschieben:
<ph type="x-smartling-placeholder">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. Im Beitrag Best Practices für Cookie-Hinweise finden Sie weitere Empfehlungen zu diesen Komponenten.
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. Deaktivieren Sie alle Links und Steuerelemente, bis der Übergang abgeschlossen ist, um versehentliches Antippen oder Antippen zu vermeiden, während neue Inhalte geladen werden.
- Bitten Sie den Nutzer, das Laden neuer Inhalte einzuleiten, damit er nicht überrascht wird, z. B. über die Schaltflächen „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 auftreten, 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">Animationen
Bei Änderungen an CSS-Eigenschaftswerten muss der Browser möglicherweise auf diese Änderungen reagieren. Einige Werte, z. B. box-shadow und box-sizing, lösen eine Layoutänderung, Darstellung oder Zusammensetzung 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 das Verwenden von transform-Animationen zum Verschieben, Skalieren, Drehen oder Verzerren von Elementen.
Zusammengesetzte Animationen mit translate haben keine Auswirkungen auf andere Elemente und werden daher nicht auf die CLS angerechnet. Auch nicht zusammengesetzte Animationen führen nicht zu einer Layoutänderung. Weitere Informationen dazu, welche CSS-Eigenschaften Layoutverschiebungen auslösen, finden Sie unter Leistungsstarke Animationen.
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.
- „Unsichtbar“ -Text wird so lange in der Fallback-Schriftart angezeigt, bis eine Webschriftart verfügbar ist und der Text sichtbar wird (FOIT, blitzschnell für unsichtbaren 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: optionalkann eine Layoutänderung vermeiden, da die Webschriftart nur verwendet wird, wenn sie zum Zeitpunkt des anfä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 diesans-serif-Fallback-Schriftart des Browsers verwendet, während"Google Sans"geladen wird. Wird keine Fallback-Schriftart nur mitfont-family: "Google Sans"angegeben, wird die Standardschriftart verwendet. In Chrome ist das „Times“ – eine Serifenschrift, die schlechter als die Standardschriftartsans-serifentspricht. - Minimieren Sie die Größenunterschiede zwischen der Fallback-Schriftart und der Webschrift mit den neuen APIs für
size-adjust,ascent-override,descent-overrideundline-gap-override. Weitere Informationen dazu finden Sie im Beitrag Verbesserte Schriftart-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 sie dem ersten Paint entspricht. In diesem Fall gibt es keine Layoutverschiebungen.
Unter Best Practices für Schriftarten finden Sie weitere 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 nach dem Verlassen des Browsers für kurze Zeit im Arbeitsspeicher. Wenn Sie sie also wieder aufrufen, werden sie genau so wiederhergestellt, wie Sie sie verlassen haben. Das bedeutet, dass die vollständig geladene Seite sofort verfügbar ist – ohne Veränderungen, die beim Laden aus einem der zuvor genannten Gründe normalerweise auftreten.
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 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.
Als wir diese Funktion in Chrome einführen, konnten wir deutliche Verbesserungen bei CLS feststellen.
Der bfcache wird standardmäßig von allen Browsern verwendet, aber einige Websites kommen aus verschiedenen Gründen nicht für den bfcache infrage. 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 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.