LargestContentfulPaint.url — Eigenschaft · JavaScript-Referenz

Signatur

LargestContentfulPaint.url

Beschreibung

Die schreibgeschützte Eigenschaft url eines LargestContentfulPaint-Eintrags enthält die Anfrage-URL der Ressource, die das größte sichtbare Inhaltselement beim Seitenaufbau gezeichnet hat. Das gilt für <img>-Elemente, <image> in SVG, Poster-Bilder von <video> und Elemente mit CSS-Hintergrundbild (background-image). Ist das LCP-Element ein Textblock, ist url ein leerer String.

In der Praxis braucht man die Eigenschaft beim Real User Monitoring (RUM): Wer weiß, welches Bild der LCP-Kandidat ist, kann es gezielt optimieren, etwa mit <link rel="preload">, fetchpriority="high", kleineren Formaten wie AVIF/WebP oder einem CDN. Die URL ist die endgültig aufgelöste, absolute Adresse. Bei responsiven Bildern (srcset) ist es die tatsächlich geladene Variante, also dieselbe wie in HTMLImageElement.currentSrc.

Einträge bekommt man über einen PerformanceObserver mit type: "largest-contentful-paint" und buffered: true. Der Browser kann während des Ladens mehrere Kandidaten melden. Maßgeblich ist der letzte Eintrag, bevor der Nutzer zum ersten Mal mit der Seite interagiert (Klick, Tastendruck, Scrollen).

Rückgabewert

Typ

string

Beschreibung

Absolute URL der Bildressource des LCP-Elements oder ein leerer String "", wenn das Element kein Bild ist (z. B. ein Textknoten).

Beispiele

LCP-Bild-URL mit PerformanceObserver ermitteln

const observer = new PerformanceObserver((list) => {
  const entries = list.getEntries();
  const lastEntry = entries[entries.length - 1];
  if (lastEntry.url) {
    console.log('LCP-Bild:', lastEntry.url);
  } else {
    console.log('LCP-Element ist kein Bild:', lastEntry.element);
  }
});

observer.observe({ type: 'largest-contentful-paint', buffered: true });

LCP-Bild: https://example.com/img/hero-1200.avif

LCP-Daten per sendBeacon an ein Monitoring senden

let lcpEntry = null;

new PerformanceObserver((list) => {
  const entries = list.getEntries();
  lcpEntry = entries.at(-1);
}).observe({ type: 'largest-contentful-paint', buffered: true });

// Beim Verlassen bzw. Verstecken der Seite den finalen Wert melden
document.addEventListener('visibilitychange', () => {
  if (document.visibilityState === 'hidden' && lcpEntry) {
    const payload = JSON.stringify({
      lcp: Math.round(lcpEntry.startTime),
      url: lcpEntry.url || null,
      tag: lcpEntry.element?.tagName ?? null,
      size: lcpEntry.size
    });
    navigator.sendBeacon('/rum/lcp', payload);
  }
}, { once: true });

Prüfen, ob das LCP-Bild vorgeladen wurde

new PerformanceObserver((list) => {
  const { url } = list.getEntries().at(-1);
  if (!url) return;

  const preloaded = [...document.querySelectorAll('link[rel="preload"][as="image"]')]
    .some((link) => link.href === url);

  if (!preloaded) {
    console.warn(`Tipp: LCP-Bild vorladen – <link rel="preload" as="image" href="${url}">`);
  }
}).observe({ type: 'largest-contentful-paint', buffered: true });

Tipp: LCP-Bild vorladen – <link rel="preload" as="image" href="https://example.com/img/hero.jpg">

// Wichtig · Fallstricke

Leerer String bei Text: Prüfe url immer auf Leerheit, bevor du den Wert weiterverarbeitest. Bei Text-LCP gibt es keine URL.
Mehrere Kandidaten: Werte nicht den ersten Eintrag aus. Der letzte Eintrag vor der ersten Nutzerinteraktion ist maßgeblich.
Data-URLs: Bei Inline-Bildern (data:) kann url sehr lang werden. Kürze solche Werte vor dem Versand an ein Monitoring-Backend.
Datenschutz: Bild-URLs können Tokens, Nutzer-IDs oder Query-Parameter enthalten. Entferne diese vor dem Speichern.
Cross-Origin: Die URL wird auch bei fremden Ursprüngen geliefert. Für genaue Zeitangaben wie renderTime muss der Server den Header Timing-Allow-Origin senden, sonst ist renderTime 0.
Kompatibilität: Unterstützt in Chromium-Browsern (Chrome, Edge, Opera) und seit Version 122 in Firefox. Safari unterstützt die LCP-API bislang nicht. Prüfe die Unterstützung vorher mit PerformanceObserver.supportedEntryTypes.includes('largest-contentful-paint').

Siehe auch

LargestContentfulPaint LargestContentfulPaint.element LargestContentfulPaint.renderTime LargestContentfulPaint.loadTime LargestContentfulPaint.size PerformanceObserver LargestContentfulPaint.id