PerformanceElementTiming.loadTime — Eigenschaft · JavaScript-Referenz

Signatur

PerformanceElementTiming.loadTime

Beschreibung

Die nur lesbare Eigenschaft loadTime der Schnittstelle PerformanceElementTiming gibt an, wann die Ressource eines mit dem Attribut elementtiming markierten Elements fertig geladen war. Der Wert ist ein DOMHighResTimeStamp in Millisekunden und bezieht sich auf performance.timeOrigin.

Wie aussagekräftig der Wert ist, hängt vom Element ab:

Bilder (<img>, <image> in SVG, CSS-Hintergrundbilder, Poster-Bilder von <video>): Zeitpunkt, an dem die Bildressource vollständig geladen war.
Textknoten: immer 0, weil Text keine eigene Ressource nachlädt.

Im Zusammenspiel mit renderTime (wann das Element tatsächlich gezeichnet wurde) lässt sich erkennen, ob ein Hero-Bild langsam wegen des Netzwerks erscheint (hoher loadTime) oder weil das Rendern blockiert ist (große Differenz zwischen loadTime und renderTime). Die Einträge bekommt man über einen PerformanceObserver mit dem Eintragstyp "element".

Rückgabewert

Typ

DOMHighResTimeStamp (number)

Beschreibung

Zeitpunkt in Millisekunden relativ zu performance.timeOrigin, an dem die Bildressource geladen war. Für Text-Elemente immer 0.

Beispiele

Ladezeit eines Hero-Bildes erfassen

// HTML: <img src="hero.jpg" elementtiming="hero-bild" alt="">
const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    console.log(`${entry.identifier}: geladen nach ${entry.loadTime.toFixed(1)} ms`);
  }
});

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

hero-bild: geladen nach 412.3 ms

Bild und Text unterscheiden

// HTML:
// <h1 elementtiming="titel">Willkommen</h1>
// <img src="banner.webp" elementtiming="banner" alt="">
new PerformanceObserver((list) => {
  list.getEntries().forEach(({ identifier, name, loadTime }) => {
    // name ist "text-paint" oder "image-paint"
    const art = loadTime === 0 ? "Text (keine Ressource)" : "Bild";
    console.log(identifier, name, art, loadTime);
  });
}).observe({ type: "element", buffered: true });

titel text-paint Text (keine Ressource) 0 banner image-paint Bild 523.8

Verzögerung zwischen Laden und Rendern messen

new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (entry.loadTime === 0) continue; // Text überspringen
    // renderTime kann bei Cross-Origin-Bildern ohne Timing-Allow-Origin 0 sein
    const render = entry.renderTime || entry.startTime;
    const verzoegerung = render - entry.loadTime;
    console.log(`${entry.identifier}: Render-Verzögerung ${verzoegerung.toFixed(1)} ms`);
  }
}).observe({ type: "element", buffered: true });

hero-bild: Render-Verzögerung 37.6 ms

// Wichtig · Fallstricke

Browser-Unterstützung: Element Timing gibt es nur in Chromium-Browsern. Firefox und Safari unterstützen die API nicht. Prüfe das vorher mit PerformanceObserver.supportedEntryTypes.includes("element").
Für Text-Elemente ist loadTime immer 0. Nimm dort renderTime.
Nur Elemente mit dem Attribut elementtiming werden gemeldet. Ausnahme: Chromium meldet einige große Bilder und Texte auch ohne das Attribut, weil sie für Largest Contentful Paint (LCP) relevant sind.
Bei Cross-Origin-Bildern ohne den Header Timing-Allow-Origin bleibt loadTime verfügbar, renderTime ist aber 0. Den Header zu setzen verbessert die Genauigkeit.
Ohne buffered: true fehlen Einträge, die entstanden sind, bevor der Observer registriert wurde.
Die Eigenschaft ist nur lesbar. Zuweisungen werden stillschweigend ignoriert.

Siehe auch

PerformanceElementTiming.identifier PerformanceElementTiming.paintTime PerformanceElementTiming.renderTime PerformanceElementTiming.id PerformanceElementTiming.element