Hervorragende Software und praktische Tutorials
Maximaler darstellbarer Inhalt (LCP) ist eine wichtige benutzerzentrierte Metrik zur Messung der wahrgenommenen Ladegeschwindigkeit, da sie den Zeitpunkt in der Seitenladezeitleiste markiert, an dem der Hauptinhalt der Seite im Wesentlichen geladen ist. Eine schnelle LCP gibt Benutzern die Gewissheit, dass die Seite gültig ist.
Für Webentwickler ist es schon seit Langem eine Herausforderung, zu messen, wie schnell der Hauptinhalt einer Webseite geladen wird und wie schnell dieser Inhalt dem Benutzer angezeigt wird.
Wie zum BeispielladenoderDOMContentLoaded (DOM-Inhalt geladen)Diese alten Anzeigen waren nicht so toll, weil sie nicht unbedingt dem entsprachen, was der Benutzer auf dem Bildschirm sah.Erstes Contentful Paint (FCP)Diese neueren benutzerzentrierten Leistungsmetriken erfassen nur den Anfang des Ladevorgangs. Wenn eine Seite einen Begrüßungsbildschirm oder eine Ladeanzeige anzeigt, sind diese Momente für den Benutzer weniger relevant.
Wir haben in der Vergangenheit einige Leistungsindikatoren empfohlen, wie zum BeispielErste bedeutungsvolle Farbe (FMP)UndGeschwindigkeitsindex Geschwindigkeitsindex (SI) (Beide Metriken sind im Lighthouse-Tool enthalten) Diese Metriken helfen dabei, mehr vom Ladevorgang nach dem ersten Anstrich zu erfassen, aber sie sind komplex, schwer zu interpretieren und oft falsch, was bedeutet, dass sie immer noch nicht den Zeitpunkt identifizieren können, an dem der Hauptinhalt der Seite geladen wurde.
Manchmal ist weniger besser als mehr.W3C-Arbeitsgruppe für WebleistungBasierend auf Gesprächen mit Google und von Google durchgeführten Untersuchungen haben wir herausgefunden, dass eine genauere Methode zum Messen, wann der Hauptinhalt der Seite geladen wurde, darin besteht, zu prüfen, wann das Rendern des größten Elements abgeschlossen ist.
Was ist LCP?
Die Kennzahl Largest Contentful Paint (LCP) basiert auf der SeiteErster LadevorgangDer maximal sichtbare Bereich im sichtbaren Bereich wird zum Zeitpunkt gemeldetBild oder TextblockDie relative Zeit, zu der das Rendern abgeschlossen wurde.
Was ist ein guter LCP-Score?
Um eine gute Benutzererfahrung zu bieten, sollten Websites versuchen, den maximalen Inhalt innerhalb2,5 SekundenUm sicherzustellen, dass Sie das empfohlene Ziel für die meisten Ihrer Benutzer erreichen, ist ein guter Messschwellenwert75. Perzentilund dieser Schwellenwert gilt sowohl für mobile als auch für Desktop-Geräte
Weitere Informationen zur Forschung und Methodik hinter diesen empfohlenen Werten finden Sie unter:Definieren Sie Metrikschwellenwerte für zentrale Webmetriken
Welche Elemente werden berücksichtigt?
Nach der aktuellenMaximal inhaltsreiche Zeichen-APIGemäß den Bestimmungen von werden für die maximale Inhaltszeichnung die folgenden Elementtypen berücksichtigt:
imgElement- Eingebettet in
svgInnerhalb des ElementsBildElement VideoElemente (Coverbild verwenden)- passierenURL ()Funktion (anstatt zu verwendenCSS-Verläufe) Elemente mit geladenen Hintergrundbildern
- Enthält Textknoten oder andere untergeordnete Textelemente auf Inline-EbeneElemente auf Blockebene.
Bitte beachten Sie, dass wir die Elemente bewusst auf diese wenigen Typen beschränkt haben, um die Dinge in der Anfangsphase einfach zu halten. Wir werden möglicherweise in Zukunft weitere Elemente hinzufügen (z. B.svg , Video).
Wie bestimmt man die Größe eines Elements?
Die für den größten darstellbaren Inhalt angegebene Größe eines Elements entspricht in der Regel der für den Benutzer im Ansichtsfenster sichtbaren Größe. Wenn ein Element über das Ansichtsfenster hinausragt, abgeschnitten ist oder unsichtbareÜberlauf, diese Teile werden nicht in die Elementgröße eingerechnet.
FürOriginalgrößeBei skalierten Bildelementen entspricht die an die Metrik gemeldete Elementgröße entweder der sichtbaren Größe oder der Originalgröße, je nachdem, welche kleiner ist. Beispielsweise wird bei einem verkleinerten Bild, das deutlich kleiner als seine Originalgröße ist, nur die angezeigte Größe des Bildes gemeldet, während bei einem gestreckten oder vergrößerten Bild nur die Originalgröße des Bildes gemeldet wird.
Bei Textelementen berücksichtigt die Metrik nur die Größe ihrer Textknoten (das kleinste Rechteck, das alle Textknoten enthält).
Bei allen Elementen werden die per CSS festgelegten Ränder, Auffüllungen oder Grenzen nicht berücksichtigt.
Die Zuordnung von Textknoten zu einzelnen Elementen kann manchmal schwierig sein, insbesondere bei Elementen, deren untergeordnete Elemente sowohl Inline-Elemente als auch reine Textknoten enthalten und Teil eines Blockelements sind. Entscheidend ist, dass jeder Textknoten ausschließlich zu seinem nächstgelegenen Blockelement gehört.StandardterminologieZur Erklärung: Jeder Textknoten gehört zumEnthaltender BlockDas entsprechende Element von .
Wann wird der größte Inhaltsangabe-Anstrich gemeldet?
Webseiten werden oft schrittweise geladen, sodass sich das größte Element auf der Seite ändern kann.
Um dieser möglichen Änderung Rechnung zu tragen, versendet der Browser einegrößte-inhaltliche-MalereiTypPerformanceEintrag, das das größte Inhaltselement identifiziert. Nach dem Rendern nachfolgender Frames sendet der Browser jedoch ein weiteresPerformanceEintrag.
Beispielsweise könnte der Browser auf einer Seite mit Text und einem Header-Bild zunächst nur den Textteil rendern und einegrößte-inhaltliche-MalereiItem, dessen Elementattribut sich üblicherweise auf einPoderh1 Sobald das erste Bild fertig geladen ist, versendet der Browser das zweitegrößte-inhaltliche-MalereiDas Elementattribut bezieht sich auf dieimg .
Wichtig zu beachten ist, dass ein Element erst dann als größtes Inhaltselement gilt, wenn es vollständig gerendert und für den Benutzer sichtbar ist. Bilder, die noch nicht geladen wurden, gelten nicht als „gerendert“.Sperrfrist für SchriftartenDasselbe gilt für Textknoten, die Webfonts verwenden. In diesem Fall wird das kleinere Element möglicherweise als größtes Inhaltselement gemeldet. Sobald das größere Element jedoch fertig gerendert ist, wird es von einem anderen Element als größtes Inhaltselement gemeldet.PerformanceEintragDas Subjekt berichtet.
Zusätzlich zum Lazy Loading von Bildern und Schriftarten kann die Seite dem DOM neue Elemente hinzufügen, sobald neuer Inhalt verfügbar ist. Wenn eines der neuen Elemente größer ist als das vorherige größte Inhaltselement, meldet der Browser auch ein neuesPerformanceEintrag.
Wenn das aktuell größte Inhaltselement aus dem Ansichtsfenster (oder sogar aus dem DOM) entfernt wird, bleibt es das größte Inhaltselement, bis die Darstellung eines größeren Elements abgeschlossen ist.
Vor Chrome 88 wurde das entfernte Element nicht als größtes Inhaltselement betrachtet und das Entfernen des aktuellen Kandidaten führte dazu, dass der Browser ein neues Element versendete.größte-inhaltliche-MalereiDiese Metrik wurde jedoch aktualisiert, um die Benutzererfahrung bei beliebten UI-Mustern wie Bildkarussells, bei denen häufig DOM-Elemente entfernt werden, genauer widerzuspiegeln. SieheÄnderungsprotokoll für weitere Details.
Wenn der Benutzer mit der Seite interagiert (durch Tippen, Scrollen oder Drücken von Tasten), stoppt der Browser sofort die Meldung neuer Elemente, da Benutzerinteraktionen häufig den für den Benutzer sichtbaren Inhalt ändern (dies gilt insbesondere beim Scrollen).
Für analytische Zwecke sollten Sie nur die zuletzt verteiltenPerformanceEintrag.
Da der Benutzer die Seite in einer Registerkarte im Hintergrund öffnen und diese Registerkarte erst viel später fokussieren kann, als wenn die Seite zum ersten Mal geladen wird, wird der maximale Inhaltsangabewert möglicherweise erst erreicht, wenn der Benutzer die Registerkarte fokussiert.
Ladezeit vs. Renderzeit
Aus SicherheitsgründenTiming-Allow-OriginHeader wird der Renderzeitstempel des Bilds nicht angezeigt. Stattdessen wird nur die Ladezeit des Bilds angezeigt (da die Ladezeit bereits über viele andere Web-APIs angezeigt wird).
UntenAnwendungsbeispieleerklärt, wie man mit Elementen umgeht, bei denen keine Renderzeit verfügbar ist. Wir empfehlen jedoch immer,Timing-Allow-OriginÜberschriften, wodurch Ihre Messwerte genauer werden.
Wie gehe ich mit Änderungen des Elementlayouts und der Elementgröße um?
Um den Aufwand für die Berechnung und Verteilung neuer Performance-Einträge gering zu halten, werden bei Änderungen der Größe oder Position eines Elements keine neuen LCP-Kandidaten generiert. Es werden lediglich die initiale Größe und Position des Elements innerhalb des sichtbaren Bereichs berücksichtigt.
Dies bedeutet, dass ein Bild, das zunächst außerhalb des Bildschirms gerendert und dann auf den Bildschirm übertragen wurde, möglicherweise nicht als solches gemeldet wird. Dies bedeutet auch, dass ein Element, das zunächst innerhalb des Ansichtsfensters gerendert und dann außerhalb des Ansichtsfensters verschoben wurde, seine ursprüngliche Größe weiterhin als innerhalb des Ansichtsfensters befindlich meldet.
Beispiel
Hier sind einige Beispiele dafür, wann auf einigen beliebten Websites der größte Contentful Paint stattfindet:
In den beiden obigen Zeitleisten ändert sich das größte Element beim Laden von Inhalten. Im ersten Beispiel wird dem DOM neuer Inhalt hinzugefügt, wodurch sich das größte Element ändert. Im zweiten Beispiel wird der zuvor größte Inhalt aufgrund einer Layoutänderung aus dem sichtbaren Bereich entfernt.
Während verzögert geladene Inhalte oft größer sind als der bereits vorhandene Inhalt der Seite, ist dies nicht unbedingt der Fall. Die nächsten beiden Beispiele zeigen, wie der größte Content Paint erscheint, bevor die Seite vollständig geladen ist.
Im ersten Beispiel wird das Instagram-Logo relativ früh geladen und bleibt das größte Element, auch wenn andere Inhalte später angezeigt werden. Im Beispiel der Google-Suchergebnisseite ist das größte Element ein Textblock, der angezeigt wird, bevor Bilder oder Logos vollständig geladen sind. Da alle einzelnen Bilder kleiner als der Text sind, bleibt er während des gesamten Ladevorgangs das größte Element.
Im ersten Frame Ihrer Instagram-Timeline haben Sie möglicherweise bemerkt, dass das Kamerasymbol nicht von einem grünen Kasten umgeben ist. Dies liegt daran, dass das Symbol einsvgElemente undsvgDas Element wird derzeit nicht als LCP-Kandidat betrachtet. Der erste LCP-Kandidat ist der Text im zweiten Rahmen.
So messen Sie LCP
LCP kannLaborMessen odertatsächlichGemessen und einsetzbar in folgenden Werkzeugen:
Messwerkzeuge
- Bericht zur Chrome-Benutzererfahrung
- PageSpeed Insights Tool zur Messung der Webseitengeschwindigkeit
- Search Console (Bericht zu zentralen Webmetriken)
- Web-Vitals-JavaScript-Bibliothek
Laborwerkzeuge
Messen von LCP in JavaScript
Um LCP in JavaScript zu messen, können Sie verwendenMaximal inhaltsreiche Zeichen-API Das folgende Beispiel zeigt die Erstellung einesLeistungsbeobachterum auf den Eintrag mit dem größten Inhaltsumfang zu warten und ihn in der Konsole zu protokollieren.
neuer PerformanceObserver((Eintragsliste) => {
für (const Eintrag von entryList.getEntries()) {
console.log('LCP-Kandidat:', Eintrag.Startzeit, Eintrag);
}
}).observe({Typ: 'largest-contentful-paint', gepuffert: true});
Der obige Code zeigt, wiegrößte-inhaltliche-MalereiEinträge werden in der Konsole protokolliert, die Messung von LCP in JavaScript ist jedoch komplizierter. Weitere Informationen finden Sie unten:
Im obigen Beispiel wird jeder aufgezeichnetegrößte-inhaltliche-MalereiDie Einträge repräsentieren die aktuellen LCP-Kandidaten. Normalerweise ist der vom aktuellsten Eintrag ausgegebene Startzeitwert der LCP-Wert, aber das ist nicht immer der Fall. Nicht allegrößte-inhaltliche-MalereiElemente können zum Messen von LCP verwendet werden.
In den folgenden Abschnitten werden die Unterschiede zwischen den von der API gemeldeten Daten und der Berechnung der Metriken aufgeführt.
Unterschiede zwischen Indikatoren und APIs
- Die API verteilt Einträge mit dem größten Inhaltsumfang für Seiten, die in Hintergrundregisterkarten geladen werden. Diese Seiten sollten bei der Berechnung des LCP jedoch ignoriert werden.
- Die API verteilt weiterhin Einträge für den größten Inhaltsbereich, nachdem die Seite in den Hintergrund verschoben wurde. Diese Einträge sollten bei der Berechnung des LCP jedoch ignoriert werden (Elemente werden nur berücksichtigt, wenn sich die Seite immer im Vordergrund befindet).
- Wenn die Seite passiertRoundtrip-CacheDie API meldet beim Fortsetzen nicht den Eintrag mit dem größten Contentful-Paint, aber in diesen Fällen sollte LCP gemessen werden, da es sich für den Benutzer um mehrere unterschiedliche Seitenbesuche handelt.
- Die API berücksichtigt keine Elemente innerhalb von Iframes. Für eine korrekte LCP-Messung sollten Sie diese jedoch berücksichtigen. Untergeordnete Frames können die API verwenden, um den Eintrag mit dem größten Contentful-Paint für diese Elemente zur Aggregation an den übergeordneten Frame zu melden.
Anstatt sich all diese Nuancen merken zu müssen, können EntwicklerWeb-Vitals-JavaScript-BibliothekUm LCP zu messen, behandelt die Bibliothek diese Unterschiede selbst (sofern möglich):
importiere {getLCP} von „web-vitals“;
// Messen und protokollieren, sobald LCP verfügbar ist.
getLCP(console.log);
Ein vollständiges Beispiel zur Messung von LCP in JavaScript finden Sie im Quellcode von getLCP().
In einigen Fällen (z. B. domänenübergreifenden Iframes) kann LCP in JavaScript nicht gemessen werden. Weitere Informationen finden Sie in der Web-Vitals-Bibliothek.EinschränkungTeil.
Was ist, wenn das größte Element nicht das wichtigste Element ist?
In einigen Fällen ist das wichtigste Element (oder die wichtigsten Elemente) auf der Seite nicht das größte Element und Entwickler sind möglicherweise mehr daran interessiert, die Renderzeit des ersteren zu messen.Element-Timing-APIUm dies zu erreichen, ist die API überBenutzerdefinierte IndikatorenIm Artikel beschrieben.
So verbessern Sie LCP
LCP wird hauptsächlich von vier Faktoren beeinflusst:
- Langsame Serverantwortzeit
- JavaScript und CSS blockieren das Rendern
- Ladezeit der Ressource
- Clientseitiges Rendering
Weitere Informationen zur Verbesserung von LCP finden Sie unterLCP optimierenWeitere Hinweise zu anderen individuellen Leistungstechniken, die LCP verbessern können, finden Sie unter:
