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

Der erste Teil dieses Artikels behandelt Tools zum Debuggen von Layout Shifts. während im zweiten Teil der Denkprozess erläutert wird, und identifizieren die Ursache eines Layout Shifts.

Tools

Layout Instability API

Die Layout Instability API ist die Browsermechanismus zum Messen und Melden von Layout Shifts. Alle Tools für das Debugging von Layout Shifts, einschließlich der Entwicklertools, Layout Instability API Die direkte Verwendung der Layout Instability API leistungsstarkes Debugging-Tool.

Nutzung

Das gleiche Code-Snippet, das Cumulative Layout Shift (CLS) misst auch zum Debuggen von Layout Shifts. Mit dem Snippet unten werden Informationen zum Layout erfasst zur Konsole geht. In diesem Protokoll finden Sie Informationen dazu, wann, wo und wie eine Layoutänderung 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 dieses Scripts 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 gibt PerformanceObserver das Layout aus Shifts, die sowohl vor als auch nach der Initialisierung aufgetreten sind. Speichern unter 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.
Um Leistungseinbußen zu vermeiden, wartet PerformanceObserver, bis der Haupt-Thread inaktiv ist, bevor er Layoutänderungen meldet. 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 Schnittstellen wird in den folgenden Abschnitten ausführlicher erläutert.

LayoutShift

Jede Layoutänderung wird über die LayoutShift-Schnittstelle erfasst. 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 obige Eintrag gibt einen Layout Shift an, bei dem sich drei DOM-Elemente geändert haben. . Das Layout-Shift-Ergebnis dieses bestimmten 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` sind 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 vom Layout-Shift betroffen sind, werden die fünf größten Quellen des Layout-Shifts (gemessen an der Auswirkung auf die Layoutstabilität) gemeldet. Diese Informationen werden über die Oberfläche „LayoutShiftAttribution“ gemeldet. Nähere Informationen dazu finden Sie weiter 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 zu der Zeit, zu der der Seitenaufbau initiiert wurde.
`duration`	Das Attribut `duration` ist immer auf `0` festgelegt. Diese Property wird von der `PerformanceEntry`-Oberfläche übernommen (die `LayoutShift`-Oberfläche erweitert die `PerformanceEntry`-Oberfläche). Das Konzept der Dauer gilt jedoch nicht für Layout Shift-Ereignisse. Daher ist es auf `0` gesetzt. 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, sources enthält mehrere Einträge.

Das folgende JSON entspricht beispielsweise einer Layoutverschiebung mit einer Quelle: die 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
      }
    }
  ]

Mit der Property node wird das verschobene HTML-Element angegeben. Wenn wir den Mauszeiger in den Entwicklertools wird das entsprechende Seitenelement hervorgehoben.

Die Eigenschaften previousRect und currentRect geben die Größe und Position von Knoten.

Die Koordinaten x und y geben die X- und Y-Koordinate der linken oberen Ecke des Elements an.
Die Eigenschaften width und height geben jeweils die Breite bzw. Höhe an des Elements.
Die Eigenschaften top, right, bottom und left geben die X- oder Y-Koordinatenwerte für die angegebene Kante des Elements an. In anderen Wörter ist der Wert von top gleich y; ist der Wert von bottom 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 sich verschoben haben, aber nicht sichtbar waren, weil sich ein anderes Element davor befand. Verwenden Sie display: none, visibility: hidden oder opacity: 0, um Layoutverschiebungen zu vermeiden, wenn Sie das Layout für einige Elemente ausführen müssen, bevor Sie sie für den Nutzer sichtbar machen.

Eines der wichtigsten Aspekte bei der Interpretation dieser Ausgaben ist, dass als Quellen aufgeführte Elemente die Elemente sind, die sich während des Layout Shift. Es ist jedoch möglich, dass diese Elemente nur indirekt mit der „Ursache“ der Layoutinstabilität zusammenhängen. Hier einige Beispiele:

Beispiel 1

Dieser Layout Shift würde mit einer Quelle gemeldet werden: 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

Der Layout Shift in diesem Beispiel würde mit zwei Quellen gemeldet werden: Element A und Element B. Die Ursache für diesen Layout Shift ist die Positionsänderung Element A.

Beispiel für eine Layoutänderung, die durch eine Änderung der Elementposition verursacht wird

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 auftreten und daher nicht auf die CLS angerechnet werden. Bewegen Sie den Mauszeiger in den Highlights des Bereichs Websitevariante auf einen bestimmten Layout Shift. das betroffene DOM-Element.

Screenshot eines Layout Shifts im Bereich „Network“ der Entwicklertools

Wenn Sie weitere Informationen zu Layout Shift sehen möchten, klicken Sie auf „Layout Shift“ und dann öffnen Sie die Leiste Zusammenfassung. Änderungen an den Abmessungen des Elements werden im Format [width, height] aufgeführt, Änderungen an der Position des Elements im Format [x,y]. Mit der Eigenschaft Letzte Eingabe wird angegeben, ob eine Layout Shifts sind innerhalb von 500 ms nach einer Nutzerinteraktion aufgetreten.

Screenshot der Zusammenfassung in den Entwicklertools Tab für einen Layout Shift

Informationen zur Dauer einer Layoutänderung finden Sie auf dem Tab Ereignisprotokoll. Die Dauer einer Layoutänderung lässt sich auch anhand der Länge des roten Rechtecks für die Layoutänderung im Bereich Website schätzen.

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

Weitere Informationen zur Verwendung des Steuerfelds Leistung finden Sie unter Leistung Analyse Referenz.

Layout Shift-Bereiche hervorheben

Wenn Sie Bereiche mit Layout-Shifts hervorheben, können Sie sich schnell einen Überblick über die Position und das Timing der Layout-Shifts auf einer Seite verschaffen.

Um Layout Shift-Regionen in den Entwicklertools zu aktivieren, gehe zu Einstellungen > Weitere Tools > Rendering > Layout Shift-Regionen und aktualisieren Sie dann die Seite, auf der Sie Fehler beheben möchten. Bereiche des Layout Shifts werden kurz 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 zusätzlich mit Lighthouse. Beachten Sie jedoch, dass Lighthouse werden nur Layoutverschiebungen identifiziert, die beim ersten Seitenaufbau aufgetreten sind. In Lighthouse kann außerdem nur Vorschläge zu bestimmten Layoutursachen machen. Verschiebungen an, z. B. Bildelemente, die keine explizite Breite und Höhe haben.

Ursachen von Layout Shifts identifizieren

Layoutänderungen können durch die folgenden Ereignisse verursacht werden:

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

Insbesondere ist das DOM-Element, das unmittelbar vor dem verschobenen Element liegt, das Element das höchstwahrscheinlich daran beteiligt ist, Layout Shift. Wenn Sie also untersuchen, warum ein Layout-Shift aufgetreten ist, sollten Sie Folgendes berücksichtigen:

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 vorausgehende Element nicht für die Layoutverschiebung verantwortlich ist, fahren Sie mit der Suche fort und prüfen Sie andere vorausgehende und nahe gelegene Elemente.

Außerdem können die Richtung und Entfernung einer Layoutverschiebung Hinweise auf die Ursache geben. Eine große Abwärtsverschiebung deutet beispielsweise oft darauf hin, ein DOM-Element eingefügt werden, während ein 1- oder 2-Pixel-Layout Shift häufig auf die Anwendung widersprüchlicher CSS-Stile oder das Laden und Anwenden einer Web-Schriftart.

Diagramm mit einer Layoutverschiebung, die durch einen Schriftschnittwechsel verursacht wurde — In diesem Beispiel wurden Seitenelemente durch das Austauschen von Schriftarten um fünf Pixel nach oben verschoben.

Dies sind einige der spezifischen Verhaltensweisen, die am häufigsten zu Layout Shifts führen. Events:

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

Solche Änderungen sind häufig auf Folgendes zurückzuführen:

Stylesheets, die verspätet 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 nach dem ihr „Slot“ gerendert wurde.
Textblöcke ohne width- oder height-Attribut, die Schriftarten nach dem Text wurde gerendert.

Einfügen oder Entfernen von DOM-Elementen

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, die zusätzliche Inhalte darüber laden vorhandenen Inhalten.

Layout auslösende Animationen

Einige Animationen können Layoutänderungen auslösen. Ein häufiges Beispiel hierfür ist, wenn DOM-Elemente durch Inkrementieren von Eigenschaften wie top oder left animiert werden, anstatt die CSS-Eigenschaft transform zu verwenden. Weitere Informationen finden Sie im Hilfeartikel Hochleistungs-CSS-Animationen erstellen.

Layout Shifts reproduzieren

Layout Shifts, die sich nicht reproduzieren lassen, können nicht korrigiert werden. Eine der einfachsten und effektive Maßnahmen, die Sie ergreifen können, um sich ein besseres Bild vom Layout Ihrer Website zu machen. Es dauert 5 bis 10 Minuten, bis die Stabilität Ihrer Website mit dem Ziel erreicht ist. Layout Shifts ausgelöst. Lassen Sie die Konsole dabei geöffnet und verwenden Sie die Layout Instability API zur Erstellung von Berichten zu Layout Shifts

Wenn Sie Layoutänderungen nur schwer finden, wiederholen Sie diese Übung mit verschiedenen Geräten und Verbindungsgeschwindigkeiten. Insbesondere kann es einfacher sein, Layoutänderungen zu erkennen, wenn Sie eine langsamere Verbindungsgeschwindigkeit verwenden. Außerdem können Sie eine debugger-Anweisung verwenden, um Layoutänderungen einfacher zu durchgehen.

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 bei der Entwicklung nicht reproduzierbar sind, sollten Sie Verwenden der Layout Instability API in Verbindung mit dem Frontend-Protokollierungstool um weitere Informationen zu diesen Themen zu erhalten. Zur Kasse Beispielcode zum Erfassen des größten verschobenen Elements auf einer Seite