PerformanceEventTiming.interactionId — Eigenschaft · JavaScript-Referenz

Signatur

PerformanceEventTiming.interactionId

Beschreibung

Die Eigenschaft interactionId eines PerformanceEventTiming-Eintrags liefert eine numerische ID. Sie fasst alle Ereignisse zusammen, die zu derselben logischen Benutzerinteraktion gehören. Ein einziger Tipp oder Klick erzeugt zum Beispiel pointerdown, pointerup und click, ein Tastendruck erzeugt keydown, keypress und keyup. Alle diese Einträge tragen dieselbe interactionId.

Die ID ist die Grundlage für die Web-Vital-Metrik Interaction to Next Paint (INP). Du gruppierst die Einträge nach interactionId und nimmst für jede Interaktion die längste duration. So misst du, wie lange die Seite auf eine echte Benutzerhandlung braucht, und nicht nur auf ein einzelnes Ereignis.

Ereignisse, die zu keiner diskreten Interaktion gehören, haben die interactionId 0. Das gilt etwa für mouseover, pointermove oder scroll. Solche Einträge filterst du bei der INP-Auswertung in der Regel heraus. Die Werte sind nicht fortlaufend nummeriert. Sie sind nur innerhalb des aktuellen Dokuments eindeutig und haben keine weitere Bedeutung.

Rückgabewert

Typ

number

Beschreibung

Eine positive Ganzzahl, die die Interaktion kennzeichnet, oder 0, wenn das Ereignis zu keiner Benutzerinteraktion gehört.

Beispiele

Interaktions-IDs von Ereignissen protokollieren

const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (entry.interactionId > 0) {
      console.log(`${entry.name}: id=${entry.interactionId}, Dauer=${entry.duration} ms`);
    }
  }
});

// durationThreshold: 16 erfasst auch schnelle Ereignisse (Standard: 104 ms)
observer.observe({ type: 'event', buffered: true, durationThreshold: 16 });

pointerdown: id=4711, Dauer=24 ms pointerup: id=4711, Dauer=24 ms click: id=4711, Dauer=32 ms

Vereinfachte INP-Berechnung: längste Interaktion ermitteln

const interactions = new Map(); // interactionId -> längste Dauer

const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (!entry.interactionId) continue; // Ereignisse ohne Interaktion überspringen
    const bisher = interactions.get(entry.interactionId) ?? 0;
    interactions.set(entry.interactionId, Math.max(bisher, entry.duration));
  }
});

observer.observe({ type: 'event', buffered: true, durationThreshold: 16 });

// Beim Verlassen der Seite den schlechtesten Wert melden
document.addEventListener('visibilitychange', () => {
  if (document.visibilityState === 'hidden' && interactions.size > 0) {
    const worst = Math.max(...interactions.values());
    navigator.sendBeacon('/analytics', JSON.stringify({ inpApprox: worst }));
  }
});

Unterstützung prüfen

const supportsInteractionId =
  'PerformanceEventTiming' in window &&
  'interactionId' in PerformanceEventTiming.prototype;

console.log(supportsInteractionId ? 'INP messbar' : 'interactionId nicht verfügbar');

INP messbar

// Wichtig · Fallstricke

Browser-Kompatibilität: Chromium-Browser (Chrome, Edge, Opera) und Firefox unterstützen die Eigenschaft (Firefox ab Version 144). Safari unterstützt sie bisher nicht. Prüfe die Unterstützung, bevor du dich darauf verlässt.
Der Wert 0 bedeutet keine Interaktion. Das ist kein Fehler. Filtere diese Einträge bei der INP-Auswertung heraus.
Die IDs sind weder fortlaufend noch vorhersagbar. Nutze sie nur zum Gruppieren und rechne nicht mit ihnen.
Standardmäßig meldet der Browser nur Ereignisse, die länger als 104 ms dauern. Mit durationThreshold setzt du die Schwelle herab, das Minimum ist 16 ms. Werte für duration sind auf 8 ms gerundet.
Die offizielle INP-Berechnung ist aufwendiger. Sie verwirft bei vielen Interaktionen Ausreißer (etwa das 98. Perzentil). Im Produktivbetrieb ist die Bibliothek web-vitals zuverlässiger als eine eigene Umsetzung.

Siehe auch

PerformanceElementTiming.naturalHeight PerformanceEventTiming.target PerformanceEventTiming.cancelable PerformanceEventTiming.processingEnd PerformanceEventTiming.processingStart