Largest Contentful Paint (LCP) ist ein stabiler Core Web Vital-Messwert zum Messen der wahrgenommenen Ladegeschwindigkeit. Sie gibt auf der Zeitachse für den Seitenaufbau den Punkt an, an dem der Hauptinhalt der Seite wahrscheinlich geladen wurde. Ein schneller LCP zeigt dem Nutzer, dass die Seite nützlich ist.
Früher war es für Webentwickler eine Herausforderung zu messen, wie schnell der Hauptinhalt einer Webseite geladen wird und für Nutzer sichtbar ist. Ältere Messwerte wie load oder DOMContentLoaded funktionieren nicht gut, da sie nicht unbedingt mit dem übereinstimmen, was der Nutzer auf dem Bildschirm sieht. Neuere, nutzerorientierte Leistungsmesswerte wie First Contentful Paint (FCP) erfassen nur den Anfang des Ladevorgangs. Wenn eine Seite einen Ladebildschirm oder eine Ladeanzeige zeigt, ist dieser Moment für den Nutzer nicht sehr relevant.
In der Vergangenheit haben wir Leistungsmesswerte wie First Meaningful Paint (FMP) und Speed Index (SI) (beide in Lighthouse verfügbar) empfohlen, um nach dem ersten Malen mehr vom Ladevorgang zu erfassen. Diese Messwerte sind jedoch komplex, schwer zu erklären und oft falsch, sodass sie immer noch nicht erkennen, wann der Hauptinhalt der Seite geladen wurde.
Auf der Grundlage von Diskussionen in der W3C Web Performance Working Group und bei Google durchgeführten Untersuchungen haben wir herausgefunden, dass sich genauer messen lässt, wann der Hauptinhalt einer Seite geladen wird, indem wir uns ansehen, wann das größte Element gerendert wurde.
Was ist LCP?
Der LCP gibt die Renderingzeit des größten Bild- oder Textblocks im Darstellungsbereich an, bezogen auf den Zeitpunkt, zu dem der Nutzer die Seite zum ersten Mal aufgerufen hat.
Was ist ein guter LCP-Wert?
Für eine gute Nutzerfreundlichkeit sollten Websites einen LCP-Wert von 2, 5 Sekunden oder weniger anstreben. Damit Sie dieses Ziel für die meisten Nutzer erreichen, sollten Sie das 75. Perzentil der Seitenladevorgänge, aufgeschlüsselt nach Mobilgeräten und Desktop-Geräten, messen.
Welche Elemente werden berücksichtigt?
Wie in der Largest Contentful Paint API angegeben, werden für Largest Contentful Paint folgende Elementtypen berücksichtigt:
<img>-Elemente (für animierte Inhalte wie GIFs oder animierte PNGs wird die Zeit für die Präsentation im ersten Frame verwendet)<image>-Elemente innerhalb eines<svg>-Elements<video>-Elemente: Es wird die Ladezeit des Posterbilds oder die Zeit der Präsentation im ersten Frame für Videos verwendet – je nachdem, was früher eintritt.- Ein Element mit einem Hintergrundbild, das mithilfe der Funktion
url()geladen wird (im Gegensatz zu einem CSS-Farbverlauf) - Elemente auf Blockebene, die Textknoten oder andere untergeordnete Textelemente auf Inline-Ebene enthalten.
Die Beschränkung der Elemente auf diese begrenzte Gruppe war beabsichtigt, um die Komplexität zu verringern.
In Zukunft können weitere Elemente (wie die vollständige <svg>-Unterstützung) hinzugefügt werden, wenn weitere Studien durchgeführt werden.
Bei LCP-Messungen werden nicht nur einige Elemente berücksichtigt, sondern auch bestimmte Elemente mithilfe von Heuristiken ausgeschlossen, die Nutzer wahrscheinlich als „nicht inhaltlich“ einstufen. Zu den Chromium-basierten Browsern gehören:
- Elemente mit der Deckkraft 0, die für den Nutzer nicht sichtbar sind.
- Elemente, die den gesamten Darstellungsbereich abdecken und wahrscheinlich Hintergrundelemente sind.
- Platzhalterbilder oder andere Bilder mit einer niedrigen Entropie, die wahrscheinlich nicht den tatsächlichen Inhalt der Seite widerspiegeln
Browser werden diese Heuristik wahrscheinlich weiter verbessern, um sicherzustellen, dass wir den Erwartungen der Nutzer gerecht werden, welches das größte inhaltliche Element ist.
Diese „inhaltsreichen“ Heuristiken unterscheiden sich von denen von FCP, bei denen möglicherweise einige dieser Elemente berücksichtigt werden, z. B. Platzhalterbilder oder Bilder des vollständigen Darstellungsbereichs, auch wenn sie nicht als LCP-Kandidaten infrage kommen. Obwohl beide „contentful“ in ihrem Namen verwenden, hat das Ziel dieser Messwerte ein anderes Ziel. Mit FCP wird gemessen, wann beliebiger Inhalt auf dem Bildschirm dargestellt wird. LCP misst hingegen, wann der Hauptinhalt dargestellt wird.
Wie wird die Größe eines Elements bestimmt?
Die Größe des für den LCP gemeldeten Elements ist in der Regel die Größe, die für den Nutzer im Darstellungsbereich sichtbar ist. Wenn sich das Element über den Darstellungsbereich hinaus erstreckt oder ein Element abgeschnitten ist oder einen nicht sichtbaren overflow hat, werden diese Teile nicht auf die Größe des Elements angerechnet.
Bei Bildelementen, deren Größe von ihrer intrinsischen Größe aus angepasst wurde, wird entweder die sichtbare Größe oder die ursprüngliche Größe gemeldet, je nachdem, welche Größe kleiner ist.
Bei Textelementen berücksichtigt LCP nur das kleinste Rechteck, das alle Textknoten enthalten kann.
Für alle Elemente berücksichtigt LCP keine Ränder, Abstände oder Rahmen, die mit CSS angewendet wurden.
Wann wird der LCP gemeldet?
Webseiten werden oft in Phasen geladen, sodass sich das größte Element auf der Seite während des Ladevorgangs ändern kann.
Um dieses Änderungspotenzial zu bewältigen, gibt der Browser einen PerformanceEntry vom Typ largest-contentful-paint aus, der das größte inhaltsbezogene Element identifiziert, sobald der Browser den ersten Frame gerendert hat. Nach dem Rendern der nachfolgenden Frames wird jedes Mal ein weiteres PerformanceEntry gesendet, wenn sich das größte inhaltsbezogene Element ändert.
Auf einer Seite mit Text und einem Hero-Image rendert der Browser möglicherweise anfänglich nur den Text und sendet dann einen largest-contentful-paint-Eintrag, dessen element-Attribut auf einen <p>- oder <h1>-Wert verweist. Nachdem das Hero-Image fertig geladen ist, wird ein zweiter largest-contentful-paint-Eintrag gesendet, wobei ein element-Attribut auf <img> verweist.
Ein Element kann erst als das größte inhaltsbezogene Element betrachtet werden, nachdem es gerendert wurde und für den Nutzer sichtbar ist. Bilder, die noch nicht geladen wurden, gelten nicht als „gerendert“. Während des Schriftblocks verwenden Textknoten auch keine Webschriftarten.
In solchen Fällen wird ein kleineres Element möglicherweise als das größte inhaltsbezogene Element gemeldet. Sobald das größere Element aber gerendert wurde, wird ein weiteres PerformanceEntry-Element erstellt.
Neben dem späten Laden von Bildern und Schriftarten kann eine Seite dem DOM auch neue Elemente hinzufügen, wenn neue Inhalte verfügbar sind. Wenn eines dieser neuen Elemente größer als das vorherige größte inhaltsbezogene Element ist, wird ein neues PerformanceEntry erstellt.
Wenn das größte inhaltsbezogene Element aus dem Darstellungsbereich oder sogar aus dem DOM entfernt wird, bleibt es das größte inhaltsbezogene Element, sofern kein größeres Element gerendert wird.
Der Browser meldet keine neuen Einträge mehr, sobald der Nutzer mit der Seite interagiert (durch Tippen, Scrollen oder Tastendruck), da durch Nutzerinteraktionen häufig geändert wird, was für den Nutzer sichtbar ist (insbesondere beim Scrollen).
Zu Analysezwecken sollten Sie nur den zuletzt gesendeten PerformanceEntry an Ihren Analysedienst melden.
Ladezeit im Vergleich zur Renderingzeit
Aus Sicherheitsgründen wird der Renderingzeitstempel von Bildern bei ursprungsübergreifenden Bildern ohne Timing-Allow-Origin-Header nicht offengelegt. Stattdessen ist nur die Ladezeit verfügbar, die von anderen APIs bereits verfügbar gemacht wird.
Dies kann zu einer scheinbar unmöglichen Situation führen, in der LCP von Web-APIs noch vor FCP gemeldet wird. Das liegt nur an dieser Sicherheitsbeschränkung und stellt nicht dar, was wirklich passiert.
Wenn möglich, sollten Sie immer den Timing-Allow-Origin-Header festlegen, um genauere Messwerte zu erhalten.
Wie werden Layout- und Größenänderungen von Elementen gehandhabt?
Um den Leistungsaufwand bei der Berechnung und Weiterleitung neuer Leistungseinträge niedrig zu halten, werden durch Änderungen an der Größe oder Position eines Elements keine neuen LCP-Kandidaten generiert. Es wird nur die anfängliche Größe und Position des Elements im Darstellungsbereich berücksichtigt.
Daher werden Bilder, die zuerst außerhalb des Bildschirms gerendert und dann auf dem Bildschirm übergehen, möglicherweise nicht gemeldet. Das bedeutet auch, dass Elemente, die ursprünglich im Darstellungsbereich gerendert und dann aus dem sichtbaren Bereich verschoben wurden, weiterhin ihre ursprüngliche Größe im Darstellungsbereich angeben.
Beispiele
Hier sind einige Beispiele für den Fall, dass der Largest Contentful Paint auf einigen beliebten Websites auftritt:
In beiden Zeitachsen ändert sich das größte (grün hervorgehoben) Element, wenn der Inhalt geladen wird. Im ersten Beispiel werden neue Inhalte zum DOM hinzugefügt, wobei das größte Element geändert wird. Im zweiten Beispiel wird das Layout geändert. Dabei wird ein bisher größtes Inhaltselement aus dem Darstellungsbereich entfernt.
Late-Loading-Inhalte sind oft größer als bereits auf einer Seite vorhandene Inhalte. Dies ist jedoch nicht unbedingt der Fall. Die nächsten beiden Beispiele zeigen den LCP-Wert, bevor die Seite vollständig geladen wurde.
Im ersten Beispiel wird das Instagram-Logo relativ früh geladen und ist das größte Element, auch wenn weitere Inhalte hinzugefügt werden. Im Beispiel der Google-Suchergebnisseite ist das größte Element ein Textabsatz, der angezeigt wird, bevor eines der Bilder oder das Logo vollständig geladen ist. Da jedes einzelne Bild kleiner als dieser Absatz ist, bleibt es während des Ladevorgangs das größte Element.
LCP messen
Der LCP kann im Lab oder in der Praxis gemessen werden und ist in folgenden Tools verfügbar:
Außendienst-Tools
- Bericht zur Nutzererfahrung in Chrome
- PageSpeed Insights
- Search Console (Core Web Vitals-Bericht)
web-vitals-JavaScript-Bibliothek
Lab-Tools
LCP in JavaScript messen
Verwenden Sie zur Messung des LCP in JavaScript die Largest Contentful Paint API.
Das folgende Beispiel zeigt, wie Sie einen PerformanceObserver erstellen, der largest-contentful-paint-Einträge überwacht und in der Console protokolliert.
new PerformanceObserver((entryList) => {
for (const entry of entryList.getEntries()) {
console.log('LCP candidate:', entry.startTime, entry);
}
}).observe({type: 'largest-contentful-paint', buffered: true});
Im vorherigen Beispiel stellt jeder protokollierte largest-contentful-paint-Eintrag den aktuellen LCP-Kandidaten dar. In der Regel ist der Wert startTime des letzten ausgegebenen Eintrags der LCP-Wert. Nicht alle largest-contentful-paint-Einträge sind für die Messung des LCP jedoch gültig.
Im folgenden Abschnitt werden die Unterschiede zwischen den Informationen in der API und der Berechnung des Messwerts aufgeführt.
Unterschiede zwischen Messwert und API
- Die API sendet
largest-contentful-paint-Einträge für Seiten, die in einem Hintergrund-Tab geladen werden. Diese Seiten sollten jedoch bei der Berechnung des LCP ignoriert werden. - Die API sendet weiterhin
largest-contentful-paint-Einträge, nachdem eine Seite im Hintergrund ausgeführt wurde. Diese Einträge sollten jedoch bei der Berechnung des LCP ignoriert werden. Elemente können nur berücksichtigt werden, wenn die Seite die ganze Zeit im Vordergrund zu sehen war. - Die API meldet keine
largest-contentful-paint-Einträge, wenn die Seite aus dem Back-Forward-Cache wiederhergestellt wird. Der LCP sollte in diesen Fällen jedoch gemessen werden, da Nutzer sie als unterschiedliche Seitenaufrufe erleben. - In der API werden keine Elemente in iFrames berücksichtigt, beim Messwert aber, weil sie Teil der Nutzererfahrung auf der Seite sind. Auf Seiten mit einem LCP in einem iFrame, z. B. einem Posterbild in einem eingebetteten Video, wird dies als Unterschied zwischen CrUX und RUM angezeigt.
Um den LCP korrekt zu messen, müssen Sie iFrames einbeziehen. Subframes können die API verwenden, um ihre
largest-contentful-paint-Einträge zur Aggregation an den übergeordneten Frame zu melden. - Die API misst den LCP ab dem Start der Navigation. Messen Sie bei vor gerenderten Seiten stattdessen den LCP-Wert ab
activationStart, da dies der vom Nutzer erlebten LCP-Zeit entspricht.
Anstatt sich all die subtilen Unterschiede zu merken, empfehlen wir Entwicklern, die web-vitals-JavaScript-Bibliothek zu verwenden, um den LCP zu messen. Damit werden die meisten dieser Unterschiede für dich verarbeitet. Das Problem mit dem iFrame wird hier nicht behandelt.
import {onLCP} from 'web-vitals';
// Measure and log LCP as soon as it's available.
onLCP(console.log);
Im Quellcode für onLCP() findest du ein vollständiges Beispiel für die Messung des LCP in JavaScript.
Was ist, wenn das größte Element nicht das wichtigste ist?
In einigen Fällen ist das wichtigste Element (oder die wichtigsten Elemente) auf der Seite nicht dasselbe wie das größte Element. Daher sind Entwickler möglicherweise eher daran interessiert, die Renderingzeiten dieser anderen Elemente zu messen. Dies ist mit der Element Timing API möglich, wie im Artikel zu benutzerdefinierten Messwerten beschrieben.
LCP verbessern
Ein umfassender Leitfaden zur Optimierung des LCP ist verfügbar. Er enthält Informationen dazu, wie Sie LCP-Zeitangaben vor Ort ermitteln und anhand von Labdaten diese aufschlüsseln und optimieren.
Weitere Informationen
- Lessons Learned from Performance Monitoring in Chrome von Annie Sullivan bei performance.now() (2019)
Änderungsprotokoll
Gelegentlich werden Fehler in den APIs entdeckt, die zum Messen von Messwerten verwendet werden, und manchmal in den Definitionen der Messwerte selbst. Aus diesem Grund müssen manchmal Änderungen vorgenommen werden, die sich in Ihren internen Berichten und Dashboards als Verbesserungen oder Regressionen zeigen lassen.
Alle Änderungen an der Implementierung oder an der Definition dieser Messwerte werden in diesem Änderungsprotokoll aufgeführt.
Wenn du Feedback zu diesen Messwerten hast, kannst du es in der Google-Gruppe „web-vitals-feedback“ einreichen.