InteractionContentfulPaint

Instanzeigenschaften

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 zum größten LargestContentfulPaint der Interaktion zurück. Dieser Wert kann bei zwei InteractionContentfulPaint-Einträgen derselben Interaktion gleich bleiben, wenn ein neuer Contentful Paint kleiner ist als der bisher größte Contentful Paint dieser Interaktion.

InteractionContentfulPaint.paintTime Schreibgeschützt

Gibt den Zeitstempel zurück, zu dem die erste Rendering-Phase endete und die Paint-Phase begann.

InteractionContentfulPaint.presentationTime Schreibgeschützt

Gibt den Zeitstempel zurück, zu dem die ersten gerenderten Pixel tatsächlich auf dem Bildschirm dargestellt wurden.

Es erweitert außerdem die folgenden Eigenschaften von PerformanceEntry und präzisiert beziehungsweise 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 eine leere Zeichenfolge zurück.

PerformanceEntry.startTime Schreibgeschützt

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

Instanzmethoden

InteractionContentfulPaint.toJSON()

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

Beschreibung

InteractionContentfulPaint liefert einen Datenstrom von Paint-Aktualisierungen, die einer Interaktion zugeordnet werden können.

Derzeit ist dies auf Paints mit zunehmender Größe beschränkt. Damit lässt sich Largest Contentful Paint (LCP) für Soft Navigations messen. Die API wurde jedoch so konzipiert, dass alle für eine Interaktion relevanten Paints ausgegeben werden können.

InteractionContentfulPaint wird benötigt, statt die LargestContentfulPaint-API zu verwenden: Diese gibt Einträge nur pro vollständigem Seitenladen aus und wird bei einer Interaktion abgeschlossen. Eine Interaktion ist wiederum der notwendige Ausgangspunkt für eine Soft Navigation.

navigationId und interactionId verwenden

Bei Soft Navigations können Paints, die vor der Aktualisierung der URL stattfinden, für den Largest Contentful Paint (LCP) der laufenden Soft Navigation berücksichtigt werden. Bei der Berechnung dieser Metrik lassen sich mit PerformanceSoftNavigation.getLargestInteractionContentfulPaint() und InteractionContentfulPaint.interactionId alle relevanten Paints unabhängig von der navigationId besser berücksichtigen.

Beziehung zu Event Timing und INP

Die Event Timing API liefert Details zu UIEvents – etwa zur Dauer ihrer Einplanung und Verarbeitung sowie zur Gesamtdauer bis zum nächsten Paint. Sie erfasst jedoch weder die Auswirkungen dieser Ereignisse direkt noch spätere Paints, die durch diese Auswirkungen entstehen können. Sie dient dazu, die Reaktionszeit zu messen, während der ein Benutzer keine Rückmeldung erhält. Diese Zeit sollte möglichst kurz sein und bildet die Grundlage für Metriken wie Interaction to Next Paint (INP).

Trotz der Namensähnlichkeit mit Interaction to Next Paint erfüllt InteractionContentfulPaint einen anderen Zweck. InteractionContentfulPaint schließt Paints aus, die keine Inhalte darstellen und die bei Event Timing und INP mitgezählt werden. Zugleich erfasst es weitere Paints über den ersten Paint hinaus. So lassen sich die Auswirkungen und Inhaltsaktualisierungen messen, die direkt auf eine Interaktion zurückzuführen sind, und die damit verbundenen Leistungsauswirkungen besser verstehen.

Beispiele

Contentful Paints von Interaktionen beobachten

Im folgenden Beispiel wird ein PerformanceObserver registriert, um die Soft Navigations zu erfassen. Mit dem Flag buffered wird auf Daten zugegriffen, die vor der Erstellung des Observers erfasst wurden.

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 });

Contentful Paints von Interaktionen für eine bestimmte Soft Navigation beobachten

Ein wichtiger Anwendungsfall des Interfaces InteractionContentfulPaint besteht darin, alle Contentful Paints zu messen, die mit einer Soft Navigation zusammenhängen, um den Largest Contentful Paint (LCP) dieser Soft Navigation zu berechnen.

Dafür wird empfohlen, PerformanceSoftNavigation.interactionId statt PerformanceEntry.navigationId zu verwenden. Einige LCP-Kandidaten können auftreten, bevor die Soft Navigation definiert ist – bei Paints also vor der Aktualisierung der URL – und haben daher noch die alte navigationId.

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

• Soft Navigations messen auf developer.chrome.com (2026)