LayoutShift

Beschreibung

Eine Layout-Verschiebung tritt auf, wenn ein im Viewport sichtbares Element zwischen zwei Frames seine Position ändert. Solche Elemente gelten als instabil, was auf eine mangelnde visuelle Stabilität hinweist.

Die Layout Instability API ermöglicht es, diese Layout-Verschiebungen zu messen und zu erfassen. Alle Werkzeuge zur Fehlersuche bei Layout-Verschiebungen, einschließlich der Entwicklertools des Browsers, verwenden diese API. Sie können die API auch verwenden, um Layout-Verschiebungen zu beobachten und zu untersuchen, indem Sie Informationen in der Konsole protokollieren, Daten an einen Server-Endpunkt senden oder sie für die Webseitenanalyse nutzen.

Performance-Werkzeuge können mit dieser API einen CLS-Wert berechnen.

Instanzeigenschaften

Diese Schnittstelle erweitert die folgenden Eigenschaften von PerformanceEntry, wobei für sie Folgendes gilt:

PerformanceEntry.duration Schreibgeschützt

Gibt immer 0 zurück (das Konzept einer Dauer ist auf Layout-Verschiebungen nicht anwendbar).

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 den Zeitpunkt angibt, zu dem die Layout-Verschiebung begann.

Diese Schnittstelle unterstützt außerdem die folgenden Eigenschaften:

LayoutShift.value Schreibgeschützt

Gibt den Wert der Layout-Verschiebung zurück. Er berechnet sich aus dem Anteil des betroffenen Viewports (impact fraction) multipliziert mit der zurückgelegten Strecke als Anteil des Viewports (distance fraction).

LayoutShift.hadRecentInput Schreibgeschützt

Gibt true zurück, wenn lastInputTime weniger als 500 Millisekunden zurückliegt.

LayoutShift.lastInputTime Schreibgeschützt

Gibt den Zeitpunkt der letzten ausschließenden Nutzereingabe zurück (einer Eingabe, aufgrund der dieser Eintrag nicht zum CLS-Wert beiträgt), oder 0, wenn keine solche Eingabe stattgefunden hat.

LayoutShift.sources Schreibgeschützt

Gibt ein Array von LayoutShiftAttribution-Objekten mit Informationen über die verschobenen Elemente zurück.

Instanzmethoden

LayoutShift.toJSON()

Gibt ein JSON-serialisierbares einfaches Objekt zurück, das das LayoutShift-Objekt repräsentiert. Wird von JSON.stringify() automatisch aufgerufen.

Beispiele

Werte von Layout-Verschiebungen protokollieren

Das folgende Beispiel zeigt, wie Sie Layout-Verschiebungen erfassen und in der Konsole protokollieren.

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