PerformanceNavigationTiming.criticalCHRestart — Eigenschaft · JavaScript-Referenz

Signatur

PerformanceNavigationTiming.criticalCHRestart

Beschreibung

Mit Client-Hints kann ein Server den Browser bitten, zusätzliche Informationen mitzuschicken, etwa Sec-CH-Prefers-Color-Scheme, Sec-CH-UA-Model oder DPR. Welche Hints der Server haben möchte, gibt er im Antwort-Header Accept-CH an. Beim allerersten Besuch kennt der Browser diese Liste aber noch nicht und schickt die Hints deshalb nicht mit.

Ist ein Hint für die Darstellung der Seite unverzichtbar, kann der Server ihn zusätzlich im Antwort-Header Critical-CH aufführen. Fehlt dieser Hint in der ursprünglichen Anfrage, verwirft der Browser die Antwort und startet die Navigation neu, diesmal mit dem Hint. Dieser Neustart kostet mindestens einen zusätzlichen Hin- und Rückweg zum Server.

Die Eigenschaft criticalCHRestart gibt an, wann dieser Neustart passiert ist, relativ zu startTime der Navigation (also meistens zum timeOrigin). Ist die Navigation ohne Neustart abgelaufen, ist der Wert 0. So kannst du in der Praxis messen, wie oft und wie teuer Critical-CH-Neustarts für echte Nutzer sind, und das zum Beispiel über RUM-Tools (Real User Monitoring) auswerten.

Rückgabewert

Typ

DOMHighResTimeStamp (number)

Beschreibung

Zeitpunkt des Navigations-Neustarts in Millisekunden, relativ zum Beginn der Navigation. 0, wenn kein Neustart durch Critical-CH stattgefunden hat. In nicht unterstützenden Browsern ist die Eigenschaft undefined.

Beispiele

Prüfen, ob die Seite wegen Critical-CH neu geladen wurde

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

if (!nav || !('criticalCHRestart' in nav)) {
  console.log('criticalCHRestart wird nicht unterstützt');
} else if (nav.criticalCHRestart > 0) {
  console.log(`Neustart nach ${nav.criticalCHRestart.toFixed(1)} ms`);
} else {
  console.log('Kein Critical-CH-Neustart');
}

Kein Critical-CH-Neustart

Mit PerformanceObserver erfassen und an Analytics senden

const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    const restart = entry.criticalCHRestart ?? null;
    if (restart === null) continue; // Browser unterstützt es nicht

    const payload = JSON.stringify({
      url: entry.name,
      criticalCHRestart: restart,
      restarted: restart > 0,
      responseStart: entry.responseStart
    });
    navigator.sendBeacon('/rum/navigation', payload);
  }
});

// buffered: true liefert auch den bereits erzeugten Navigationseintrag
observer.observe({ type: 'navigation', buffered: true });

Anteil des Neustarts an der Zeit bis zum ersten Byte

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

if (nav?.criticalCHRestart > 0) {
  const ttfb = nav.responseStart - nav.startTime;
  const share = (nav.criticalCHRestart / ttfb) * 100;
  console.log(`TTFB: ${ttfb.toFixed(0)} ms, davon vor dem Neustart: ${share.toFixed(0)} %`);
}

TTFB: 420 ms, davon vor dem Neustart: 45 %

// Wichtig · Fallstricke

Experimentell: Die Eigenschaft gibt es nur in Chromium-basierten Browsern (Chrome, Edge, Opera). Firefox und Safari kennen sie nicht, dort ist sie undefined. Deshalb vorher mit 'criticalCHRestart' in entry oder ?? prüfen.
Der Wert 0 bedeutet „kein Neustart“ und nicht „Neustart zum Zeitpunkt 0“.
Ein Neustart passiert höchstens einmal pro Navigation. Er tritt nur auf, wenn der Hint sowohl in Accept-CH als auch in Critical-CH steht und in der ersten Anfrage gefehlt hat. Accept-CH und Critical-CH sind beides Antwort-Header des Servers.
Client-Hints werden nur über sichere Verbindungen (HTTPS) gesendet.
Häufige Neustarts verschlechtern TTFB und LCP. Setze Critical-CH deshalb nur für Hints ein, ohne die die Seite wirklich falsch dargestellt würde.

Siehe auch

PerformanceNavigationTiming.domContentLoadedEventStart PerformanceNavigationTiming.activationStart PerformanceNavigationTiming.loadEventStart PerformanceNavigationTiming.unloadEventStart PerformanceNavigationTiming.confidence