Was ist Largest Contentful Paint (LCP)? Erl\u00e4uterung der Bedeutung von Largest Contentful Paint<\/h2>\n
Largest Contentful Paint ist eine Leistungskennzahl, die misst, wie lange es dauert, bis der Hauptinhalt einer Webseite geladen ist.<\/p>\n
Largest Contentful Paint ist zusammen mit Cumulative Layout Shift (CLS)<\/a>\u00a0Teil der Core Web Vitals von Google<\/a>.<\/p>\n Technisch gesehen misst Largest Contentful Paint, wie lange es dauert, bis der gr\u00f6\u00dfte Textblock, das gr\u00f6\u00dfte Bild oder das gr\u00f6\u00dfte Video innerhalb des Viewports gerendert ist.<\/p>\n Was bedeutet „Hauptinhalt“ im Zusammenhang mit LCP?<\/p>\n Nun, der Hauptinhalt h\u00e4ngt von der jeweiligen Seite ab, aber es kann sich um einen der folgenden Inhalte handeln:<\/p>\n Sp\u00e4ter in diesem Beitrag erf\u00e4hrst du, wie du das genaue Largest Contentful Paint-Element f\u00fcr jede beliebige Seite auf deiner Website findest.<\/p>\n\n Eine h\u00e4ufige Frage, die du dir vielleicht stellst, ist der Unterschied zwischen Largest Contentful Paint und First Contentful Paint<\/a>, einer weiteren g\u00e4ngigen Leistungskennzahl.<\/p>\n Die beiden Begriffe sind zwar \u00e4hnlich, aber der Hauptunterschied besteht darin, dass Largest Contentful Paint misst, wie lange es dauert, bis der „Hauptinhalt“ der Seite geladen ist, w\u00e4hrend First Contentful Paint misst, wie lange das „erste Objekt“ zum Laden braucht (unabh\u00e4ngig davon, ob es der Hauptinhalt ist oder<\/em> nicht).<\/p>\n Im Grunde genommen:<\/p>\n Daher wird deine LCP-Zeit fast immer etwas h\u00f6her sein als deine FCP-Zeit, weil das Element „Hauptinhalt“ normalerweise nicht als erstes geladen wird.<\/p>\n Es gibt zwei Hauptgr\u00fcnde, warum die Largest Contentful Paint-Zeiten deiner Website wichtig sind:<\/p>\n Der wichtigste Grund, warum du dich um die Largest Contentful Paint-Zeiten deiner Website k\u00fcmmern solltest, ist, dass diese Kennzahl ein guter Indikator daf\u00fcr ist, wie deine Nutzer die Leistung deiner Website erleben.<\/p>\n Den meisten Nutzern ist es egal, wie lange deine Website braucht, um jedes einzelne Skript und Element vollst\u00e4ndig zu laden. Stattdessen interessiert sie, wie lange es dauert, bis sie einen Nutzen aus deiner Website ziehen k\u00f6nnen.<\/p>\n Largest Contentful Paint versucht, diesen „Wert“ zu messen, indem es ermittelt, wie lange es dauert, bis der Hauptinhalt geladen ist.<\/p>\n 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<\/a> und gute Benutzerfreundlichkeit<\/a> achten).<\/p>\n Das bedeutet nat\u00fcrlich nicht, dass du andere Leistungskennzahlen ignorieren solltest. Wir empfehlen immer, einen ganzheitlichen Blick auf die Leistung und die Engp\u00e4sse deiner Website<\/a> zu werfen. Deshalb haben wir unser eigenes Application Performance Monitoring (APM) Tool<\/a> entwickelt, das kostenlos zur Verf\u00fcgung steht, wenn du Kinsta-Hosting nutzt – Kinsta APM<\/a>.<\/p>\n Was die Suchmaschinenoptimierung<\/a> angeht, ist Largest Contentful Paint Teil von Googles Trio der Core Web Vitals Metriken, die Google seit dem Algorithmus-Update 2022 als SEO-Rankingfaktor<\/a> verwendet.<\/p>\n Das bedeutet, dass schlechte Largest Contentful Paint-Zeiten die Leistung deiner Website in den Suchergebnissen von Google beeintr\u00e4chtigen k\u00f6nnen.<\/p>\n Auch wenn andere Faktoren wie die Qualit\u00e4t\/Relevanz der Inhalte<\/a> und Backlinks immer noch eine viel gr\u00f6\u00dfere Rolle f\u00fcr die Platzierung deiner Website<\/a> spielen, ist es wichtig, die Largest Contentful Paint-Zeiten deiner Website zu optimieren, um sicherzustellen, dass du das Beste aus deinen SEO-Bem\u00fchungen herausholst.<\/p>\n Es gibt vor allem zwei Arten von Problemen, die sich auf die Largest Contentful Paint-Zeiten einer Seite auswirken k\u00f6nnen:<\/p>\n Die erste Art von Problemen betrifft die Reaktionszeit des Servers, auch bekannt als Time to First Byte (TTFB)<\/a>. Bevor der Browser eines Nutzers \u00fcberhaupt daran denken kann, den Hauptinhalt zu laden, muss er zun\u00e4chst eine Antwort vom Server erhalten.<\/p>\n Hier sind einige der h\u00e4ufigsten Probleme, die dies beeinflussen:<\/p>\n Nachdem der Server deiner Website das urspr\u00fcngliche HTML-Dokument geliefert hat, kann es zu weiteren Engp\u00e4ssen kommen, wenn es darum geht, das eigentliche Hauptinhaltselement zu laden.<\/p>\n Hier sind einige der h\u00e4ufigsten Probleme, die dies betreffen:<\/p>\n Je nach Website kann es zu Engp\u00e4ssen in beiden Bereichen oder nur in einem der Bereiche kommen. Wie du all diese Probleme l\u00f6sen kannst, erf\u00e4hrst du etwas sp\u00e4ter in diesem Beitrag.<\/p>\n Google definiert eine „gute“ Largest Contentful Paint-Zeit unter 2,5 Sekunden.<\/p>\n Wenn die Largest Contentful Paint Time deiner Seite zwischen 2,5 und 4,0 Sekunden liegt, stuft Google sie als „verbesserungsbed\u00fcrftig“ ein. Liegt die Zeit \u00fcber 4,0 Sekunden, stuft Google die Seite als „Schlecht“ ein.<\/p>\n Hier ist eine Grafik von Google, die das anschaulich zeigt:<\/p>\n Es gibt eine Reihe von Tools, mit denen du die Leistung deiner Website<\/a> f\u00fcr Largest Contentful Paint testen kannst – hier sind einige der n\u00fctzlichsten..<\/p>\n PageSpeed Insights<\/a> ist eines der besten Tools zur Bewertung von Largest Contentful Paint, denn es bietet vier n\u00fctzliche Informationen:<\/p>\n So benutzt du es:<\/p>\n Google zeigt dir dann die Ergebnisse f\u00fcr Mobilger\u00e4te und f\u00fcr den Desktop an – \u00fcberpr\u00fcfe auf jeden Fall beide.<\/p>\n Um das Hauptelement zu finden, das Google f\u00fcr die Berechnung der LCP-Zeiten verwendet, kannst du zum Abschnitt Diagnostics <\/strong>scrollen und den Abschnitt Largest Contentful Paint element<\/strong> erweitern:<\/p>\n Achte auch hier darauf, dass du das LCP-Element sowohl f\u00fcr Mobilger\u00e4te als auch f\u00fcr den Desktop \u00fcberpr\u00fcfst, da es in beiden F\u00e4llen unterschiedlich sein kann.<\/p>\n Du kannst die Largest Contentful Paint Time auch direkt in den Chrome Developer Tools<\/a> testen, indem du die Registerkarte Leistung oder die Lighthouse-\u00dcberpr\u00fcfungsfunktion verwendest. Wir empfehlen, die Registerkarte Leistung <\/strong>zu verwenden, weil du dort mehr Informationen findest.<\/p>\n So f\u00e4ngst du an:<\/p>\n Du solltest jetzt eine vollst\u00e4ndige Analyse deiner Website sehen.<\/p>\n Wenn du mit dem Mauszeiger \u00fcber LCP in der Registerkarte Netzwerk<\/strong> f\u00e4hrst, kannst du die Zeit sehen:<\/p>\n Wenn du den Mauszeiger \u00fcber LCP in der Registerkarte Timings<\/strong> bewegst, siehst du das aktuelle LCP-Element:<\/p>\n Mit der Google Search Console kannst du zwar keine einzelne Seite auf ihre Largest Contentful Paint-Zeit testen, aber sie ist sehr n\u00fctzlich, um die Leistung der gesamten Website zu beurteilen.<\/p>\n Jede Seite auf deiner Website hat eine andere LCP-Zeit, du kannst also nicht einfach deine Homepage testen und dann Feierabend machen.<\/p>\n Mit der Google Search Console<\/a> kannst du sehen, wo jede Seite deiner Website in die Google-Kategorien „Gut“, „Verbesserungsbed\u00fcrftig“ und „Schlecht“ f\u00e4llt. Die Leistungsdaten stammen aus dem Chrome UX-Bericht, basieren also auf echten Nutzerdaten.<\/p>\n Falls du das noch nicht getan hast, musst du deine Website zun\u00e4chst in der Google Search Console \u00fcberpr\u00fcfen<\/a>.<\/p>\n Wenn du das getan hast, erf\u00e4hrst du hier, wie du den LCP-Bericht aufrufen kannst:<\/p>\n *Achte darauf, dass du sowohl die Desktop- als auch die mobilen Ergebnisse \u00fcberpr\u00fcfst, da die Daten in beiden F\u00e4llen unterschiedlich sein k\u00f6nnen.<\/em><\/p>\n WebPageTest<\/a> ist eine weitere praktische Option, um simulierte Leistungstests durchzuf\u00fchren<\/a>.<\/p>\n Im Gegensatz zu PageSpeed Insights kannst du bei WebPageTest verschiedene Testmetriken wie den Testort, die Verbindungsgeschwindigkeit, das Ger\u00e4t und mehr vollst\u00e4ndig anpassen. Das ist der Hauptvorteil gegen\u00fcber anderen Tools – du hast mehr M\u00f6glichkeiten, den Test zu konfigurieren.<\/p>\n Hier erf\u00e4hrst du, wie du einen Test durchf\u00fchrst:<\/p>\n Auf der Ergebnisseite siehst du die LCP-Daten zusammen mit vielen anderen Leistungskennzahlen (einschlie\u00dflich einer Wasserfallanalyse).<\/p>\n Wenn du Largest Contentful Paint verbessern willst, kann es sehr hilfreich sein, genau zu wissen, welches Element Google zur Berechnung deiner LCP-Zeit verwendet.<\/p>\n Wenn du zum Beispiel wei\u00dft, dass Google dein Heroimage als LCP-Element auf deiner Homepage verwendet, wei\u00dft du, dass du Wege finden musst, dieses Heroimage so schnell wie m\u00f6glich auszuliefern, wenn du die LCP-Zeiten deiner Homepage verbessern willst.<\/p>\n Wie wir bereits erw\u00e4hnt haben, kannst du dein Largest Contentful Paint-Element mit PageSpeed Insights oder den Chrome Developer Tools finden.<\/p>\n Achte darauf, sowohl die mobilen als auch die Desktop-Ergebnisse zu \u00fcberpr\u00fcfen, da dein LCP-Element auf den verschiedenen Ger\u00e4ten unterschiedlich sein kann.<\/strong><\/p>\n Nachdem du nun alles \u00fcber Largest Contentful Paint wei\u00dft, kommen wir zu einigen praktischen Tipps, wie du Largest Contentful Paint in WordPress verbessern kannst.<\/p>\n Auch wenn wir uns bei diesen Tipps auf WordPress konzentrieren, sind alle Tipps universell und gelten auch f\u00fcr andere Arten von Websites.<\/p>\n Caching<\/a> 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.<\/p>\n Wenn du deine WordPress-Website bei Kinsta hostest, musst du dich nicht um die Konfiguration des Caching k\u00fcmmern, denn Kinsta implementiert automatisch ein optimiertes Caching f\u00fcr dich<\/a>.<\/p>\n Wenn du deine Seite woanders hostest, kannst du das Caching mit einem kostenlosen Plugin wie WP Super Cache<\/a> oder einem kostenpflichtigen Plugin wie WP Rocket<\/a> aktivieren.<\/p>\n Weitere Optionen findest du in unserem Beitrag mit den besten WordPress-Caching-Plugins<\/a>.<\/p>\n Alle Ma\u00dfnahmen auf dieser Liste k\u00f6nnen dir helfen, deine Ladezeit zu verk\u00fcrzen, aber das ist nicht alles:<\/p>\n Wenn du ein langsames, nicht optimiertes WordPress-Hosting<\/a> verwendest, werden deine LCP-Zeiten immer durch die Qualit\u00e4t deines Hosters begrenzt sein.<\/p>\n 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.<\/p>\n Wenn du die einfachste M\u00f6glichkeit suchst, deine Largest Contentful Paint-Zeiten zu verbessern, kannst du deine Website zu Kinsta migrieren<\/a>. Kinsta bietet nicht nur eine leistungsoptimierte Hosting-Infrastruktur<\/a>, sondern verf\u00fcgt auch \u00fcber integrierte Funktionen, die viele der anderen Optimierungen auf dieser Liste \u00fcbernehmen.<\/p>\n Das bedeutet, dass du dich auf das Wachstum deiner Website konzentrieren kannst, anstatt dich mit der Optimierung der Largest Contentful Paint-Zeiten herumzuschlagen.<\/p>\n Wenn du Interesse hast, migriert<\/strong> Kinsta<\/strong> unbegrenzt viele Websites von jedem Hoster kostenlos<\/strong> – mehr \u00fcber die kostenlose Migration erf\u00e4hrst du hier<\/a>.<\/p>\n Wenn du noch unschl\u00fcssig 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.<\/p>\n Ohne ein CDN m\u00fcssen alle Besucher deiner Website den HTML-Code und die statischen Elemente einer Seite von deinem Hosting-Server herunterladen.<\/p>\n Wenn sich deine Besucher in der N\u00e4he deines Servers befinden, ist das normalerweise kein Problem. Wenn deine Besucher aber \u00fcber die ganze Welt verstreut sind, kann dies deine Website verlangsamen, weil die Besucher von deinem Server zu weit entfernt sind.<\/p>\n 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\u00f6nnen die Besucher\/innen die Dateien vom n\u00e4chstgelegenen Standort des CDNs herunterladen, was viel schneller ist<\/a>.<\/p>\n Wenn du bei Kinsta hostest<\/a>, empfehlen wir dir, die Edge-Caching-Funktion von Kinsta<\/a> zu nutzen, um die besten Ergebnisse zu erzielen.<\/p>\n Mit der Edge-Caching-Funktion von Kinsta werden die kompletten HTML-Seiten und statischen Inhalte deiner Website im globalen Netzwerk von Cloudflare<\/a> zwischengespeichert (und nicht nur statische Inhalte wie bei den meisten CDN-L\u00f6sungen<\/em>).<\/p>\n Das bedeutet, dass die Besucher deiner Website die komplette Seite vom n\u00e4chstgelegenen Edge-Standort herunterladen k\u00f6nnen, was sowohl die Reaktionszeit des Servers als auch die<\/em> Ladezeit deiner LCP-Ressource beschleunigt.<\/p>\n Um das Edge Caching von Kinsta zu aktivieren, gehst du auf die Registerkarte Edge Caching<\/strong> im Dashboard deiner Website in MyKinsta<\/a>.<\/p>\n Wenn du deine Website woanders hostest, kannst du ein CDN f\u00fcr die statischen Inhalte deiner Website einrichten, indem du beliebte CDN-Dienste wie KeyCDN, Bunny, und andere nutzt.<\/p>\n Render-Blocking JavaScript ist JavaScript, das vor deinem Haupt-LCP-Element geladen wird, obwohl es zu diesem Zeitpunkt nicht ben\u00f6tigt wird.<\/p>\n Indem es das Laden des LCP-Elements verz\u00f6gert, verlangsamt es die Ladezeiten deines LCP.<\/p>\n Um dies zu beheben, gibt es ein paar Strategien, die du anwenden kannst:<\/p>\n F\u00fcr die meisten Menschen ist es am einfachsten, diese Funktion \u00fcber Plugins wie Autoptimize<\/a> oder WP Rocket<\/a> zu implementieren.<\/p>\n Eine vollst\u00e4ndige Anleitung dazu findest du in zwei sehr ausf\u00fchrlichen Beitr\u00e4gen:<\/p>\n Genauso wie ein nicht optimiertes JavaScript deine Seite verlangsamen kann, kann ein nicht optimiertes CSS das Gleiche bewirken.<\/p>\n Im Grunde solltest du so wenig CSS wie m\u00f6glich 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\u00fch laden solltest, w\u00e4hrend du unkritisches CSS auf einen sp\u00e4teren Zeitpunkt verschiebst.<\/p>\n Wenn du kein Entwickler bist, kannst du dies am einfachsten mit Plugins zur Leistungsoptimierung wie Perfmatters<\/a>, WP Rocket<\/a> oder FlyingPress<\/a> erreichen.<\/p>\n WP Rocket zum Beispiel bietet integrierte Funktionen, um ungenutztes CSS seitenweise zu entfernen und CSS auf optimale Weise auszuliefern.<\/p>\n Wenn du mehr dar\u00fcber erfahren m\u00f6chtest, wie du das alles machen kannst, schau dir unseren vollst\u00e4ndigen Leitfaden zur CSS-Optimierung<\/a> an.<\/p>\n Zus\u00e4tzlich zu den oben genannten Techniken zur Codeoptimierung solltest du auch den HTML-, CSS- und JavaScript-Code deiner Seite minimieren. Im Wesentlichen werden dadurch unn\u00f6tige Zeichen und Leerzeichen aus dem Code deiner Seite entfernt, um die Gr\u00f6\u00dfe zu verringern.<\/p>\n Du kannst ein kostenloses Plugin wie Autoptimize verwenden<\/a>, um deinen Code zu minimieren, oder eines der umfassenden Premium-Plugins wie Perfmatters, WP Rocket oder FlyingPress.<\/p>\n In unserem vollst\u00e4ndigen Tutorial zur Code-Verkleinerung<\/a> erf\u00e4hrst du mehr. Das Tutorial konzentriert sich zwar auf JavaScript, aber du kannst die gleichen Methoden und Plugins auch f\u00fcr die Verkleinerung von anderem Code verwenden.<\/p>\n Mit der Komprimierung auf Serverebene kannst du die Gr\u00f6\u00dfe der Dateien deiner Website mit Technologien wie Gzip oder Brotli<\/a> verringern.<\/p>\n Die Komprimierung, die wir f\u00fcr die Kinsta-Website verwenden, hat zum Beispiel die Dateigr\u00f6\u00dfe der Kinsta-Homepage um 85,82 % reduziert.<\/p>\n Wenn du deine WordPress-Website bei Kinsta hostest, musst du dir dar\u00fcber keine Gedanken machen, denn Kinsta aktiviert die Brotli-Komprimierung f\u00fcr alle Websites automatisch.<\/p>\n Wenn du deine Website woanders hostest, kannst du mit diesem kostenlosen Tool von GiftOfSpeed<\/a> \u00fcberpr\u00fcfen, ob deine Website Gzip oder Brotli aktiviert hat.<\/p>\n Wenn deine Website keine Komprimierung verwendet, kannst du unsere Anleitung zur Aktivierung der Gzip-Komprimierung befolgen, um sie einzurichten<\/a>.<\/p>\n Wenn du Cloudflare verwendest, um die Inhalte deiner Website bereitzustellen, hat Cloudflare auch eine integrierte Einstellung, um die Brotli-Komprimierung zu aktivieren:<\/p>\n Wenn es sich bei deinem LCP-Element um ein Bild handelt, kannst du die Gr\u00f6\u00dfe der Bilddatei verringern, um die Zeit zu verk\u00fcrzen, die der Browser des Nutzers f\u00fcr das Herunterladen des Bildes ben\u00f6tigt (und damit deine LCP-Zeit zu verk\u00fcrzen).<\/p>\n Um die Gr\u00f6\u00dfe des Bildes zu reduzieren, solltest du die Gr\u00f6\u00dfe des Bildes an die Ma\u00dfe anpassen, in denen du es tats\u00e4chlich verwendest, es mit verlustbehafteter oder verlustfreier Komprimierung<\/a> komprimieren und es in einem optimierten Format wie WebP<\/a> bereitstellen.<\/p>\n Diese Vorgehensweise ist generell eine<\/em> best Practice zur Leistungsoptimierung<\/em><\/a> – sie ist nicht spezifisch f\u00fcr Largest Contentful Paint.<\/em><\/p>\n Wenn du einen umfassenderen Einblick haben m\u00f6chtest, schau dir unseren detaillierten Leitfaden zur Bildoptimierung f\u00fcr Websites<\/a> an.<\/p>\n \u00dcbrigens: Wenn du deine WordPress-Website bei Kinsta hostest, brauchst du dir dar\u00fcber keine Gedanken zu machen, denn Kinsta bietet eine integrierte Funktion, mit der du die Bilder deiner Website automatisch optimieren<\/a> kannst, ohne dass du ein Drittanbieter-Tool ben\u00f6tigst.<\/p>\n Hier erf\u00e4hrst du, wie du diese Funktion aktivierst:<\/p>\n Wenn dein LCP-Element ein Bild ist, besteht eine weitere Strategie zur Verbesserung von LCP darin, das Bild mit dem gr\u00f6\u00dften Inhalt vorzuladen. Deshalb siehst du in PageSpeed Insights m\u00f6glicherweise eine Empfehlung wie „Preload Largest Contentful Paint image“.<\/p>\n 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.<\/p>\n Der einfachste Weg, LCP-Bilder vorzuladen, ist die Verwendung eines Plugins wie Perfmatters<\/a>, das eine spezielle Funktion zum Vorladen kritischer Bilder<\/strong> 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.<\/p>\n Es gibt auch einige kostenlose Plugins auf WordPress.org, um dies zu erreichen, wie z. B. das Preload Featured Images Plugin von WPZOOM<\/a>, sowie andere Premium-Plugins wie FlyingPress<\/a>.<\/p>\n Ein weiteres Problem, das die Meldung „Preload Largest Contentful Paint image“ in PageSpeed Insights ausl\u00f6sen kann, sind Probleme mit der Art und Weise, wie deine WordPress-Website Bilder vorl\u00e4dt<\/a>\u00a0(Lazy Loading).<\/p>\n Dies kann auch die Warnung „Largest Contentful Paint image was lazily loaded“ in PageSpeed Insights ausl\u00f6sen.<\/p>\n Mit Lazy Loading kannst du die anf\u00e4nglichen Ladezeiten deiner Website beschleunigen, indem du mit dem Laden bestimmter Ressourcen (z. B. Bilder) wartest, bis ein Nutzer mit deiner Website tats\u00e4chlich interagiert.<\/p>\n 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\u00e4dt, die im ersten Viewport sichtbar sind.<\/p>\n Wenn du die Funktion zum Lazy Loading im Browser verwendest, die WordPress mit WordPress 5.5 eingef\u00fchrt hat<\/a>, sollte dieses Problem nicht auftreten, da WordPress seit WordPress 5.9 das erste In-Content-Bild bereits automatisch ausschlie\u00dft<\/a>.<\/p>\n Wenn du mehr als das erste Bild ausschlie\u00dfen m\u00f6chtest, kannst du <\/em>die Funktion wp_omit_loading_attr_threshold verwenden<\/em><\/a> verwenden (aber die meisten Leute werden hier nichts tun m\u00fcssen).<\/em><\/p>\n Wenn du jedoch ein JavaScript-gest\u00fctztes Lazy-Loading-Plugin verwendest, musst du diesen Ausschluss m\u00f6glicherweise manuell in den Einstellungen des Plugins einrichten. Das Perfmatters-Plugin enth\u00e4lt zum Beispiel eine Option, mit der du die ersten „X“ Bilder vom Lazy Loading ausschlie\u00dfen kannst.<\/p>\n Wenn dein Lazy-Loading-Plugin diese Art von Ausschluss nicht zul\u00e4sst, kannst du zu einem anderen Plugin wechseln, das dies tut.<\/p>\n Zum Beispiel schlie\u00dft WP Rocket<\/a> automatisch alle Bilder Above the Fold, einschlie\u00dflich des LCP-Bildes, vom Lazyloading aus, wodurch du Zeit und den Aufwand sparst, dies manuell zu tun. Das Plugin f\u00fchrt die Optimierung standardm\u00e4\u00dfig direkt bei der Aktivierung durch, sodass du keine Optionen ausw\u00e4hlen musst.<\/p>\n 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\u00f6gert, was deine LCP-Zeit verlangsamt.<\/p>\n Das passiert in der Regel, wenn du benutzerdefinierte Schriften verwendest<\/a>. 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\u00e4ngern.<\/p>\n Um dies zu beheben, kannst du den Font-Display: Optionaler CSS-Deskriptor<\/a> verwenden.<\/p>\n 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.<\/p>\n 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\u00f6gern.<\/p>\n Alternativ dazu kannst du auch Font-Display: Swap verwenden, die die Ersatzschriftart sofort l\u00e4dt und dann die benutzerdefinierte Schriftart einf\u00fcgt, sobald die benutzerdefinierte Schriftart geladen ist. Diese Methode kann jedoch zu Problemen mit der kumulativen Layoutverschiebung<\/a> f\u00fchren, wenn die Schriftarten unterschiedlich gro\u00df sind, also sei vorsichtig.<\/p>\n Wenn die benutzerdefinierte Schrift nicht unbedingt f\u00fcr das Design deiner Website erforderlich ist, ist die Verwendung von Font-Display: Optional ist aus Sicht von Core Web Vitals normalerweise die beste Option.<\/p>\n Wenn du dich mit der direkten Verwendung von CSS<\/a> auskennst, kannst du die Eigenschaft Font-Display im Stylesheet deines Child-Themes<\/a> manuell bearbeiten.<\/p>\n Wenn du kein CSS verwenden m\u00f6chtest, findest du auch Plugins, die dir dabei helfen, obwohl die meisten von ihnen auf die Optimierung f\u00fcr Google Fonts ausgerichtet sind:<\/p>\n Wenn du deine Website mit Elementor gestaltest, enth\u00e4lt Elementor auch eine integrierte Option, mit der du dies f\u00fcr Seiten nutzen kannst, die du mit Elementor erstellst:<\/p>\n\n
Largest Contentful Paint vs. First Contentful Paint<\/h3>\n
\n
Warum ist die Zeit f\u00fcr den gr\u00f6\u00dften Inhalt auf deiner Website wichtig?<\/h2>\n
\n
Benutzererfahrung<\/h3>\n
Suchmaschinen-Optimierung (SEO)<\/h3>\n
Was kann sich auf die Largest Contentful Paint-Werte auswirken?<\/h2>\n
\n
\n
\n
Was ist eine gute Largest Contentful Paint Time?<\/h2>\n
![\"Empfohlene](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/01\/good-largest-contentful-paint-times-1024x253.jpg\")
Wie man die gr\u00f6\u00dfte inhaltsreiche Seite misst: Die besten LCP-Test-Tools<\/h2>\n
PageSpeed Insights<\/h3>\n
\n
\n
![\"LCP-Zeiten](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/01\/pagespeed-insights-lcp-test-1024x682.jpg\")
![\"So](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/01\/pagespeed-insights-lcp-test-2-1024x779.jpg\")
Chrome Entwickler-Tools<\/h3>\n
\n
![\"So](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/01\/lcp-test-chrome-dev-tools-1-1024x694.jpg\")
![\"So](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/01\/lcp-test-chrome-dev-tools-2-1024x714.jpg\")
![\"So](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/01\/lcp-test-chrome-dev-tools-3-1024x861.jpg\")
Google Search Console<\/h3>\n
\n
![\"Wie](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/01\/lcp-times-in-google-search-console-1024x860.jpg\")
WebPageTest<\/h3>\n
\n
![\"So](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/01\/webpagetest-lcp-test-1-1024x727.jpg\")
Wie du das gr\u00f6\u00dfte inhaltsreiche Bildelement findest<\/h2>\n
Wie du Largest Contentful Paint in WordPress (oder anderen Plattformen) verbesserst<\/h2>\n
Caching einrichten, um die Server-Antwortzeit zu verbessern<\/h3>\n
Upgrade auf schnelleres WordPress-Hosting<\/h3>\n
Verwende ein Content Delivery Network (CDN)<\/h3>\n
![\"So](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/01\/kinsta-edge-caching-1024x704.jpg\")
Vermeide Render-Blocking JavaScript (aufschieben oder entfernen)<\/h3>\n
\n
\n
Vermeide Render-Blocking CSS und optimiere die CSS-Auslieferung<\/h3>\n
Verkleinere dein HTML, CSS und JavaScript<\/h3>\n
Verwende Komprimierung auf Server-Ebene (Gzip oder Brotli)<\/h3>\n
![\"Ein](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/01\/gzip-brotli-test-1024x624.jpg\")
\n
![\"So](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/01\/cloudflare-brotli-compression-1024x865.jpg\")
Bilder komprimieren und in der Gr\u00f6\u00dfe anpassen<\/h3>\n
\n
![\"So](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/01\/kinsta-image-optimization-feature-1024x845.jpg\")
Vorladen des gr\u00f6\u00dften inhaltsreichen Bildes<\/h3>\n
![\"So](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/01\/preload-critical-images-1024x685.jpg\")
\u00dcberpr\u00fcfe auf „Lazy Loading“-Probleme<\/h3>\n
![\"Wie](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/01\/perfmatters-exclude-leading-images-1024x791.jpg\")
Optimiere das Laden von Schriften mit Font-Display: Optional<\/h3>\n
\n
\n