Was ist Largest Contentful Paint und wie optimiert man diesen Core Web Vitals Faktor

Evgeni Sereda

Sep 14, 20217 min read
Largest Contentful Paint

In einem früheren Artikel haben wir erklärt, wie du deine Seite für Googles Core Web Vitals optimieren kannst. Aber wer über Core Web Vitals spricht, muss auch einen dazugehörigen Schlüsselfaktor vertiefender betrachten: Largest Contentful Paint oder kurz LCP.

In diesem Leitfaden sehen wir uns an, was der Largest Contentful Paint ist, warum er wichtig ist, welche Vorteile die Metrik hat und welche Verbesserungen du vornehmen kannst, um deine Website dafür zu optimieren.

Was ist der Largest Contentful Paint?

LCP steht für Largest Contentful Paint. Es ist ein Maß für die Geschwindigkeit einer Website, das dir sagt, wie lange es dauert, bis der Hauptinhalt geladen und für den Benutzer lesbar ist. 

LCP ist Teil des Core Web Vitals und von dem Page Experience Update. Core Web Vitals gehören zum sogenannten Google Core.

Was bedeutet Largest Contentful Paint?

LCP ist ein wichtiger Aspekt der Benutzerfreundlichkeit. Nutzer warten nicht lange, bis eine Website geladen ist, wenn sie woanders schneller die gewünschten Informationen oder Angebote finden. Vereinfacht gesagt, du sollst deine Pagespeed optimieren, damit der Nutzer schnell die Inhalte zu sehen bekommt.

Ein schlechter Largest Contentful Paint kann zu höheren Absprungraten und Verlusten bei deinen Rankings führen. Auch eine niedrigere Conversion-Rate kann die Folge sein – nicht gut für aufstrebende Unternehmen. 

Dank des Core-Web-Vitals-Updates von Google wird Largest Contentful Paint zu einem wichtigeren Faktor für deine Rankings in den Suchergebnissen. Um deine organischen Rankings und den entsprechenden Traffic zu behalten, ist es sehr wichtig, deinen LCP im Griff zu haben.

Der LCP gilt nur für den Hauptinhalt, der direkt nach dem Laden im sichtbaren Bereich ist. Dazu gehören alle Bilder, Videos oder Textblöcke, die angezeigt werden, ohne dass der Benutzer nach unten scrollen muss. Behalte dies im Hinterkopf, wenn du Probleme auf deinen Seiten identifizierst. 

Einen guten oder schlechten Largest Contentful Paint erkennen

Nach den Richtlinien von Google sollte der Hauptinhalt deiner Seite beim Besuch eines Nutzers innerhalb von 2,5 Sekunden geladen werden, um einen guten LCP zu erzielen. Folgende Grafik bildet die Maßstäbe genauer ab:

img-semblog

Wenn deine Besucher fünf Sekunden oder länger auf das Laden des Hauptinhalts warten müssen (d.h. wenn dein LCP schlecht ist und verbessert werden muss), geben sie sehr wahrscheinlich auf und suchen woanders. 

Die Google-Richtlinien sehen außerdem vor, dass dein LCP in mindestens 75 % der Fälle als "gut" eingestuft werden muss. Wenn du das schaffst, bringt das deine Leistung nach vorne.

Weiter unten sehen wir uns deinen individuellen LCP an. Doch machen wir uns zuerst klar, was im Allgemeinen die Ursachen für einen schlechten Largest Contentful Paint sind und wie du für Abhilfe sorgen kannst. Übrugens kann der Semrush Site Audit bis zu 10 deine und von dir ausgewählte Sites analysieren und diese Werte anzeigen.

Sitemap-Fehler finden & beheben

mit Semrush Site Audit

ADS illustration

Schlechter oder schwacher Largest Contentful Paint?

Die Liste der möglichen Ursachen für einen schwachen LCP ist praktisch endlos. 

Dahinter kann alles stecken, was viel Platz braucht: integrierte Mediaplayer, die eine Seite verlangsamen, Galerien mit nicht optimierten Bildern, Social-Media-Buttons oder sogar Widgets für Login, Newsletter-Anmeldung und anderes.

Aber lass uns das ein wenig präzisieren.

img-semblog

Wie obige Grafik zeigt, gehören die Faktoren, die einen schlechten LCP verursachen, oft zu einer von vier Hauptgruppen:

1. Langsame Antwort des Servers

Eine langsame Serverantwort wirkt sich negativ auf alle Metriken deiner Ladegeschwindigkeit aus und ist daher eine klare Ursache für einen schlechten LCP. 

Langsame Serverantworten verweisen oft auf Probleme mit deiner Backend-Infrastruktur, nicht optimierten Datenbankabfragen oder API-Antworten, deren Verarbeitung lange dauert – alles im Hintergrund deiner Website. 

Um deine Performance hier zu verbessern, stelle als Erstes sicher, dass du deine Website auf einem guten Server hostest. 

2. Den Seitenaufbau blockierendes JavaScript und CSS

Obwohl eine individuelle Gestaltung deiner Website dir hilft, dich von der Masse abzuheben, wirkt sich die Nutzung von JavaScript und CSS zur Verschönerung deines Website-Designs und -Inhalts leider auch auf die Ladezeit aus.

Manchmal ist es besser, zugunsten deines LCP bei einem weniger aufwändigen Design zu bleiben und die Anzahl der Plugins zu reduzieren, insbesondere im sofort sichtbaren Bereich.

3. Rendering auf Client-Seite

Clientseitiges Rendering (Seitenaufbau direkt im Browser mit JavaScript) ist eine beliebte Methode von Webentwicklern.

Es ist jedoch viel Arbeit für den Browser, das JavaScript zu laden und auszuführen, bevor der Hauptinhalt dargestellt wird, und das bedeutet Wartezeit für den Nutzer. 

Wenn du mit clientseitigem Rendering arbeitest, solltest du dies bei der Optimierung deines LCP im Auge haben.

4. Langsam ladende Ressourcen

Große Ressourcen oder visuell beeindruckende Inhalte auf einer Seite brauchen viel Zeit zum Laden – daran führt kein Weg vorbei. 

Wenn auf deiner Website sofort viele nicht optimierte hochauflösende Bilder, GIFs und Textfelder gerendert werden müssen, beeinträchtigt das deinen LCP. 

Sehen wir uns nun an, wie du diese Aspekte optimieren und deinen LCP verbessern kannst.

Largest Contentful Paint verbessern und optimieren

Es gibt diverse Möglichkeiten, einen schlechten LCP zu verbessern – von denen einige leichter umzusetzen sind als andere. Wir stellen im Folgenden einige der simpleren vor.

1. Dein CSS optimieren

CSS-Dateien sind Ressourcen, die das Rendering blockieren. Ressourcen müssen geladen und verarbeitet werden, bevor der Server die gesamte Seite aufbauen kann. 

Du kannst deine CSS-Dateien optimieren, indem du ungenutzten Code manuell entfernst, die Dateien minimierst oder deine CSS-Hintergrundbilder mit Medienabfragen optimierst.

Das klingt kompliziert, aber es gibt viele Ressourcen und Tutorials zu nutzerzentrierten Geschwindigkeitsmetriken, die helfen können!

2. Deine Grafiken optimieren

Zur Optimierung deiner Grafiken kannst du mehrere Maßnahmen ergreifen. Die wichtigsten sind:

  • Deine Grafiken komprimieren
  • Deine Grafiken in effizientere Formate konvertieren
  • Videos anstelle von GIFs verwenden (die weniger Zeit zum Laden brauchen)
  • Sicherstellen, dass deine Bilder die richtigen Abmessungen haben

Dabei lohnt es sich immer zu überlegen: Brauche ich dieses Bild überhaupt? Bringt es meiner Seite einen Mehrwert? Wenn nicht, hast du vielleicht mehr davon, dich davon zu trennen. 

3. Deine WebFonts optimieren

Schriftarten sind oft in großen Dateien definiert. Infolgedessen werden Textinhalte in ungewöhnlichen Schriftarten erst nach dem Laden der Schriftartdatei auf einer Webseite angezeigt.

Es dauert also länger, bis Besucher essentielle Informationen auf der Seite sehen! Das ist nicht akzeptabel.

Um es zu vermeiden, solltest du deine WebFonts optimieren. Wenn du die WebFont-Größe verringerst, font-display verwendest oder dein Styling so anpasst, dass es deine benutzerdefinierte Schriftart verwendet, sollte sich die Ladezeit verkürzen.

4. Dein JavaScript optimieren

Du schreibst dein JavaScript, packst alle benötigten Informationen hinein und es kann losgehen, oder? 

Nicht ganz. Wenn dein JavaScript schon eine Weile daliegt, lohnt es sich vielleicht, einen prüfenden Blick darauf zu werfen, da es die Seitenladezeit in die Länge ziehen kann. 

Einige Schritte, die du umsetzen kannst, um dein JavaScript zu optimieren, sind (unter Berücksichtigung der neuesten LCP-Metriken):

  • ungenutzten Code entfernen
  • überprüfen, ob dein Code aktuell und mit modernen Browsern kompatibel ist
  • modernes JavaScript installieren und durch Code-Splitting die Datenlasten reduzieren 

Largest Contentful Paint ermitteln und messen

Ein guter Startpunkt für die Prüfung deiner LCP-Leistung sind die Tools, die Google zur Verfügung stellt: die Google Search Console, Google Page Insights und Lighthouse.

In der linken Navigationsleiste der Google Search Console findest du einen Abschnitt für Core Web Vitals. Wenn du diese Registerkarte aufrufst, erhältst du eine Übersicht über deine URLs. Von dort aus ist es recht einfach zu erkennen, wo Probleme liegen und welche Anpassungen du vornehmen könntest, um sie zu lösen. 

largest contentful paint
GSC LCP

Wenn du keine Google Search Console für deine Website eingerichtet hast, kein Problem. Du kannst auch über Lighthouse und PageSpeed Insights auf diese Informationen zugreifen. Wenn du neu bei PageSpeed Insights bist, findest du in unserem Blog eine vollständige Anleitung zur Nutzung dieses Google-Tools.

Hier ist die Übersicht von PageSpeed Insights für die Amazon-Website für Desktop. Sie zeigt uns alle Core Web Vitals auf einen Blick:

largest contentful paint
PageSpeed LCP

Wie du siehst, schneidet die Seite beim Largest Contentful Paint ganz gut ab, aber es gibt immer noch Luft nach oben. Sieh dir die Einträge im Abschnitt "Empfehlungen" an und nutze alle Chancen auf bessere Rankings, die sich daraus ergeben.

largest contentful paint
PageSpeed LCP

Es ist von Vorteil, diese Empfehlungen zügig abzuarbeiten, um den Maßstäben des Core-Web-Vitals-Updates von Google zu genügen. Wiederhole den Test regelmäßig, um deinen LCP, andere Website-Metriken und deine allgemeine SEO-Situation kontinuierlich zu verbessern.

Largest Contentful Paint verbessern an einem Beispiel

Du hast also deinen Largest Contentful Paint geprüft und Probleme festgestellt. Jetzt gilt es diese zu beheben und dann den Vorgang in einer oder zwei Wochen zu wiederholen. 

Die ständige Wartung deiner SEO, um deinen Largest Contentful Paint auf höchstem Niveau zu halten, kann schnell ermüdend werden. Die gute Nachricht ist, dass wir genau wissen, wie du diesen Prozess effizienter gestalten kannst: mit dem Site Audit.

Das Tool testet die Geschwindigkeit deiner Website und generiert eine Liste aller möglichen Verbesserungen und Probleme – genau wie PageSpeed Insights, aber besser. Das Site Audit scannt auch nach technischen SEO-Fehlern und stellt dir leicht verständliche Diagramme und Tabellen zur Verfügung, die alle Probleme und Fehlerbehebungen erklären.

Sitemap-Fehler finden & beheben

mit Semrush Site Audit

ADS illustration

Das Site Audit hilft dir, Lücken in deinen Core Web Vitals zu schließen, indem es deine URL prüft und ihren Inhalt analysiert, während es dich ständig über die Leistung deines LCP auf dem Laufenden hält.

Nachdem du dein Site Audit eingerichtet hast, musst du nur noch unter "Core Web Vitals" auf "Details anzeigen" klicken:

img-semblog
Semrush Site Audit Core Web Vitals

Du findest deine LCP-Ergebnisse im Bericht in der Tabelle :

img-semblog
Site Audit LCP

Wenn du regelmäßig die Empfehlungen des Site Audit abarbeitest, sind dein LCP und deine Core Web Vitals auf dem besten Weg.

Nutze diese Daten, um die Entwicklung deines Largest Contentful Paint kontinuierlich zu verfolgen, und du hast hervorragende Chancen, binnen Kurzem deine Ladezeiten zu verbessern.

Author Photo
Evgeni SeredaSeit 5 Jahren verantworte ich das Marketing von Semrush in den deutschsprachigen Ländern. Seit 2010 bin ich ein leidenschaftlicher SEO. Die Kombination aus SEO und Marketing setzte ich bei großen Projekten wie die Implementierung der SEO-Maßnahmen und Marketing-Prozessen bei einem großen Retailer. Dabei betreue ich auch kleine Projekte, denn auch mal Hand anzulegen, das macht mir viel Spass. Meine Erfahrung und mein Wissen teile ich gerne mit dir.
Subscribe to learn more about Technische SEO
By clicking “Subscribe” you agree to Semrush Privacy Policy and consent to Semrush using your contact data for newsletter purposes