Was ist CLS? Kumulative Layoutverschiebung (CLS)

Was ist CLS?

CLS Messen Sie alles, was während des Seitenlebenszyklus passiertUnfallDie größte Folge von Layout-OffsetsLayout-Shift-Score.

Tritt immer dann auf, wenn sich die Position eines sichtbaren Elements von einem gerenderten Frame zum nächsten ändert.Layout-Offset .

Eine Reihe von Layout-Verschiebungen, auch genanntSitzungsfenster, bezieht sich auf eine oder mehrere einzelne Layoutverschiebungen, die in schneller Folge erfolgen, wobei die einzelnen Verschiebungen weniger als 1 Sekunde voneinander entfernt sind und das gesamte Fenster maximal 5 Sekunden dauert.

Die größte Kette bezieht sich auf das Sitzungsfenster mit der größten Gesamtpunktzahl aller Layoutverschiebungen innerhalb des Fensters.

Zuvor hat CLS die Ereignisse gemessen, die während des gesamten Seitenlebenszyklus auftraten.Alle Einzellayout-Shift-ErgebnisseUm zu sehen, welche Tools noch Messfunktionen in ihrer ursprünglichen Form bieten, sieheWeiterentwicklung des kumulativen Layout-Offsets im Web-Toolset .

Was gilt als gutes CLS-Ergebnis?

Um eine gute Benutzererfahrung zu bieten, sollten Websites versuchen, den CLS-Score innerhalb von0.1 Um sicherzustellen, dass Sie das empfohlene Ziel für die meisten Ihrer Benutzer erreichen, ist ein guter Messschwellenwert75. Perzentilund dieser Schwellenwert gilt sowohl für mobile als auch für Desktop-Geräte

Weitere Informationen zur Forschung und Methodik hinter diesen empfohlenen Werten finden Sie unter:Definieren Sie Metrikschwellenwerte für zentrale Webmetriken

Details zur Layoutverschiebung

Layout-Offsets werden bestimmt durchAPI für LayoutinstabilitätDefiniert, sofern die Startposition des Elements im visuellen Bereich sichtbar ist (z.B. befindet sich das Element im StandardSchreibmodusDie API meldet, dass, wenn die oberen und linken Positionen der Layoutverschiebung Einträge. Solche Elemente werden berücksichtigtInstabile Elemente.

Beachten Sie, dass nur Änderungen an der Startposition eines vorhandenen Elements als Layoutverschiebung gelten. Das Hinzufügen eines neuen Elements zum DOM oder die Größenänderung eines vorhandenen Elements zählt nicht als Layoutverschiebung, sofern die Änderung nicht die Startposition anderer sichtbarer Elemente verändert.

Layout-Shift-Score

Der Browser berechnetLayout-Shift-Score, es betrachtet die Größe des sichtbaren Bereichs und den sichtbaren Bereich zwischen zwei gerenderten Frames.Instabile ElementeDer Layout-Shift-Score ist das Produkt zweier Maße dieser Verschiebung:AuswirkungswertUndDistanzwertung(Beide werden unten definiert).
Layout-Shift-Score = Aufprall-Score * Distanz-Score

Auswirkungswert

AuswirkungswertMessungInstabile ElementeDie Auswirkung auf den sichtbaren Bereich zwischen den Frames.

Vorheriger FrameUndAlle aktuellen FramesInstabile ElementeDer eingestellte sichtbare Bereich (der Teil des gesamten sichtbaren Bereichs) ist der aktuelle FrameAuswirkungswert.

In der obigen Abbildung belegt ein Element die Hälfte des sichtbaren Bereichs in einem Frame. Im nächsten Frame verschiebt sich das Element um 25% der Höhe des sichtbaren Bereichs nach unten. Das rot gepunktete Rechteck stellt den sichtbaren Bereich des Elements in den beiden Frames dar. In diesem Beispiel belegt der Bereich 75% des gesamten sichtbaren Bereichs, sodass seinAuswirkungswertbeträgt 0,75.

Distanzwertung

Der andere Teil der Layout-Shift-Score-Berechnung misst, wie weit sich das instabile Element im Verhältnis zum Ansichtsfenster verschoben hat.DistanzwertungBezieht sich auf alleInstabile ElementeDie maximale zurückgelegte Distanz (horizontal oder vertikal) in einem Frame geteilt durch die größte Abmessung des Ansichtsfensters (Breite oder Höhe, je nachdem, welche größer ist).

Im obigen Beispiel ist die größte Ansichtsfensterdimension die Höhe, und das instabile Element wird um 25% der Ansichtsfensterhöhe verschoben, alsoDistanzwertungbeträgt 0,25.

In diesem BeispielAuswirkungswertbeträgt 0,75,Distanzwertungist 0,25, alsoLayout-Shift-Scorebeträgt 0,75 * 0,25 = 0,1875.

Zunächst basiert der Layout-Shift-Score nur aufAuswirkungswertFühren Sie Berechnungen durch.DistanzwertungDadurch soll vermieden werden, dass große Elemente bei kleinen Verschiebungen übermäßig bestraft werden.

Das nächste Beispiel veranschaulicht die Auswirkung des Hinzufügens von Inhalten zu einem vorhandenen Element auf den Layout-Shift-Score:

Die Schaltfläche „Klick mich an!“ ist an der Unterseite des grauen Felds mit schwarzem Text angebracht und drückt das grüne Feld mit weißem Text nach unten (und teilweise aus dem sichtbaren Bereich heraus).

In diesem Beispiel ändert sich die Größe des grauen Kastens, aber die Startposition bleibt unverändert. Der graue Kasten ist also keinInstabile Elemente.

Die Schaltfläche „Klick mich!“ befand sich ursprünglich nicht im DOM, daher hat sich ihre Startposition nicht geändert.

Die Ausgangsposition der grünen Box ändert sich zwar, aber da ein Teil der grünen Box bereits außerhalb des sichtbaren Bereichs liegt,AuswirkungswertDer unsichtbare Bereich wird nicht berücksichtigt. Die Menge der sichtbaren Bereiche der grünen Kästchen in den beiden Frames (angezeigt durch das rot gestrichelte Rechteck) entspricht der Fläche des grünen Kästchens im ersten Frame, die 50% des sichtbaren Bereichs beträgt.Auswirkungswertbeträgt 0,5.

DistanzwertungAngezeigt durch den violetten Pfeil. Die Entfernung, um die sich das grüne Kästchen nach unten bewegt, beträgt ungefähr 14% des sichtbaren Bereichs, alsoDistanzwertungbeträgt 0,14.

Der Layout-Verschiebungsanteil beträgt 0,5 x 0,14 = 0,07.

Das letzte Beispiel veranschaulicht mehrereInstabile ElementeSituation:

Im ersten Frame oben sind vier Ergebnisse einer API-Anfrage nach Tiernamen alphabetisch sortiert. Im zweiten Frame werden der sortierten Liste weitere Ergebnisse hinzugefügt.

Die Startposition des ersten Listenelements („Katze“) hat sich zwischen den beiden Frames nicht geändert und ist daher stabil. Ebenso befanden sich die neu hinzugefügten Elemente zuvor nicht im DOM, sodass sich ihre Startpositionen nicht geändert haben. Die Startpositionen der Elemente „Hund“, „Pferd“ und „Zebra“ haben sich jedoch alle geändert und sind daher stabil.Instabile Elemente.

Ebenso stellt das rot gepunktete Rechteck diese drei darInstabile ElementeDer Bereich des vorherigen und nächsten Frames nimmt in diesem Beispiel etwa 38% des sichtbaren Bereichs ein (Auswirkungswertbeträgt 0,38).

Pfeil zeigtInstabile ElementeDie Verschiebungsdistanz relativ zur Startposition. Das durch den blauen Pfeil dargestellte „Zebra“-Element weist die größte Verschiebungsdistanz auf, die etwa 30% der Höhe des sichtbaren Bereichs beträgt.Distanzwertungbeträgt 0,3.

Der Layout-Shift-Score beträgt 0,38 x 0,3 = 0,1172.

Erwartete vs. unerwartete Layoutverschiebung

Eine Layoutverschiebung ist nicht immer schlecht. Tatsächlich ändern viele dynamische Webanwendungen häufig die Startposition von Seitenelementen.

Vom Benutzer initiierte Layoutverschiebungen

Layoutänderungen sind nur dann problematisch, wenn der Benutzer sie nicht erwartet. Anders ausgedrückt: Layoutänderungen, die als Reaktion auf eine Benutzerinteraktion (Klicken auf einen Link, Tippen auf eine Schaltfläche, Eingabe in ein Suchfeld usw.) auftreten, sind im Allgemeinen in Ordnung, vorausgesetzt, die Änderung erfolgt zeitnah genug an der Interaktion, sodass der Benutzer den Kontext klar erkennen kann.

Wenn beispielsweise eine Benutzerinteraktion eine Netzwerkanfrage auslöst, deren Bearbeitung einige Zeit in Anspruch nehmen kann, ist es besser, sofort Platz zu schaffen und einen Ladeindikator anzuzeigen, um störende Layoutverschiebungen während der Bearbeitung der Anfrage zu vermeiden. Wenn Benutzer nicht bemerken, dass etwas geladen wird oder nicht wissen, wann die Ressource fertig ist, versuchen sie möglicherweise, während der Wartezeit auf andere Inhalte zu klicken.

Layoutänderungen, die innerhalb von 500 Millisekunden nach der Benutzereingabe erfolgen, werden mithadRecentInputFlag, um diese Offsets von Berechnungen auszuschließen.

Hinweis: Das Flag hadRecentInput gilt nur für einzelne Eingabeereignisse wie Berührungen, Klicks oder Tastendrücke. Kontinuierliche Interaktionen wie Scrollen, Ziehen oder Pinch-to-Zoom-Gesten zählen nicht als „letzte Eingabe“. Weitere Informationen finden Sie unterLayout-Instabilitätsspezifikation.

Animationen und Übergänge

Gut gemachte Animationen und Übergänge sind eine hervorragende Möglichkeit, Seiteninhalte zu aktualisieren, ohne den Nutzer zu überraschen. Plötzliche und unerwartete Änderungen im Seiteninhalt führen fast immer zu einer negativen Nutzererfahrung. Wenn sich Inhalte jedoch allmählich und natürlich von einer Position zur nächsten bewegen, hilft dies den Nutzern oft, die aktuelle Situation besser zu verstehen und sie durch die Änderungen zwischen den Zuständen zu führen.

CSS verwandelnMit der Eigenschaft können Sie ein Element animieren, ohne eine Layoutverschiebung auszulösen:

• Verwenden Sie stattdessen transform: scale() und passen Sie die Eigenschaften für Höhe und Breite an.
• Wenn Sie das Element verschieben müssen, können Sie stattdessen transform: translate() verwenden und die Eigenschaften oben, rechts, unten oder links anpassen.

So messen Sie CLS

CLS kannLaborMessen odertatsächlichGemessen und einsetzbar in folgenden Werkzeugen:

Hinweis: Labs-Tools laden Seiten üblicherweise in einer synthetischen Umgebung und können daher nur Layoutverschiebungen messen, die während des Seitenladevorgangs auftreten. Daher kann der von Labs-Tools für eine bestimmte Seite gemeldete CLS-Wert niedriger sein als der tatsächliche Wert, den reale Benutzer erfahren.

Messwerkzeuge

• Bericht zur Chrome-Benutzererfahrung
• PageSpeed Insights Tool zur Messung der Webseitengeschwindigkeit
• Search Console (Bericht zu zentralen Webmetriken)
• Web-Vitals-JavaScript-Bibliothek

Laborwerkzeuge

• Chrome-Entwicklertools
• Leuchtturm
• WebPageTest, Tool zum Testen der Webleistung

Messen von CLS in JavaScript

Um CLS in JavaScript zu messen, können Sie verwendenAPI für LayoutinstabilitätDas folgende Beispiel zeigt die Erstellung einesLeistungsbeobachterum auf unerwartete Layout-Shift-Einträge zu warten, die Einträge nach Sitzung zu gruppieren, den maximalen Sitzungswert aufzuzeichnen und den Datensatz zu aktualisieren, wenn sich der maximale Sitzungswert ändert.
sei clsValue = 0;
let clsEntries = [];
lass Sitzungswert = 0;
let sessionEntries = [];
neuer PerformanceObserver((Eintragsliste) => {
für (const Eintrag von entryList.getEntries()) {
// Nur Layout-Offsets ohne das Flag der aktuellsten Benutzereingabe zählen.
if (!entry.hadRecentInput) {
const ersterSitzungseintrag = Sitzungseinträge[0];
const letzterSitzungseintrag = Sitzungseinträge[Sitzungseinträge.Länge - 1];
// Wenn die Zeit zwischen dem Eintrag und dem vorherigen Eintrag weniger als 1 Sekunde beträgt und
// Wenn das Zeitintervall zwischen dem ersten Eintrag und der Sitzung weniger als 5 Sekunden beträgt, dann der Eintrag
// In die aktuelle Sitzung einschließen. Andernfalls eine neue Sitzung starten.
wenn (Sitzungswert &&
Eintrag.Startzeit - letzterSitzungseintrag.Startzeit < 1000 &&
entry.startTime - ersterSitzungseintrag.startTime < 5000) {
Sitzungswert += Eintragswert;
sessionEntries.push(Eintrag);
} anders {
Sitzungswert = Eintrag.Wert;
sessionEntries = [Eintrag];
}
// Wenn der aktuelle Sitzungswert größer als der aktuelle CLS-Wert ist,
// Aktualisieren Sie dann CLS und die zugehörigen Einträge.
if (Sitzungswert > Sitzungswert) {
clsValue = Sitzungswert;
clsEntries = Sitzungseinträge;
// Protokollieren Sie den aktualisierten Wert (und seine Einträge) in der Konsole.
console.log('CLS:', clsValue, clsEntries)
}
}
}
}).observe({Typ: 'Layout-Shift', gepuffert: true});

Achtung: Der obige Code veranschaulicht die grundlegende Methode zur Berechnung und Aufzeichnung von CLS. Um CLS jedoch genau zu messen undBericht zur Chrome-Benutzererfahrung Wenn der Messwert mit dem Wert in (CrUX) übereinstimmt, ist die Messung komplizierter. Weitere Details finden Sie unten:

In den meisten Fällen ist der aktuelle CLS-Wert beim Entladen einer Seite der endgültige CLS-Wert für diese Seite. Es gibt jedoch einige wichtige Ausnahmen:

In den folgenden Abschnitten werden die Unterschiede zwischen den von der API gemeldeten Daten und der Berechnung der Metriken aufgeführt.

Unterschiede zwischen Indikatoren und APIs

• Wenn die Seite im Hintergrund geladen wird oder in den Hintergrund verschoben wird, bevor der Browser etwas malt, sollte die Seite keine CLS-Werte melden.
• Wenn die Seite erfolgreich istRoundtrip-CacheWenn die Seite wiederhergestellt wird, sollte der CLS-Wert für diese Seite auf Null zurückgesetzt werden, da sich der Seitenbesuch für den Benutzer in einer anderen Art und Weise anfühlt.
• Die API meldet keine Layout-Shift-Einträge basierend auf Offsets innerhalb des Iframes. Um CLS korrekt zu messen, sollten diese Offsets jedoch berücksichtigt werden. Untergeordnete Frames können die API verwenden, um diese Offset-Layout-Shift-Einträge an den übergeordneten Frame zu melden fürPolymerisation.

Da CLS den gesamten Seitenlebenszyklus misst, weist diese Metrik neben den oben genannten Ausnahmen einige zusätzliche Komplexitäten auf:

• Benutzer dürfensehrEin Tab bleibt über einen längeren Zeitraum (Tage, Wochen, Monate) geöffnet. Tatsächlich schließt der Benutzer den Tab möglicherweise nie.
• Auf mobilen Betriebssystemen führen Browser im Allgemeinen keine Rückrufe zum Entladen von Seiten für Hintergrundregisterkarten aus, da dies die Meldung eines „endgültigen“ Werts erschweren würde.

Um diese Situationen zu bewältigen, sollten Sie CLS melden, wenn sich die Seite im Hintergrund befindet, auch wenn die Seite entladen wird (SichtbarkeitsänderungsereignisDas Analysesystem, das die Daten empfängt, muss am Backend den endgültigen CLS-Wert berechnen.

Anstatt sich alle diese Fälle merken und selbst bearbeiten zu müssen, können EntwicklerWeb-Vitals-JavaScript-BibliothekUm CLS zu messen, behandelt die Bibliothek alle oben genannten Fälle selbst:

importiere {getCLS} von „web-vitals“;
// In allen Fällen, in denen CLS gemeldet werden muss
// Messen und aufzeichnen.
getCLS(console.log);

Ein vollständiges Beispiel zur Messung von CLS in JavaScript finden Sie im Quellcode von (getCLS).
In einigen Fällen (z. B. domänenübergreifenden Iframes) kann LCP in JavaScript nicht gemessen werden. Weitere Informationen finden Sie in der Web-Vitals-Bibliothek.EinschränkungTeil.

So verbessern Sie CLS

Bei den meisten Websites können Sie alle unerwarteten Layoutänderungen vermeiden, indem Sie einige Richtlinien befolgen:

• Fügen Sie Ihren Bild- und Videoelementen immer Größenattribute hinzu, entweder durch die VerwendungCSS-Seitenverhältnis-Container. Dieser Ansatz stellt sicher, dass der Browser beim Laden des Bildes den richtigen Platz im Dokument zuweist. Beachten Sie, dass Sie auchRichtlinie für nicht skalierte MedienfunktionenDieses Verhalten wird in Browsern erzwungen, die Funktionsrichtlinien unterstützen.
• Fügen Sie niemals Inhalt über bestehenden Inhalt ein, es sei denn, dies geschieht als Reaktion auf eine Benutzerinteraktion. Dadurch wird sichergestellt, dass auftretende Layoutänderungen erwartet werden.
• Bevorzugen Sie Übergangsanimationen gegenüber Eigenschaftsanimationen, die Layoutänderungen auslösen. Ziel animierter Übergänge ist es, kontextuelle Kontinuität zwischen Zuständen zu gewährleisten.

Weitere Informationen zur Verbesserung von CLS finden Sie unterCLS optimierenUndDebuggen von Layoutverschiebungen.