Signatur
Beschreibung
Die schreibgeschützte Eigenschaft presentationTime eines InteractionContentfulPaint-Eintrags gibt den Zeitpunkt an, zu dem der Frame mit dem größten inhaltlichen Element nach einer Nutzerinteraktion (z. B. bei einer „Soft Navigation“ in einer Single-Page-App) wirklich auf dem Bildschirm sichtbar wurde. Der Wert ist ein DOMHighResTimeStamp in Millisekunden relativ zu performance.timeOrigin.
Die Eigenschaft stammt aus dem PaintTimingMixin der Paint-Timing-Spezifikation und wird zusammen mit paintTime geliefert. Der Unterschied: paintTime markiert das Ende der Rendering-Aktualisierung im Hauptthread, presentationTime dagegen den Moment, in dem Compositor und Grafikpipeline den Frame tatsächlich darstellen. Die Differenz beider Werte zeigt also, wie viel Zeit nach dem Rendern noch in Rasterisierung, Compositing und Darstellung vergeht.
Man nutzt die Eigenschaft vor allem im Real-User-Monitoring (RUM), um nach Klicks oder Routenwechseln eine möglichst realistische Kennzahl dafür zu erhalten, wann Nutzer den neuen Inhalt sehen. Weil der Wert implementierungsabhängig ist, darf er null sein – robuster Code fällt dann auf paintTime bzw. startTime zurück.
Rückgabewert
performance.timeOrigin), zu dem der Frame dargestellt wurde, oder null, wenn der Browser diese Information nicht bereitstellt.Beispiele
Einträge beobachten und Darstellungszeit ausgeben
const type = 'interaction-contentful-paint';
if (PerformanceObserver.supportedEntryTypes?.includes(type)) {
const observer = new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
console.log('Element:', entry.element);
console.log('paintTime:', entry.paintTime.toFixed(1));
console.log('presentationTime:', entry.presentationTime?.toFixed(1) ?? 'nicht verfügbar');
}
});
observer.observe({ type, buffered: true });
} else {
console.log('interaction-contentful-paint wird nicht unterstützt');
}Verzögerung zwischen Rendern und Darstellung messen
const observer = new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
if (entry.presentationTime == null) continue;
const delay = entry.presentationTime - entry.paintTime;
console.log(`Darstellungsverzögerung: ${delay.toFixed(1)} ms`);
}
});
observer.observe({ type: 'interaction-contentful-paint', buffered: true });RUM-Wert mit Fallback an Analytics senden
// Bevorzugt presentationTime, sonst paintTime bzw. startTime
const getVisibleTime = (entry) =>
entry.presentationTime ?? entry.paintTime ?? entry.startTime;
const observer = new PerformanceObserver((list) => {
const entries = list.getEntries();
const last = entries.at(-1);
if (!last) return;
const payload = JSON.stringify({
metric: 'icp',
value: Math.round(getVisibleTime(last)),
url: location.href
});
navigator.sendBeacon('/analytics', payload);
});
observer.observe({ type: 'interaction-contentful-paint', buffered: true });// Wichtig · Fallstricke
- Experimentell:
InteractionContentfulPaintgehört zur Soft-Navigation-Heuristik und ist derzeit nur in Chromium-Browsern verfügbar (teils hinter Flag oder Origin Trial). Vor der Nutzung immerPerformanceObserver.supportedEntryTypesprüfen. - Kann
nullsein: Laut Spezifikation istpresentationTimeimplementierungsabhängig. Ohne Prüfung liefert z. B.entry.presentationTime - entry.paintTimefalsche Werte (nullwird zu0). - Grobere Auflösung: Browser können den Zeitstempel aus Sicherheitsgründen (Schutz vor Timing-Angriffen) runden oder mit Rauschen versehen, besonders ohne Cross-Origin-Isolation.
- Für Elemente aus fremden Quellen (Cross-Origin-Bilder ohne
Timing-Allow-Origin-Header) können Zeitangaben eingeschränkt oder vergröbert sein. - Der Wert ist relativ zu
performance.timeOrigin, nicht zur Interaktion selbst – für eine Dauer ab der Interaktion muss der Zeitpunkt der Interaktion (bzw. der Soft Navigation) abgezogen werden.