InteractionContentfulPaint.interactionId — Eigenschaft · JavaScript-Referenz

Signatur

InteractionContentfulPaint.interactionId

Beschreibung

Die schreibgeschützte Eigenschaft interactionId der Schnittstelle InteractionContentfulPaint ist eine Zahl, die angibt, welche Nutzerinteraktion (Klick, Tastendruck, Tippen) zur Darstellung des gemessenen Inhalts geführt hat. Sie hat denselben Wert wie PerformanceEventTiming.interactionId der zugehörigen Event-Einträge.

InteractionContentfulPaint-Einträge (Eintragstyp "interaction-contentful-paint") funktionieren ähnlich wie LargestContentfulPaint, messen aber die größte inhaltsvolle Darstellung nach einer Interaktion, etwa nach einer Soft Navigation in einer Single-Page-App. Mit interactionId lassen sich diese Paints der auslösenden Interaktion zuordnen.

Typische Anwendungsfälle:

Die Zeit von der Eingabe (PerformanceEventTiming.startTime) bis zum sichtbaren Ergebnis (renderTime) berechnen.
Paints in der Real-User-Monitoring-Analyse (RUM) nach Interaktionen gruppieren.
Langsame Interaktionen erkennen, bei denen zwar schnell reagiert, der eigentliche Inhalt aber erst spät angezeigt wird.

Rückgabewert

Typ

number

Beschreibung

Eine positive ganze Zahl, die die auslösende Interaktion kennzeichnet. Sie entspricht der interactionId des zugehörigen PerformanceEventTiming-Eintrags.

Beispiele

Interaktions-Paints beobachten

if (PerformanceObserver.supportedEntryTypes.includes('interaction-contentful-paint')) {
  const observer = new PerformanceObserver((list) => {
    for (const entry of list.getEntries()) {
      console.log(`Interaktion ${entry.interactionId}: Paint nach ${Math.round(entry.renderTime || entry.loadTime)} ms`, entry.element);
    }
  });
  observer.observe({ type: 'interaction-contentful-paint', buffered: true });
} else {
  console.log('interaction-contentful-paint wird nicht unterstützt');
}

Interaktion 7251: Paint nach 4312 ms <img ...>

Zeit von der Eingabe bis zum sichtbaren Inhalt messen

// Startzeit jeder Interaktion merken
const interactionStart = new Map();

new PerformanceObserver((list) => {
  for (const e of list.getEntries()) {
    if (e.interactionId && !interactionStart.has(e.interactionId)) {
      interactionStart.set(e.interactionId, e.startTime);
    }
  }
}).observe({ type: 'event', durationThreshold: 16, buffered: true });

new PerformanceObserver((list) => {
  for (const icp of list.getEntries()) {
    const start = interactionStart.get(icp.interactionId);
    if (start === undefined) continue;
    const paintTime = icp.renderTime || icp.loadTime;
    console.log(`Eingabe → Inhalt: ${Math.round(paintTime - start)} ms`);
  }
}).observe({ type: 'interaction-contentful-paint', buffered: true });

Eingabe → Inhalt: 684 ms

Nur den letzten (größten) Paint pro Interaktion melden

const largestPerInteraction = new Map();

new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    // spätere Einträge derselben Interaktion ersetzen frühere Kandidaten
    largestPerInteraction.set(entry.interactionId, entry);
  }
}).observe({ type: 'interaction-contentful-paint', buffered: true });

addEventListener('visibilitychange', () => {
  if (document.visibilityState !== 'hidden') return;
  const payload = [...largestPerInteraction.values()].map((e) => ({
    interactionId: e.interactionId,
    renderTime: Math.round(e.renderTime || e.loadTime),
    size: e.size,
  }));
  navigator.sendBeacon('/rum', JSON.stringify(payload));
});

// Wichtig · Fallstricke

Experimentell: InteractionContentfulPaint gibt es bisher nur in Chromium-Browsern, meist im Zusammenhang mit der Soft-Navigation-Heuristik und teils nur hinter Flag oder in einem Origin Trial. Prüfe die Unterstützung vorher mit PerformanceObserver.supportedEntryTypes.includes('interaction-contentful-paint'). Name und Verhalten können sich noch ändern.
Der Wert von interactionId ist eine undurchsichtige Kennung. Er zählt nicht lückenlos hoch und sollte nur zum Vergleich auf Gleichheit genutzt werden.
Wie bei LCP kann es pro Interaktion mehrere Kandidaten-Einträge geben. Aussagekräftig ist meist der letzte bzw. größte.
Die passenden event-Einträge erscheinen nur, wenn sie über der eingestellten durationThreshold liegen (Standard: 104 ms, Minimum: 16 ms). Sonst findest du zur interactionId eventuell keinen Event-Eintrag.
Bei Bildern von fremden Ursprüngen ohne Timing-Allow-Origin-Header ist renderTime möglicherweise 0. Nimm dann loadTime als Ersatz.

Siehe auch

InteractionContentfulPaint.largestContentfulPaint InteractionContentfulPaint.paintTime InteractionContentfulPaint.presentationTime PerformanceEventTiming.interactionId LargestContentfulPaint.renderTime