Signatur
Beschreibung
Die Eigenschaft identifier eines PerformanceElementTiming-Eintrags enthält genau den String, den du im HTML über das Attribut elementtiming vergeben hast, zum Beispiel <img src="hero.jpg" elementtiming="hero-bild">. Über diesen Bezeichner ordnest du Messwerte eindeutig einem bestimmten Element zu, auch wenn das Element selbst schon wieder aus dem DOM entfernt wurde.
Gebraucht wird die Eigenschaft vor allem beim Real User Monitoring (RUM): Ein PerformanceObserver mit dem Eintragstyp "element" liefert für jedes markierte Bild oder jeden markierten Textblock Werte wie renderTime und loadTime. Mit identifier kannst du die Messwerte an dein Analyse-Backend senden und sie dort nach Namen wie "hero-bild" oder "produkt-titel" auswerten.
Der Wert ist schreibgeschützt. Hat das Element kein elementtiming-Attribut, zum Beispiel wenn der Eintrag im Rahmen von Largest Contentful Paint automatisch entstanden ist, ist identifier ein leerer String "". Die Eigenschaft hat keine Parameter.
Rückgabewert
elementtiming-Attributs des Elements oder ein leerer String, wenn das Attribut fehlt.Beispiele
Renderzeit eines markierten Hero-Bildes protokollieren
// HTML: <img src="hero.jpg" elementtiming="hero-bild">
const observer = new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
console.log(`${entry.identifier}: gerendert nach ${Math.round(entry.renderTime)} ms`);
}
});
observer.observe({ type: 'element', buffered: true });Messwerte nach Bezeichner filtern und an ein Backend senden
// HTML: <h1 elementtiming="produkt-titel">…</h1>
const relevant = new Set(['hero-bild', 'produkt-titel']);
const observer = new PerformanceObserver((list) => {
const daten = list.getEntries()
.filter((e) => relevant.has(e.identifier))
.map((e) => ({
id: e.identifier,
renderTime: Math.round(e.renderTime || e.loadTime),
url: e.url || null
}));
if (daten.length > 0) {
navigator.sendBeacon('/rum/element-timing', JSON.stringify(daten));
}
});
observer.observe({ type: 'element', buffered: true });Unterstützung prüfen und Einträge ohne Bezeichner erkennen
if (PerformanceObserver.supportedEntryTypes?.includes('element')) {
new PerformanceObserver((list) => {
list.getEntries().forEach((entry) => {
const name = entry.identifier || '(ohne elementtiming)';
console.log(name, entry.element?.tagName);
});
}).observe({ type: 'element', buffered: true });
} else {
console.log('Element Timing API wird nicht unterstützt.');
}// Wichtig · Fallstricke
- Browser-Unterstützung: Die Element Timing API ist experimentell und steht bislang nur in Chromium-basierten Browsern zur Verfügung. Firefox und Safari unterstützen sie nicht. Prüfe deshalb vorher mit
PerformanceObserver.supportedEntryTypes.includes('element'), ob sie verfügbar ist. - Beobachtet werden nur Elemente, die bereits beim Rendern ein
elementtiming-Attribut tragen. Wenn du das Attribut nachträglich per JavaScript setzt, entsteht für ein Element, das schon gezeichnet wurde, kein neuer Eintrag. - Das Attribut ist nur an Bildern (
<img>,<image>in SVG, CSS-Hintergrundbilder), Videos mit Poster-Bild und Elementen mit Textknoten wirksam. - Der Bezeichner muss nicht eindeutig sein. Wenn mehrere Elemente denselben Wert haben, erhältst du mehrere Einträge mit gleichem
identifier. Unterscheide sie dann überentry.elementoderentry.id. - Der Bezeichner stammt direkt aus dem Markup. Sende keine personenbezogenen Daten darüber an dein Analyse-Backend.