Du weißt nicht, wie du Largest Contentful Paint auf deiner Website verbessern kannst? Oder bist du dir nicht sicher, was Largest Contentful Paint bedeutet und warum du dich überhaupt darum kümmern solltest?
Egal, wo du anfängst, dieser Beitrag ist für dich, denn hier erfährst du alles, was du über Largest Contentful Paint wissen musst.
Dazu gehört, was Largest Contentful Paint bedeutet, warum es wichtig ist, wie du es messen kannst und wie du es verbessern kannst.
Mithilfe des Inhaltsverzeichnisses unten kannst du je nach deinem aktuellen Wissensstand zu einem bestimmten Abschnitt springen. Oder lies weiter, um von Beginn an zu starten.
Was ist Largest Contentful Paint (LCP)? Erläuterung der Bedeutung von Largest Contentful Paint
Largest Contentful Paint ist eine Leistungskennzahl, die misst, wie lange es dauert, bis der Hauptinhalt einer Webseite geladen ist.
Largest Contentful Paint ist zusammen mit Cumulative Layout Shift (CLS) und First Input Delay (FID) Teil der Core Web Vitals von Google.
Technisch gesehen misst Largest Contentful Paint, wie lange es dauert, bis der größte Textblock, das größte Bild oder das größte Video innerhalb des Viewports gerendert ist.
Was bedeutet „Hauptinhalt“ im Zusammenhang mit LCP?
Nun, der Hauptinhalt hängt von der jeweiligen Seite ab, aber es kann sich um einen der folgenden Inhalte handeln:
- Text – genauer gesagt, alle Elemente auf Blockebene, die Textknoten oder andere Textelemente auf Inline-Ebene enthalten.
- Bild – Elemente innerhalb eines <img>-Elements oder <image>-Elemente innerhalb eines <svg>-Elements.
- Video – alle <video>-Elemente (es verwendet das Posterbild).
- Ein Element mit einem Hintergrundbild – nur, wenn es über die CSS url()-Funktion geladen wird (dies gilt nicht für CSS-Verläufe).
Später in diesem Beitrag erfährst du, wie du das genaue Largest Contentful Paint-Element für jede beliebige Seite auf deiner Website findest.
Largest Contentful Paint vs. First Contentful Paint
Eine häufige Frage, die du dir vielleicht stellst, ist der Unterschied zwischen Largest Contentful Paint und First Contentful Paint, einer weiteren gängigen Leistungskennzahl.
Die beiden Begriffe sind zwar ähnlich, aber der Hauptunterschied besteht darin, dass Largest Contentful Paint misst, wie lange es dauert, bis der „Hauptinhalt“ der Seite geladen ist, während First Contentful Paint misst, wie lange das „erste Objekt“ zum Laden braucht (unabhängig davon, ob es der Hauptinhalt ist oder nicht).
Im Grunde genommen:
- LCP = nur Hauptinhalt
- FCP = erster Inhalt, unabhängig davon, um welchen Inhalt es sich handelt
Daher wird deine LCP-Zeit fast immer etwas höher sein als deine FCP-Zeit, weil das Element „Hauptinhalt“ normalerweise nicht als erstes geladen wird.
Warum ist die Zeit für den größten Inhalt auf deiner Website wichtig?
Es gibt zwei Hauptgründe, warum die Largest Contentful Paint-Zeiten deiner Website wichtig sind:
- Benutzerfreundlichkeit
- Optimierung für Suchmaschinen
Benutzererfahrung
Der wichtigste Grund, warum du dich um die Largest Contentful Paint-Zeiten deiner Website kümmern solltest, ist, dass diese Kennzahl ein guter Indikator dafür ist, wie deine Nutzer die Leistung deiner Website erleben.
Den meisten Nutzern ist es egal, wie lange deine Website braucht, um jedes einzelne Skript und Element vollständig zu laden. Stattdessen interessiert sie, wie lange es dauert, bis sie einen Nutzen aus deiner Website ziehen können.
Largest Contentful Paint versucht, diesen „Wert“ zu messen, indem es ermittelt, wie lange es dauert, bis der Hauptinhalt geladen ist.
Wenn du deine Website so optimierst, dass sie eine schnelle Largest Contentful Paint-Zeit erreicht, kannst du ziemlich sicher sein, dass du den Nutzern ein solides Erlebnis auf deiner Website bietest, zumindest wenn es um die Leistung geht (du solltest auch auf ein kundenfreundliches Design und gute Benutzerfreundlichkeit achten).
Das bedeutet natürlich nicht, dass du andere Leistungskennzahlen ignorieren solltest. Wir empfehlen immer, einen ganzheitlichen Blick auf die Leistung und die Engpässe deiner Website zu werfen. Deshalb haben wir unser eigenes Application Performance Monitoring (APM) Tool entwickelt, das kostenlos zur Verfügung steht, wenn du Kinsta-Hosting nutzt – Kinsta APM.
Suchmaschinen-Optimierung (SEO)
Was die Suchmaschinenoptimierung angeht, ist Largest Contentful Paint Teil von Googles Trio der Core Web Vitals Metriken, die Google seit dem Algorithmus-Update 2022 als SEO-Rankingfaktor verwendet.
Das bedeutet, dass schlechte Largest Contentful Paint-Zeiten die Leistung deiner Website in den Suchergebnissen von Google beeinträchtigen können.
Auch wenn andere Faktoren wie die Qualität/Relevanz der Inhalte und Backlinks immer noch eine viel größere Rolle für die Platzierung deiner Website spielen, ist es wichtig, die Largest Contentful Paint-Zeiten deiner Website zu optimieren, um sicherzustellen, dass du das Beste aus deinen SEO-Bemühungen herausholst.
Was kann sich auf die Largest Contentful Paint-Werte auswirken?
Es gibt vor allem zwei Arten von Problemen, die sich auf die Largest Contentful Paint-Zeiten einer Seite auswirken können:
- Wie lange dein Server braucht, um mit dem ersten HTML-Dokument zu antworten.
- Wie lange es dauert, bis die eigentliche LCP Ressource geladen ist.
Die erste Art von Problemen betrifft die Reaktionszeit des Servers, auch bekannt als Time to First Byte (TTFB). Bevor der Browser eines Nutzers überhaupt daran denken kann, den Hauptinhalt zu laden, muss er zunächst eine Antwort vom Server erhalten.
Hier sind einige der häufigsten Probleme, die dies beeinflussen:
- Kein Seitencaching – ohne Seitencaching muss der Server mehr „Arbeit“ verrichten, bevor er mit dem HTML-Dokument antworten kann.
- Langsames Hosting – ein langsamer Hosting-Anbieter wird immer ein langsames TTFB haben, egal was du tust.
- Kein CDN verwenden – ein Content Delivery Network (CDN) kann das TTFB beschleunigen, indem es die Seiten aus seinem globalen Netzwerk bereitstellt, anstatt dass die Nutzer/innen sie vom Ursprungsserver deiner Website herunterladen müssen.
Nachdem der Server deiner Website das ursprüngliche HTML-Dokument geliefert hat, kann es zu weiteren Engpässen kommen, wenn es darum geht, das eigentliche Hauptinhaltselement zu laden.
Hier sind einige der häufigsten Probleme, die dies betreffen:
- Renderblockierendes JavaScript oder CSS (oder nicht optimierter/unnötiger Code im Allgemeinen) – wenn der Browser des Nutzers unnötiges JavaScript oder CSS herunterladen und/oder verarbeiten muss, bevor er das Hauptelement laden kann, verlangsamt das dein LCP.
- Nicht optimierte Bilder – wenn das LCP-Element ein Bild ist, verlangsamt die Verwendung nicht optimierter Bilder die Ladezeit, weil größere Bilder länger brauchen.
- Nicht optimiertes Laden von Schriftarten – wenn das LCP-Element ein Text ist, kann das Laden von benutzerdefinierten Schriftarten auf nicht optimierte Weise dazu führen, dass es länger dauert, bis der Text erscheint.
- Unkomprimierte Dateien – wenn du keine Komprimierungstechnologien wie Gzip oder Brotli verwendest, dauert es länger, bis der Browser des Nutzers die Dateien deiner Website heruntergeladen hat.
Je nach Website kann es zu Engpässen in beiden Bereichen oder nur in einem der Bereiche kommen. Wie du all diese Probleme lösen kannst, erfährst du etwas später in diesem Beitrag.
Was ist eine gute Largest Contentful Paint Time?
Google definiert eine „gute“ Largest Contentful Paint-Zeit unter 2,5 Sekunden.
Wenn die Largest Contentful Paint Time deiner Seite zwischen 2,5 und 4,0 Sekunden liegt, stuft Google sie als „verbesserungsbedürftig“ ein. Liegt die Zeit über 4,0 Sekunden, stuft Google die Seite als „Schlecht“ ein.
Hier ist eine Grafik von Google, die das anschaulich zeigt:
Wie man die größte inhaltsreiche Seite misst: Die besten LCP-Test-Tools
Es gibt eine Reihe von Tools, mit denen du die Leistung deiner Website für Largest Contentful Paint testen kannst – hier sind einige der nützlichsten..
PageSpeed Insights
PageSpeed Insights ist eines der besten Tools zur Bewertung von Largest Contentful Paint, denn es bietet vier nützliche Informationen:
- Du kannst die Largest Contentful Paint-Zeiten deiner Website mit echten Nutzern aus dem Chrome UX-Bericht sehen (wenn deine Website genug Traffic hat, um in den Bericht aufgenommen zu werden).
- Du kannst simulierte Tests durchführen, um zu sehen, wie deine Website abschneidet.
- Google teilt dir das tatsächliche LCP-Element mit, das für den Test verwendet wird, damit du weißt, welches Element du optimieren musst.
- Google macht dir Vorschläge, wie du deine LCP-Zeit verbessern kannst.
So benutzt du es:
- Gehe auf die PageSpeed Insights Website.
- Gib die URL der Seite ein, die du testen möchtest.
- Klicke auf Analysieren.
Google zeigt dir dann die Ergebnisse für Mobilgeräte und für den Desktop an – überprüfe auf jeden Fall beide.
Um das Hauptelement zu finden, das Google für die Berechnung der LCP-Zeiten verwendet, kannst du zum Abschnitt Diagnostics scrollen und den Abschnitt Largest Contentful Paint element erweitern:
Achte auch hier darauf, dass du das LCP-Element sowohl für Mobilgeräte als auch für den Desktop überprüfst, da es in beiden Fällen unterschiedlich sein kann.
Chrome Entwickler-Tools
Du kannst die Largest Contentful Paint Time auch direkt in den Chrome Developer Tools testen, indem du die Registerkarte Leistung oder die Lighthouse-Überprüfungsfunktion verwendest. Wir empfehlen, die Registerkarte Leistung zu verwenden, weil du dort mehr Informationen findest.
So fängst du an:
- Öffne die Seite, die du testen möchtest.
- Öffne die Chrome-Entwicklertools.
- Gehe auf die Registerkarte Leistung.
- Vergewissere dich, dass das Kästchen Web Vitals markiert ist.
- Klicke auf die Schaltfläche Neu laden (siehe unten).
Du solltest jetzt eine vollständige Analyse deiner Website sehen.
Wenn du mit dem Mauszeiger über LCP in der Registerkarte Netzwerk fährst, kannst du die Zeit sehen:
Wenn du den Mauszeiger über LCP in der Registerkarte Timings bewegst, siehst du das aktuelle LCP-Element:
Google Search Console
Mit der Google Search Console kannst du zwar keine einzelne Seite auf ihre Largest Contentful Paint-Zeit testen, aber sie ist sehr nützlich, um die Leistung der gesamten Website zu beurteilen.
Jede Seite auf deiner Website hat eine andere LCP-Zeit, du kannst also nicht einfach deine Homepage testen und dann Feierabend machen.
Mit der Google Search Console kannst du sehen, wo jede Seite deiner Website in die Google-Kategorien „Gut“, „Verbesserungsbedürftig“ und „Schlecht“ fällt. Die Leistungsdaten stammen aus dem Chrome UX-Bericht, basieren also auf echten Nutzerdaten.
Falls du das noch nicht getan hast, musst du deine Website zunächst in der Google Search Console überprüfen.
Wenn du das getan hast, erfährst du hier, wie du den LCP-Bericht aufrufen kannst:
- Öffne die Google Search Console für deine Website.
- Gehe zu Core Web Vitals unter dem Reiter Experience.
- Klicke auf Bericht öffnen neben der Tabelle Mobile oder Desktop.
- Suche nach Problemen im Abschnitt Warum URLs nicht als gut angesehen werden. Wenn du auf das Problem klickst, erhältst du weitere Informationen darüber, welche URLs Probleme verursachen.
*Achte darauf, dass du sowohl die Desktop- als auch die mobilen Ergebnisse überprüfst, da die Daten in beiden Fällen unterschiedlich sein können.
WebPageTest
WebPageTest ist eine weitere praktische Option, um simulierte Leistungstests durchzuführen.
Im Gegensatz zu PageSpeed Insights kannst du bei WebPageTest verschiedene Testmetriken wie den Testort, die Verbindungsgeschwindigkeit, das Gerät und mehr vollständig anpassen. Das ist der Hauptvorteil gegenüber anderen Tools – du hast mehr Möglichkeiten, den Test zu konfigurieren.
Hier erfährst du, wie du einen Test durchführst:
- Gehe zu WebPageTest.
- Füge die URL der Seite hinzu, die du testen willst.
- Erweitere die Optionen der erweiterten Konfiguration, um deinen Test vollständig zu konfigurieren.
Auf der Ergebnisseite siehst du die LCP-Daten zusammen mit vielen anderen Leistungskennzahlen (einschließlich einer Wasserfallanalyse).
Wie du das größte inhaltsreiche Bildelement findest
Wenn du Largest Contentful Paint verbessern willst, kann es sehr hilfreich sein, genau zu wissen, welches Element Google zur Berechnung deiner LCP-Zeit verwendet.
Wenn du zum Beispiel weißt, dass Google dein Heroimage als LCP-Element auf deiner Homepage verwendet, weißt du, dass du Wege finden musst, dieses Heroimage so schnell wie möglich auszuliefern, wenn du die LCP-Zeiten deiner Homepage verbessern willst.
Wie wir bereits erwähnt haben, kannst du dein Largest Contentful Paint-Element mit PageSpeed Insights oder den Chrome Developer Tools finden.
Achte darauf, sowohl die mobilen als auch die Desktop-Ergebnisse zu überprüfen, da dein LCP-Element auf den verschiedenen Geräten unterschiedlich sein kann.
Wie du Largest Contentful Paint in WordPress (oder anderen Plattformen) verbesserst
Nachdem du nun alles über Largest Contentful Paint weißt, kommen wir zu einigen praktischen Tipps, wie du Largest Contentful Paint in WordPress verbessern kannst.
Auch wenn wir uns bei diesen Tipps auf WordPress konzentrieren, sind alle Tipps universell und gelten auch für andere Arten von Websites.
Caching einrichten, um die Server-Antwortzeit zu verbessern
Caching kann die Antwortzeit des Servers verbessern, indem es die Verarbeitungsarbeit reduziert, die dein Server leisten muss, bevor er das fertige HTML-Dokument an die Browser der Besucher/innen ausliefern kann.
Wenn du deine WordPress-Website bei Kinsta hostest, musst du dich nicht um die Konfiguration des Caching kümmern, denn Kinsta implementiert automatisch ein optimiertes Caching für dich.
Wenn du deine Seite woanders hostest, kannst du das Caching mit einem kostenlosen Plugin wie WP Super Cache oder einem kostenpflichtigen Plugin wie WP Rocket aktivieren.
Weitere Optionen findest du in unserem Beitrag mit den besten WordPress-Caching-Plugins.
Upgrade auf schnelleres WordPress-Hosting
Alle Maßnahmen auf dieser Liste können dir helfen, deine Ladezeit zu verkürzen, aber das ist nicht alles:
Wenn du ein langsames, nicht optimiertes WordPress-Hosting verwendest, werden deine LCP-Zeiten immer durch die Qualität deines Hosters begrenzt sein.
Du kannst es vielleicht ein bisschen besser machen, aber du wirst immer Schwierigkeiten haben, eine LCP-Zeit von unter 2,5 Sekunden zu erreichen, wenn dein Hoster langsam ist.
Wenn du die einfachste Möglichkeit suchst, deine Largest Contentful Paint-Zeiten zu verbessern, kannst du deine Website zu Kinsta migrieren. Kinsta bietet nicht nur eine leistungsoptimierte Hosting-Infrastruktur, sondern verfügt auch über integrierte Funktionen, die viele der anderen Optimierungen auf dieser Liste übernehmen.
Das bedeutet, dass du dich auf das Wachstum deiner Website konzentrieren kannst, anstatt dich mit der Optimierung der Largest Contentful Paint-Zeiten herumzuschlagen.
Wenn du Interesse hast, migriert Kinsta unbegrenzt viele Websites von jedem Hoster kostenlos – mehr über die kostenlose Migration erfährst du hier.
Wenn du noch unschlüssig bist, probiere zuerst die anderen Tipps auf dieser Liste aus. Aber wenn du immer noch Probleme hast, nachdem du alles auf dieser Liste gemacht hast, brauchst du vielleicht einfach ein besseres Hosting.
Verwende ein Content Delivery Network (CDN)
Ohne ein CDN müssen alle Besucher deiner Website den HTML-Code und die statischen Elemente einer Seite von deinem Hosting-Server herunterladen.
Wenn sich deine Besucher in der Nähe deines Servers befinden, ist das normalerweise kein Problem. Wenn deine Besucher aber über die ganze Welt verstreut sind, kann dies deine Website verlangsamen, weil die Besucher von deinem Server zu weit entfernt sind.
Mit einem CDN kannst du die statischen Inhalte deiner Website (oder sogar die fertigen HTML-Seiten) an das globale Netzwerk des CDNs verteilen. Auf diese Weise können die Besucher/innen die Dateien vom nächstgelegenen Standort des CDNs herunterladen, was viel schneller ist.
Wenn du bei Kinsta hostest, empfehlen wir dir, die Edge-Caching-Funktion von Kinsta zu nutzen, um die besten Ergebnisse zu erzielen.
Mit der Edge-Caching-Funktion von Kinsta werden die kompletten HTML-Seiten und statischen Inhalte deiner Website im globalen Netzwerk von Cloudflare zwischengespeichert (und nicht nur statische Inhalte wie bei den meisten CDN-Lösungen).
Das bedeutet, dass die Besucher deiner Website die komplette Seite vom nächstgelegenen Edge-Standort herunterladen können, was sowohl die Reaktionszeit des Servers als auch die Ladezeit deiner LCP-Ressource beschleunigt.
Um das Edge Caching von Kinsta zu aktivieren, gehst du auf die Registerkarte Edge Caching im Dashboard deiner Website in MyKinsta.
Wenn du deine Website woanders hostest, kannst du ein CDN für die statischen Inhalte deiner Website einrichten, indem du beliebte CDN-Dienste wie KeyCDN, Bunny, StackPath und andere nutzt.
Vermeide Render-Blocking JavaScript (aufschieben oder entfernen)
Render-Blocking JavaScript ist JavaScript, das vor deinem Haupt-LCP-Element geladen wird, obwohl es zu diesem Zeitpunkt nicht benötigt wird.
Indem es das Laden des LCP-Elements verzögert, verlangsamt es die Ladezeiten deines LCP.
Um dies zu beheben, gibt es ein paar Strategien, die du anwenden kannst:
- Entferne unnötiges JavaScript, wenn möglich.
- Verschiebe das JavaScript, damit es das Laden des Hauptelements deiner Website nicht blockiert.
- Verzögere das JavaScript, bis ein Nutzer mit deiner Seite interagiert.
Für die meisten Menschen ist es am einfachsten, diese Funktion über Plugins wie Autoptimize oder WP Rocket zu implementieren.
Eine vollständige Anleitung dazu findest du in zwei sehr ausführlichen Beiträgen:
- Wie du Rendering-blockierende Ressourcen in WordPress eliminierst
- Wie du das Parsen von JavaScript aufschieben kannst
Vermeide Render-Blocking CSS und optimiere die CSS-Auslieferung
Genauso wie ein nicht optimiertes JavaScript deine Seite verlangsamen kann, kann ein nicht optimiertes CSS das Gleiche bewirken.
Im Grunde solltest du so wenig CSS wie möglich laden. Und das CSS, das du laden musst, solltest du auf eine optimale Weise laden. Das bedeutet in der Regel, dass du wichtiges CSS früh laden solltest, während du unkritisches CSS auf einen späteren Zeitpunkt verschiebst.
Wenn du kein Entwickler bist, kannst du dies am einfachsten mit Plugins zur Leistungsoptimierung wie Perfmatters, WP Rocket oder FlyingPress erreichen.
WP Rocket zum Beispiel bietet integrierte Funktionen, um ungenutztes CSS seitenweise zu entfernen und CSS auf optimale Weise auszuliefern.
Wenn du mehr darüber erfahren möchtest, wie du das alles machen kannst, schau dir unseren vollständigen Leitfaden zur CSS-Optimierung an.
Verkleinere dein HTML, CSS und JavaScript
Zusätzlich zu den oben genannten Code-Optimierungstechniken solltest du auch das HTML, CSS und JavaScript deiner Website verkleinern.
Dabei werden unnötige Zeichen und Leerzeichen aus dem Code deiner Website entfernt, um ihn zu verkleinern.
Wenn du bei Kinsta hostest, kann Kinsta über die Cloudflare-Integration die Verkleinerung automatisch durchführen. Hier erfährst du, wie du diese Funktion steuern kannst:
- Öffne das Dashboard deiner Website in MyKinsta.
- Gehe auf die Registerkarte CDN.
- Klicke auf Einstellungen neben Bildoptimierung.
- Aktiviere die Kästchen für CSS und JS und speichere die Einstellungen.
Wenn du deine Website woanders hostest, kannst du ein kostenloses Plugin wie Autoptimize verwenden, um deinen Code zu verkleinern, oder eines der umfassenden Premium-Plugins wie Perfmatters, WP Rocket oder FlyingPress.
In unserem vollständigen Tutorial zur Code-Verkleinerung erfährst du mehr. Das Tutorial konzentriert sich zwar auf JavaScript, aber du kannst die gleichen Methoden und Plugins auch für die Verkleinerung von anderem Code verwenden.
Verwende Komprimierung auf Server-Ebene (Gzip oder Brotli)
Mit der Komprimierung auf Serverebene kannst du die Größe der Dateien deiner Website mit Technologien wie Gzip oder Brotli verringern.
Die Komprimierung, die wir für die Kinsta-Website verwenden, hat zum Beispiel die Dateigröße der Kinsta-Homepage um 85,82 % reduziert.
Wenn du deine WordPress-Website bei Kinsta hostest, musst du dir darüber keine Gedanken machen, denn Kinsta aktiviert die Brotli-Komprimierung für alle Websites automatisch.
Wenn du deine Website woanders hostest, kannst du mit diesem kostenlosen Tool von GiftOfSpeed überprüfen, ob deine Website Gzip oder Brotli aktiviert hat.
Wenn deine Website keine Komprimierung verwendet, kannst du unsere Anleitung zur Aktivierung der Gzip-Komprimierung befolgen, um sie einzurichten.
Wenn du Cloudflare verwendest, um die Inhalte deiner Website bereitzustellen, hat Cloudflare auch eine integrierte Einstellung, um die Brotli-Komprimierung zu aktivieren:
- Öffne deine Website im Cloudflare Dashboard.
- Gehe im Menü der Seitenleiste auf Geschwindigkeit → Optimierung.
- Aktiviere den Brotli-Schalter.
Bilder komprimieren und in der Größe anpassen
Wenn es sich bei deinem LCP-Element um ein Bild handelt, kannst du die Größe der Bilddatei verringern, um die Zeit zu verkürzen, die der Browser des Nutzers für das Herunterladen des Bildes benötigt (und damit deine LCP-Zeit zu verkürzen).
Um die Größe des Bildes zu reduzieren, solltest du die Größe des Bildes an die Maße anpassen, in denen du es tatsächlich verwendest, es mit verlustbehafteter oder verlustfreier Komprimierung komprimieren und es in einem optimierten Format wie WebP bereitstellen.
Diese Vorgehensweise ist generell eine best Practice zur Leistungsoptimierung – sie ist nicht spezifisch für Largest Contentful Paint.
Wenn du einen umfassenderen Einblick haben möchtest, schau dir unseren detaillierten Leitfaden zur Bildoptimierung für Websites an.
Übrigens: Wenn du deine WordPress-Website bei Kinsta hostest, brauchst du dir darüber keine Gedanken zu machen, denn Kinsta bietet eine integrierte Funktion, mit der du die Bilder deiner Website automatisch optimieren kannst, ohne dass du ein Drittanbieter-Tool benötigst.
Hier erfährst du, wie du diese Funktion aktivierst:
- Öffne das Dashboard deiner Website in MyKinsta.
- Gehe auf die Registerkarte CDN.
- Klicke auf Einstellungen neben Bildoptimierung.
- Wähle die von dir bevorzugte Stufe der Bildoptimierung und speichere die Einstellungen. Die größte Geschwindigkeitsverbesserung wird durch die Verwendung von Lossy erzielt, obwohl dies einen kleinen Einfluss auf die Bildqualität haben kann.
Vorladen des größten inhaltsreichen Bildes
Wenn dein LCP-Element ein Bild ist, besteht eine weitere Strategie zur Verbesserung von LCP darin, das Bild mit dem größten Inhalt vorzuladen. Deshalb siehst du in PageSpeed Insights möglicherweise eine Empfehlung wie „Preload Largest Contentful Paint image“.
Mit dem Vorladen kannst du dem Browser eines Nutzers mitteilen, dass er bestimmte Ressourcen vorrangig herunterladen soll, z. B. das Bild, das das LCP-Element deiner Website ist.
Der einfachste Weg, LCP-Bilder vorzuladen, ist die Verwendung eines Plugins wie Perfmatters, das eine spezielle Funktion zum Vorladen kritischer Bilder bietet. Du musst nur angeben, wie viele Bilder vorgeladen werden sollen – wir empfehlen, mit einem zu beginnen, da das Vorladen zu vieler Bilder negative Auswirkungen haben kann.
Es gibt auch einige kostenlose Plugins auf WordPress.org, um dies zu erreichen, wie z. B. das Preload Featured Images Plugin von WPZOOM, sowie andere Premium-Plugins wie FlyingPress.
Überprüfe auf „Lazy Loading“-Probleme
Ein weiteres Problem, das die Meldung „Preload Largest Contentful Paint image“ in PageSpeed Insights auslösen kann, sind Probleme mit der Art und Weise, wie deine WordPress-Website Bilder vorlädt (Lazy Loading).
Dies kann auch die Warnung „Largest Contentful Paint image was lazily loaded“ in PageSpeed Insights auslösen.
Mit Lazy Loading kannst du die anfänglichen Ladezeiten deiner Website beschleunigen, indem du mit dem Laden bestimmter Ressourcen (z. B. Bilder) wartest, bis ein Nutzer mit deiner Website tatsächlich interagiert.
Das ist zwar normalerweise eine gute Sache, kann aber deine LCP-Zeiten verlangsamen, wenn deine Website versucht, das Bild, das dein LCP-Element ist, zu laden. Aus diesem Grund solltest du sicherstellen, dass deine Website keine Bilder lädt, die im ersten Viewport sichtbar sind.
Wenn du die Funktion zum Lazy Loading im Browser verwendest, die WordPress mit WordPress 5.5 eingeführt hat, sollte dieses Problem nicht auftreten, da WordPress seit WordPress 5.9 das erste In-Content-Bild bereits automatisch ausschließt.
Wenn du mehr als das erste Bild ausschließen möchtest, kannst du die Funktion wp_omit_loading_attr_threshold verwenden verwenden (aber die meisten Leute werden hier nichts tun müssen).
Wenn du jedoch ein JavaScript-gestütztes Lazy-Loading-Plugin verwendest, musst du diesen Ausschluss möglicherweise manuell in den Einstellungen des Plugins einrichten. Das Perfmatters-Plugin enthält zum Beispiel eine Option, mit der du die ersten „X“ Bilder vom Lazy Loading ausschließen kannst.
Wenn dein Lazy-Loading-Plugin diese Art von Ausschluss nicht zulässt, kannst du zu einem anderen Plugin wechseln, das dies tut.
Optimiere das Laden von Schriften mit Font-Display: Optional
Wenn es sich bei deinem LCP-Element um Text handelt, kann es sein, dass das Laden der Schriftart auf deiner Website das Erscheinen des Textes verzögert, was deine LCP-Zeit verlangsamt.
Das passiert in der Regel, wenn du benutzerdefinierte Schriften verwendest. Wenn deine Website so konfiguriert ist, dass sie mit der Darstellung von Text wartet, bis die benutzerdefinierte Schriftart geladen ist, kann sich die Ladezeit der benutzerdefinierten Schriftart-Datei verlängern.
Um dies zu beheben, kannst du den Font-Display: Optionaler CSS-Deskriptor verwenden.
Damit wird dem Browser mitgeteilt, dass er eine Ersatzschriftart verwenden soll, wenn die benutzerdefinierte Schrift nicht innerhalb eines kleinen Fensters (in der Regel etwa 100 ms oder weniger) geladen wird.
Im Klartext bedeutet das, dass der Browser der benutzerdefinierten Schrift eine Chance geben soll, zu laden. Wenn die benutzerdefinierte Schrift aber nicht schnell genug geladen wird, sollte der Browser einfach eine Ersatzschriftart verwenden, um den Inhalt nicht noch weiter zu verzögern.
Alternativ dazu kannst du auch Font-Display: Swap verwenden, die die Ersatzschriftart sofort lädt und dann die benutzerdefinierte Schriftart einfügt, sobald die benutzerdefinierte Schriftart geladen ist. Diese Methode kann jedoch zu Problemen mit der kumulativen Layoutverschiebung führen, wenn die Schriftarten unterschiedlich groß sind, also sei vorsichtig.
Wenn die benutzerdefinierte Schrift nicht unbedingt für das Design deiner Website erforderlich ist, ist die Verwendung von Font-Display: Optional ist aus Sicht von Core Web Vitals normalerweise die beste Option.
Wenn du dich mit der direkten Verwendung von CSS auskennst, kannst du die Eigenschaft Font-Display im Stylesheet deines Child-Themes manuell bearbeiten.
Wenn du kein CSS verwenden möchtest, findest du auch Plugins, die dir dabei helfen, obwohl die meisten von ihnen auf die Optimierung für Google Fonts ausgerichtet sind:
- Asset CleanUp – unterstützt kostenlose Google Fonts und benutzerdefinierte lokale Schriftarten in der Pro-Version.
- Perfmatters – bietet eine Funktion für Google Fonts.
Wenn du deine Website mit Elementor gestaltest, enthält Elementor auch eine integrierte Option, mit der du dies für Seiten nutzen kannst, die du mit Elementor erstellst:
- Gehe zu Elementor → Einstellungen.
- Öffne die Registerkarte Erweitert.
- Setze das Dropdown-Menü Google Fonts laden gleich auf Optional.
Zusammenfassung
Zu lernen, wie man Largest Contentful Paint verbessert, ist wichtig, um das Nutzererlebnis auf deiner Website zu verbessern und dein Suchmaschinenranking zu optimieren.
Die Verbesserung von Largest Contentful Paint besteht in der Regel aus zwei Teilen – der Beschleunigung der Antwortzeit deines Servers und der Optimierung des Codes deiner Website, damit das LCP-Element so schnell wie möglich dargestellt wird.
Wenn du dir keine Gedanken über langsame Server-Antwortzeiten machen willst, kannst du deine WordPress-Website zu Kinsta umziehen. Die leistungsoptimierte Architektur von Kinsta ist speziell darauf ausgelegt, deine Website so schnell wie möglich auszuliefern.
Außerdem kannst du mit der Edge-Caching-Funktion von Kinsta die Seiten deiner Website im globalen Netzwerk von Cloudflare zwischenspeichern. Das bedeutet, dass Besucher aus der ganzen Welt blitzschnelle Server-Antwortzeiten (und damit auch blitzschnelle LCP-Zeiten) genießen können.
Wenn du mehr erfahren möchtest, findest du auf diesen Seiten weitere Informationen über das Managed WordPress Hosting von Kinsta oder das Managed WooCommerce Hosting von Kinsta.
Wenn du möchtest, dass dir ein Profi bei der Optimierung der LCP-Leistung hilft, kannst du auch einen Anbieter im Kinsta Agency Directory finden.
Schreibe einen Kommentar