Signatur
Beschreibung
Die Eigenschaft presentationTime eines LargestContentfulPaint-Eintrags gibt an, wann der Frame mit dem größten sichtbaren Inhaltselement (Bild, Textblock, Video-Poster usw.) tatsächlich auf dem Display angezeigt wurde. Der Wert ist ein DOMHighResTimeStamp in Millisekunden relativ zu performance.timeOrigin.
Sie gehört zu den Paint-Timing-Eigenschaften, die der Browser über das PaintTimingMixin bereitstellt. Im Unterschied zu paintTime (Ende der Rendering-Phase im Hauptthread) enthält presentationTime auch die Zeit, die Compositor, GPU und Betriebssystem brauchen, bis das Bild wirklich sichtbar ist. Damit ist sie der genaueste Wert für die Frage, wann der Nutzer den Inhalt sah. Die Differenz presentationTime - paintTime zeigt die Verzögerung in der Grafik-Pipeline.
Die Browser legen fest, wie genau presentationTime ist. Er darf den Wert auch weglassen: Dann ist die Eigenschaft null oder gar nicht vorhanden. In der Praxis verwendet man deshalb presentationTime, wenn der Wert vorhanden ist, und greift sonst auf renderTime bzw. startTime zurück. Diesen Wert meldet man an ein RUM-System (Real User Monitoring) für den Core Web Vital LCP.
Rückgabewert
performance.timeOrigin), zu dem der Frame angezeigt wurde. null, wenn der Browser keine Anzeigezeit liefert. In Browsern ohne Unterstützung ist die Eigenschaft undefined.Beispiele
LCP-Anzeigezeit mit PerformanceObserver auslesen
const observer = new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
console.log('LCP-Element:', entry.element?.tagName);
console.log('presentationTime:', entry.presentationTime);
}
});
// buffered: true liefert auch Einträge, die vor der Registrierung entstanden sind
observer.observe({ type: 'largest-contentful-paint', buffered: true });Robuster LCP-Wert mit Rückfall-Strategie
const getLcpTime = (entry) =>
entry.presentationTime ?? entry.renderTime || entry.startTime;
let lcp = 0;
new PerformanceObserver((list) => {
const entries = list.getEntries();
const last = entries[entries.length - 1]; // letzter Eintrag = aktueller LCP-Kandidat
lcp = getLcpTime(last);
}).observe({ type: 'largest-contentful-paint', buffered: true });
// Wert beim Verlassen der Seite an das Monitoring senden
document.addEventListener('visibilitychange', () => {
if (document.visibilityState === 'hidden') {
navigator.sendBeacon('/rum', JSON.stringify({ lcp: Math.round(lcp) }));
}
});Verzögerung der Grafik-Pipeline messen
new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
if (entry.presentationTime == null || entry.paintTime == null) {
console.log('Paint-Timing-Details nicht unterstützt');
continue;
}
const delay = entry.presentationTime - entry.paintTime;
console.log(`Zeit von Paint bis Anzeige: ${delay.toFixed(1)} ms`);
}
}).observe({ type: 'largest-contentful-paint', buffered: true });// Wichtig · Fallstricke
- Kompatibilität: Die Eigenschaft ist sehr neu und bisher nur in neueren Chromium-Versionen verfügbar. Firefox und Safari melden LCP teilweise gar nicht oder ohne
presentationTime. Prüfen Sie immer, ob der Wert vorhanden ist (entry.presentationTime ?? …), und greifen Sie sonst aufrenderTime/startTimezurück. - Kann
nullsein: Selbst wenn der Browser die Eigenschaft kennt, darf er aus Gründen der Genauigkeit oder des Datenschutzes keinen Wert liefern. - Grobe Zeitauflösung: Wie alle hochauflösenden Zeitstempel wird der Wert zum Schutz vor Timing-Angriffen gerundet. Ohne ursprungsübergreifende Isolation (cross-origin isolation) ist er ungenauer.
- Bilder von anderen Ursprüngen: Ohne Antwort-Header
Timing-Allow-OriginwarrenderTimefrüher0. Auch Paint-Zeiten können dann gröber ausfallen. - Mehrere Einträge: Bis zur ersten Nutzereingabe können mehrere LCP-Kandidaten gemeldet werden. Maßgeblich ist der letzte Eintrag.
- Die Werte weichen von
startTimeab. Wenn Sie Messreihen vergleichen, verwenden Sie durchgehend dieselbe Zeitquelle.