Largest Contentful Paint in WordPress: Fortgeschrittene Anleitung zur deutlich sichtbaren Verbesserung deines LCP-Scores (17 Schritte)

Largest Contentful Paint (LCP) ist Teil der Core Web Vitals und macht vielen Webseitenbesitzern zu schaffen.

Das Video von Google zur Optimierung von LCP ist dazu sehr sehenswert. Darin wird LCP in 4 Teile unterteilt: TTFB, Verzögerung beim Laden von Ressourcen, Ladezeit von Ressourcen und Verzögerung beim Rendern von Elementen.

Der Sprecher gibt Empfehlungen zur Verbesserung jedes Teils und ist dabei nicht WordPress-spezifisch (das ist der Grund, warum ich dieses Tutorial gut finde).

Es ist zum Beispiel schwierig, TTFB zu erwähnen ohne über Cloudflare Enterprise und Full Page Caching zu sprechen. Cache-Plugins haben spezifische Einstellungen die LCP helfen (oder schaden) können. Dein Theme/Plugins können sich ebenfalls darauf auswirken.

Befolge nun meine Tipps und ich wette, dass sich dein LCP unter 2,5s senken wird.

Der LCP misst grundsätzlich, wie lange es dauert, bis der Hauptinhalt geladen ist. Viele Leute haben Probleme mit LCP, weil er von viele Faktoren beeinflusst wird. Der Above-The-Fold Inhalt ist ein guter Startpunkt.

Largest Contentful Paint	Ergebnis
0 – 2.5s	Gut
2.5 – 4s	Verbesserungsbedürftig
Über 4s	Schlecht

1. Diese LCP-Teile muss man bearbeiten

Der Largest Contentful Paint ist im Prinzip in 4-Teil-Bereiche untergliedert. Springe zu 12:40 im Video von Google YT-Kanal, um schnelle Tipps zur Verbesserung jedes Teils zu erhalten. Ansonsten habe ich die Tipps hier aufgeführt.

Das sind die Faktoren die sich am stärksten auf deinen Largest Contentful Paint Score auswirken:

LCP Teilbereiche	Faktoren	LCP
TTFB	Hauptsächlich Hosting und CDNs + vollständiges Page Caching	~40%
Verzögerung der Ressourcenauslastung	Ausschluss von Above-the-Fold-Inhalten von Optimierungen, Ressourcenhinweisen	<10%
Ladezeit der Ressourcen	Bild/CSS/JS-Größen reduzieren, kritisches CSS, CDN, Cache-Ablauf	~40%
Element Rendering Verzögerung	Render-Blocking CSS/JS, JS-Dateigröße, Schriftart-Anzeige optional	<10%

Werkzeuge zur LCP Überprüfung

• KeyCDN Performance Test – misst TTFB an 10 globalen Standorten.
• Waterfall Chart – schöne Visualisierung, die zeigt, welche Dateien den LCP beeinflussen.
• PSI-Empfehlungen – viele Empfehlungen in PageSpeed Insights korrelieren mit LCP. Die Behebung von Empfehlungen (die unter Chancen/Diagnoseberichten angezeigt werden) zeigen praktische Lösungswege.
• Chrome Dev Tools Coverage Report – große, nicht optimierte CSS/JS-Dateien sind einer der größten LCP-Faktoren. Damit kannst du herausfinden, welche Plugins und JavaScript von Drittanbietern am längsten zum Laden brauchen. Die Namen der Plugins und die Domänen von Drittanbietern sind normalerweise in der URL zu finden.

2. Above-The-Fold Bilder von Lazy Load ausschließen

„Above The Fold“ Bilder sollten eigentlich sofort angezeigt werden, aber Lazy Load verzögert sie und trägt damit Teil vom „Resource Load Delay“ von LCP.

Es kann zeitaufwändig sein, jede einzelne Seite/jeden einzelnen Beitrag durchzugehen und diese Bilder manuell auszuschließen. Während Logos und Bilder in der oberen Seitenleiste für den Großteil deiner Website einheitlich sein können, ist das Bild für den oberen Beitrag (Nr. 3 im Screenshot unten) oft für jede einzelne Seite und jeden einzelnen Beitrag einzigartig.

Das sind die Elemente ganz oben, die beim Besuch der Webseite sofort sichtbar werden und die oftmals zum Largest Contentful Paint in WordPress beitragen.

Das Vorladen kritischer Bilder ist normalerweise die beste Methode. Es lädt nicht nur Bilder vor, die über der Faltung liegen, sondern schließt sie auch vom Lazy Load aus. Es wird von Perfmatters und FlyingPress unterstützt. Lege einfach die Anzahl der Bilder fest, die normalerweise oberhalb der Faltung angezeigt werden, und das Plugin kümmert sich um den Rest.

Du kannst auch führende Bilder ausschließen, aber sie werden dann nicht vorgeladen.

Wenn dein Cache-Plugin beides nicht unterstützt, musst du deine Seiten/Beiträge manuell durchgehen, alle Bild-URLs kopieren, die oberhalb der Falz geladen werden, und sie dann manuell ausschließen. Einige Cache-Plugins verfügen über Ausschlussmethoden die du in ihrer Dokumentation finden sollten.

Hintergrundbilder

Hintergrundbilder werden nicht „lazy“ geladen, da sie oft aus einer separaten CSS-Datei geladen werden. Einige Cache-Plugins haben eine lazy-bg-Helferklasse um sie zu laden, während WP Rocket sie in Inline-HTML verschieben muss. Da sie nicht „lazy“ geladen werden, besteht normalerweise keine Notwendigkeit Hintergrundbilder oberhalb der Falz auszuschließen, aber du musst diese manuell „lazy“ laden, wenn sie unterhalb der Falz geladen werden.

Elementor Bild-Widgets

Elementor Image Widgets sind standardmäßig nicht vom Lazy Load ausgeschlossen, da sie keine img-Tags verwenden. Cache-Plugins haben manchmal eine Skip-Lazy-Hilfsklasse um Bilder manuell auszuschließen.

Die Optimierung von Bildern oberhalb der Falte ist entscheidend

So wie du jedes Bild auf deiner Website optimieren würdest, ist es noch wichtiger, dies für Bilder oberhalb der Faltung zu tun. Komprimiere sie, verwende korrekte Abmessungen, schnellere Bildformate (z. B. WebP) und stelle kleinere Bildgrößen für mobile Geräte über CDNs oder ein Plugin für adaptive Bilder bereit.

3. Priorisiere Bilder oberhalb der Falte

Wenn du kritische Bilder, wie im vorherigen Schritt gezeigt, vorladest, solltest du nichts tun müssen, da Bilder oberhalb der Faltung bereits priorisiert und vom Lazy Load ausgeschlossen sind.

Das Vorladen hat jedoch Nachteile, und Google empfiehlt, es nur für LCP-Bilder im Hintergrund zu verwenden und dann fetchpriority speziell für dein, in PageSpeed Insights angezeigtes LCP-Bild, zu verwenden.

Hier gebe ich dem LCP-Bild eine hohe Fetchpriorität, während ich die schnellere WebP-Version verwende.

<link fetchpriority="high" rel="preload" href="/image.webp" as="image">

Zum Zeitpunkt der Erstellung dieses Artikels ist FlyingPress das einzige, mir bekannte Cache-Plugin, das die im Changelog angegebene Fetchpriorität in Version 3.9.0 unterstützt.

Weitere Herausforderungen für Hintergrundbilder

Wenn dein LCP-Bild ein Hintergrundbild ist und in eine separate CSS-Datei geladen wird, wie es bei Elementor der Fall ist, wird dein LCP-Bild nicht vorgeladen. Du musst das Hintergrundbild in Inline-HTML verschieben und es vorladen, oder sowohl das Hintergrundbild, als auch die CSS-Datei, in der sich das Bild befindet, vorladen.

4. Reduzieren Sie die CSS/JavaScript Größen

Die Ladezeit von Ressourcen macht 40 % von LCP aus, und CSS/JS sind in der Regel die größten Dateien.

Schaue dir den Abdeckungsbericht der Chrome-Entwicklungstools an und sieh dir die URLs an, die dir in der Regel sagen, ob bestimmte Plugins, Themes, JavaScript von Drittanbietern oder andere Dateien die meisten Bytes hinzufügen.

5. TTFB reduzieren

TTFB allein macht 40 % des LCP aus und wird in Googles Video bei 5:24 erklärt. Dies ist hauptsächlich dein Hosting (und CDN).

Rocket.net mit seinem kostenlosen Cloudflare Enterprise wird jeden „Mainstream-Host“ übertreffen, da du 32 CPU-Kerne + 128 GB RAM, NVMe-Speicher, Redis und Cloudflare’s Full Page Caching + Argo Smart Routing erhältst. Ich benutze sie und habe im Durchschnitt einen globalen TTFB von <150ms (oder klicke mich durch meine Beiträge).

Mainstream-Hosts (wie SiteGround, Hostinger und WPX) haben nicht viel CPU/RAM, verwenden langsamere SATA-SSDs und sind Shared-Hosting mit strengen CPU-Limits, die dich zwingen, Pläne zu aktualisieren. Cloud-Hosting ist schneller, aber Kinsta verwendet immer noch SATA-SSDs mit wenig CPU/RAM, PHP-Worker und monatliche Besuche (Redis kostet auch $100/Monat). Cloudways Vultr HF ist der Anbieter, den ich zuvor verwendet habe. Aber auch hier beginnen sie mit nur 1 CPU + 1 GB RAM auf langsameren Apache-Servern, PHP-FPM und GZIP.

Hier sind die von Rocket.net:

Alle Pläne verwenden 32 CPU-Kerne + 128 GB RAM mit NVMe (schneller als SATA), Redis (besser als Memcached), LiteSpeed PHP und Brotli (geringere Kompression GZIP). Es gibt keine PHP-Worker-Limits, da nur etwa 10 % des Traffics aufgrund von Cloudflare Enterprise auf deinen Ursprung trifft.

	SiteGround	Hostinger	Kinsta	Cloudways Vultr HF	Rocket
Hosting Typ	Shared	Shared	Cloud	Cloud	Privat Cloud
Speicher	SATA	SATA	SATA	NVMe	NVMe
CPU Kerne	Nicht bekannt	1-2	12	1	32
RAM (GB)	Nicht bekannt	.768 – 1.536	8	1	128
Objekt Cache	Memcached	x	Redis ($100/mo)	Redis (Pro)	Redis
Server	Nginx	LiteSpeed	Nginx	Apache	Nginx
PHP Verarbeitung	FastCGI	LiteSpeed	FastCGI	FPM	LiteSpeed
Komprimierung	Brotli	Brotli	Brotli	GZIP	Brotli
CPU Grenzen	Sehr häufig	Geringer Speicher	PHP workers	Akzeptabel	Keine

Warum du Cloudflare Enterprise brauchst

Weil du Enterprise Features, wie 270+ PoPs, priorisiertes Routing, Full Page Caching, HTTP/3, WAF und Bildoptimierung erhältst. 3 Probleme mit den meisten CDNs sind ihr kleines Netzwerk (PoPs) und kein Full Page Caching oder Bildoptimierung. Das RocketCDN von WP Rocket verwendet zum Beispiel StackPath, das von cdnperf.com entfernt wurde, und bietet keine Bildoptimierung mit einer mittelmäßigen Tbps-Geschwindigkeit von 65+. Das CDN von SiteGround hat nur 14 PoPs. QUIC.cloud CDN (für LiteSpeed) und BunnyCDN sind gut, aber sie schlagen Cloudflare Enterprise immer noch nicht. Sicher, du kannst $5/mo für Cloudflare’s APO bezahlen, aber du verpasst immer noch alle anderen Enterprise-Funktionen.

3 beliebte Hoster mit Cloudflare Enterprise

Rocket.net’s Cloudflare Enterprise ist kostenlos, wird automatisch eingerichtet und verwendet vollständiges Seiten-Caching (im Gegensatz zu Cloudways). Und im Gegensatz zu Kinsta verfügt Rocket.net über Argo Smart Routing (besonders gut für WooCommerce-Sites), Lastausgleich und Bildoptimierung. Der CEO von Rocket.net, Ben Gabler, war früher auch Chief Product Officer von StackPath und ging so weit, die Rechenzentren von Rocket.net an denselben Standorten wie die von Cloudflare zu errichten. Und im Gegensatz zu beiden Hosts begrenzt Rocket.net nicht die PHP-Arbeiter (es gibt keine CPU-Limits) und die monatlichen Besuchslimits sind 10-25 Mal höher als bei Kinsta.

	Cloudflare Enterprise (Kinsta)	Cloudflare Enterprise (Cloudways)	Cloudflare Enterprise (Rocket.net)
CDN PoPs	270	270	270
Priorisiertes Routing	✓	✓	✓
Full Page Caching	✓	x	✓
HTTP/3	✓	✓	✓
WAF	✓	✓	✓
Argo Smart Routing	x	✓	✓
Lastausgleich	x	✓	✓
Bildoptimierung	x	✓	✓
Automatische Konfiguration	x	x	✓
Preis	Gratis	$5/Monat (1 domain)	Gratis

Probleme mit Mainstream Hosting

Ich habe einige ziemlich schlechte Kritiken über SiteGrounds langsames TTFB, CPU-Limits und darüber geschrieben, warum SG Optimizer bei den wichtigsten Webvitalen schlechte Arbeit leistet (sie kontrollieren auch mehrere Facebook-Gruppen und drohen Leute zu verklagen, die schlechte Kritiken schreiben). Hostinger schreibt gefälschte Bewertungen und ist nur deshalb so günstig, weil man weniger Ressourcen wie CPU/RAM bekommt. Kinsta und WP Engine sind viel zu teuer für die Anzahl der Ressourcen, PHP-Arbeiter und monatlichen Besuche, die man bekommt. Hinzu kommen größere Vorfälle wie der weltweite Ausfall von WPX und die 4-tägige Sperrung des DNS von SiteGround durch Google (sowohl WPX als auch SiteGround leugnen die Verantwortung). Eines ist klar: Die meisten Mainstream-Hosts scheinen mehr an Gewinn als an Leistung interessiert zu sein. Aber bitte recherchiere selbst, bevor du dich beraten lässt.

Die ersten Schritte

Schritt 1: Erstelle ein Rocket.net-Konto und du wirst aufgefordert, einen Gutschein hinzuzufügen. Melde dich mit dem Coupon an und erhalte den ersten Monat für $1 (verlängert sich zu $30/mo oder $25/mo bei jährlicher Zahlung). Wenn du dich mit meinem Coupon oder Affiliate-Links anmeldest, erhalte ich eine Provision, was ich sehr zu schätzen weiß.

Schritt 2: Beantrage eine kostenlose Migration. Das wurde bei mir noch am selben Tag erledigt, und ich konnte meine Website überprüfen, bevor sie ohne Ausfallzeit gestartet wurde. Der Support ist übrigens besser als der von Kinsta und du kannst Ben Gabler oder sein Team (per Telefon/Chat/E-Mail) kontaktieren, wenn du Fragen hast.

Schritt 3: Aktualisiere auf PHP 8.1 und bitte den Support, Redis zu installieren (sie verwenden Redis Object Cache). Dies sind die einzigen Dinge, die ich getan habe, da Cloudflare Enterprise und Backups beide automatisch sind.

Schritt 4: Teste dein TTFB erneut in SpeedVitals und klicke dich durch deine Seiten, um den Unterschied zu sehen. Du kannst auch ihr TrustPilot-Profil nach Leuten durchsuchen, die „TTFB“ erwähnen, wo sie mit 4,9/5 bewertet werden.

Ich war vorher bei Cloudways Vultr HF, was großartig war, aber deren Cloudflare Enterprise nutzt (noch) kein Full Page Caching und kostet $5/mo mit nervigen Challenge Pages. Selbst wenn dein Cloudflare Enterprise identisch wäre, übertrifft Rocket.net sie immer noch mit besseren Spezifikationen, wie mehr CPU/RAM, Brotli und LiteSpeed’s PHP (plus besserem Support, einfacher zu bedienen und in der Regel preislich). Während Cloudways eine große Verbesserung gegenüber den meisten Hosts darstellt, zahlst du bereits $18/mo für den niedrigsten 1-CPU-Plan von Vultr HF mit Cloudflare Enterprise. An diesem Punkt sind die zusätzlichen $7/Monat, die du bei Rocket.net ausgeben würdest, es wert. Das Dashboard von Rocket.net ist auch viel einfacher.

Für kleine Websites mit kleinem Budget ist NameHero’s Turbo Cloud Plan, ähnlich wie Hostinger, zwischen LiteSpeed, cPanel und Preis. Allerdings hat NameHero’s Turbo Cloud Plan etwa 1,5x mehr Ressourcen (3 CPU + 3GB RAM) mit NVMe-Speicher. NameHero’s Support/Unterbrechungszeiten sind auch in TrustPilot-Bewertungen besser dargestellt. Dies ist eine der schnellsten Konfigurationen für ein kleines Budget… Du erhältst einen LiteSpeed-Server + LiteSpeed Cache + QUIC.cloud CDN und E-Mail-Hosting. Der größte Nachteil ist, dass sich die Rechenzentren nur in den USA und den Niederlanden befinden. Wenn sich diese nicht in der Nähe deiner Besucher befinden, solltest du das CDN von QUIC.cloud mit HTML-Caching einrichten (idealerweise den kostenpflichtigen Plan, der alle 70 PoPs nutzt).

Die Latenzzeit ist ebenfalls in TTFB enthalten. Zwei einfache Möglichkeiten dies zu verbessern, sind die Verwendung eines schnellen DNS wie Cloudflare und die Anpassung der SSL/TLS-Einstellungen von Cloudflare (z. B. Verwendung höherer TLS-Versionen).

6. Eliminiere Render Blocking CSS/JS

Diese tragen zur „Element Render Verzögerung“ bei, die 10 % des LCP ausmacht.

Der einfachste Weg Render Blocking Ressourcen zu beseitigen, besteht darin, deinen PSI-Bericht einzusehen und herauszufinden, ob diese Dateien von CSS oder JavaScript stammen (achte auch darauf, von wo sie geladen werden).

Kritisches CSS lädt Above-the-Fold CSS schneller und die meisten Cache-Plugins verfügen über entsprechende Einstellungen. Du kannst einen Generator für kritisches CSS verwenden, aber das ist nicht empfehlenswert, da kritisches CSS je nach Seite/Post unterschiedlich sein kann und sich ändert, wenn du CSS-Änderungen vornimmst, bei denen kritisches CSS aktualisiert werden muss.

Durch die Verschiebung von JavaScript werden JavaScript-Dateien in die Fußzeile verschoben, so dass sie ohne Rendering-Blockierung geladen werden. Auch hierfür haben die meisten Cache-Plugins eine Einstellung. Wenn die Aktivierung dieser Einstellung deine Website beeinträchtigt, solltest du wirklich versuchen, problematische Dateien auszuschließen, anstatt die Einstellung vollständig zu deaktivieren.

Autoptimize und Async JavaScript sind ebenfalls gut für den Umgang mit Render-Blocking-CSS/JS geeignet. Eine ausführliche Anleitung in den Chrome Dev Tools findest du bei 6:27 in Googles Video zur Verbesserung der Ladeleistung.

7. Verwende Font-Display: Optional

Schriftarten führen zu Verzögerungen, wenn sie nicht richtig geladen werden, was die LCP erhöht und Layout Verschiebungen verursacht. Es ist oft ein Kompromiss zwischen FOIT (Blitz von unsichtbarem Text) oder FOUT (Blitz von ungestyltem Text).

Wenn du sicherstellen musst, dass der Text während des Ladens der Webfont sichtbar bleibt, verwende font-display: optional, was von Google empfohlen wird. Die meisten Tools unterstützen nur „Swap“, wie Cache-Plugins, Elementor und sogar spezielle Schriftarten-Plugins wie OMGF und Swap Google Fonts Display. Du kannst entweder nur die Swap-Methode verwenden oder font-display: optional verwenden, indem du das CSS deiner Schriftart bearbeitest und den Code selbst hinzufügst. Das einzige, mir bekannte Plugin, das optional unterstützt, ist WP FOFT Loader.

/assets/vendor/googleapis/css2?family=Lato:wght@100&display=optional

@font-face {
font-family: "Lato Regular";
font-weight: 300;
font-style: normal;
src: url("fonts/Lato-Regular-BasicLatin.woff2") format("woff2");
font-display: optional;
}

8. Verringere Font-Anforderungen und Dateigrößen

LCP ist die Ladezeit deines Hauptinhalts, zu dem die Schriften gehören.

Schriftart-Optimierung 101

• Verwende WOFF/WOFF2, nicht TTF.
• Konsolidiere Schriftfamilien, Schnitte und Symbole.
• Deaktiviere Schriftsymbole, wenn du sie nicht verwendest.
• Hoste Schriftarten lokal (statt auf fonts.gstatic.com).
• Wenn sie von fonts.gstatic.com geladen werden, schalte diese Domain vor.
• Wenn sie lokal gehostet werden, lade wichtige Schriftdateien vor, die oberhalb des Falzes geladen werden.
• Inline-Schriften (einige Cache-Plugins tun dies oder verwende das Inline-Experiment von Elementor).

9. Lazy Rendering von HTML-Elementen

FlyingPress und LiteSpeed Cache können HTML-Elemente „lazy“ rendern.

Dies ähnelt dem Lazy Loading von Bildern, kann aber für jedes beliebige Element auf deiner Website durchgeführt werden (#comments und #footer sind häufig, stelle einfach sicher, dass du die Selektoren für deine eigene Website kopierst, wie im Video gezeigt). Es verbessert LCP, indem es den Browsern erlaubt, sich mehr auf den Inhalt oberhalb der Faltung zu konzentrieren.

10. Preload, Preconnect und Prefetch

Abgesehen von der Priorisierung von Bildern oberhalb der Faltung, kannst du auch andere Dateien mit Ressourcenhinweisen priorisieren. Dies kann in den meisten Optimierungs-Plugins oder durch Hinzufügen von Code zu deinem Head erfolgen.

Der Abschnitt „Vermeide die Änderung kritischer Anfragen“ des PSI zeigt Ressourcen an, die mit hoher Priorität geladen werden. Du solltest auch das Vorladen von selbst gehosteten Schriftarten und CSS/JS-Dateien in Betracht ziehen, die für „above the fold“-Inhalte benötigt werden. Stelle sicher, dass du deine Ergebnisse (in deinem Wasserfalldiagramm) nach dem Hinzufügen jedes Ressourcenhinweises testest. Zu viele Hinweise oder deren falsche Verwendung können die Leistung beeinträchtigen.

Vorladen – kann auch mit „above the fold“-Schriften, CSS, JS und anderen Dateitypen durchgeführt werden. Zum Beispiel könntest du das WordPress Block Library Stylesheet vorladen. Schriftarten sollten das Crossorigin-Attribut verwenden. Wie bei allen Ressourcen-Hinweisen solltest du die Leistung nach dem Hinzufügen jedes Hinweises testen.

<link rel="preload' href="/style.css" as="style">
<link rel="preload' href="/script.js" as="script">
<link rel="preload' href="/font.woff2" as="font" crossorigin>

Preconnect – wird normalerweise nur bei CDN-URLs (z. B. BunnyCDN) und Schriftarten von Drittanbietern (z. B. fonts.gstatic.com) verwendet. Cloudflare verwendet keine CDN-URL und die meisten Cache-Plugins verbinden die CDN-URL automatisch vor, wenn du sie zu den Plugin-Einstellungen hinzufügst. Da Schriftarten lokal gehostet werden sollten und CDN-URLs von Cache-Plugins vorverknüpft werden, ist dies normalerweise nicht erforderlich.

<link rel="preconnect" href="/assets/vendor/gstatic" crossorigin>
<link rel="preconnect" href="https://cdn.yourdomain.com" crossorigin>

Prefetch – hier gibt es normalerweise nichts zu tun, es sei denn, du hast Code von Drittanbietern, der oberhalb der Falz geladen wird, wie z. B. ein Social-Sharing-Plugin, das am Anfang deines Blogs geladen wird und Anfragen an Facebook stellt. Code von Drittanbietern sollte verzögert werden, wenn er unterhalb der Falz geladen wird, anstatt den Prefetch-Hinweis zu verwenden.

<link rel="dns-prefetch" href="https://connect.facebook.net">

11. Bilder Optimierung

Während die Bilder oberhalb der Faltung am wichtigsten sind, um die größte inhaltsreiche Farbe zu optimieren, sind natürlich alle Bilder wichtig. Die meisten von ihnen sind Empfehlungen in PageSpeed Insights.

Ich bevorzuge Bild CDNs, wie Cloudflare Mirage + Polish (was ich mit Cloudflare Enterprise verwende) oder Bunny Optimizer, die die Notwendigkeit für Bildoptimierung Plugins beseitigen und sind automatisch.

• Kleinere Bilder für Mobilgeräte bereitstellen – Cloudflare’s Bildgrößenanpassung und Bunny Optimizer passen die Größe von Bildern für Mobilgeräte an, während andere CDNs wie RocketCDN dies nicht tun. Oder du kannst ShortPixel Adaptive Images verwenden. Dies kann dein mobiles LCP-Ergebnis verbessern.
• Richtige Größe der Bilder – Schneide Bilder auf die richtige Größe zu.
• Komprimiere Bilder – Lighthouse testet Bilder mit 85%, das ist ein guter Wert.
• Gebe die Bildabmessungen an – die meisten Cache-Plugins verfügen über eine Einstellung zum Hinzufügen fehlender Bildabmessungen. Andernfalls kannst du dem HTML-Code des Bildes manuell ein Breiten-/Höhenattribut hinzufügen, wodurch das Bild schneller geladen wird und Layoutverschiebungen verhindert werden.
• Verwende WebP – ein schnelleres Bildformat, das von den meisten Bild-CDN/Plugins unterstützt wird. Du kannst sogar einen WebP-Konverter verwenden, um nur Bilder zu konvertieren, die oberhalb der Falz liegen, wenn du noch nicht ganz umsteigen willst. Wenn du WebP nicht verwendest, solltest du wissen, wann du jpg oder png verwenden solltest.

12. Verwende nach Möglichkeit Brotli

Brotli komprimiert Dateien auf eine kleinere Größe als GZIP. Der Trick ist, einen Hoster zu finden, der es unterstützt, zum Beispiel Rocket.net und Kinsta. Erkundige dich bei deinem Hoster und ziehe dies für deinen nächsten Schritt in Betracht.

13. Cache Ablaufzeit erhöhen

Längere Cache-Ablaufzeiten verhindern, dass der Server den Cache so häufig neu aufbauen muss, und verbessern LCP durch bessere Cache-Trefferraten. Google schlägt dies auch in einem YouTube-Video über LCP vor.

Wenn du Cloudflare verwendest, kannst du dies unter Browser-Cache-TTL in den Caching-Einstellungen tun. Google empfiehlt 1 Jahr, um „statische Assets mit einer effizienten Cache-Politik zu bedienen“. Dies ist gut für statische Websites (wie mein Blog), aber WooCommerce und dynamische Websites sollten nur etwa 1 Monat verwenden.

14. Wähle das richtige Cache-Plugin und die richtigen Einstellungen

Auch wenn ich versuche, die Dinge unvoreingenommen zu betrachten, ist FlyingPress eindeutig besser bei der Optimierung von LCP als WP Rocket und SiteGround Optimizer. Gijo ist in der Regel der erste, der neue Funktionen veröffentlicht, die sich mit zentralen Webfunktionen, wie der Verzögerung von JavaScript oder dem Hinzufügen von Fetchpriorität befassen. Manchmal folgt WP Rocket, aber manchmal fügen sie auch gar keine Funktion hinzu. SiteGround Optimizer hinkt beiden weit hinterher und optimiert in erster Linie für das Caching und nicht für zentrale Webfunktionen (mit vielen Kompatibilitätsproblemen).

WP Rocket hat keine Bildoptimierung, ihr CDN hat keine anderen Funktionen als die Bereitstellung von Dateien, keine dokumentierte APO-Kompatibilität (immer noch) und viel zu viele fehlende Funktionen, um weiter dafür zu bezahlen.

Verwende FlyingPress oder LiteSpeed Cache, nicht WP Rocket oder SiteGround Optimizer.

Ich habe Anleitungen für fast jedes Cache-Plugin.

LCP Optimization	SG Optimizer	WP Rocket	FlyingPress
Preload critical images	x	x	✓
Exclude leading images	x	x	✓
Fetchpriority resource hint	x	x	✓
Remove unused CSS	x	Inline	Separate file
Critical CSS	x	✓	✓
Font-display: swap	x	✓	✓
Lazy render HTML elements	x	x	✓
Documented APO compatibility	x	x	✓
CDN	SiteGround CDN	StackPath	BunnyCDN
Image optimization via CDN	x	x	✓
Serve small images to mobile via CDN	x	x	✓

15. Aktiviere Signed Exchanges (SXGs) in Cloudflare

Signed Exchanges verbessern den Largest Contentful Paint, wenn Personen auf deine Links in Googles Suchergebnissen klicken (durch Prefetching). Google listet Cloudflare in seiner Dokumentation auf und sagt, dass die Aktivierung dieser Funktion zu einer erheblichen Verbesserung führen kann. Du findest dies unter Geschwindigkeit → Optimierung.

16. Verwendung von Cloudflare Workers für serverloses Rendering

Philip Walton konnte mit Service Workern die LCP um etwa 80 % reduzieren.

Cloudflare hat eine Dokumentation über die Bereitstellung einer statischen WordPress Installation die hauptsächlich für Entwickler gedacht ist (zu denen ich mich nicht zähle), aber ich lasse sie hier, falls du sie ausprobieren möchtest.

Ich bin ein Blogger, ich kenne meine Grenzen :/

17. Plugin-Inhalte, Werbung und Animationen unter den Falz verschieben

Ich möchte betonen, dass große, nicht optimierte Dateien, die oberhalb des Falzes geladen werden, die LCP erhöhen.

Das Laden von Google AdSense in den Header, umfangreiche Bildergalerien oder Animationen am Anfang des Inhalts, Mega-Menüs und Social Sharing Plugins am Anfang des Blogs ist normalerweise keine gute Idee. Sicherlich kannst du sie optimieren, aber wenn du das nicht kannst und sie deinen LCP oder andere Werte zerstören, solltest du versuchen, sie unter die Falz zu verschieben, damit sie verzögert oder auf andere Weise optimiert werden können.