Bisher war es für Webentwickler schwierig zu messen, wie schnell der Hauptinhalt einer Webseite geladen und für Nutzer sichtbar ist.
Ältere Messwerte wie load oder DOMContentLoaded sind nicht gut, da sie nicht unbedingt dem entsprechen, was der Nutzer auf seinem Bildschirm sieht. Neuere, nutzerorientierte Leistungsmesswerte wie First Contentful Paint (FCP) erfassen nur den Anfang des Ladevorgangs. Wenn auf einer Seite ein Ladebildschirm oder eine Ladeanzeige zu sehen ist, 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 den Ladevorgang nach der ursprünglichen Farbe besser 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.
Manchmal ist einfacher auch besser. Auf der Grundlage von Diskussionen in der W3C Web Performance Working Group sowie bei Google durchgeführten Untersuchungen haben wir herausgefunden, dass genauer gemessen werden kann, wann der Hauptinhalt einer Seite geladen wird, indem man prüft, wann das größte Element gerendert wurde.
Was ist LCP?
Der Messwert „Largest Contentful Paint“ (LCP) gibt die Renderingzeit des größten Bild- oder Textblocks im Darstellungsbereich an, bezogen auf den erstmaligen Start des Ladevorgangs der Seite.
Was ist ein guter LCP-Wert?
Für eine gute Nutzerfreundlichkeit sollten Websites einen Largest Contentful Paint mit einer Dauer von 2, 5 Sekunden oder weniger anstreben. Damit Sie dieses Ziel für die meisten Nutzer erreichen, sollten Sie das 75. Perzentil der Seitenaufbauvorgänge, aufgeschlüsselt nach Mobilgeräten und Desktop-Geräten, messen.
Welche Elemente werden berücksichtigt?
Wie derzeit in der Largest Contentful Paint API angegeben, werden für Largest Contentful Paint folgende Elementtypen berücksichtigt:
<img>-Elemente<image>-Elemente innerhalb eines<svg>-Elements<video>-Elemente mit einem Posterbild (die Ladezeit des Posterbilds wird verwendet)- Ein Element mit einem Hintergrundbild, das über die Funktion
url()geladen wird (im Gegensatz zu einem CSS-Farbverlauf) - Elemente auf Blockebene, die Textknoten oder andere untergeordnete Textelemente auf Inline-Ebene enthalten.
- Der erste Frame, der für die automatische Wiedergabe von
<video>-Elementen gezeichnet wurde (Stand: August 2023) - Der erste Frame eines animierten Bildformats, z. B. animierte GIFs (Stand: August 2023)
Hinweis: Die Beschränkung der Elemente auf diese begrenzte Menge war beabsichtigt, um die Dinge von Anfang an einfach zu halten. Weitere Elemente (wie die vollständige <svg>-Unterstützung) werden möglicherweise in Zukunft hinzugefügt, wenn weitere Studien durchgeführt werden.
Es werden nicht nur einige Elemente berücksichtigt, sondern auch bestimmte Heuristiken angewendet, um bestimmte Elemente auszuschließen, die für Nutzer wahrscheinlich als „nicht inhaltlich“ eingestuft werden. Dies gilt für Chromium-basierte Browser:
- Elemente mit der Deckkraft 0, die für den Nutzer nicht sichtbar sind
- Elemente, die den gesamten Darstellungsbereich abdecken und wahrscheinlich als Hintergrund und nicht als Inhalt angesehen werden
- 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 bezüglich des größten inhaltsreichen Elements gerecht werden.
Diese „inhaltlichen“ Heuristiken können sich von denen von First Contentful Paint (FCP) unterscheiden, bei denen einige dieser Elemente berücksichtigt werden, z. B. Platzhalterbilder oder Bilder des gesamten Darstellungsbereichs, auch wenn sie sich nicht als LCP-Kandidaten eignen. Obwohl beide „inhaltlich“ in ihrem Namen verwendet werden, ist das Ziel dieser Messwerte ein anderes. Als FCP wird gemessen, ob Inhalte auf dem Bildschirm dargestellt werden und LCP, wenn der Hauptinhalt dargestellt wird. Der LCP soll also selektiver sein.
Wie wird die Größe eines Elements bestimmt?
Die Größe des Elements, das für Largest Contentful Paint gemeldet wird, entspricht in der Regel der Größe, die für den Nutzer im Darstellungsbereich sichtbar ist. Wenn das Element über den Darstellungsbereich hinaus erweitert wird oder eines davon 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 abweicht, ist die gemeldete Größe entweder die sichtbare Größe oder die intrinsische Größe, je nachdem, welcher Wert kleiner ist. Beispiel: Bilder, die auf eine viel kleinere Größe reduziert werden, geben nur die Größe an, in der sie angezeigt werden, während Bilder, die gestreckt oder auf eine größere Größe erweitert werden, nur die intrinsischen Größen angeben.
Bei Textelementen wird nur die Größe der Textknoten berücksichtigt (das kleinste Rechteck, das alle Textknoten umfasst).
Über CSS angewendete Ränder, Abstände oder Rahmen werden bei allen Elementen nicht berücksichtigt.
Wann wird „Large Contentful Paint“ gemeldet?
Webseiten werden oft in Phasen geladen. Daher ist es möglich, dass sich das größte Element auf der Seite ändert.
Um dieses Änderungspotenzial zu bewältigen, sendet der Browser einen PerformanceEntry vom Typ largest-contentful-paint und identifiziert das größte inhaltsbezogene Element, sobald der Browser den ersten Frame gerendert hat. Nach dem Rendern der nachfolgenden Frames wird jedoch ein weiteres PerformanceEntry ausgelöst, sobald sich das größte inhaltsbezogene Element ändert.
Auf einer Seite mit Text und einem Hero-Image kann der Browser beispielsweise anfangs nur den Text rendern. Zu diesem Zeitpunkt sendet der Browser einen largest-contentful-paint-Eintrag, dessen element-Attribut wahrscheinlich auf <p> oder <h1> verweisen würde. Sobald das Hero-Image fertig geladen ist, wird ein zweiter largest-contentful-paint-Eintrag gesendet und sein element-Attribut verweist auf das <img>.
Ein Element gilt erst dann als das größte Inhaltselement, wenn es gerendert wurde und für den Nutzer sichtbar ist. Bilder, die noch nicht geladen wurden, werden nicht als "gerendert" betrachtet. Und auch nicht die Textknoten, die während der Schriftblockperiode Webschriftarten verwenden.
In solchen Fällen wird ein kleineres Element möglicherweise als größtes inhaltsreiches Element gemeldet. Sobald das größere Element gerendert wurde, wird es über ein anderes PerformanceEntry-Objekt gemeldet.
Neben dem verspäteten 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 auch ein neuer PerformanceEntry gemeldet.
Wenn ein Element, das derzeit das größte inhaltsbezogene Element ist, aus dem Darstellungsbereich oder sogar aus dem DOM entfernt wird, bleibt es das größte Inhaltselement, sofern kein größeres Element gerendert wird.
Der Browser meldet keine neuen Einträge mehr, sobald der Nutzer durch Tippen, Scrollen oder Tastendruck mit der Seite interagiert, da sich durch die Nutzerinteraktion häufig der für den Nutzer sichtbare Inhalt ändert. Dies gilt insbesondere beim Scrollen.
Zu Analysezwecken sollten Sie nur das zuletzt gesendete PerformanceEntry an Ihren Analysedienst melden.
Ladezeit im Vergleich zur Renderingzeit
Aus Sicherheitsgründen wird der Zeitstempel des Renderings von Bildern bei ursprungsübergreifenden Bildern ohne den Header Timing-Allow-Origin nicht zur Verfügung gestellt. Stattdessen wird nur ihre Ladezeit angegeben, da diese bereits über viele andere Web-APIs bereitgestellt wird.
Dies kann zu einer scheinbar unmöglichen Situation führen, in der der LCP von Web-APIs früher als FCP gemeldet wird. Dies ist nicht der Fall, sondern aufgrund dieser Sicherheitsbeschränkung nur so.
Wir empfehlen, nach Möglichkeit immer den Header „Timing-Allow-Origin“ festzulegen, damit Ihre Messwerte genauer sind.
Wie werden Layout- und Größenänderungen von Elementen gehandhabt?
Um den Leistungsaufwand für die Berechnung und Weiterleitung neuer Leistungseinträge gering zu halten, werden bei Änderungen 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 wurden und dann nach unten verschoben werden, weiterhin ihre ursprüngliche Größe im Darstellungsbereich melden.
Beispiele
Hier sind einige Beispiele für Fälle, in denen der Largest Contentful Paint auf einigen beliebten Websites auftritt:
Auf beiden Zeitachsen oben ändert sich das größte Element, wenn der Inhalt geladen wird. Im ersten Beispiel wird dem DOM neuer Inhalt hinzugefügt. Dadurch ändert sich, welches Element das größte ist. Im zweiten Beispiel wird das Layout geändert und zuvor die größten Inhalte werden aus dem Darstellungsbereich entfernt.
Zwar kommt es häufig vor, dass Inhalte, die spät geladen werden, größer sind als Inhalte, die sich bereits auf der Seite befinden. Dies ist jedoch nicht unbedingt der Fall. Die nächsten beiden Beispiele zeigen den Largest Contentful Paint, der erfolgt, bevor die Seite vollständig geladen wurde.
Im ersten Beispiel wird das Instagram-Logo relativ früh geladen und bleibt das größte Element, auch wenn andere Inhalte nach und nach gezeigt werden. Auf der Google-Suchergebnisseite ist das größte Element ein Textabschnitt, der angezeigt wird, bevor das Bild oder das Logo vollständig geladen ist. Da alle einzelnen Bilder kleiner als dieser Absatz sind, bleibt es während des gesamten Ladevorgangs das größte Element.
LCP-Messung
Der LCP kann im Labor oder in der Praxis gemessen werden und ist in folgenden Tools verfügbar:
Tools für den Außeneinsatz
- Bericht zur Nutzererfahrung in Chrome
- PageSpeed Insights
- Search Console (Core Web Vitals-Bericht)
web-vitals-JavaScript-Bibliothek
Lab-Tools
LCP in JavaScript messen
Wenn du den LCP in JavaScript messen möchtest, kannst du die Largest Contentful Paint API verwenden. Das folgende Beispiel zeigt, wie Sie einen PerformanceObserver erstellen, der largest-contentful-paint-Einträge überwacht und in der Konsole 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 obigen Beispiel stellt jeder protokollierte largest-contentful-paint-Eintrag den aktuellen LCP-Kandidaten dar. Im Allgemeinen ist der Wert startTime des letzten ausgegebenen Eintrags der LCP-Wert. Dies ist jedoch nicht immer der Fall. Nicht alle largest-contentful-paint-Einträge sind für die LCP-Messung gültig.
Im folgenden Abschnitt werden die Unterschiede zwischen der Meldung 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 LCPs ignoriert werden. - Die API sendet weiterhin
largest-contentful-paint-Einträge, nachdem eine Seite im Hintergrund ausgeführt wurde. Diese Einträge sollten bei der Berechnung des LCP aber ignoriert werden. Elemente werden nur berücksichtigt, wenn sich die Seite die ganze Zeit im Vordergrund befand. - 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 separate Seitenaufrufe wahrnehmen. - Die API berücksichtigt keine Elemente in iFrames, der Messwert hingegen schon, da sie Teil der Nutzererfahrung auf der Seite sind. Auf Seiten mit einem LCP innerhalb eines iFrames, z. B. einem Posterbild in einem eingebetteten Video, wird dies als Unterschied zwischen CrUX und RUM angezeigt.
Um den LCP-Wert richtig zu messen, sollten Sie sie berücksichtigen. Subframes können die API verwenden, um ihre
largest-contentful-paint-Einträge zur Aggregation an den übergeordneten Frame zu melden.
Anstatt sich all diese subtilen Unterschiede zu merken, können Entwickler den LCP mit der web-vitals-JavaScript-Bibliothek messen, die diese Unterschiede für Sie handhabt (falls möglich – das iFrame-Problem wird 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() finden Sie ein vollständiges Beispiel zum Messen von 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. Entwickler sind möglicherweise eher daran interessiert, stattdessen die Renderingzeiten dieser anderen Elemente zu messen. Dazu können Sie die Element Timing API verwenden, wie im Artikel zu benutzerdefinierten Messwerten beschrieben.
LCP verbessern
Ein umfassender Leitfaden zur Optimierung des LCP ist verfügbar, der dich durch den Prozess führt, wie du LCP-Zeiten vor Ort ermitteln und anhand von Labordaten aufschlüsseln und optimieren kannst.
Weitere Ressourcen
ÄNDERUNGSLOG
Gelegentlich werden Fehler in den APIs gefunden, die zum Messen von Messwerten verwendet werden, und manchmal in den Definitionen der Messwerte selbst. Aus diesem Grund müssen gelegentlich Änderungen vorgenommen werden, die in Ihren internen Berichten und Dashboards als Verbesserungen oder Regressionen sichtbar werden können.
Um Ihnen die Verwaltung zu erleichtern, werden alle Änderungen an der Implementierung oder Definition dieser Messwerte in diesem CHANGELOG angezeigt.
Wenn du Feedback zu diesen Messwerten hast, kannst du es in der Google-Gruppe „web-vitals-feedback“ einreichen.