InteractionContentfulPaint

Instanzeigenschaften

Dieses Interface definiert direkt die folgenden Eigenschaften:

InteractionContentfulPaint.interactionId Schreibgeschützt

Die ID der Interaktion, die zum Rendern führte.

InteractionContentfulPaint.largestContentfulPaint Schreibgeschützt

Gibt Details der größten LargestContentfulPaint für die Interaktion zurück. Diese kann zwischen zwei InteractionContentfulPaint-Einträgen für die gleiche Interaktion gleich bleiben, wenn ein neuer contentful paint kleiner ist als der aktuelle größte contentful paint für diese Interaktion.

InteractionContentfulPaint.paintTime Schreibgeschützt

Gibt den timestamp zurück, wann die erste Rendering-Phase endete und die Paint-Phase begann.

InteractionContentfulPaint.presentationTime Schreibgeschützt

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

Es erweitert auch die folgenden PerformanceEntry Eigenschaften, 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 führte.

Instanzmethoden

InteractionContentfulPaint.toJSON()

Überschreibt die PerformanceEntry.toJSON() Methode, um eine JSON-Darstellung des InteractionContentfulPaint Objekts zurückzugeben.

Beschreibung

Das InteractionContentfulPaint liefert einen Strom von Paint-Aktualisierungen, die einer Interaktion zugeschrieben werden können.

Derzeit ist dies auf zunehmende Paint-Größen beschränkt, sodass es verwendet werden kann, um den Largest Contentful Paint (LCP) für Soft Navigations zu messen. Die API wurde jedoch so konzipiert, dass alle für eine Interaktion relevanten Paints ausgegeben werden können.

InteractionContentfulPaint wird anstelle der LargestContentfulPaint API benötigt, da diese nur bei einem vollständigen Seitenladen ausgegeben wird und bei der Interaktion abgeschlossen ist (was ein notwendiger Anfang für eine Soft Navigation ist).

Verwendung von navigationId und interactionId

Für Soft Navigations können Paints, die vor der Aktualisierung der URL stattfinden, für den Largest Contentful Paint (LCP) der laufenden Soft Navigation in Betracht gezogen werden. Für den LCP-Fall sind PerformanceSoftNavigation.getLargestInteractionContentfulPaint() und InteractionContentfulPaint.interactionId effektiver, um alle relevanten Paints unabhängig von der navigationId zu berücksichtigen, wenn diese Metrik berechnet wird.

Beziehung zu Event Timing und INP

Die Event Timing API liefert Details über UIEvents — Planungs- und Verarbeitungsdauern sowie die Gesamtdauer bis zum nächsten Paint — verfolgt jedoch nicht direkt die Auswirkungen dieser Ereignisse oder künftige Paints, die diese Effekte verursachen könnten. Sie soll die Reaktionszeit messen, während der ein Nutzer 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 hat, obwohl ähnlich benannt wie Interaction to Next Paint, einen anderen Zweck. InteractionContentfulPaint schließt nicht-contentful Paints aus, die zwar für Event Timing und INP zählen, aber auch zusätzliche Paints über den ersten Paint hinaus messen. Es ermöglicht, die Effekte und Content-Aktualisierungen direkt zu messen, die einer Interaktion zugeschrieben werden können, was zu einem besseren Verständnis der damit verbundenen Leistungsimplikationen führt.

Beispiele

Beobachtung von Interaktions-Contentful-Paints

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

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 Interaktions-Contentful-Paints spezifisch für eine Soft Navigation

Einer der Hauptanwendungsfälle der InteractionContentfulPaint Schnittstelle ist die Messung aller contentful Paints im Zusammenhang mit einer Soft Navigation, um den Largest Contentful Paint (LCP) für diese Soft Navigation zu berechnen.

Dazu wird empfohlen, die PerformanceSoftNavigation.interactionId anstelle der PerformanceEntry.navigationId zu verwenden, da einige LCP-Kandidaten auftreten können, bevor die Soft Navigation definiert ist (bei 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)