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

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

PerformanceEntry.entryType Schreibgeschützt

Gibt immer "layout-shift" zurück.

PerformanceEntry.name Schreibgeschützt

Gibt immer "layout-shift" zurück.

PerformanceEntry.startTime Schreibgeschützt

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

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

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

LayoutShift.lastInputTime

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

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

Instanz-Methoden

LayoutShift.toJSON()

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