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.

Hinweis : Die Layout Instability API wird nur von Chromium-Browsern unterstützt. Derzeit gibt es keine Möglichkeit, Layoutverschiebungen in anderen Browsern als Chromium zu messen oder zu beheben.

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. Dieses Protokoll liefert Ihnen Informationen wann, wo und wie ein Layout Shift stattfand.

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 die PerformanceObserver sollte den Leistungseintrag des Browsers Zwischenspeicher für Leistungseinträge, die erstellt wurden, bevor die Initialisierung bei. 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ängliches Anhäufung von Layout Shifts kann die einen Rückstand in der Berichterstellung widerspiegeln, und nicht auf das plötzliche Eintreten zahlreicher Layout Shifts.
• Um Beeinträchtigungen der Leistung zu vermeiden, wartet PerformanceObserver, bis die -Thread ist inaktiv, um Layout Shifts zu melden. Je nachdem, wie Hauptthread ist, kann es zu einer leichten Verzögerung zwischen der Shifts erfolgt und wenn es in der Konsole protokolliert wird.
• Dieses Skript ignoriert Layoutverschiebungen, die innerhalb von 500 ms nach Nutzereingabe aufgetreten sind. und werden daher nicht in den CLS berücksichtigt.

Informationen zu Layout Shifts werden mithilfe einer Kombination aus zwei APIs ausgegeben: LayoutShift und LayoutShiftAttribution Schnittstellen. Jede dieser Oberflächen wird ausführlicher in der folgenden Abschnitten.

LayoutShift

Jeder Layout Shift wird über die LayoutShift-Oberfläche gemeldet. Der Inhalt von sieht ein Eintrag 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. . Der Layout Shift-Wert dieses speziellen Layout Shifts war 0.175.

Dies sind die Attribute einer LayoutShift-Instanz, die für Debugging von Layout Shifts:

Attribut	Beschreibung
sources	Mit der Eigenschaft sources werden die DOM-Elemente aufgelistet, die während des Layout Shifts 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 Oberfläche „LayoutShiftAttribution“ gemeldet. Nähere Informationen dazu finden Sie weiter unten.
value	Die Eigenschaft value gibt den Layout Shift für einen bestimmten Layout Shift an.
hadRecentInput	Das Attribut hadRecentInput gibt an, ob innerhalb von 500 Millisekunden nach Nutzereingabe eine Layoutverschiebung aufgetreten ist.
startTime	Das Attribut startTime gibt an, wann ein Layout Shift aufgetreten ist. 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 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 Shift-Ereignisse. Daher ist es auf 0 gesetzt. Informationen zur PerformanceEntry-Schnittstelle finden Sie in der Spezifikation.

Hinweis : Mit der Web Vitals-Erweiterung können Informationen zu Layoutverschiebungen in der Konsole protokolliert werden. Wählen Sie zum Aktivieren dieser Funktion Optionen > Console-Logging.

LayoutShiftAttribution

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

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

// ...
  "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 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-Koordinaten an. bzw. der oberen linken Ecke des Elements
• Die Eigenschaften width und height geben jeweils die Breite bzw. Höhe an des Elements.
• Die Eigenschaften top, right, bottom und left geben das X oder Y an -Koordinatenwerte, die der gegebenen Kante des Elements entsprechen. In anderen Wörter ist der Wert von top gleich y; ist der Wert von bottom gleich y+height.

Wenn alle Attribute von previousRect auf 0 gesetzt sind, bedeutet dies, dass das Element in den sichtbaren Bereich. Wenn alle Attribute von currentRect auf 0 gesetzt sind, bedeutet dies, dass das Element nicht mehr sichtbar ist.

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.

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 die mit der „Grundursache“ in Verbindung stehen, Layout-Instabilität. Hier sind einige Beispiele:

Beispiel 1

Dieser Layout Shift würde mit einer Quelle gemeldet werden: Element B. Die Die Ursache für diesen Layout Shift ist die Größenänderung von Element A.

Beispiel 2

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

Beispiel 3

Der Layout Shift in diesem Beispiel würde mit einer Quelle gemeldet werden: Element B. Eine Änderung der Position von Element B führte zu dieser Layoutverschiebung.

Beispiel 4

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

Sehen Sie sich in dieser Demo an, wie DOM-Änderungen von der Layout Instability API gemeldet werden.

Entwicklertools

Bereich „Leistung“

Im Bereich Leistung des Entwicklertools-Bereichs Leistung werden alle Layout Shifts, die während eines bestimmten Leistungs-Trace auftreten – selbst wenn sie auftreten innerhalb von 500 ms nach einer Nutzerinteraktion und daher nicht auf den CLS angerechnet. Bewegen Sie den Mauszeiger in den Highlights des Bereichs Websitevariante auf einen bestimmten Layout Shift. das betroffene DOM-Element.

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 aufgelistet im Format [width, height]; werden Ä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.

Informationen zur Dauer eines Layout Shifts finden Sie auf dem Tab Ereignisprotokoll. Die Dauer eines Layout Shifts lässt sich auch mithilfe der Bereich Experience (Experience) für die Länge des roten Rechtecks mit Layout Shift.

Hinweis : Die Dauer eines Layout Shifts hat keinen Einfluss auf dessen Wert.

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

Layout Shift-Bereiche hervorheben

Das Hervorheben von Layout Shift-Bereichen kann hilfreich sein, Schneller Überblick über die Position und den Zeitpunkt der Layout Shifts auf einer Seite auftreten.

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 von Layout Shifts ermitteln. unabhängig davon, wann oder wie ein Layout Shift stattfindet. 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 Shifts 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
• Animationen, die das Layout auslösen

Insbesondere ist das DOM-Element, das unmittelbar vor dem verschobenen Element liegt, das Element das höchstwahrscheinlich daran beteiligt ist, Layout Shift. Wenn also Untersuchen Sie, 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 nicht den Layout Shift verursacht hat, fahren Sie mit der andere vorhergehende und naheliegende Elemente.

Außerdem können die Richtung und der Abstand eines Layout Shifts Hinweise über die Grundursache erfahren. 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 eines Web-Schriftart.

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

</ph> 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

Solche Änderungen sind häufig 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.

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 modalen Anzeigen
• Unendliches Scrollen und andere UX-Muster, die zusätzliche Inhalte darüber laden vorhandenen Inhalten.

Animationen, die das Layout auslösen

Einige Animationseffekte können ausgelöst werden Layout. Eine gemeinsame Beispiel: DOM-Elemente werden animiert, durch Erhöhen der Attribute wie top oder left, statt CSS- transform Property. Weitere Informationen finden Sie unter Leistungsstarke 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

Bei schwer zu findenden Layout Shifts können Sie diese Übung mit unterschiedliche Geräte und Verbindungsgeschwindigkeiten. Vor allem die Verwendung eines langsameren Verbindungsgeschwindigkeit kann es einfacher machen, Layout Shifts zu erkennen. Außerdem Mit einer debugger-Anweisung können Sie das Layout Schichten.

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