Signatur
Beschreibung
Die Eigenschaft renderTime eines LargestContentfulPaint-Eintrags gibt an, wann das Element tatsächlich gezeichnet wurde. Der Wert ist in Millisekunden relativ zu performance.timeOrigin angegeben, also ab dem Start der Navigation. Genau dieser Wert ist die Grundlage der Core-Web-Vitals-Metrik Largest Contentful Paint (LCP).
Du liest renderTime in der Regel über einen PerformanceObserver mit dem Eintragstyp "largest-contentful-paint" aus. Der Browser meldet während des Ladens mehrere Kandidaten, zum Beispiel erst eine Überschrift und später ein großes Hero-Bild. Der letzte gemeldete Eintrag vor der ersten Nutzereingabe gilt als endgültiger LCP-Wert.
Bei ursprungsfremden Bildern (andere Origin) ohne den HTTP-Header Timing-Allow-Origin kann renderTime aus Datenschutzgründen 0 sein. Neuere Browser liefern stattdessen einen vergröberten Wert. Für solche Fälle gibt es loadTime als Ersatzwert. startTime gibt bereits renderTime zurück, falls der Wert ungleich 0 ist, und sonst loadTime.
Rückgabewert
performance.timeOrigin. Kann 0 sein, wenn es sich um ein ursprungsfremdes Bild ohne Timing-Allow-Origin-Header handelt.Beispiele
LCP-Kandidaten mit renderTime protokollieren
const observer = new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
console.log('LCP-Kandidat:', entry.element?.tagName, 'renderTime:', entry.renderTime.toFixed(1), 'ms');
}
});
// buffered: true liefert auch Einträge, die vor der Registrierung entstanden sind
observer.observe({ type: 'largest-contentful-paint', buffered: true });Ersatzwert loadTime bei ursprungsfremden Bildern
new PerformanceObserver((list) => {
const entries = list.getEntries();
const last = entries[entries.length - 1];
// renderTime ist 0, wenn der Timing-Allow-Origin-Header fehlt
const lcp = last.renderTime || last.loadTime;
const quelle = last.renderTime ? 'renderTime' : 'loadTime (Ersatzwert)';
console.log(`LCP: ${Math.round(lcp)} ms via ${quelle}`, last.url);
}).observe({ type: 'largest-contentful-paint', buffered: true });Endgültigen LCP-Wert an ein Analytics-Backend senden
let lcpWert = 0;
const po = new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
lcpWert = entry.renderTime || entry.loadTime;
}
});
po.observe({ type: 'largest-contentful-paint', buffered: true });
// Beim Verlassen bzw. Verstecken der Seite den letzten Kandidaten melden
addEventListener('visibilitychange', () => {
if (document.visibilityState === 'hidden' && lcpWert > 0) {
po.takeRecords().forEach((e) => { lcpWert = e.renderTime || e.loadTime; });
po.disconnect();
navigator.sendBeacon('/analytics/lcp', JSON.stringify({ lcp: Math.round(lcpWert), page: location.pathname }));
}
}, { once: true });// Wichtig · Fallstricke
- Wert 0: Bei ursprungsfremden Bildern ohne den Header
Timing-Allow-Origin: *(oder einen passenden Origin) kannrenderTime0sein. Nimm dannloadTimeoderstartTime. Wenn du den CDN-Server kontrollierst, setze den Header, damit du genaue Werte bekommst. - Mehrere Kandidaten: Maßgeblich ist nur der letzte Eintrag, bevor der Nutzer die Seite bedient (Klick, Tastendruck) oder bevor die Seite in den Hintergrund wechselt. Scrollen allein beendet die Messung nicht in jedem Browser.
- Hintergrund-Tabs: Wurde die Seite im Hintergrund geladen, ist der LCP-Wert verfälscht. Prüfe deshalb
document.visibilityStatebzw. den erstenvisibilitychange. - Browser-Kompatibilität: Unterstützt in Chromium-Browsern (ab Version 77) und in Firefox ab Version 122. Safari hat die API lange nicht unterstützt. Prüfe daher vorher mit
PerformanceObserver.supportedEntryTypes.includes('largest-contentful-paint'). - Die Genauigkeit des Werts kann aus Sicherheitsgründen reduziert sein (Schutz vor Timing-Angriffen).