Wie findet man das LCP-Element?

Die Metrik LCP gehört zu den wichtigsten.

Für ihre Optimierung ist es entscheidend, das „LCP-Element“ zu identifizieren, welches das größte Element im sichtbaren Bereich des Browsers für einen bestimmten Benutzer darstellt. Der Zeitpunkt, zu dem dieses Element angezeigt wird, bestimmt dann die Zeit der LCP-Metrik.

Wenn Sie LCP optimieren möchten, müssen Sie auf den meistbesuchten Typenseiten Ihrer Website das LCP-Element finden.

Sie können LCP-Elemente auf verschiedene Weise identifizieren:

1) PageSpeed Insights#

Diesen Teil von PageSpeed Insights kennen Sie wahrscheinlich...

... aber zur Identifizierung des LCP-Elements suchen Sie nach „Largest Contentful Paint Element“:

Siehe PageSpeed Insights.

PageSpeed Insights zeigt hier die Ergebnisse des Lighthouse-Tools, das auch unserer Webgeschwindigkeitstests zugrunde liegt und ebenfalls in den Chrome DevTools verfügbar ist.

2) Lighthouse im Browser#

Lighthouse treibt die PageSpeed Insights an, ist in den Chrome DevTools verfügbar und bildet auch das Fundament unserer Webgeschwindigkeitstests.

Siehe Lighthouse.

3) Web Vitals Erweiterung#

Installieren Sie einfach die Web Vitals Erweiterung und schauen Sie in der DevTools-Konsole nach:

4) Performance-Panel in DevTools#

Dies ist die Option für Technikbegeisterte:

Nachdem Sie das LCP-Element gefunden haben, besteht das Ziel darin, es so schnell wie möglich auf der Seite zu rendern.

Dies erreichen Sie insbesondere dadurch, dass Sie die erforderlichen Ressourcen für dessen Rendern beschleunigen und gleichzeitig die Priorität für das Herunterladen aller anderen Ressourcen so gering wie möglich halten.

Darüber schreiben wir im Text zur Optimierung von LCP.