Signatur
Beschreibung
Die schreibgeschützte Eigenschaft largestContentfulPaint gehört zur experimentellen Soft-Navigation-API. Sie verweist auf den LargestContentfulPaint-Eintrag, der nach einer Nutzerinteraktion bzw. Soft-Navigation den bisher größten Inhalt gezeichnet hat. Soft-Navigationen sind URL-Wechsel in Single-Page-Anwendungen (z. B. über history.pushState() oder die Navigation-API), bei denen kein vollständiger Seitenaufruf stattfindet.
Die klassische LCP-Metrik misst nur den ersten Seitenaufruf. In SPAs endet die Messung also, sobald die Anwendung geladen ist, und jeder weitere Ansichtswechsel bleibt unberücksichtigt. Mit InteractionContentfulPaint bzw. PerformanceSoftNavigation ordnet der Browser Paints einer bestimmten Interaktion zu. Über largestContentfulPaint bekommt man dann einen LCP-Wert pro Ansicht, sodass sich auch „virtuelle“ Seitenwechsel sinnvoll auswerten lassen.
Weil sich der größte Paint im Lauf der Zeit ändern kann, ist der Wert eine Momentaufnahme. Größere Inhalte, die später gezeichnet werden, ersetzen den Eintrag. Für Monitoring nimmt man üblicherweise den letzten Wert, der vor der nächsten Interaktion bzw. Soft-Navigation oder vor dem Verlassen der Seite gemeldet wurde.
Rückgabewert
LargestContentfulPaint-Eintrag für diese Interaktion bzw. Soft-Navigation mit Eigenschaften wie startTime, renderTime, size, element und url. Wurde noch nichts Passendes gezeichnet, ist der Wert je nach Implementierung null.Beispiele
Unterstützung prüfen und Soft-Navigation-LCP beobachten
// Nur ausführen, wenn der Browser den Eintragstyp kennt
const types = PerformanceObserver.supportedEntryTypes ?? [];
if (types.includes('interaction-contentful-paint')) {
const observer = new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
const lcp = entry.largestContentfulPaint;
if (!lcp) continue;
console.log('Soft-LCP:', Math.round(lcp.startTime), 'ms, Größe:', lcp.size);
}
});
observer.observe({ type: 'interaction-contentful-paint', buffered: true });
} else {
console.log('Soft-Navigation-LCP wird nicht unterstützt');
}LCP relativ zum Start der Soft-Navigation berechnen
const navigations = new Map();
// Start jeder Soft-Navigation merken
new PerformanceObserver((list) => {
for (const nav of list.getEntries()) {
navigations.set(nav.navigationId, nav);
}
}).observe({ type: 'soft-navigation', buffered: true });
new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
const lcp = entry.largestContentfulPaint;
const nav = navigations.get(entry.navigationId);
if (!lcp || !nav) continue;
const dauer = lcp.startTime - nav.startTime;
console.log(`${nav.name}: LCP nach ${Math.round(dauer)} ms`);
}
}).observe({ type: 'interaction-contentful-paint', buffered: true });Letzten Wert pro Ansicht beim Verlassen senden
let letzterLcp = null;
new PerformanceObserver((list) => {
const entries = list.getEntries();
const lcp = entries.at(-1)?.largestContentfulPaint;
if (lcp) letzterLcp = lcp; // späterer, größerer Paint ersetzt den alten
}).observe({ type: 'interaction-contentful-paint', buffered: true });
document.addEventListener('visibilitychange', () => {
if (document.visibilityState === 'hidden' && letzterLcp) {
navigator.sendBeacon('/rum', JSON.stringify({
url: location.href,
lcp: Math.round(letzterLcp.startTime),
element: letzterLcp.element?.tagName ?? null
}));
}
});// Wichtig · Fallstricke
- Experimentell: Die Soft-Navigation-API gibt es bisher nur in Chromium-Browsern, und dort nur hinter einem Flag (
chrome://flags/#soft-navigation-heuristics) oder per Origin Trial. Firefox und Safari unterstützen sie nicht. Namen von Schnittstellen, Eintragstypen und Eigenschaften haben sich schon geändert und können sich weiter ändern. Prüfe deshalb immer vorher überPerformanceObserver.supportedEntryTypes, ob die API verfügbar ist. - Der Wert ist nicht endgültig. Wird später ein größerer Inhalt gezeichnet, ersetzt er den Eintrag. Speichere deshalb immer den zuletzt gemeldeten Wert.
startTimedes LCP-Eintrags bezieht sich aufperformance.timeOrigin, also auf den ersten Seitenaufruf. Um den LCP einer Soft-Navigation zu erhalten, musst du denstartTimeder zugehörigen Soft-Navigation abziehen.- Bilder von anderen Ursprüngen ohne
Timing-Allow-Origin-Header liefernrenderTimenur eingeschränkt oder als0. Nimm dannstartTimebzw.loadTime. - Soft-Navigationen werden nur erkannt, wenn eine Nutzerinteraktion, eine URL-Änderung und eine DOM-Änderung zusammenkommen. Wird die URL rein programmatisch ohne Interaktion geändert, entsteht kein Eintrag.