Largest Contentful Paint (LCP) erklärt

Das Laden Ihrer Website dauert zu lange und Sie verlieren Traffic? Wahrscheinlich müssen Sie einige LCP-Probleme beheben.

Largest Contentful Paint (LCP) ist eine Metrik, die die Zeit angibt, in der der Hauptinhalt einer Webseite geladen wird.

Lassen Sie mich Ihnen alles über LCP erzählen, wie es gemessen wird, warum es für SEO wichtig ist und wie Sie es optimieren können.

Was ist die der wichtigste Web-Vitals Wert?

Largest Contentful Paint ist einer der drei zentralen Web-Vitals. Wenn Sie sich fragen, warum ich mich entschieden habe, über LCP aus den drei wichtigsten Web-Vitals zu sprechen, hier ist der Grund.

Wie Philip Walton, ein Google-Manager, basierend auf den öffentlichen Daten des Chrome User Experience Report sagt, ist LCP die Metrik, mit der Websites am meisten zu kämpfen haben.

LCP ist das Maß dafür, wie lange es dauert, bis eine Seite ihren primären Inhalt geladen hat, damit der Benutzer mit der Interaktion beginnen kann.

Dieser Parameter berücksichtigt den größten Inhalts- oder Bildblock, der sich „above the fold“ oder aus Sicht des Benutzers befindet. Die Elemente, die nach dem Scrollen erscheinen, zählen nicht. 

Außerdem berücksichtigt LCP nur die Ladezeit bestimmter Elemente, einschließlich

• Bilder
• Video-Thumbnails
• Bild-Tags
• Text, wie Überschriften, Absätze und Listen
• Hintergrundbilder mit CSS

Warum ist LCP für SEO wichtig?

Es ist unwahrscheinlich, dass Benutzer warten, bis Ihre Seite fertig geladen ist. Wenn das Laden zu lange dauert, verlassen sie Ihre Seite wahrscheinlich abrupt. Google sieht dies als Zeichen für eine schlechte Benutzererfahrung.

Außerdem bedeutet dieses Nutzerverhalten eine höhere Absprungrate für Ihre Website. Eine erhöhte Absprungrate ist wiederum ein negatives SEO-Signal.

Außerdem kann eine langsamere Seitenladegeschwindigkeit, die LCP beeinflusst, Ihre Konversionsrate und den Verkehrsfluss insgesamt beeinträchtigen. Das kann möglicherweise den ROI Ihres Unternehmens beeinträchtigen, und das ist offensichtlich das Letzte, was Sie für Ihr Unternehmen wollen.

Lassen Sie mich Ihnen ein praktisches Beispiel geben.

Im Jahr 2021 veröffentlichte Google eine Analyse der Konversionsraten der Renault-Gruppe, nachdem eine Leistungskennzahl, Largest Contentful Paint (LCP), angepasst wurde. Ihre Ergebnisse waren umwerfend: eine Verlängerung der Wartezeiten um etwa drei Sekunden verringerte die Konversionsrate um 50 %.

Alles in allem müssen Sie LCP optimieren, wenn Sie möchten, dass Ihre Website eine bessere Online-Sichtbarkeit und einen höheren Rang in der Suche erhält, um Ihre Gewinnmargen zu steigern. Ja, Largest Content Paint ist so wichtig.

Wie misst man LCP?

Bevor Sie wissen, wie Sie LCP optimieren können, müssen Sie den aktuellen LCP-Score Ihrer Website herausfinden. So können Sie abschätzen, welchen Aufwand Sie betreiben müssen, um Ihr LCP zu optimieren. 

Die Messung von LCP ist sowohl mit Feldwerkzeugen als auch mit Laborwerkzeugen möglich. Also, was ist der Unterschied?

Feldtools liefern Ihnen die tatsächlichen Messungen des Zielstandorts. Lab-Tools erstellen eine virtuelle Punktzahl, die auf einem simulierten Crawling basiert und Algorithmen nutzt, die die Internetbedingungen schätzen, denen ein mobiler Benutzer wahrscheinlich ausgesetzt ist.

Lassen Sie mich zunächst die Feldwerkzeuge auflisten, die Sie zur Berechnung des LCP verwenden können.

Sie können den LCP Ihrer Webseite mit dem Tool PageSpeed ​​Insights messen.

Das Tool zeigt den LCP-Score Ihrer Website für Desktop- und Mobilgeräte an. Neben LCP informiert Sie das Tool auch über Ihre Ergebnisse für die anderen Web-Vitals, wie First Input Delay (FID) und Cumulative Layout Shift (CLS).

Alternativ können Sie über die Google Search Console auf den Core Web Vitals-Bericht zugreifen, um den LCP Ihrer Website herauszufinden.

Darüber hinaus können Sie auch den Chrome-Benutzererfahrungsbericht nutzen, um LCP zu messen. Ich empfehle jedoch, die ersten beiden Methoden zu verwenden, da sie einfacher sind.

Kommen wir nun zu den Lab-Tools, um LCP zu messen.

• Chrome-Entwicklungstools
• Lighthouse
• WebseitenTest

Von diesen drei Labortools werden Chrome Dev Tools und Lighthouse von Google angeboten und WebPageTest ist ein Drittanbieter-Tool.

Was ist ein guter LCP-Score?

Okay. Jetzt wissen Sie, wie Sie den LCP-Score Ihrer Website messen können. Aber woher wissen Sie, ob Sie einen guten LCP-Score haben oder wie weit Sie von einem guten LCP-Score entfernt sind?

Lassen Sie mich Ihnen sagen, wie ein LCP-Score aussieht.

Gemäß den Richtlinien von Google muss der Hauptinhalt Ihrer Seite innerhalb von 2,5 Sekunden geladen werden, um ein gutes LCP zu erhalten, gefolgt von einem Benutzer, der sie besucht.

Das heißt, wenn Ihre Seite bei mindestens 75 % der Besuche in weniger als 2,5 Sekunden geladen wird, betrachtet Google dies als gute Erfahrung beim Laden der Seite.

Wenn Ihre Seite hingegen in etwa 4 Sekunden geladen wird, ist dies ein Zeichen dafür, dass Ihr LCP verbessert werden muss. Wenn es außerdem 4 Sekunden überschreitet, zeigt es ein schlechtes LCP an. 

Hier ist ein Beispiel von Google selbst.

Hier ist die 75-Perzentil-Marke gelb, was bedeutet, dass die Seite in Bezug auf LCP verbessert werden muss. 

Damit Ihr LCP die 75-Perzentil-Marke erreicht, müssen Sie sich auf die Optimierung Ihrer Website konzentrieren, um eine gute Benutzererfahrung zu bieten.

Je niedriger die LCP-Zeit, desto höher die Punktzahl und desto besser für die SEO Ihrer Website.

Wie kann LCP optimiert werden?

Kommen wir nun zum wichtigsten Teil davon. Wenn Ihr LCP gut ist, machen Sie weiter so. Wenn andererseits Ihr LCP verbessert werden muss (was in den meisten Fällen zutrifft), können Sie es wie folgt optimieren.

Optimieren Sie Ihre Bilder

Wie ich bereits erwähnt habe, wirken sich Bilder auf Ihr LCP aus. Sie müssen sicherstellen, dass Ihre Bilder richtig optimiert sind, um eine gute LCP-Punktzahl zu erzielen.

Hier sind einige Möglichkeiten, wie Sie Ihre Bilder optimieren können.

• Verwenden Sie spezifische Bildabmessungen für Ihre Desktop- und Mobilversionen
• Bilder komprimieren (stellen Sie sicher, dass die Bildqualität nicht beeinträchtigt wird)
• Verwenden Sie unterstützte Bildformate
• Vermeiden Sie GIFs und verwenden Sie stattdessen Videos

Wählen Sie Ihr Website-Design mit Bedacht aus

Die Personalisierung Ihrer Website ist eine gute Möglichkeit, sie von der Masse abzuheben. Das Einbinden von Javascript und CSS zum Erstellen des Designs und Inhalts Ihrer Website kann jedoch die Ladegeschwindigkeit der Seite beeinträchtigen.

Entscheiden Sie sich für ein leichteres Website-Design, bei dem Sie nicht mehrere Plugins einfügen müssen, insbesondere „above the fold“. Stellen Sie sicher, dass Sie JavaScript und CSS, die das Rendering blockieren, eliminieren.

Schließlich bedarf es nicht immer eines blumigen Seitendesigns voller Grafiken, um ein tolles Gefühl und Aussehen zu erzeugen. Sie können dies mit einer weniger schwerfälligen Website tun, insbesondere wenn Sie priorisieren können, was Sie auf Ihrer Website benötigen und was nicht. 

Optimieren Sie Ihre Schriftarten

Bestimmte Schriftarten werden mit größeren Dateien geliefert. Was bedeutet das für Ihre Website?

Wenn Sie solche Schriftarten auf Ihrer Website verwenden, werden die Textelemente auf Ihrer Seite wahrscheinlich langsam geladen, sodass der Benutzer warten muss, bis der Hauptinhalt angezeigt wird. Und genau das führt zu einem schlechten LCP.

Stellen Sie also sicher, dass Sie Ihren Schriftstil und Ihre Schriftgröße entsprechend optimieren, um ein schnelles Laden zu ermöglichen und eine schlechte Benutzererfahrung zu vermeiden.

Lazy Loading-Probleme beheben

Lazy Loading ist eine Technik, bei der eine Seite das Laden unkritischer CSS- und anderer Ressourcen während des anfänglichen Renderns vermeidet und sich darauf konzentriert, den Inhalt „above the fold“ zu laden.

Auf diese Weise wird der Inhalt in der Ansicht des Benutzers schnell angezeigt, während die anderen Ressourcen träge geladen werden. Die Lazy-Loading-Technik kann LCP ergänzen. Bestimmte Probleme mit verzögertem Laden können sich jedoch auf den LCP-Score Ihrer Website auswirken.

Wenn Ihre Website beispielsweise auf natives Lazy Loading angewiesen ist und alle Bilder (einschließlich des vorgestellten Bilds) langsam geladen werden, wird sie auf einen schlechten LCP-Score stoßen.

Dies kann auch beim Lazy Loading mit Javascript passieren. Da der Browser das Javascript ausführen muss, bevor das Bild gerendert wird, dauert es einige Zeit, bis das Bild vollständig geladen ist.

Wie verhindern Sie also, dass sich Lazy Loading auf LCP auswirkt? 

Deaktivieren Sie Lazy Loading für alle Arten von Hauptinhalten, die „above the fold“ angezeigt werden. Dadurch signalisieren Sie dem Browser, diesen Teil des Inhalts sofort zu laden, damit der Benutzer ihn sehen kann.

Wählen Sie einen guten Hosting-Service

Die Seitenladegeschwindigkeit Ihrer Website hängt auch von der Antwortzeit Ihres Servers ab. Langsame Serverantwortzeiten sind oft das Ergebnis einer schlechten Backend-Infrastruktur, nicht optimierter API-Antworten und mehr.

Wer solchen Problemen ausweichen möchte, sollte auf einen zuverlässigen Hosting-Dienst zurückgreifen. Wenn Sie also einen zufälligen Hosting-Service für Ihre Website verwenden, stellen Sie sicher, dass Sie zu einer vertrauenswürdigen Webhosting-Plattform wechseln, um die Ladegeschwindigkeit Ihrer Seite zu erhöhen.

Abschließende Gedanken

Von den drei zentralen Web-Vitals ist Largest Contentful Paint derjenige, mit dem die meisten Websites zu kämpfen haben.

Um Ihr LCP zu verbessern, investieren Sie einen größeren Teil Ihrer Seitenladezeit in das Abrufen von LCP-Elementen und ein Minimum an Zeit für andere Ressourcen. 

Denken Sie daran, dass alles, was verhindert, dass die LCP-Elemente auf Ihrer Seite so schnell wie möglich geladen werden, Zeit verschlingt und zu einer langsameren Seitenladezeit beiträgt und gegen gutes LCP ist.

Beseitigen Sie sie und optimieren Sie Ihre Website, um einen hervorragenden LCP-Score zu erzielen und Ihre SEO zu stärken.