Signatur
Beschreibung
Die schreibgeschützte Eigenschaft id eines LargestContentfulPaint-Eintrags liefert den Wert des HTML-Attributs id des Elements, das zum Zeitpunkt des Eintrags das größte sichtbare Inhaltselement im Viewport war. Dieses Element ist entscheidend für die Core-Web-Vitals-Metrik Largest Contentful Paint.
In der Praxis nutzt man id vor allem im Real User Monitoring (RUM): Statt einer DOM-Referenz, die sich nicht serialisieren lässt, schickt man einen kurzen, gut lesbaren String an den Analyse-Server. So sieht man, welches Hero-Bild, welche Überschrift oder welcher Banner die LCP-Zeit verursacht.
Hat das Element kein id-Attribut, ist der Wert ein leerer String (""). Für eine robustere Zuordnung kombiniert man id daher meist mit entry.url (bei Bildern) oder einem aus entry.element erzeugten CSS-Selektor.
Rückgabewert
id des LCP-Elements oder ein leerer String, wenn das Element keine id hat.Beispiele
LCP-Element-ID in der Konsole ausgeben
const observer = new PerformanceObserver((list) => {
const entries = list.getEntries();
const last = entries[entries.length - 1]; // letzter Kandidat zählt
console.log('LCP-Element-ID:', last.id || '(keine id)');
console.log('LCP-Zeit (ms):', Math.round(last.startTime));
});
observer.observe({ type: 'largest-contentful-paint', buffered: true });LCP-Daten per sendBeacon an den RUM-Server melden
let lcpEntry;
const po = new PerformanceObserver((list) => {
const entries = list.getEntries();
lcpEntry = entries[entries.length - 1];
});
po.observe({ type: 'largest-contentful-paint', buffered: true });
// Beim Verlassen/Verstecken der Seite endgültigen Wert senden
document.addEventListener('visibilitychange', () => {
if (document.visibilityState !== 'hidden' || !lcpEntry) return;
po.takeRecords();
po.disconnect();
const payload = JSON.stringify({
metric: 'LCP',
value: lcpEntry.startTime,
elementId: lcpEntry.id,
url: lcpEntry.url,
size: lcpEntry.size,
});
navigator.sendBeacon('/rum', payload);
}, { once: true });Fallback-Selektor, wenn keine id vorhanden ist
const describe = (entry) => {
if (entry.id) return `#${entry.id}`;
const el = entry.element;
if (!el) return entry.url || '(unbekannt)';
const cls = el.classList.length ? '.' + [...el.classList].join('.') : '';
return el.tagName.toLowerCase() + cls;
};
new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
console.log('LCP-Kandidat:', describe(entry));
}
}).observe({ type: 'largest-contentful-paint', buffered: true });// Wichtig · Fallstricke
- Leerer String statt
null: Ohneid-Attribut liefert die Eigenschaft"". Prüfen Sie deshalb auf einen falsy-Wert und nicht aufnull. - Mehrere Kandidaten: Während des Ladens meldet der Browser oft mehrere LCP-Einträge. Maßgeblich ist der letzte Eintrag vor der ersten Nutzereingabe (Klick, Tastendruck) bzw. bevor die Seite versteckt wird.
- Momentaufnahme: Der Wert wird beim Erzeugen des Eintrags festgehalten. Ändert sich die
iddes Elements später, bleibt der Eintrag unverändert.entry.elementkann dagegennullwerden, wenn das Element aus dem DOM entfernt wurde. - Kompatibilität: Wird in Chromium-Browsern und seit Version 122 in Firefox unterstützt, in Safari nicht. Prüfen Sie die Unterstützung vorher mit
PerformanceObserver.supportedEntryTypes.includes('largest-contentful-paint'). - Datenschutz: IDs können sprechende Namen enthalten (z. B. Nutzer- oder Produkt-IDs). Überlegen Sie, bevor Sie sie an Drittanbieter-Analysen weitergeben.