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:
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.
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.
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.
Prüfe alle Prozesse, die auf deiner Website ausgeführt werden und deaktiviert oder für eine bessere Leistung optimiert werden könnten. Auf einer WordPress-Website kannst du beispielsweise die Anzahl der Datenbank-Prozesse reduzieren, indem du veraltete oder nicht genutzt Plugins entfernst.
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
Andere Möglichkeiten, CSS und JavaScript zu optimieren, umfassen das "Minimieren" (Entfernen unnötiger Zeichen) von Stylesheets und Skripten, das Entfernen von ungenutzten Code-Elementen und das Verschieben von Code, der für das anfängliche Laden einer Webseite nicht nötig ist, in eine vorab geladene Ressource. Ziehe für den wichtigsten Code in Betracht, ihn online hinzuzufügen.
Google empfiehlt CSSnano und csso, um CSS zu minimieren, und UglifyJS, um JavaScript zu minimieren. Auch bei HTML-Dateien kannst du auf diese Weise sparen, und zwar mit dem HTML Minifier.
Google Chrome DevTools verfügt über die Funktion "Coverage" zur Analyse der Verwendung von CSS und JavaScript auf deiner Seite. Sie kann Code identifizieren, der in eine vorab geladene Ressource ausgelagert werden kann.
5. Preconnections nutzen
Auch Preconconnections können die Ladezeiten verkürzen. Diese sind nötig, wenn die Nutzer Inhalte von einer anderen Domain als deiner laden müssen. Anstatt überall auf der Seite neue Elemente von anderen Domains laden zu lassen, verwende wie folgt ein Preconnect im Head-Abschnitt des HTML-Codes deiner Seite:
<link rel="preconnect" href="http://domain.com">
<link rel="dns-prefetch" href="http://domain.com"> Wenn du diese Verbindungen im Voraus herstellst, muss deine Seite nicht den Ladevorgang unterbrechen, um deinen Besuchern Bilder oder andere Ressourcen bereitzustellen.
6. CSS und JS nachladen
Mit dem folgenden Code kannst du auch externe Ressourcen wie CSS und JavaScript vorab laden:
<link rel="preload" as="style" > href="style.css">Dadurch stellst du sicher, dass sie sofort geladen werden und dies dem raschen Seitenaufbau nicht im Weg steht.
7. Nutze die CDN
Ein Tipp von Google ist die Verwendung eines Content Delivery Network (CDN). CDN-Dienste sind manchmal in Hosting-Paketen für Unternehmen enthalten.
Wenn das nicht der Fall ist, kannst du Dienste wie Google Cloud oder Cloudflare nutzen, um deine Ladezeiten zu verbessern, indem du deine Inhalte auf Servern rund um den Globus verteilst. CDN-Dienste sorgen dafür, dass deine Website unabhängig von der Entfernung zwischen dem Nutzer und deinem Webserver schnell geladen wird.
8. Nutze den Cache oder die Caching-Services
Richte als Nächstes einen Cache für deinen Content ein, also einen Zwischenspeicher, sodass HTML-Seiten zuerst aus diesem heraus bereitgestellt werden. Wenn dein statischer HTML-Content zwischengespeichert wird, muss er nicht jedes Mal geladen werden, wenn ein Benutzer deine Webseite besucht.
WordPress-Nutzer können Caching-Plugins wie W3 Total Cache oder WP Fastest Cache verwenden, um ihre Inhalte für schnelleres Laden automatisch zwischenzuspeichern.
Wenn du einen anderen Service nutzt, verfügt dieser vielleicht über optionale Einstellungen, die du konfigurieren kannst, um deine Inhalte in einem Cache zwischenzuspeichern. Beachte, dass Caching-Dienste keine Serveranfragen von Drittanbietern wie Facebook verarbeiten können.
Signed Exchanges (SXGs) ermöglichen es Websites, Inhalte zu zertifizieren, die von ihrer Domain über einen Drittanbieter bereitgestellt werden. Gemeinsam mit Cloudflare hat Google AMP Real URL geschaffen, eine Funktion, mit der Publisher in den Google-Suchergebnissen die Original-URL ihres Contents anzeigen lassen können. Websites, die Traffic aus der Suche erhalten, erzielen durch SXGs einen Anstieg des LCP.
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.
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:
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.
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.
Weitere technische Details zu LCP findest du im W3C Community Group Draft Report.
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.
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:
Du findest deine LCP-Ergebnisse im Bericht in der Tabelle :
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.