Diese Seite wurde von der Cloud Translation API übersetzt.

Fehler bei Layout Shifts beheben

Erfahren Sie, wie Sie Layout Shifts identifizieren und korrigieren können.

Katie Hempenius

Im ersten Teil dieses Artikels werden Tools zum Beheben von Layoutänderungen beschrieben. Im zweiten Teil wird erläutert, wie Sie die Ursache für eine Layoutänderung ermitteln.

Tools

Layout Instability API

Die Layout Instability API ist der Browsermechanismus zum Messen und Melden von Layoutänderungen. Alle Tools zum Debuggen von Layout Shifts, einschließlich der Entwicklertools, basieren letztendlich auf der Layout Instability API. Die direkte Verwendung der Layout Instability API ist jedoch aufgrund ihrer Flexibilität ein leistungsstarkes Debugging-Tool.

Nutzung

Mit demselben Code-Snippet, mit dem der Cumulative Layout Shift (CLS) gemessen wird, können Sie auch Layoutverschiebungen beheben. Mit dem folgenden Snippet werden Informationen zu Layout Shifts in der Konsole protokolliert. Dieses Log liefert Ihnen Informationen darüber, wann, wo und wie ein Layout Shift aufgetreten ist.

let cls = 0;
new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    if (!entry.hadRecentInput) {
      cls += entry.value;
      console.log('Current CLS value:', cls, entry);
    }
  }
}).observe({type: 'layout-shift', buffered: true});

Beachten Sie beim Ausführen des Skripts Folgendes:

Die Option buffered: true gibt an, dass PerformanceObserver den Leistungseintragsbuffer des Browsers auf Leistungseinträge prüfen soll, die vor der Initialisierung des Beobachters erstellt wurden. Daher werden mit PerformanceObserver Layoutänderungen erfasst, die sowohl vor als auch nach der Initialisierung aufgetreten sind. Beachten Sie dies bei der Überprüfung der Konsolenlogs. Ein anfänglicher Überfluss an Layoutänderungen kann auf einen Berichtsrückstand zurückzuführen sein und nicht auf das plötzliche Auftreten zahlreicher Layoutänderungen.
Damit die Leistung nicht beeinträchtigt wird, wartet PerformanceObserver, bis der Hauptthread inaktiv ist, und erfasst dann Layoutverschiebungen. Je nachdem, wie ausgelastet der Hauptthread ist, kann es daher zu einer leichten Verzögerung zwischen dem Auftreten einer Layoutänderung und der Protokollierung in der Konsole kommen.
Dieses Script ignoriert Layoutverschiebungen, die innerhalb von 500 Millisekunden nach einer Nutzereingabe aufgetreten sind und daher nicht auf die CLS angerechnet werden.

Informationen zu Layoutänderungen werden mithilfe einer Kombination aus zwei APIs erfasst: den Schnittstellen LayoutShift und LayoutShiftAttribution. Jede dieser Oberflächen wird in den folgenden Abschnitten ausführlicher erläutert.

LayoutShift

Jeder Layout Shift wird über die LayoutShift-Oberfläche gemeldet. Der Inhalt eines Eintrags sieht so aus:

duration: 0
entryType: "layout-shift"
hadRecentInput: false
lastInputTime: 0
name: ""
sources: (3) [LayoutShiftAttribution, LayoutShiftAttribution, LayoutShiftAttribution]
startTime: 11317.934999999125
value: 0.17508567530168798

Der Eintrag oben weist auf eine Layoutänderung hin, bei der sich die Position von drei DOM-Elementen geändert hat. Der Layout Shift-Wert dieses speziellen Layout Shifts war 0.175.

Dies sind die Eigenschaften einer LayoutShift-Instanz, die für das Debuggen von Layoutänderungen am relevantesten sind:

Attribut	Beschreibung
`sources`	In der Property `sources` werden die DOM-Elemente aufgeführt, die während der Layoutänderung verschoben wurden. Dieses Array kann bis zu fünf Quellen enthalten. Falls mehr als fünf Elemente von Layout Shifts betroffen sind, werden die fünf größten Ursachen (gemessen an der Auswirkung auf die Layoutstabilität) gemeldet. Diese Informationen werden über die Schnittstelle „LayoutShiftAttribution“ erfasst (siehe unten).
`value`	Die Property `value` gibt den Wert für Layoutänderungen für eine bestimmte Layoutänderung an.
`hadRecentInput`	Die Eigenschaft `hadRecentInput` gibt an, ob innerhalb von 500 Millisekunden nach einer Nutzereingabe ein Layout-Shift aufgetreten ist.
`startTime`	Mit der Property `startTime` wird angegeben, wann eine Layoutänderung stattgefunden hat. `startTime` wird in Millisekunden angegeben und relativ zum Zeitpunkt des Beginns des Seitenaufbaus gemessen.
`duration`	Das Attribut `duration` ist immer auf `0` festgelegt. Diese Eigenschaft wird von der `PerformanceEntry`-Oberfläche übernommen (die `LayoutShift`-Schnittstelle erweitert die `PerformanceEntry`-Schnittstelle). Das Konzept der Dauer gilt jedoch nicht für Layout-Änderungsereignisse. Daher wird hier `0` festgelegt. Informationen zur `PerformanceEntry`-Schnittstelle finden Sie in der Spezifikation.

LayoutShiftAttribution

Die LayoutShiftAttribution-Schnittstelle beschreibt eine einzelne Verschiebung eines einzelnen DOM-Elements. Wenn sich mehrere Elemente während eines Layout Shifts verschieben, enthält das Attribut sources mehrere Einträge.

Die folgende JSON-Datei entspricht beispielsweise einem Layout Shift mit nur einer Quelle: der Verschiebung des DOM-Elements <div id='banner'> von y: 76 nach y:246 nach unten.

// ...
  "sources": [
    {
      "node": "div#banner",
      "previousRect": {
        "x": 311,
        "y": 76,
        "width": 4,
        "height": 18,
        "top": 76,
        "right": 315,
        "bottom": 94,
        "left": 311
      },
      "currentRect": {
        "x": 311,
        "y": 246,
        "width": 4,
        "height": 18,
        "top": 246,
        "right": 315,
        "bottom": 264,
        "left": 311
      }
    }
  ]

Das Attribut node gibt das HTML-Element an, das verschoben wurde. Wenn Sie in den Entwicklertools den Mauszeiger auf diese Property bewegen, wird das entsprechende Seitenelement hervorgehoben.

Die Eigenschaften previousRect und currentRect geben die Größe und Position des Knotens an.

Die Koordinaten x und y geben die x- und y-Koordinaten bzw. die linke obere Ecke des Elements an.
Die Eigenschaften width und height geben die Breite bzw. Höhe des Elements an.
Die Eigenschaften top, right, bottom und left geben die X- oder Y-Koordinatenwerte für die angegebene Kante des Elements an. Mit anderen Worten: Der Wert von top ist gleich y; der Wert von bottom ist gleich y+height.

Wenn alle Eigenschaften von previousRect auf 0 gesetzt sind, ist das Element sichtbar. Wenn alle Properties von currentRect auf 0 gesetzt sind, ist das Element nicht sichtbar.

Achtung : Die Layout Instability API ignoriert derzeit keine Elemente, die verschoben wurden, aber nicht sichtbar waren, weil sich ein anderes Element davor befindet. Verwende display: none, visibility: hidden oder opacity: 0, um Layoutverschiebungen in Fällen zu vermeiden, in denen du ein Layout für einige Elemente ausführen musst, bevor sie für den Nutzer sichtbar werden.

Bei der Interpretation dieser Ausgabe ist es wichtig zu wissen, dass Elemente, die als Quellen aufgeführt sind, die Elemente sind, die sich während der Layoutänderung verschoben haben. Es ist jedoch möglich, dass diese Elemente nur indirekt mit der „Ursache“ der Layoutinstabilität zusammenhängen. Hier sind einige Beispiele:

Beispiel 1

Diese Layoutänderung wird mit einer Quelle erfasst: Element B. Die eigentliche Ursache für diese Layoutänderung ist jedoch die Änderung der Größe von Element A.

Beispiel für eine Layoutverschiebung aufgrund einer Änderung der Elementabmessungen

Beispiel 2

Die Layoutänderung in diesem Beispiel wird mit zwei Quellen erfasst: Element A und Element B. Die Ursache für diesen Layout Shift ist die Positionsänderung von Element A.

Beispiel für einen Layout Shift aufgrund einer Änderung der Elementposition

Beispiel 3

Die Layoutänderung in diesem Beispiel wird mit einer Quelle erfasst: Element B. Eine Änderung der Position von Element B führte zu dieser Layoutverschiebung.

Beispiel für einen Layout Shift aufgrund einer Änderung der Elementposition

Beispiel 4

Obwohl sich die Größe von Element B ändert, gibt es in diesem Beispiel keine Layoutverschiebung.

Beispiel für die Darstellung eines Elements, das seine Größe ändert, aber keinen Layout Shift verursacht

Demo, wie DOM-Änderungen von der Layout Instability API gemeldet werden

Entwicklertools

Bereich „Leistung“

Im Bereich Nutzerfreundlichkeit des Bereichs Leistung in den DevTools werden alle Layoutverschiebungen angezeigt, die während eines bestimmten Leistungs-Traces auftreten – auch wenn sie innerhalb von 500 Millisekunden nach einer Nutzerinteraktion erfolgen und daher nicht auf die CLS angerechnet werden. Wenn Sie im Bereich Experience den Mauszeiger auf einen bestimmten Layout Shift bewegen, wird das betroffene DOM-Element hervorgehoben.

Screenshot einer Layoutänderung, die im Bereich „Netzwerk“ der DevTools angezeigt wird

Wenn Sie weitere Informationen zu Layout Shift erhalten möchten, klicken Sie darauf und öffnen Sie dann die Leiste Zusammenfassung. Änderungen an den Abmessungen des Elements werden im Format [width, height] aufgelistet. Änderungen an der Position des Elements werden im Format [x,y] aufgelistet. Das Attribut Letzte Eingabe gibt an, ob innerhalb von 500 ms nach einer Nutzerinteraktion eine Layoutverschiebung aufgetreten ist.

Screenshot des Tabs „Summary“ (Zusammenfassung) in den Entwicklertools für einen Layout Shift

Informationen zur Dauer einer Layoutänderung finden Sie auf dem Tab Ereignisprotokoll. Die Dauer eines Layout Shifts lässt sich auch schätzen, indem Sie im Bereich Experience die Länge des roten Rechtecks für Layout Shifts ermitteln.

Screenshot des Tabs „Ereignisprotokoll“ in den DevTools für einen Layout-Shift

Weitere Informationen zur Verwendung des Bereichs Leistung finden Sie in der Referenz zur Leistungsanalyse.

Layout Shift-Bereiche hervorheben

Das Hervorheben von Layout Shift-Bereichen kann eine hilfreiche Technik sein, um schnell einen Überblick über die Position und den Zeitpunkt der Layout Shifts auf einer Seite zu erhalten.

Um Layout Shift-Bereiche in den Entwicklertools zu aktivieren, rufen Sie Einstellungen > Weitere Tools > Rendering > Layout Shift-Bereiche auf und aktualisieren Sie dann die Seite, auf der Sie Fehler beheben möchten. Bereiche mit Layout-Shift werden kurzzeitig lila hervorgehoben.

Denkprozess zum Identifizieren der Ursache von Layout Shifts

Mit den folgenden Schritten können Sie die Ursache für Layoutverschiebungen ermitteln, unabhängig davon, wann oder wie sie auftreten. Diese Schritte können durch die Ausführung von Lighthouse ergänzt werden. Beachten Sie jedoch, dass Lighthouse nur Layoutverschiebungen erkennen kann, die beim ersten Seitenaufbau aufgetreten sind. Darüber hinaus kann Lighthouse nur Vorschläge für bestimmte Ursachen von Layoutverschiebungen machen, z. B. für Bildelemente, die keine explizite Breite und Höhe haben.

Ursache für Layoutänderungen ermitteln

Layout Shifts können durch folgende Ereignisse verursacht werden:

Änderungen an der Position eines DOM-Elements
Änderungen an den Abmessungen eines DOM-Elements
DOM-Element einfügen oder entfernen
Animationen, die das Layout auslösen

Insbesondere ist das DOM-Element, das direkt vor dem verschobenen Element steht, am wahrscheinlichsten für die Layoutverschiebung verantwortlich. Berücksichtigen Sie also bei der Untersuchung, warum ein Layout Shift aufgetreten ist:

Haben sich die Position oder Abmessungen des vorherigen Elements geändert?
Wurde ein DOM-Element vor dem verschobenen Element eingefügt oder entfernt?
Wurde die Position des verschobenen Elements explizit geändert?

Wenn das vorherige Element den Layout Shift nicht verursacht hat, können Sie Ihre Suche unter Berücksichtigung anderer vorangehender und nahe gelegener Elemente fortsetzen.

Außerdem können die Richtung und Entfernung einer Layoutverschiebung Hinweise auf die Ursache liefern. Eine große Verschiebung nach unten weist beispielsweise oft auf das Einfügen eines DOM-Elements hin, während eine 1- oder 2-px-Layoutverschiebung oft auf die Anwendung widersprüchlicher CSS-Stile oder das Laden und Anwenden einer Webschriftart hinweist.

Diagramm, das eine Layoutverschiebung aufgrund eines Austauschs von Schriftarten zeigt — In diesem Beispiel wurden Seitenelemente durch das Austauschen von Schriftarten um 5 Pixel nach oben verschoben.

Dies sind einige der spezifischen Verhaltensweisen, die am häufigsten zu Layout Shift-Ereignissen führen:

Änderungen an der Position eines Elements, die nicht auf die Bewegung eines anderen Elements zurückzuführen sind

Diese Art von Änderung ist oft auf Folgendes zurückzuführen:

Stylesheets, die spät geladen werden oder zuvor deklarierte Stile überschreiben.
Animations- und Übergangseffekte

Änderungen an den Abmessungen eines Elements

Diese Art von Änderung ist oft auf Folgendes zurückzuführen:

Stylesheets, die verspätet geladen werden oder zuvor deklarierte Stile überschreiben.
Bilder und iFrames ohne die Attribute width und height, die geladen werden, nachdem ihre Anzeigenfläche gerendert wurde.
Textblöcke ohne width- oder height-Attribute, bei denen die Schriftarten nach dem Rendern des Texts ausgetauscht werden

DOM-Elemente einfügen oder entfernen

Dies ist häufig auf Folgendes zurückzuführen:

Einfügen von Anzeigen und anderen eingebetteten Inhalten von Drittanbietern
Einfügen von Bannern, Benachrichtigungen und Modalfenstern
Unendliches Scrollen und andere UX-Muster, bei denen zusätzliche Inhalte über vorhandenen Inhalten geladen werden

Animationen, die das Layout auslösen

Einige Animationen können Layoutänderungen auslösen. Ein gängiges Beispiel hierfür ist, wenn DOM-Elemente durch Erhöhung der Attribute wie top oder left "animiert" werden, anstatt die CSS-Eigenschaft transform zu verwenden. Weitere Informationen finden Sie unter Leistungsstarke CSS-Animationen erstellen.

Layout Shifts reproduzieren

Layoutverschiebungen, die nicht reproduzierbar sind, können nicht behoben werden. Eine der einfachsten und gleichzeitig effektivsten Methoden, um die Layoutstabilität Ihrer Website besser zu beurteilen, besteht darin, 5 bis 10 Minuten lang mit Ihrer Website zu interagieren, um Layoutänderungen auszulösen. Lassen Sie dabei die Konsole geöffnet und verwenden Sie die Layout Instability API, um Berichte zu Layout Shifts zu erstellen.

Wenn Layout Shifts schwer zu finden sind, können Sie diese Übung mit anderen Geräten und Verbindungsgeschwindigkeiten wiederholen. Insbesondere kann es einfacher sein, Layoutänderungen zu erkennen, wenn Sie eine langsamere Verbindungsgeschwindigkeit verwenden. Darüber hinaus können Sie eine debugger-Anweisung verwenden, um Layoutverschiebungen zu vereinfachen.

new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    if (!entry.hadRecentInput) {
      cls += entry.value;
      debugger;
      console.log('Current CLS value:', cls, entry);
    }
  }
}).observe({type: 'layout-shift', buffered: true});

Bei Layoutproblemen, die in der Entwicklung nicht reproduzierbar sind, sollten Sie die Layout Instability API in Verbindung mit dem Frontend-Protokollierungstool Ihrer Wahl verwenden, um weitere Informationen zu diesen Problemen zu erfassen. Beispielcode zum Erfassen des größten verschobenen Elements auf einer Seite