InteractionContentfulPaint

Instanz-Eigenschaften

Dieses Interface definiert direkt die folgenden Eigenschaften:

InteractionContentfulPaint.interactionId Schreibgeschützt

Die ID der Interaktion, die zum Paint geführt hat.

InteractionContentfulPaint.largestContentfulPaint Schreibgeschützt

Gibt Details des größten LargestContentfulPaint für die Interaktion zurück. Dies kann zwischen zwei InteractionContentfulPaint-Einträgen für dieselbe Interaktion gleich bleiben, wenn ein neuer Contentful Paint kleiner ist als der derzeit größte Contentful Paint für diese Interaktion.

InteractionContentfulPaint.navigationId Schreibgeschützt

Die ID der Navigation, die diesem Paint zugeordnet ist.

InteractionContentfulPaint.paintTime Schreibgeschützt

Gibt den timestamp zurück, wann die erste Renderphase beendet und die Paintphase begonnen hat.

InteractionContentfulPaint.presentationTime Schreibgeschützt

Gibt den timestamp zurück, wann die ersten gemalten Pixel tatsächlich auf dem Bildschirm angezeigt wurden.

Es erweitert auch die folgenden PerformanceEntry-Eigenschaften und qualifiziert und beschränkt sie wie beschrieben:

PerformanceEntry.entryType Schreibgeschützt

Gibt "interaction-contentful-paint" zurück.

PerformanceEntry.duration Schreibgeschützt

Gibt das Ergebnis von InteractionContentfulPaint.presentationTime - PerformanceEntry.startTime zurück.

PerformanceEntry.name Schreibgeschützt

Gibt immer einen leeren String zurück.

PerformanceEntry.startTime Schreibgeschützt

Gibt den timestamp der Interaktion zurück, die zur Soft-Navigation geführt hat.

Beschreibung

Das InteractionContentfulPaint bietet einen Stream von Paint-Updates, die einer Interaktion zugeordnet werden können.

Derzeit ist dies auf zunehmende Paint-Größen beschränkt, sodass es zur Messung der Largest Contentful Paint (LCP) für Soft-Navigations verwendet werden kann. Die API wurde jedoch so gestaltet, dass alle Paints, die für eine Interaktion relevant sind, ausgegeben werden können.

InteractionContentfulPaint ist erforderlich, anstatt die LargestContentfulPaint API zu verwenden, da diese nur bei einem vollständigen Seitenladen ausgegeben und nach einer Interaktion finalisiert wird (was ein notwendiger Start für eine Soft-Navigation ist).

Beziehung zu Event Timing und INP

Die Event Timing API liefert Details über UIEvents — Planung und Verarbeitungsdauern sowie die Gesamtzeit bis zum nächsten Paint — verfolgt jedoch nicht direkt die Auswirkungen dieser Ereignisse, noch alle zukünftigen Paints, die durch diese Effekte verursacht werden können. Sie soll die Reaktionszeit messen, während der ein Benutzer kein Feedback erhält, was auf ein Minimum reduziert werden sollte und die Grundlage für Metriken wie Interaction to Next Paint (INP) bildet.

InteractionContentfulPaint, trotz des ähnlichen Namens zu Interaction to Next Paint, verfolgt einen anderen Zweck. InteractionContentfulPaint schließt nicht-contentful Paints aus, die für Event Timing und INP zählen, misst aber auch zusätzliche Paints über den ersten Paint hinaus. Es ermöglicht die Messung eines vollständigeren Verständnisses der Effekte und Inhaltsaktualisierungen, die direkt auf eine Interaktion zurückzuführen sind.

Beispiele

Beobachtung von interaction contentful paints

Im folgenden Beispiel wird ein PerformanceObserver registriert, um die Soft-Navigations zu erhalten. Das buffered-Flag wird verwendet, um auf Daten vor der Observer-Erstellung zuzugreifen.

const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    console.log("Interaction Contentful Paints:", entry.startTime, entry);
  }
});
observer.observe({ type: "interaction-contentful-paints", buffered: true });

Beobachtung von interaction contentful paints spezifisch für eine Soft-Navigation

Eine der Hauptanwendungen des InteractionContentfulPaint-Interfaces ist die Messung aller contentful paints im Zusammenhang mit einer soft navigation, um die Largest Contentful Paint (LCP) für diese Soft-Navigation zu berechnen.

Dazu wird empfohlen, die PerformanceSoftNavigation.interactionId zu verwenden, anstatt der PerformanceSoftNavigation.navigationId, da einige LCP-Kandidaten auftreten können, bevor die Soft-Navigation definiert ist (für Paints, bevor die URL aktualisiert wird) und daher die alte navigationId haben werden.

let currentNavigationInteractionId = 1045; // hardcoded in this example

const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (entry.InteractionId === currentNavigationInteractionId) {
      console.log("Soft LCP candidate:", entry.startTime, entry);
    }
  }
});
observer.observe({ type: "interaction-contentful-paints", buffered: true });

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Messung von Soft-Navigations auf developer.chrome.com (2026)