Jede Webseite besteht aus Dutzenden oder Hunderten von Elementen. Darunter findest du Text, Bilder, Schaltflächen, Widgets und vieles mehr. Jedes Element ist unterschiedlich groß, und die größten Elemente sagen viel darüber aus, wie gut deine Website optimiert ist, indem sie eine Metrik namens Largest Contentful Paint (LCP) verwenden.
In diesem Artikel erklären wir dir das Konzept von LCP. Wir zeigen dir auch, wie du diesen Datenpunkt messen und die Ergebnisse interpretieren kannst. Und schließlich erfährst du, wie du deinen LCP-Wert optimieren kannst. Also los, an die Arbeit!
Was ist Largest Contentful Paint (LCP)?
Auf den meisten Webseiten gibt es ein Element, das sich aufgrund seiner Größe und Bedeutung vom Rest abhebt. Betrachte zum Beispiel diese Landing Page, auf der der Hero-Abschnitt den Viewport dominiert:
Dieser Heldenabschnitt stellt das größte inhaltsreiche Bild (Largest Contentful Paint, LCP) für diese Seite dar. Das heißt, LCP ist die Zeit, die eine Website benötigt, um das Element mit der größten Menge an Inhalt zu rendern.
Wenn du die LCP für diese Seite herausfinden willst, musst du messen, wie lange der Heldenbereich zum Laden braucht. Theoretisch bedeutet ein niedriger LCP-Wert, dass deine Website gut optimiert ist und für die Nutzer schnell lädt.
Es ist wichtig zu verstehen, dass eine LCP-Bewertung von der Gesamtladezeit deiner Website abweichen kann (und hoffentlich auch wird). So kann es sein, dass eine Seite drei Sekunden braucht, um vollständig geladen zu werden, ihr LCP-Wert aber nur 2 Sekunden beträgt. Das liegt daran, dass die meisten modernen Websites zusätzlich zu den Text- und Mediendateien auch Skripte laden.
Normalerweise geht LCP Hand in Hand mit First Contentful Paint (FCP). Dies ist eine Kennzahl, die angibt, wie lange es dauert, bis das erste Element mit Inhalt gerendert wird, wenn jemand auf deiner Website zugreift. In Kombination geben diese Kennzahlen (oder die Core Web Vitals von Google) einen viel besseren Einblick in die Leistung deiner Website als die allgemeine Ladezeit.
Beachte, dass Google bei der Messung des LCP deiner Website nicht alles berücksichtigt. Es ignoriert Elemente wie SVG-Dateien (Scalable Vector Graphics) und Videos, aber diese werden möglicherweise in zukünftigen Updates der Google Core Web Vitals berücksichtigt.
Wie man LCP misst
Normalerweise ist es ganz einfach, das größte inhaltsreiche Element auf deiner Website zu bestimmen. Du brauchst nur zu warten, bis die Seite vollständig geladen ist, und dich umzuschauen. In den meisten Fällen gibt es einen Abschnitt oder ein Element, das sich von den anderen abhebt. Dabei kann es sich um den oben erwähnten Heldenbereich oder den eigentlichen Inhalt eines Blogbeitrags handeln.
In der Regel handelt es sich dabei um ein Bild oder einen Textblock (wie den obigen Heldenabschnitt oder den Bloginhalt im Allgemeinen). LCP variiert auch je nach Benutzer, da es auf dessen Ansichtsfenster basiert (oder darauf, welche Inhalte sich oberhalb der Ausklappleiste befinden).
Der eigentliche Trick bei LCP besteht darin, zu messen, wie lange das jeweilige Element zum Laden braucht (nicht die Seite selbst). Wenn du jemals ein Tool oder einen Dienst verwendet hast, mit dem du Ladezeiten messen kannst, ist es gut möglich, dass er auch detaillierte Metriken wie FCP- und LCP-Werte enthält.
Nehme zum Beispiel PageSpeed Insights. Du kannst eine beliebige URL eingeben und der Dienst führt einen vollständigen Leistungstest für diese Seite durch. In den Ergebnissen siehst du eine Gesamtleistungsbewertung. Unter dem Abschnitt Felddaten findest du außerdem eine Aufschlüsselung anderer Metriken, darunter auch LCP:
PageSpeed Insights sammelt reale Leistungsdaten von mehreren Nutzern und verwendet diese, um dir im Laufe der Zeit aggregierte Werte zu liefern. Dieser Ansatz ist viel präziser als die Verwendung eines einzelnen Tests zur Bestimmung der Leistung deiner Website.
Außerdem erhälst du eine prozentuale Aufschlüsselung für jeden Wert. Im obigen Beispiel können wir sehen, dass 89 % der Seitenaufrufe in weniger als 1,5 Sekunden erfolgen, was ein fantastischer Wert ist. Die restlichen 11 % der Seitenaufrufe liegen jedoch außerhalb dieses Bereichs. Das bedeutet, dass das LCP bei einigen Nutzern viel länger braucht, um die Seite aufzulösen.
Es ist wichtig zu verstehen, dass selbst bei einer gut optimierten Website die Ladezeiten je nach Nutzerkreis variieren. Manche Besucher haben vielleicht eine langsame Internetverbindung oder sind zu weit von deinem Server entfernt. Dies sind nur zwei von vielen Gründen, warum die Ladezeiten in manchen Fällen länger sein können. Aus diesem Grund ist es wichtig, einen Durchschnittswert als Referenz zu haben.
Wenn du auf der PageSpeed Insights-Ergebnisseite weiter nach unten scrollst, stößt du auf den Abschnitt Experiment-Daten. Hier stellt Google dir die genauen Ergebnisse für den Test zur Verfügung, den es gerade auf deiner Seite durchgeführt hat:
PageSpeed Insights verwendet diese Experimentdaten, um dir die Gesamtbewertung zu liefern, die du am Anfang der Ergebnisse siehst. Die Experimentdaten bieten kein so umfassendes Bild wie die aggregierten Feldinformationen. Sie geben dir aber immer noch einen ziemlich guten Eindruck von der Leistung deiner Website.
Im Idealfall solltest du einen LCP-Wert von unter 2,5 Sekunden erreichen (im Gegensatz zum FCP-Wert, der bei 1,8 Sekunden ideal ist). Je niedriger diese Zeit ist, desto besser. Die besten Ergebnisse und Erfahrungen erziehlst du, wenn deine Ladezeiten insgesamt unter 3 Sekunden bleiben. Danach wirst du in der Regel einen deutlichen Anstieg der Absprungraten feststellen.
Unserer Erfahrung nach ist PageSpeed Insights das beste Tool zur Messung von LCP und allgemeinen Ladezeiten. Du kannst jedoch auch auf die gleichen Informationen zugreifen, wenn du die Search Console für deine Website einrichtest, was wir für Zwecke der Suchmaschinenoptimierung (SEO) unbedingt empfehlen.
Wenn du dich außerhalb von Google umsehen möchtest, kannst du die LCP-Zeiten auch manuell mit den Entwicklungswerkzeugen deines Browsers messen. Die meisten Entwicklungs-Toolkits ermöglichen es dir, die Ladezeiten von Seiten zu messen, und bieten Details darüber, wie lange es dauert, jedes Element zu laden und jede Anfrage zu verarbeiten. Dieser manuelle Ansatz ist jedoch mit viel mehr Arbeit verbunden als die Nutzung eines Drittanbieterdienstes.
Du kannst auch Dienste wie GT Metrix und Pingdom’s Speed Test nutzen, um zusätzliche Einblicke in deine LCP und andere Metriken zum Laden von Seiten zu erhalten.
Wie du deinen LCP Score optimierst
Wenn du das größte Element auf deiner Seite identifizieren kannst, solltest du in der Lage sein, es zu optimieren. Wenn es sich bei diesem Element beispielsweise um ein Bild handelt, kannst du ein Komprimierungstool verwenden, um die Dateigröße zu verringern und deinen LCP-Wert zu verbessern.
Dieser Ansatz funktioniert jedoch nur, wenn deine Website nicht gut optimiert ist. Wenn du bereits Schritte unternommen hast, um die Leistung deiner Website zu verbessern, dann musst du verschiedene Ansätze in Betracht ziehen, um die LCP-Werte zu optimieren.
Nach unserer Erfahrung sind dies die effektivsten Optimierungen, die du vornehmen kannst, um die LCP-Bewertungen deiner Website zu verbessern:
- Änder die Größe und komprimieren Sie Bilder. In den meisten Fällen sind die Bilder ausschlaggebend für deine LCP-Bewertungen. Als Faustregel gilt, dass du jedes Bild, das du auf deine Website hochlädst, in der Größe anpassen und optimieren solltest. Mit WordPress 5.8 werden WebP-Bilder jetzt automatisch an die Benutzer ausgegeben, was die LCP-Zeiten vieler Websites verbessern kann.
- Wähle einen besseren Hosting-Service. Wenn du hart an der Optimierung deiner Website gearbeitet hast und sie trotzdem zu lange zum Laden braucht, liegt das wahrscheinlich an deinem Webhosting. Möglicherweise verwendest du einen Tarif, der mit der Popularität deiner Website nicht mithalten kann, oder dein Webhoster bietet nicht die Leistung, die du brauchst. Unabhängig von der Arbeit, die du in deine Website steckst, kann ein solides Hosting-Angebot über Erfolg oder Misserfolg entscheiden.
- Verwende ein Content Delivery Network (CDN). CDNs können Kopien deiner Website auf Server-Clustern in der ganzen Welt zwischenspeichern und sie den Besuchern zur Verfügung stellen. Einige CDNs bieten auch bildspezifische Dienste an, die dazu beitragen können, die LCP-Werte immens zu senken.
- Beseitige Rendering-blockierende Ressourcen. Eine Ressource ist „render-blocking“, wenn sie das Laden von Elementen auf deiner Website verhindert, bis sie ausgeführt wurde. Im Allgemeinen handelt es sich dabei um kritische Strukturen für deine Website, wie HTML, CSS und JavaScript. Als Faustregel gilt, dass du Elemente, die dies tun, eliminieren oder aufschieben solltest oder sie dazu zwingen solltest, erst dann ausgeführt zu werden, wenn alles andere geladen ist. Eine Reihe von Plugins wie WP Rocket (oder das Divi-Theme selbst) können dies für Sie mit einem Umschalter erledigen.
Im Großen und Ganzen sind alle diese Optimierungsmethoden Standardempfehlungen, wenn du daran arbeitest, die Leistung deiner Website in irgendeiner Weise zu verbessern. Wenn du dir die Zeit nimmst, deine Website zu optimieren, sollten deine LCP-Werte entsprechend sinken, und deine Nutzer werden umso glücklicher darüber sein.
Wenn Du ein Divi-Benutzer bist, werden viele dieser Dinge automatisch für Dich erledigt. Die Funktion „Critical CSS“ des Divi-Themas entfernt beispielsweise automatisch Rendering-blockierende Ressourcen und verschiebt deren Laden. Das ist einer der vielen Gründe, warum Divi so schnell ist und von Anfang an hervorragende LCP-Werte erzielt!
Häufig gestellte Fragen zu Largest Contentful Paint (LCP)
Das Verständnis eines Konzepts wie LCP ist weniger intuitiv als das Verständnis einer einzelnen Gesamtladezeit für Deine Seite. Aus diesem Grund findest du hier einige der am häufigsten gestellten Fragen, die wir in Bezug auf LCP-Bewertungen sehen.
Wie passt LCP in die Gesamtleistung meiner Website?
Wenn du die Leistung deiner Website misst, gibt dir eine einzelne allgemeine Ladezeit keine genaue Vorstellung davon, wie gut deine Seiten optimiert sind. Wenn du dich auf spezifische Metriken wie LCP konzentrierst, bekommst du einen viel besseren Einblick, wie deine Server reagieren. Außerdem erfährst du so, wie lange es dauert, bis die Nutzer deine Website vollständig sehen. Die gezielte Ausrichtung auf LCP oder andere Kennzahlen verbessert nur die Gesamtleistung deiner Website, da sie Teil eines größeren Ganzen sind.
Ist LCP das Gleiche wie die Seitenladezeit?
Es ist üblich, dass Website-Besitzer ihre Seiten testen, um zu sehen, wie lange die einzelnen Seiten zum Laden brauchen. Einige Tools zur Leistungsmessung geben nur eine einzige Zahl an und sonst nichts. Einzelne Metriken wie LCP helfen dir jedoch, ein besseres Verständnis dafür zu bekommen, was tatsächlich passiert, wenn ein Benutzer deine Website besucht.
LCP wird höchstwahrscheinlich auftreten, bevor die gesamte Seite geladen ist. Und einige Elemente können sich erst danach füllen (größere Dateien oder Bilder). Im Idealfall ist die LCP-Zeit kürzer als die Gesamtladezeit der Seite.
Was sind andere Core Web Vitals neben LCP?
Die Core Web Vitals sind Metriken, die Google berücksichtigt, wenn es darum geht, festzustellen, ob eine Website eine gute User Experience (UX) bietet. LCP ist nur einer dieser Werte. Zu den anderen zählen First Input Delay (FID) und Cumulative Layout Shift (CLS). Du kannst auch nach First Contentful Paint (FCP) suchen, das mehr mit der Wahrnehmung des Benutzers zu tun hat, wie schnell deine Seite lädt.
Schlussfolgerung
Bei der Bewertung der Leistung deiner Website ist es am besten, sich nicht auf eine einzige Zahl zu konzentrieren, z. B. wie lange das Laden deiner Homepage dauert. Das ist zwar wichtig, aber die einzelnen Metriken wie LCP können dir helfen, bestimmte Elemente und Bereiche zu identifizieren, die möglicherweise verbessert werden müssen.
Das Largest Contentful Paint (LCP) jeder Seite gibt dir eine Vorstellung davon, wie lange die Besucher warten müssen, bis die Seite so weit geladen ist, dass sie einen Sinn darin sehen. Bei FCP ist es die Zeit, die benötigt wird, um die Seite zu sehen. Selbst dann müssen sie möglicherweise länger warten, bis die Seite interaktiv wird, was nach der LCP kommen kann. Diese Metrik ist nur ein Teil des Puzzles. Durch die Optimierung dieses Wertes kannst du jedoch eine viel bessere UX auf deiner Website anbieten.
Übersetzt von Verena Jütte
von Website Freiburg
Quelle, unser Divi Websoftware Partner Elegant Themes:
