InteractionContentfulPaint — Schnittstelle · JavaScript-Referenz

Signatur

interface InteractionContentfulPaint extends PerformanceEntry

Beschreibung

InteractionContentfulPaint ist eine Schnittstelle der Performance API. Sie ist eng verwandt mit LargestContentfulPaint, bezieht sich aber nicht auf das erste Laden der Seite. Stattdessen misst sie Paints, die nach einer Nutzerinteraktion entstehen, also inhaltsreiche Darstellungen wie Bilder, Textblöcke oder Videoposter, die durch einen Klick, Tastendruck oder eine Soft-Navigation in einer Single-Page-Application (SPA) ausgelöst wurden.

Die Einträge erzeugt der Browser selbst. Du legst sie nicht mit einem Konstruktor an, sondern liest sie über einen PerformanceObserver mit dem Eintragstyp "interaction-contentful-paint" aus. Jeder Eintrag erbt von PerformanceEntry (name, entryType, startTime, duration) und liefert zusätzlich, ähnlich wie bei LCP, Angaben wie renderTime, loadTime, size, id, url und element.

Die Schnittstelle ist vor allem für Real User Monitoring (RUM) in SPAs gedacht. Ohne sie gibt es für clientseitige Routenwechsel keine verlässliche LCP-ähnliche Kennzahl, weil largest-contentful-paint nach der ersten Interaktion keine Einträge mehr meldet. Zusammen mit SoftNavigationEntry kannst du so „Soft LCP“-Werte pro Routenwechsel messen.

Parameter

Name	Typ	Beschreibung
$renderTime	DOMHighResTimeStamp	Zeitpunkt, zu dem das Element auf dem Bildschirm dargestellt wurde. Bei ursprungsübergreifenden Bildern ohne `Timing-Allow-Origin` kann der Wert eingeschränkt oder `0` sein.
$loadTime	DOMHighResTimeStamp	Ladezeitpunkt der Ressource (bei Bildern), sonst `0`.
$size	number	Sichtbare Fläche des Elements in Quadratpixeln.
$id	string	`id`-Attribut des Elements oder leerer String.
$url	string	URL des Bildes, bei Textelementen ein leerer String.
$element	Element \| null	Das gemalte Element. `null`, wenn es nicht mehr im DOM ist.
$startTime / entryType / name / duration	geerbt von PerformanceEntry	`entryType` ist `"interaction-contentful-paint"`. `duration` ist in der Regel `0`.

Rückgabewert

Typ

InteractionContentfulPaint

Beschreibung

Einträge dieses Typs landen in der Eintragsliste eines PerformanceObserver. Über einen öffentlichen Konstruktor lassen sie sich nicht anlegen.

Beispiele

Unterstützung prüfen und Einträge beobachten

const TYPE = 'interaction-contentful-paint';

if (PerformanceObserver.supportedEntryTypes?.includes(TYPE)) {
  const observer = new PerformanceObserver((list) => {
    for (const entry of list.getEntries()) {
      console.log(entry.entryType, Math.round(entry.startTime), entry.size, entry.element);
    }
  });
  observer.observe({ type: TYPE, buffered: true });
} else {
  console.log('InteractionContentfulPaint wird nicht unterstützt');
}

interaction-contentful-paint 5234 48000 <img id="hero">

Größten Paint nach einem Klick ermitteln (Soft-LCP-Annäherung)

let largest = null;

const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (!largest || entry.size > largest.size) largest = entry;
  }
});
observer.observe({ type: 'interaction-contentful-paint', buffered: true });

document.querySelector('#nav-produkte')?.addEventListener('click', () => {
  largest = null; // neue Messung pro Interaktion
});

// Beim Verlassen der Seite an das Monitoring senden
document.addEventListener('visibilitychange', () => {
  if (document.visibilityState === 'hidden' && largest) {
    navigator.sendBeacon('/rum', JSON.stringify({
      metric: 'icp',
      value: Math.round(largest.renderTime || largest.startTime),
      element: largest.id || largest.url || 'text'
    }));
  }
});

Zusammen mit Soft-Navigationen auswerten

const types = PerformanceObserver.supportedEntryTypes ?? [];

if (types.includes('soft-navigation') && types.includes('interaction-contentful-paint')) {
  new PerformanceObserver((list) => {
    for (const nav of list.getEntries()) {
      console.log('Soft-Navigation zu', nav.name, 'bei', Math.round(nav.startTime), 'ms');
    }
  }).observe({ type: 'soft-navigation', buffered: true });

  new PerformanceObserver((list) => {
    const last = list.getEntries().at(-1);
    console.log('Letzter Interaction-Paint:', Math.round(last.startTime), 'ms');
  }).observe({ type: 'interaction-contentful-paint', buffered: true });
}

Soft-Navigation zu https://example.com/produkte bei 4810 ms Letzter Interaction-Paint: 5234 ms

// Wichtig · Fallstricke

Experimentell: Die Schnittstelle gehört zu den Soft-Navigation-Heuristiken und ist bislang nur in Chromium verfügbar, entweder über einen Origin Trial oder das Flag chrome://flags/#soft-navigation-heuristics. Firefox und Safari unterstützen sie nicht. Prüfe die Unterstützung deshalb immer mit PerformanceObserver.supportedEntryTypes.
Die Spezifikation ändert sich noch. Eigenschaftsnamen und die Zuordnung zu Interaktionen können sich verschieben, also greife defensiv zu, z. B. mit entry.renderTime || entry.startTime.
Bei ursprungsübergreifenden Bildern ohne Timing-Allow-Origin-Header ist renderTime eingeschränkt, ähnlich wie bei LCP.
element hält eine Referenz auf den DOM-Knoten. Wenn du Einträge lange speicherst, können entfernte Elemente nicht freigegeben werden. Lies deshalb nur die Daten aus, die du brauchst.
Nicht jede Interaktion erzeugt einen Eintrag. Es werden nur inhaltsreiche Paints gezählt, die der Interaktion zugeordnet werden können.

Siehe auch

LargestContentfulPaint SVGTextContentElement FederatedCredentialInit HTMLSelectedContentElement IntersectionObserver