PerformanceElementTiming.url — Eigenschaft · JavaScript-Referenz

Signatur

PerformanceElementTiming.url

Beschreibung

Die Eigenschaft url des Interfaces PerformanceElementTiming gibt die anfängliche URL der Ressourcenanforderung zurück, wenn es sich beim beobachteten Element um ein Bild handelt. Das kann ein <img>-Element sein, ein <image> in SVG oder ein Element mit CSS-Hintergrundbild. Bei Text-Elementen ist der Wert ein leerer String.

Die Element Timing API misst, wann ein mit dem Attribut elementtiming gekennzeichnetes Element gerendert wird. Über url lassen sich die Messwerte der konkret geladenen Bildressource zuordnen. Das ist praktisch, wenn Sie Hero-Bilder, responsive Bilder (srcset) oder CDN-Varianten miteinander vergleichen wollen.

Ausgelesen werden die Einträge über einen PerformanceObserver mit dem Eintragstyp "element". Gemeldet wird die ursprünglich angeforderte URL, also die URL vor eventuellen Weiterleitungen. Bei data:-URLs wird der Wert auf die ersten 100 Zeichen gekürzt.

Rückgabewert

Typ

string

Beschreibung

Die anfängliche URL der Bildanforderung oder ein leerer String "", wenn das Element ein Text-Element ist.

Beispiele

URL eines markierten Hero-Bildes protokollieren

// HTML: <img src="/bilder/hero.jpg" elementtiming="hero-bild">
const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    console.log(`${entry.identifier}: ${entry.url}`);
  }
});

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

hero-bild: https://example.com/bilder/hero.jpg

Bild- und Text-Einträge unterscheiden

// HTML: <p elementtiming="intro-text">Willkommen!</p>
new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    const art = entry.url === "" ? "Text" : "Bild";
    console.log(art, entry.identifier, entry.renderTime.toFixed(1));
  }
}).observe({ type: "element", buffered: true });

Text intro-text 412.3

Renderzeit je Bild-URL an Analytics senden

const sendeMesswert = (daten) =>
  navigator.sendBeacon("/analytics", JSON.stringify(daten));

if (PerformanceObserver.supportedEntryTypes?.includes("element")) {
  new PerformanceObserver((list) => {
    for (const entry of list.getEntries()) {
      if (!entry.url) continue; // nur Bilder
      sendeMesswert({
        url: entry.url,
        renderTime: entry.renderTime || entry.loadTime,
        groesse: `${entry.naturalWidth}x${entry.naturalHeight}`
      });
    }
  }).observe({ type: "element", buffered: true });
} else {
  console.log("Element Timing wird nicht unterstützt.");
}

// Wichtig · Fallstricke

Browser-Unterstützung: Die Element Timing API gibt es derzeit nur in Chromium-basierten Browsern (Chrome, Edge, Opera). Firefox und Safari unterstützen sie nicht. Prüfen Sie die Unterstützung vorher mit PerformanceObserver.supportedEntryTypes.includes("element").
Einträge entstehen nur für Elemente mit dem Attribut elementtiming. Ausnahme sind Bilder und Texte, die als Kandidaten für Largest Contentful Paint erfasst werden.
Die Eigenschaft liefert die anfängliche URL. Nach Weiterleitungen kann sie also von der tatsächlich ausgelieferten Ressource abweichen.
data:-URLs werden auf 100 Zeichen gekürzt. Eignen Sie sie deshalb nicht als eindeutigen Schlüssel.
Bei ursprungsübergreifenden Bildern ohne Timing-Allow-Origin-Header ist renderTime gleich 0. Die url ist trotzdem verfügbar.
Die Eigenschaft ist nur lesbar. Zuweisungen werden stillschweigend ignoriert, im Strict Mode lösen sie einen TypeError aus.

Siehe auch

PerformanceElementTiming.id PerformanceElementTiming.element PerformanceElementTiming.loadTime PerformanceElementTiming.naturalWidth PerformanceElementTiming.paintTime