PerformanceNavigationTiming.activationStart — Eigenschaft · JavaScript-Referenz

Signatur

PerformanceNavigationTiming.activationStart

Beschreibung

Die schreibgeschützte Eigenschaft activationStart des Interfaces PerformanceNavigationTiming gibt die Zeit zwischen dem Beginn des Prerenderings (Vorab-Renderns) eines Dokuments und seiner Aktivierung an. Die Aktivierung ist der Moment, in dem Nutzer die vorab gerenderte Seite tatsächlich aufrufen. Der Wert wird in Millisekunden relativ zu startTime des Navigationseintrags angegeben, also relativ zum Beginn des Prerenderings.

Wichtig wird die Eigenschaft, sobald man Prerendering nutzt, zum Beispiel über die Speculation Rules API (<script type="speculationrules">). Eine vorab gerenderte Seite lädt oft Sekunden, bevor jemand sie sieht. Ohne Korrektur liefern Metriken wie First Contentful Paint, Largest Contentful Paint oder Time to First Byte dann verzerrte Werte: Sie wirken zu groß, oder sie liegen vor dem Zeitpunkt, an dem die Seite überhaupt sichtbar wurde. Zieht man activationStart ab, erhält man die Zeiten aus Sicht der Nutzer.

Wurde das Dokument nicht vorab gerendert, ist activationStart gleich 0. Ein Wert größer als 0 zeigt also zuverlässig an, dass die Seite vorab gerendert und danach aktiviert wurde. Die Eigenschaft ergänzt document.prerendering und das Ereignis prerenderingchange: Diese beiden sagen zur Laufzeit, ob und wann die Aktivierung stattfindet. activationStart hält den Zeitpunkt nachträglich fest.

Rückgabewert

Typ

DOMHighResTimeStamp (number)

Beschreibung

Zeit in Millisekunden vom Beginn des Prerenderings bis zur Aktivierung des Dokuments. 0, wenn die Seite nicht vorab gerendert wurde.

Beispiele

Prüfen, ob die Seite vorab gerendert wurde

const [nav] = performance.getEntriesByType('navigation');

if (nav && nav.activationStart > 0) {
  console.log(`Vorab gerendert, aktiviert nach ${nav.activationStart.toFixed(1)} ms`);
} else {
  console.log('Normale Navigation ohne Prerendering');
}

Vorab gerendert, aktiviert nach 2345.6 ms

LCP für vorab gerenderte Seiten korrigieren

const getActivationStart = () => {
  const [nav] = performance.getEntriesByType('navigation');
  return nav?.activationStart ?? 0;
};

new PerformanceObserver((list) => {
  const entries = list.getEntries();
  const lastEntry = entries[entries.length - 1];
  // Zeit ab der Aktivierung, nie negativ
  const lcp = Math.max(0, lastEntry.startTime - getActivationStart());
  console.log('LCP aus Sicht der Nutzer:', Math.round(lcp), 'ms');
}).observe({ type: 'largest-contentful-paint', buffered: true });

LCP aus Sicht der Nutzer: 180 ms

TTFB bereinigt an die Analyse senden

const reportTTFB = () => {
  const [nav] = performance.getEntriesByType('navigation');
  if (!nav) return;

  const ttfb = Math.max(0, nav.responseStart - nav.activationStart);
  const payload = JSON.stringify({
    metric: 'TTFB',
    value: Math.round(ttfb),
    prerendered: nav.activationStart > 0
  });
  navigator.sendBeacon('/analytics', payload);
  console.log(payload);
};

// Erst nach der Aktivierung messen, falls noch vorab gerendert wird
if (document.prerendering) {
  document.addEventListener('prerenderingchange', reportTTFB, { once: true });
} else {
  reportTTFB();
}

{"metric":"TTFB","value":0,"prerendered":true}

// Wichtig · Fallstricke

Browser-Unterstützung: Nur in Chromium-Browsern verfügbar (ab Version 108). Firefox und Safari kennen die Eigenschaft nicht, dort ist sie undefined. Deshalb defensiv lesen, etwa mit nav?.activationStart ?? 0, sonst ergeben Berechnungen NaN.
Negative Werte vermeiden: Manche Ereignisse, etwa responseStart, liegen bei vorab gerenderten Seiten vor der Aktivierung. Die Differenz deshalb mit Math.max(0, …) begrenzen.
Zeitpunkt der Messung: Solange document.prerendering den Wert true hat, steht die Aktivierung noch aus. Metriken erst nach dem Ereignis prerenderingchange auswerten und versenden.
Der Wert 0 kann sowohl „nicht vorab gerendert“ als auch „Eigenschaft nicht unterstützt“ bedeuten, wenn man mit ?? 0 einen Ersatzwert setzt. Für eine genaue Unterscheidung vorher 'activationStart' in nav prüfen.
Bibliotheken wie web-vitals ziehen activationStart bereits automatisch ab. Wer sie nutzt, sollte die Korrektur nicht ein zweites Mal selbst anwenden.

Siehe auch

Document.prerendering PerformanceNavigationTiming.criticalCHRestart PerformanceNavigationTiming.loadEventStart PerformanceNavigationTiming.unloadEventStart PerformanceNavigationTiming.domInteractive