Element.elementTiming — Eigenschaft · JavaScript-Referenz

Signatur

Element.elementTiming

Beschreibung

Die Eigenschaft elementTiming spiegelt das HTML-Attribut elementtiming wider. Hat ein Element dieses Attribut, meldet der Browser den Zeitpunkt, an dem es zum ersten Mal gerendert wurde, als PerformanceElementTiming-Eintrag. Diese Einträge liest man mit einem PerformanceObserver vom Typ "element" aus.

Gedacht ist das für die Messung aus Nutzersicht: Wann erscheint das Hero-Bild, die Hauptüberschrift oder ein wichtiger Textblock tatsächlich auf dem Bildschirm? Anders als Largest Contentful Paint misst Element Timing genau die Elemente, die du selbst festlegst.

Beobachtet werden <img>-Elemente, <image> innerhalb von SVG, Poster-Bilder von <video>, Elemente mit CSS-Hintergrundbild (background-image) sowie Elemente mit Textknoten. Der Attributwert ist ein frei wählbarer Bezeichner. Er erscheint im Eintrag als identifier und hilft beim Zuordnen der Messwerte.

Ist das Attribut nicht gesetzt, gibt die Eigenschaft einen leeren String zurück. Wenn du sie setzt, wird das Attribut im DOM angelegt oder überschrieben.

Rückgabewert

Typ

string

Beschreibung

Der Wert des elementtiming-Attributs. Ist das Attribut nicht vorhanden, ist es ein leerer String "".

Beispiele

Attributwert auslesen

// HTML: <img src="hero.jpg" elementtiming="hero-bild" id="hero">
const hero = document.getElementById('hero');
console.log(hero.elementTiming);

// Element ohne Attribut
console.log(document.body.elementTiming === '');

hero-bild true

Renderzeit markierter Elemente mit PerformanceObserver messen

const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    // entry ist ein PerformanceElementTiming-Eintrag
    const zeit = entry.renderTime || entry.loadTime;
    console.log(`${entry.identifier}: ${zeit.toFixed(0)} ms`, entry.element);
  }
});

// buffered: true liefert auch Einträge, die vor der Registrierung entstanden sind
observer.observe({ type: 'element', buffered: true });

hero-bild: 842 ms <img id="hero" ...>

Element per Skript markieren (mit Feature-Erkennung)

const headline = document.querySelector('h1');

if ('elementTiming' in Element.prototype) {
  // Muss gesetzt werden, bevor das Element gerendert wird
  headline.elementTiming = 'hauptueberschrift';
  console.log(headline.getAttribute('elementtiming'));
} else {
  console.log('Element Timing wird nicht unterstützt');
}

hauptueberschrift

// Wichtig · Fallstricke

Browser-Kompatibilität: Die Eigenschaft ist experimentell und gehört zu keinem Standard. Sie funktioniert nur in Chromium-Browsern (Chrome, Edge, Opera ab Version 77). Firefox und Safari unterstützen sie nicht. Prüfe die Unterstützung vorher, z. B. mit 'elementTiming' in Element.prototype oder PerformanceObserver.supportedEntryTypes.includes('element').
Nur das erste Rendern zählt: Das Attribut muss gesetzt sein, bevor das Element zum ersten Mal gerendert wird. Setzt du es erst später per JavaScript, entsteht für ein bereits sichtbares Element kein Eintrag.
renderTime kann 0 sein: Bei Bildern von fremden Origins (Cross-Origin) ohne den Response-Header Timing-Allow-Origin ist renderTime gleich 0. Nutze dann loadTime als Ersatzwert.
Der Wert ist ein frei wählbarer String und muss nicht eindeutig sein. Eindeutige Bezeichner machen die Auswertung aber deutlich einfacher.
Leere Textelemente und Elemente außerhalb des Viewports werden nicht erfasst.

Siehe auch

Element Element.currentCSSZoom ElementInternals.ariaValueMin Element.nextElementSibling Element.clientTop