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. Der Wert kann bei zwei InteractionContentfulPaint-Einträgen für dieselbe 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 gezeichneten 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 als JSON serialisierbares einfaches Objekt zurück, das das InteractionContentfulPaint-Objekt repräsentiert. Die Methode wird automatisch von JSON.stringify() aufgerufen.

Beschreibung

InteractionContentfulPaint stellt einen Strom von Paint-Aktualisierungen bereit, die einer Interaktion zugeordnet werden können.

Derzeit werden dabei nur zunehmende Paint-Größen erfasst. So lässt sich der Largest Contentful Paint (LCP) für Soft Navigations messen. Die API ist jedoch so konzipiert, dass sie alle für eine Interaktion relevanten Paints ausgeben kann.

InteractionContentfulPaint wird anstelle der LargestContentfulPaint-API benötigt, da diese nur für jeden vollständigen Seitenladevorgang Einträge ausgibt und bei einer Interaktion abgeschlossen wird. Eine solche Interaktion ist der notwendige Ausgangspunkt für eine Soft Navigation.

Verwendung von navigationId und interactionId

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 eignen sich PerformanceSoftNavigation.getLargestInteractionContentfulPaint() und InteractionContentfulPaint.interactionId besser, um unabhängig von der navigationId alle relevanten Paints zu berücksichtigen.

Zusammenhang mit Event Timing und INP

Die Event Timing API liefert Details zu UIEvents – etwa zur Dauer der 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önnten. Sie soll die Reaktionszeit messen, während der Benutzer keine Rückmeldung erhalten. 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 ohne inhaltliche Änderungen aus, die bei Event Timing und INP berücksichtigt werden, erfasst dafür aber auch weitere Paints nach dem ersten Paint. Dadurch lassen sich die Auswirkungen und Inhaltsaktualisierungen messen, die direkt auf eine Interaktion zurückgehen. Dies ermöglicht ein besseres Verständnis der damit verbundenen Auswirkungen auf die Performance.

Beispiele

Contentful Paints einer Interaktion beobachten

Im folgenden Beispiel wird ein PerformanceObserver registriert, um Contentful Paints von Interaktionen zu erfassen. Mit dem Flag buffered kann auch auf Daten zugegriffen werden, 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-paint", buffered: true });

Contentful Paints einer Interaktion für eine bestimmte Soft Navigation beobachten

Eine wichtige Anwendung des InteractionContentfulPaint-Interfaces besteht darin, alle Contentful Paints zu messen, die mit einer Soft Navigation zusammenhängen, um den Largest Contentful Paint (LCP) für diese Soft Navigation zu berechnen.

Dazu empfiehlt es sich, PerformanceSoftNavigation.interactionId statt PerformanceEntry.navigationId zu verwenden. Einige LCP-Kandidaten können auftreten, bevor die Soft Navigation definiert ist – bei Paints also bevor die URL aktualisiert wird – 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-paint", buffered: true });

Spezifikationen

Browser-Kompatibilität

Siehe auch

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