PerformanceElementTiming.renderTime — Eigenschaft · JavaScript-Referenz

Signatur

PerformanceElementTiming.renderTime

Beschreibung

Die Eigenschaft renderTime eines PerformanceElementTiming-Eintrags enthält den Zeitpunkt in Millisekunden relativ zu performance.timeOrigin, an dem das beobachtete Element auf dem Bildschirm dargestellt wurde. Beobachtet werden Bildelemente (<img>, <image> in SVG, Poster von <video>, CSS-Hintergrundbilder) und Textknoten, deren Element das Attribut elementtiming trägt.

Mit renderTime misst man, wann wichtige Inhalte für Nutzer sichtbar werden, etwa ein Hero-Bild, eine Hauptüberschrift oder ein Produktfoto. Anders als loadTime, das nur das Ende des Ladevorgangs einer Ressource angibt, beschreibt renderTime den tatsächlichen Zeitpunkt der Darstellung (Paint). Damit eignet sich die Eigenschaft gut für Real-User-Monitoring (RUM) und eigene, auf die Seite zugeschnittene Kennzahlen neben Largest Contentful Paint.

Die Einträge liest man mit einem PerformanceObserver vom Typ "element" aus. Mit buffered: true erhält man auch Einträge, die schon vor dem Registrieren des Observers entstanden sind.

Rückgabewert

Typ

DOMHighResTimeStamp (number)

Beschreibung

Zeitpunkt der Darstellung in Millisekunden seit performance.timeOrigin. Bei Cross-Origin-Bildern ohne passenden Timing-Allow-Origin-Header liefern ältere Implementierungen 0, neuere einen auf ganze Einheiten gerundeten, gröberen Wert.

Beispiele

Renderzeit eines Hero-Bildes messen

// HTML: <img src="/hero.jpg" elementtiming="hero-image" alt="">
const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (entry.identifier === 'hero-image') {
      console.log(`Hero dargestellt nach ${entry.renderTime.toFixed(0)} ms`);
    }
  }
});

observer.observe({ type: 'element', buffered: true });

Hero dargestellt nach 842 ms

Fallback auf loadTime bei renderTime = 0

// Cross-Origin-Bild ohne Timing-Allow-Origin-Header
const getPaintTime = (entry) => entry.renderTime || entry.loadTime;

new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    console.log(entry.identifier, {
      renderTime: entry.renderTime,
      loadTime: entry.loadTime,
      effektiv: getPaintTime(entry)
    });
  });
}).observe({ type: 'element', buffered: true });

cdn-banner { renderTime: 0, loadTime: 610.4, effektiv: 610.4 }

Text-Renderzeit an ein Monitoring senden

// HTML: <h1 elementtiming="main-heading">Willkommen</h1>
if (PerformanceObserver.supportedEntryTypes?.includes('element')) {
  new PerformanceObserver((list) => {
    for (const entry of list.getEntries()) {
      const payload = JSON.stringify({
        metric: entry.identifier,
        renderTime: Math.round(entry.renderTime),
        tag: entry.element?.tagName
      });
      navigator.sendBeacon('/rum', payload);
    }
  }).observe({ type: 'element', buffered: true });
} else {
  console.log('Element Timing wird nicht unterstützt');
}

// Wichtig · Fallstricke

Browser-Kompatibilität: Element Timing gibt es nur in Chromium-basierten Browsern. Firefox und Safari unterstützen es nicht. Prüfe die Unterstützung vorher mit PerformanceObserver.supportedEntryTypes.includes('element').
Cross-Origin-Ressourcen: Ohne den Header Timing-Allow-Origin ist renderTime je nach Browserversion 0 oder bewusst ungenau. Verwende dann loadTime als Ersatzwert oder setze den Header auf dem CDN.
Für Textknoten ist loadTime immer 0, dort zählt nur renderTime.
Nur Elemente mit dem Attribut elementtiming werden gemeldet. Ohne Attribut entsteht kein Eintrag. Elemente, die erst nach einer Nutzerinteraktion dargestellt werden, sind oft nicht mehr erfasst.
Der Wert ist relativ zu performance.timeOrigin und keine Unix-Zeit. Für absolute Zeitangaben musst du performance.timeOrigin + renderTime rechnen.

Siehe auch

PerformanceElementTiming.element PerformanceElementTiming.loadTime PerformanceElementTiming.paintTime PerformanceElementTiming.identifier PerformanceElementTiming.id