LayoutShift

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig, bevor Sie diese produktiv verwenden.

Das LayoutShift-Interface der Performance-API bietet Einblicke in die Layout-Stabilität von Webseiten basierend auf Bewegungen der Elemente auf der Seite.

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.

PerformanceEntry LayoutShift

Instanz-Eigenschaften

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

PerformanceEntry.duration Nur lesbar Experimentell

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

PerformanceEntry.entryType Nur lesbar Experimentell

Gibt immer "layout-shift" zurück.

PerformanceEntry.name Nur lesbar Experimentell

Gibt immer "layout-shift" zurück.

PerformanceEntry.startTime Nur lesbar 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.

js
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

Specification
Layout Instability
# sec-layout-shift

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch