DasLayoutShift-Interface derPerformance-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 alsinstabil 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 einenCLS-Wert zu berechnen.

Instanz-Eigenschaften

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

PerformanceEntry.durationSchreibgeschütztExperimentell

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

PerformanceEntry.entryTypeSchreibgeschütztExperimentell

Gibt immer"layout-shift" zurück.

PerformanceEntry.nameSchreibgeschütztExperimentell

Gibt immer"layout-shift" zurück.

PerformanceEntry.startTimeSchreibgeschütztExperimentell

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

Diese Schnittstelle unterstützt auch die folgenden Eigenschaften:

LayoutShift.valueExperimentell

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.hadRecentInputExperimentell

Gibttrue zurück, wennlastInputTime weniger als 500 Millisekunden in der Vergangenheit liegt.

LayoutShift.lastInputTimeExperimentell

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

LayoutShift.sourcesExperimentell

Gibt ein Array vonLayoutShiftAttribution-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