LayoutShift

Beschreibung

Ein Layout-Shift tritt auf, wenn ein sichtbares Element im Ansichtsfenster seine Position zwischen zwei Frames ändert. Diese Elemente werden als instabil beschrieben, was auf eine mangelnde visuelle Stabilität hinweist.

Die Layout-Instabilitäts-API bietet eine Möglichkeit zur Messung und Berichterstattung dieser Layout-Shifts. Alle Werkzeuge zur Fehlersuche bei Layout-Shifts, einschließlich der Entwicklertools des Browsers, nutzen diese API. Die API kann auch verwendet werden, um Layout-Shifts zu beobachten und zu debuggen, indem Informationen in die Konsole geloggt, die Daten an einen Server-Endpunkt gesendet oder in die Webseitenanalytik einbezogen werden.

Leistungswerkzeuge können diese API verwenden, um einen CLS-Wert zu berechnen.

Instanz-Eigenschaften

Diese Schnittstelle erweitert die folgenden PerformanceEntry-Eigenschaften, indem sie sie wie folgt qualifiziert:

PerformanceEntry.duration Schreibgeschützt Experimentell

Gibt immer 0 zurück (das Konzept der Dauer gilt nicht für Layout-Shifts).

PerformanceEntry.entryType Schreibgeschützt Experimentell

Gibt immer "layout-shift" zurück.

PerformanceEntry.name Schreibgeschützt Experimentell

Gibt immer "layout-shift" zurück.

PerformanceEntry.startTime Schreibgeschützt Experimentell

Gibt einen DOMHighResTimeStamp zurück, der die Zeit repräsentiert, zu der der Layout-Shift begann.

Diese Schnittstelle unterstützt auch die folgenden Eigenschaften:

LayoutShift.value Experimentell

Gibt den Layout-Shift-Wert zurück, berechnet als Wirkungsbruchteil (Bruchteil des verschobenen Ansichtsfensters) multipliziert mit dem Distanzbruchteil (verschobene Entfernung als Bruchteil des Ansichtsfensters).

LayoutShift.hadRecentInput Experimentell

Gibt true zurück, wenn lastInputTime weniger als 500 Millisekunden in der Vergangenheit liegt.

LayoutShift.lastInputTime Experimentell

Gibt die Zeit der jüngsten ausschließenden Eingabe zurück (Benutzereingabe, die diesen Eintrag als Beitrag zum CLS-Wert ausschließt) oder 0, wenn keine ausschließende Eingabe erfolgt ist.

LayoutShift.sources Experimentell

Gibt ein Array von LayoutShiftAttribution-Objekten mit Informationen zu den verschobenen Elementen zurück.

Instanz-Methoden

LayoutShift.toJSON() Experimentell

Konvertiert die Eigenschaften in JSON.

Beispiele

Logging von Layout-Shift-Werten

Das folgende Beispiel zeigt, wie Layout-Shifts erfasst und in die Konsole geloggt werden.

const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    // Count layout shifts without recent user input only
    if (!entry.hadRecentInput) {
      console.log("LayoutShift value:", entry.value);
      if (entry.sources) {
        for (const { node, currentRect, previousRect } of entry.sources)
          console.log("LayoutShift source:", node, {
            currentRect,
            previousRect,
          });
      }
    }
  }
});

observer.observe({ type: "layout-shift", buffered: true });

Spezifikationen

Browser-Kompatibilität

Siehe auch

• LayoutShiftAttribution
• CLS