PerformanceSoftNavigation.getLargestInteractionContentfulPaint() — Methode · JavaScript-Referenz

Signatur

PerformanceSoftNavigation.prototype.getLargestInteractionContentfulPaint()

Beschreibung

Bei Single-Page-Applications wechselt die Ansicht, ohne dass ein neues Dokument geladen wird. Solche Wechsel nennt man Soft-Navigationen. Klassische Kennzahlen wie Largest Contentful Paint (LCP) beziehen sich nur auf den ersten Seitenaufruf. Mit der experimentellen Soft-Navigations-API legt der Browser für jede erkannte Soft-Navigation einen PerformanceSoftNavigation-Eintrag an (Eintragstyp "soft-navigation"). Die Methode getLargestInteractionContentfulPaint() liefert dazu den größten Inhalts-Paint, der nach der auslösenden Interaktion gezeichnet wurde.

Man nutzt sie im Real User Monitoring (RUM), um für jeden Routenwechsel einen LCP-ähnlichen Wert zu erheben: Wie lange dauerte es vom Klick bis zum Rendern des wichtigsten Inhalts der neuen Ansicht? Der Eintrag wird geliefert, während die Messung noch läuft. Das Ergebnis ist also eine Momentaufnahme: Wird später ein noch größeres Element gezeichnet, gibt ein erneuter Aufruf einen anderen Eintrag zurück.

Die Methode erwartet keine Argumente. Ist noch kein passender Paint erfasst, gibt sie null zurück. Sinnvoll ist der Aufruf deshalb erst, wenn die Messung weitgehend abgeschlossen ist – etwa bei der nächsten Soft-Navigation oder wenn die Seite ausgeblendet wird (visibilitychange).

Rückgabewert

Typ

InteractionContentfulPaint | null

Beschreibung

Der größte bisher erfasste InteractionContentfulPaint-Eintrag dieser Soft-Navigation mit Angaben wie startTime, size und element, oder null, wenn es noch keinen gibt.

Beispiele

Unterstützung prüfen und Soft-Navigationen beobachten

const supported = PerformanceObserver.supportedEntryTypes?.includes('soft-navigation');

if (!supported) {
  console.log('Soft-Navigations-API wird nicht unterstützt');
} else {
  const observer = new PerformanceObserver((list) => {
    for (const nav of list.getEntries()) {
      const icp = nav.getLargestInteractionContentfulPaint?.();
      console.log(nav.name, icp ? `${Math.round(icp.startTime - nav.startTime)} ms` : 'noch kein Paint');
    }
  });
  observer.observe({ type: 'soft-navigation', buffered: true });
}

https://example.com/produkte noch kein Paint

Endgültigen Wert beim Verlassen der Ansicht melden

let currentNav = null;

const report = (nav) => {
  const icp = nav?.getLargestInteractionContentfulPaint?.();
  if (!icp) return;
  const payload = JSON.stringify({
    url: nav.name,
    icp: Math.round(icp.startTime - nav.startTime),
    size: icp.size
  });
  navigator.sendBeacon('/rum', payload);
};

new PerformanceObserver((list) => {
  for (const nav of list.getEntries()) {
    // Vorherige Soft-Navigation ist abgeschlossen -> jetzt melden
    report(currentNav);
    currentNav = nav;
  }
}).observe({ type: 'soft-navigation', buffered: true });

document.addEventListener('visibilitychange', () => {
  if (document.visibilityState === 'hidden') report(currentNav);
});

Größtes Element einer Ansicht ermitteln

const [lastNav] = performance.getEntriesByType('soft-navigation').slice(-1);
const icp = lastNav?.getLargestInteractionContentfulPaint?.();

if (icp) {
  console.log('Größtes Element:', icp.element?.tagName, 'Fläche:', icp.size);
}

Größtes Element: IMG Fläche: 184320

// Wichtig · Fallstricke

Experimentell: Die API gibt es bislang nur in Chromium-Browsern, und zwar per Origin Trial oder über das Flag „Experimental Web Platform features“. Firefox und Safari unterstützen sie nicht. Frühere Chrome-Versionen hatten nur SoftNavigationEntry ohne diese Methode. Deshalb immer mit supportedEntryTypes und optionalem Aufruf (?.()) auf Unterstützung prüfen.
Der Rückgabewert ist nur eine Momentaufnahme. Wer zu früh aufruft, bekommt null oder einen zu kleinen Wert. Melde den Wert erst beim Wechsel zur nächsten Soft-Navigation oder bei visibilitychange.
Die Zeitwerte beziehen sich auf performance.timeOrigin. Für die Dauer ab der Interaktion also startTime des Navigationseintrags abziehen.
Ohne Timing-Allow-Origin-Header ist renderTime bei Bildern von fremden Ursprüngen (Cross-Origin) eingeschränkt.
Nicht jeder Routenwechsel zählt als Soft-Navigation. Der Browser verlangt eine Nutzerinteraktion, eine URL-Änderung über die History-API und eine DOM-Änderung.

Siehe auch

PerformanceSoftNavigation.toJSON() PerformanceNavigationTiming.toJSON() PerformanceLongAnimationFrameTiming.toJSON() PerformanceNavigation.toJSON() PerformanceObserverEntryList.getEntries()