Signatur
Beschreibung
Die schreibgeschützte Eigenschaft size eines LargestContentfulPaint-Eintrags liefert eine Ganzzahl: die Fläche des Elements im Viewport, also Breite mal Höhe in CSS-Pixeln. Anhand dieses Werts entscheidet der Browser, welches Element gerade das „größte" ist. Jeder neue LCP-Eintrag hat deshalb einen größeren size-Wert als der vorherige.
Gezählt wird nur der sichtbare Teil des Elements. Bereiche außerhalb des Viewports oder durch overflow abgeschnittene Teile fallen weg. Rahmen, Innenabstände (padding) und Außenabstände (margin) zählen nicht mit. Wird ein Bild größer angezeigt als seine natürliche Auflösung, rechnet der Browser die Fläche auf die natürliche Größe herunter. Hochskalierte kleine Bilder bekommen so keinen Vorteil.
In der Praxis brauchen Sie size vor allem zur Analyse der Core Web Vitals. Zusammen mit element, url und startTime sehen Sie, welches Element den LCP auslöst und warum es als größtes gilt. Das hilft etwa bei der Frage, ob ein Hero-Bild oder ein großer Textblock den Messwert bestimmt.
Rückgabewert
Beispiele
LCP-Kandidaten mit Größe protokollieren
const observer = new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
console.log(
`LCP-Kandidat: <${entry.element?.tagName.toLowerCase()}>`,
`Fläche: ${entry.size} px²`,
`Zeit: ${entry.startTime.toFixed(0)} ms`
);
}
});
// buffered: true liefert auch Einträge, die vor der Registrierung entstanden sind
observer.observe({ type: 'largest-contentful-paint', buffered: true });Endgültiges LCP-Element samt Größe an die Analyse senden
let lastEntry = null;
const po = new PerformanceObserver((list) => {
const entries = list.getEntries();
lastEntry = entries.at(-1); // der jüngste Eintrag ist immer der größte
});
po.observe({ type: 'largest-contentful-paint', buffered: true });
// Wird die Seite verborgen, steht der LCP fest
document.addEventListener('visibilitychange', () => {
if (document.visibilityState !== 'hidden' || !lastEntry) return;
po.disconnect();
const payload = JSON.stringify({
lcp: Math.round(lastEntry.startTime),
size: lastEntry.size,
url: lastEntry.url || null,
tag: lastEntry.element?.tagName ?? null
});
navigator.sendBeacon('/analytics/lcp', payload);
}, { once: true });Gemeldete Fläche mit der Layoutgröße vergleichen
new PerformanceObserver((list) => {
const entry = list.getEntries().at(-1);
const el = entry.element;
if (!el) return; // Element wurde evtl. aus dem DOM entfernt
const rect = el.getBoundingClientRect();
const layoutArea = Math.round(rect.width * rect.height);
const ratio = (entry.size / layoutArea * 100).toFixed(1);
console.log(`LCP size: ${entry.size}, Layout-Fläche: ${layoutArea} (${ratio} %)`);
// Deutlich unter 100 %: Element ist teilweise außerhalb des Viewports
// oder ein hochskaliertes Bild
}).observe({ type: 'largest-contentful-paint', buffered: true });// Wichtig · Fallstricke
- Browser-Unterstützung: Chromium-Browser (Chrome, Edge, Opera) seit Chrome 77 und Firefox seit Version 122. Safari unterstützt die Largest Contentful Paint API nicht. Prüfen Sie die Unterstützung vorab, zum Beispiel mit
PerformanceObserver.supportedEntryTypes.includes('largest-contentful-paint'). sizegibt eine Fläche an, weder Breite noch Höhe. Die einzelnen Maße erhalten Sie überentry.element.getBoundingClientRect().- Der Wert entspricht der Fläche zum Zeitpunkt des Renderns. Spätere Layout-Änderungen, Scrollen oder Größenänderungen des Fensters ändern einen bereits gemeldeten Eintrag nicht.
- Sobald der Nutzer interagiert (Klick, Tastendruck, Scrollen), meldet der Browser keine neuen LCP-Einträge mehr. Maßgeblich ist dann der zuletzt gemeldete Eintrag.
- Bei Bildern aus anderen Quellen ohne
Timing-Allow-Origin-Header istrenderTimeauf 0 gesetzt oder grob gerundet.sizesteht trotzdem zur Verfügung. - Die Eigenschaft ist schreibgeschützt. Zuweisungen werden stillschweigend ignoriert.