Optimieren Sie die kumulative Layoutverschiebung

Erfahren Sie, wie Sie plötzliche Layoutverschiebungen vermeiden, um die Benutzererfahrung zu verbessern

5. Mai 2020
Aktualisiert 20. August 2020

«I was about to klicken that! Why did it move? 😭»

Layout shifts can be distracting to users. Imagine you’ve started reading an article when all of a sudden elements shift around the page, throwing you off and requiring you to find your place again. This is very common on the Netz, including when reading the news, or trying to click those ‘Search’ or ‘Add to Cart’ buttons. Such experiences are visually jarring and frustrating. They’re often caused when visible elements are forced to move because another element was suddenly added to the page or resized.

Cumulative Layout Shift (CLS) - eine zentrale Web-Vitals-Metrik, die die Instabilität von Inhalten misst, indem Shift-Scores über Layout-Shifts summiert werden, die nicht innerhalb von 500 ms nach Benutzereingabe auftreten. Es wird angezeigt, wie stark der sichtbare Inhalt im Ansichtsfenster verschoben wurde und wie weit die betroffenen Elemente verschoben wurden.

In diesem Handbuch wird die Optimierung häufiger Ursachen für Layoutverschiebungen behandelt.

Die häufigsten Ursachen für ein schlechtes CLS sind:

• Bilder ohne Abmessungen
• Anzeigen, Einbettungen und Iframes ohne Abmessungen
• Dynamisch injizierter Inhalt
• Web-Schriftarten, die FOIT / FOUT verursachen
• Aktionen, die auf eine Netzwerkantwort warten, bevor das DOM aktualisiert wird

Bilder ohne Abmessungen 🌆

Zusammenfassung: Immer einschließen Breite und Höhe Größenattribute für Ihre Bilder und Videoelemente. Alternativ können Sie den erforderlichen Platz mit reservieren CSS-Seitenverhältnisfelder. Dieser Ansatz stellt sicher, dass der Browser beim Laden des Bildes den richtigen Speicherplatz im Dokument zuweisen kann.

Geschichte

In den frühen Tagen des Web würden Entwickler hinzufügen Breite und Höhe Attribute zu ihren <img> Tags, um sicherzustellen, dass auf der Seite ausreichend Speicherplatz zugewiesen wurde, bevor der Browser mit dem Abrufen von Bildern begann. Dies würde Reflow und Re-Layout minimieren.

<img src="puppy.jpg" Breite="640" Höhe="360" alt="Puppy with balloons">

Sie können bemerken Breite und Höhe oben enthalten sind keine Einheiten. Diese "Pixel" -Dimensionen würden sicherstellen, dass ein Bereich von 640 × 360 reserviert wird. Das Bild würde sich dehnen, um in diesen Raum zu passen, unabhängig davon, ob die tatsächlichen Abmessungen übereinstimmen oder nicht.

Wann Sich anpassendes Webdesign eingeführt wurde, begannen Entwickler zu weglassen Breite und Höhe and started using CSS to resize images instead:

img {
Breite: 100%; 
Höhe: Wagen;
}

Ein Nachteil dieses Ansatzes ist, dass einem Bild erst dann Speicherplatz zugewiesen werden kann, wenn es heruntergeladen wurde und der Browser seine Abmessungen bestimmen kann. Wenn Bilder geladen werden, fließt die Seite erneut, wenn jedes Bild auf dem Bildschirm angezeigt wird. Es wurde üblich, dass Text plötzlich auf dem Bildschirm auftauchte. Dies war überhaupt keine großartige Benutzererfahrung.

Hier kommt das Seitenverhältnis ins Spiel. Das Seitenverhältnis eines Bildes ist das Verhältnis seiner Breite zu seiner Höhe. Es ist üblich, dies als zwei durch einen Doppelpunkt getrennte Zahlen auszudrücken (zum Beispiel 16: 9 oder 4: 3). Bei einem Seitenverhältnis von x: y ist das Bild x Einheiten breit und Einheiten hoch.

Das heißt, wenn wir eine der Dimensionen kennen, kann die andere bestimmt werden. Für ein Seitenverhältnis von 16: 9:

• Wenn pupy.jpg eine Höhe von 360 Pixel hat, beträgt die Breite 360 x (16/9) = 640 Pixel
• Wenn pupy.jpg eine Breite von 640 Pixel hat, beträgt die Höhe 640 x (9/16) = 360 Pixel

Wenn Sie das Seitenverhältnis kennen, kann der Browser ausreichend Platz für die Höhe und den zugehörigen Bereich berechnen und reservieren.

Moderne Best Practice

Moderne Browser legen jetzt das Standard-Seitenverhältnis von Bildern basierend auf den Breiten- und Höhenattributen eines Bildes fest. Daher ist es hilfreich, diese festzulegen, um Layoutverschiebungen zu vermeiden. Dank der CSS-Arbeitsgruppe müssen Entwickler nur festlegen Breite und Höhe wie normal:

<img src="puppy.jpg" Breite="640" Höhe="360" alt="Puppy with balloons">

…und der UA Stylesheets von allen Browsern fügen Sie ein Standard-Seitenverhältnis basierend auf dem vorhandenen Element Breite und Höhe Attribute:

img {
Seitenverhältnis: attr(Breite) / attr(Höhe);
}

Dies berechnet ein Seitenverhältnis basierend auf dem Breite und Höhe Attribute, bevor das Bild geladen wurde. Diese Informationen werden zu Beginn der Layoutberechnung bereitgestellt. Sobald ein Bild eine bestimmte Breite hat (zum Beispiel) Breite: 100%) wird das Seitenverhältnis zur Berechnung der Höhe verwendet.

Tipp: Wenn Sie Schwierigkeiten haben, das Seitenverhältnis zu verstehen, ist dies praktisch Taschenrechner steht zur Verfügung, um zu helfen.

Die obigen Änderungen des Bildseitenverhältnisses wurden geliefert Feuerfuchs und Chromund kommen zu WebKit (Safari).

Ein fantastisches Eintauchen in das Seitenverhältnis mit weiteren Überlegungen zu reaktionsschnellen Bildern finden Sie unter ruckfreies Laden von Seiten mit Medienseitenverhältnissen.

Wenn sich Ihr Bild in einem Container befindet, können Sie CSS verwenden, um die Größe des Bildes auf die Breite dieses Containers zu ändern. Legen wir fest Höhe: Auto; um zu vermeiden, dass die Bildhöhe ein fester Wert ist (z 360px).

img {
Höhe: Wagen;
Breite: 100%;
}

Was ist mit reaktionsschnellen Bildern?

Wenn Sie mit reaktionsschnellen Bildern arbeiten, srcset Definiert die Bilder, zwischen denen der Browser wählen kann, und welche Größe jedes Bild hat. Sicherstellen <img> Es können Breiten- und Höhenattribute festgelegt werden. Jedes Bild sollte das gleiche Seitenverhältnis verwenden.

<img Breite="1000" Höhe="1000"
src="puppy-1000.jpg"
srcset="puppy-1000.jpg 1000w,
puppy-2000.jpg 2000w,
puppy-3000.jpg 3000w"
alt="Puppy with balloons"/>

Wie wäre es mit Kunstrichtung?

Die Seiten möchten möglicherweise eine beschnittene Aufnahme eines Bildes in schmalen Ansichtsfenstern einfügen, wobei das vollständige Bild auf dem Desktop angezeigt wird.

<Bild>
<source Hälfte="(max-width: 799px)" srcset="puppy-480w-cropped.jpg">
<source Hälfte="(min-width: 800px)" srcset="puppy-800w.jpg">
<img src="puppy-800w.jpg" alt="Puppy with balloons">
</Bild>

Es ist sehr wahrscheinlich, dass diese Bilder unterschiedliche Seitenverhältnisse haben und die Browser prüfen derzeit noch, welche Lösung hier am effizientesten sein sollte, einschließlich der Frage, ob die Abmessungen für alle Quellen angegeben werden sollten. Bis eine Lösung gefunden ist, ist hier noch ein Relayout möglich.

Anzeigen, Einbettungen und Iframes ohne Abmessungen 📢😱

Anzeige

Ads are one of the largest contributors to layout shifts on the web. Ad networks and publishers often support dynamic ad sizes. Ad sizes increase performance/revenue due to higher click rates and more ads competing in the auction. Unfortunately, this can führen to a suboptimal user experience due to ads pushing visible content you’re viewing down the page.

Während des Anzeigenlebenszyklus können viele Punkte zu einer Layoutverschiebung führen:

• Wenn eine Site den Anzeigencontainer in das DOM einfügt
• Wenn eine Website die Größe des Anzeigencontainers mit Erstanbietercode ändert
• Wenn die Anzeigen-Tag-Bibliothek geladen wird (und die Größe des Anzeigencontainers ändert)
• Wenn die Anzeige einen Container füllt (und die Größe ändert, wenn die endgültige Anzeige eine andere Größe hat)

Die gute Nachricht ist, dass Websites Best Practices befolgen können, um die Anzeigenverschiebung zu reduzieren. Websites können diese Layoutverschiebungen verringern, indem sie:

• Reservieren Sie statisch Platz für den Anzeigenplatz.
  • Mit anderen Worten, formatieren Sie das Element, bevor die Anzeigen-Tag-Bibliothek geladen wird.
  • Stellen Sie beim Platzieren von Anzeigen im Content-Flow sicher, dass Verschiebungen vermieden werden, indem Sie die Slot-Größe reservieren. Diese Anzeigen sollte nicht Layoutverschiebungen verursachen, wenn sie außerhalb des Bildschirms geladen werden.
• Seien Sie vorsichtig, wenn Sie nicht klebrige Anzeigen oben im Ansichtsfenster platzieren.
  • Im folgenden Beispiel wird empfohlen, die Anzeige unter das "World Vision" -Logo zu verschieben und genügend Platz für den Slot zu reservieren.
• Vermeiden Sie das Reduzieren des reservierten Speicherplatzes, wenn keine Anzeige zurückgegeben wird, wenn der Anzeigenplatz durch Anzeigen eines Platzhalters sichtbar ist.
• Beseitigen Sie Verschiebungen, indem Sie die größtmögliche Größe für den Anzeigenplatz reservieren.
  • Dies funktioniert, es besteht jedoch die Gefahr, dass ein Leerzeichen vorhanden ist, wenn ein kleineres Anzeigenmotiv den Slot ausfüllt.
• Wählen Sie die wahrscheinlichste Größe für den Anzeigenplatz basierend auf historischen Daten.

Bei einigen Websites kann es vorkommen, dass das anfängliche Reduzieren des Slots die Layoutverschiebungen verringert, wenn es unwahrscheinlich ist, dass der Anzeigen-Slot gefüllt wird. Es gibt keine einfache Möglichkeit, die genaue Größe jedes Mal auszuwählen, es sei denn, Sie steuern die Anzeigenschaltung selbst.

Reservieren Sie statisch Platz für den Anzeigenplatz

Statisch gestaltete Slot-DOM-Elemente mit denselben Größen, die an Ihre Tag-Bibliothek übergeben werden. Dies kann dazu beitragen, dass die Bibliothek beim Laden keine Layoutverschiebungen einführt. Wenn Sie dies nicht tun, kann die Bibliothek die Größe des Slot-Elements nach dem Seitenlayout ändern.

Berücksichtigen Sie auch die Größe kleinerer Anzeigenschaltungen. Wenn eine kleinere Anzeige geschaltet wird, kann ein Publisher den (größeren) Container formatieren, um Layoutverschiebungen zu vermeiden. Der Nachteil dieses Ansatzes besteht darin, dass dadurch die Leerstelle vergrößert wird. Beachten Sie daher den Kompromiss hier.

Vermeiden Sie es, Anzeigen oben im Ansichtsfenster zu platzieren

Anzeigen im oberen Bereich des Ansichtsfensters können zu einer stärkeren Layoutverschiebung führen als Anzeigen in der Mitte. Dies liegt daran, dass Anzeigen oben in der Regel weiter unten mehr Content enthalten. Dies bedeutet, dass mehr Elemente verschoben werden, wenn die Anzeige eine Verschiebung verursacht. Umgekehrt verschieben Anzeigen in der Nähe der Mitte des Ansichtsfensters möglicherweise nicht so viele Elemente, wie der Inhalt darüber weniger wahrscheinlich verschoben wird.

Einbettungen und Iframes

Embeddable Widgets allow you to embed portable web content in your page (for example, videos from Youtube, maps from Google Maps, social media posts, and so on). These embeds can take a number of forms:

• HTML fallback and a JavaScript tag transforming the fallback into a fancy embed
• Inline HTML Ausschnitt
• iframe embed

These embeds often aren’t aware in advance just how large an embed will be (for example, in the case of a social media Post – does it have an embedded image? video? multiple rows of text?). As a result, platforms offering embeds do not always reserve enough space for their embeds and can cause layout shifts when they finally load.

To work around this, you can minimize CLS by precomputing sufficient space for embeds with a placeholder or fallback. One Arbeitsablauf you can use for embeds:

• Ermitteln Sie die Höhe Ihrer endgültigen Einbettung, indem Sie sie mit den Entwicklertools Ihres Browsers überprüfen
• Sobald die Einbettung geladen ist, wird die Größe des enthaltenen Iframes so angepasst, dass sein Inhalt passt.

Beachten Sie die Abmessungen und gestalten Sie einen Platzhalter für die Einbettung entsprechend. Möglicherweise müssen Sie mithilfe von Medienabfragen geringfügige Unterschiede in der Größe von Anzeigen / Platzhaltern zwischen verschiedenen Formfaktoren berücksichtigen.

Dynamischer Inhalt 📐

Zusammenfassung: Vermeiden Sie das Einfügen neuer Inhalte über vorhandene Inhalte, es sei denn, dies ist eine Reaktion auf eine Benutzerinteraktion. Dies stellt sicher, dass alle auftretenden Layoutverschiebungen erwartet werden.

Wahrscheinlich sind Layoutverschiebungen aufgrund der Benutzeroberfläche aufgetreten, die oben oder unten im Ansichtsfenster angezeigt wird, wenn Sie versuchen, eine Site zu laden. Ähnlich wie bei Anzeigen geschieht dies häufig bei Bannern und Formularen, die den Rest des Seiteninhalts verschieben:

• «Sign-up to our Newsletter!» (whoa, slow down! we just met!)
• "Verwandte Inhalte"
• "Installieren Sie unsere [iOS / Android] App"
• "Wir nehmen immer noch Bestellungen entgegen"
• «DSGVO notice»

Wenn Sie diese Arten von UI-Angeboten anzeigen müssen, reservieren Sie im Voraus ausreichend Platz im Ansichtsfenster (z. B. mithilfe eines Platzhalters oder einer Skelett-UI), damit sich der Inhalt der Seite beim Laden nicht überraschend verschiebt .

Web-Schriftarten, die FOUT / FOIT verursachen 📝

Das Herunterladen und Rendern von Web-Schriftarten kann auf zwei Arten zu Layoutverschiebungen führen:

• The fallback font is swapped with a new font (FOUT – Blitz of unstyled text)
• "Unsichtbarer" Text wird angezeigt, bis eine neue Schriftart gerendert wird (FOIT - Blitz aus unsichtbarem Text)

Die folgenden Tools können Ihnen dabei helfen, dies zu minimieren:

• Schriftanzeige Mit dieser Option können Sie das Renderverhalten von benutzerdefinierten Schriftarten mit Werten wie ändern Wagen, Tauschen, Block, Zurückfallen und Optional. Leider sind alle diese Werte (außer Optional) kann ein Re-Layout auf eine der oben genannten Arten verursachen.
• Das API zum Laden von Schriftarten kann die Zeit reduzieren, die benötigt wird, um die erforderlichen Schriftarten zu erhalten.

Ab Chrome 83 kann ich auch Folgendes empfehlen:

• Verwenden von auf den wichtigsten Web-Schriftarten: Eine vorinstallierte Schriftart hat eine höhere Chance, die erste Farbe zu treffen. In diesem Fall gibt es keine Layoutverschiebung.
• Kombinieren und Schriftanzeige: optional

Lesen Sie Verhindern Sie Layoutverschiebungen und Blitze von unsichtbarem Text (FOIT), indem Sie optionale Schriftarten vorladen, um weitere Details zu erhalten.

Animationen 🏃‍♀️

Zusammenfassung: Bevorzugen verwandeln animations to animations of properties that auslösen layout changes.

Änderungen an CSS-Eigenschaftswerten können erfordern, dass der Browser auf diese Änderungen reagiert. Eine Reihe von Werten löst ein Neulayout, eine Farbe und einen Verbund aus, z Box Schatten und Box-Größe. Eine Reihe von CSS-Eigenschaften kann kostengünstiger geändert werden.

Weitere Informationen darüber, welche CSS-Eigenschaften das Layout auslösen, finden Sie unter CSS-Trigger und Hochleistungsanimationen.

Entwicklertools 🔧

Ich freue mich, Ihnen mitteilen zu können, dass eine Reihe von Tools zum Messen und Debuggen von Cumulative Layout Shift (CLS) verfügbar sind.

Leuchtturm 6.0 und oben enthalten Unterstützung für die Messung von CLS in einer Laborumgebung. In dieser Version werden auch die Knoten hervorgehoben, die die meisten Layoutverschiebungen verursachen.

Das Leistungspanel in DevTools hebt Layoutverschiebungen in der Erfahrung Abschnitt ab Chrome 84. Die Zusammenfassung Ansicht für a Layoutverschiebung Der Datensatz enthält die kumulative Layoutverschiebungsbewertung sowie eine Rechtecküberlagerung mit den betroffenen Regionen.

Das Messen von realem CLS, das auf Ursprungsebene aggregiert wurde, ist auch mithilfe des Chrome User Experience Report möglich. CrUX CLS-Daten sind über BigQuery und a verfügbar Beispielabfrage Um die CLS-Leistung zu betrachten, steht sie zur Verfügung.

Das war's für diesen Leitfaden. Ich hoffe, es hilft, Ihre Seiten ein wenig weniger zwielichtig zu halten 🙂

Vielen Dank an Philip Walton, Kenji Baheux, Warren Maresca, Annie Sullivan, Steve Kobes und Gilberto Cocchi für ihre hilfreichen Bewertungen.