dowebwork logo
In diesem Beitrag werbe ich unabhängig für Produkte. Wenn jemand ein von mir beworbenes Produkt anklickt, kann ich eine Vergütung erhalten.
Home Guides Largest Contentful Paint in WordPress: Fortgeschrittene Anleitung zur deutlich sichtbaren Verbesserung deines LCP-Scores (17 Schritte)

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.

largest contentful paint wordpress

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 PaintErgebnis
0 – 2.5sGut
2.5 – 4sVerbesserungsbedürftig
Über 4sSchlecht

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.

Kredit: Googles LCP-Aufschlüsselung
Credit: Googles LCP Aufschlüsselung

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

LCP TeilbereicheFaktorenLCP
TTFBHauptsächlich Hosting und CDNs + vollständiges Page Caching~40%
Verzögerung der RessourcenauslastungAusschluss von Above-the-Fold-Inhalten von Optimierungen, Ressourcenhinweisen<10%
Ladezeit der RessourcenBild/CSS/JS-Größen reduzieren, kritisches CSS, CDN, Cache-Ablauf~40%
Element Rendering VerzögerungRender-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.

Bilder vom Lazy-Load ausschließen

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

Largest contentful paint element

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.

Preloading critical images

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

Exclude leading bilder von lazy-loading

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.

FlyingPress fetchpriority resource hint

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.

„Um unnötige Verzögerungen beim Laden von Ressourcen zu vermeiden, sollte deine LCP-Ressource immer in der HTML-Quelle auffindbar sein. In Fällen, in denen die Ressource nur von einer externen CSS- oder JavaScript-Datei referenziert wird, sollte die LCP-Ressource vorgeladen werden.“

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.

unbenutztes css in chrome developer tools

Zusammenfassung

  • Themes – das Letzte, was du tun möchtest ist, mit einem aufgeblähten Theme/Seitenersteller zu beginnen und mehrere schwere Seitenersteller-Plugins zu installieren. Elementor/Divi sind notorisch langsam, während Gutenberg leichtgewichtig ist. GeneratePress, Blocksy, Kadence für den Sieg.
  • Plugins – der Abdeckungsbericht zeigt, welche Plugins das meiste CSS/JavaScript hinzufügen. Versuche, von Plugins abhängige Inhalte, wie Social-Sharing-Plugins und Bildergalerien unter den Falz zu verschieben. Mega-Menüs sind schrecklich für LCP, da sie nicht nur CSS/JS hinzufügen, sondern es auch oberhalb der Falz auf jeder einzelnen Seite deiner Website hinzufügen.
  • Entferne ungenutztes CSS – WP Rocket ist langsamer als FlyingPress, Perfmatters und LiteSpeed Cache, da es verwendetes CSS inline statt in einer separaten Datei lädt. Eine separate Datei ist für Besucher schneller, da die Datei zwischengespeichert werden kann und die HTML-Größe nicht erhöht.
  • Minify – entfernt unnötige Zeichen aus CSS/JS, was die Dateigröße reduziert.
  • Code von Drittanbietern – beginne damit, Dateien lokal zu hosten (Schriftarten, Analysen, Verwendung lokaler Avatare für Kommentare, YouTube-Vorschaubilder und Thumbnails usw.). Der Rest des Codes von Drittanbietern kann in der Regel verschoben werden. Ein häufiger Grund für diese Fehlermeldung in der PSI ist das Overtracking. Brauchst du wirklich Google Analytics, Tag Manager, Heatmaps, Facebook Pixel, New Relic und andere Tracking-Tools? Ziehe in Erwägung, einige von ihnen zu entfernen. Perfmatters leistet hervorragende Arbeit bei der Reduzierung der Größe von GA-Tracking-Codes.
  • Plugins zum Entladen von Assets – Perfmatters und Asset CleanUp sind zwei beliebte Plugins zum Entfernen einzelner CSS/JS-Dateien (oder ganzer Plugins) für bestimmte Inhalte.
  • Optimierungen des Page Builders – Elementor Experiments und die integrierten Leistungseinstellungen von Divi bieten mehrere Optionen zur Reduzierung der Größe von CSS, JS und Schriftarten.
  • Kopfzeile in CSS kodieren – Verwende keine langsamen Page Builder (oder Plugins) für deine Kopfzeile oder Menüs. Programmiere sie stattdessen in CSS. Das ist viel schneller als ein aufgeblähter Seitenerstellungscode.
  • Entferne Dateien, die du nicht verwendest – Icons, Gutenberg-CSS, jQuery, Emojis, Elementor-Dialog und andere einzelne Dateien können entfernt/eingestellt werden, wenn du sie nicht verwendest.
schnellste wordpress frameworks/themes
Einige Themes/Seitenerstellungsprogramme laden mehr Ressourcen als andere
Social Media Sharing Plugins deaktivieren
Einige Plugins laden CSS/JS auf Ihrer gesamten Website, obwohl sie auf bestimmten Seiten/Beiträgen deaktiviert werden können
elementor einstellungen um code schneller zu laden
Page Builder haben oft built-in Einstellungen zum Reduzieren von CSS/JS

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).

12 Dinge, die du über Hosting/TTFB wissen solltest

  1. Das Hosting ist der #1 Faktor für die Geschwindigkeit einer Website.
  2. TTFB ist ein Schlüsselindikator für die Hosting-Leistung.
  3. TTFB ist Teil der zentralen Webvitalen und macht 40 % des LCP aus.
  4. TTFB wirkt sich auch auf INP aus (da die Latenzzeit Teil von TTFB ist).
  5. SpeedVitals testet TTFB an 35 Stellen – nutze dieses Tool!
  6. Teste deine Website 3 mal, um genaue Zahlen in SpeedVitals zu erhalten.
  7. Damit stellst du sicher, dass dein Caching und CDN richtig funktionieren.
  8. Prüfe deinen durchschnittlichen TTFB weltweit in deinem 3. SpeedVitals-Test.
  9. Google kennzeichnet deinen TTFB, wenn er über 600 ms liegt, aber unter 200 ms ist besser.
  10. PageSpeed Insights (und andere Test-Tools) testen TTFB nur an einem Standort.
  11. WP Hosting Benchmark testet auch die Hosting-Leistung.
  12. Die Kombination eines guten Hosts/CDN ist wohl der beste Weg, um TTFB zu verbessern (die Verwendung eines Hosts mit verbesserten Spezifikationen zusätzlich zu Cloudflare Enterprise schlägt zwei Fliegen mit einer Klappe).

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.

Kinsta To Rocket.net Migration
Moved to Rocket.net vs SiteGround 1
Rocket.net positive review
Rocket.net Facebook Review 1
Rocket.net vs Kinsta
Kinsta to Rocket.net TTFB Redis
Hostingvergleich NameHero Cloudways Rocket.net
Ich stimme dem größtenteils zu

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).

RAM litespeed hosting vergleich
litespeed cache webserver vorteile
CPU litespeed hosting vergleich
Wechsel von Siteground zu Namehero

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.

WP Rocket critical CSS 1
Prüfen Sie die Dokumentation, um sicherzustellen, dass kritisches CSS funktioniert

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).

FOIT vs FOUT
Quelle: malthemilthers.com

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;
}
Elementor Google Fonts Swap

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).
Die Schriften meiner Webseite lokal laden

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.

lazy render von HTML Dateien

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.

einstellung um kritische anfragen zu vermeiden

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.
Bild Gechwindigkeits Optimierung

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.

Brotli cPanel

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.

Cloudflare Browser Cache TTL

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.

Cloudflare Automatic Signed

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 :/

Cloudflare Workers
Beispiele

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.

perfmatters javascript verzögert laden
Das Laden von Plugins und Code von Drittanbietern unterhalb des Falzes kann verzögert werden

Wie verbessere ich die größte inhaltsreiche Farbe in WordPress?

LCP kann durch die Optimierung von Inhalten oberhalb der Faltung, die Beseitigung von Verzögerungen und die Reduzierung/Optimierung von Dateien und TTFB verbessert werden. Da LCP die Ladezeit des Hauptinhalts im Viewport misst, gibt es viele Faktoren.

Wie verbessere ich mit WP Rocket den größten Contentful Paint?

WP Rocket optimiert LCP mit Funktionen wie kritisches CSS, Schriftart-Display-Swap und Entfernen von ungenutztem CSS. Allerdings fehlt es an LCP-Optimierungen, wie der automatischen Optimierung von Above-the-Fold-Bildern, Fetchpriority-Hinweisen und der Auslieferung kleinerer Bilder an mobile Geräte. Diese Funktionen wurden bereits in anderen Cache-Plugins oder deren CDNs hinzugefügt, nicht in WP Rocket.

author image
Ich biete meinen Service an, deine Webseiten-Geschwindigkeit für Dich zu verbessern.
Meine Empfehlung

Ich verwende Rocket.net mit kostenlosem Cloudflare Enterprise und du kannst dich durch meine Website klicken, die Antwortzeit meines Servers testen oder meinen Rocket.net Erfahrungen lesen.

Meine WordPress-Hilfe

Autor Joe Speedmaster
Joe Speedmaster

Joe ist Inhaber und Chefredakteur. Er beschreibt sich selbst als WordPress Nerd der PageSpeed Optimierung. Mit +5 Jahre Erfahrung im Bereich WordPress, CDN, Hosting und Webentwicklung ist Joe nebenberuflich als Freelancer und Publisher tätig. Mit ehrlichen Erfahrungsberichten möchte er maximalen Mehrwert für seine Leser generieren.

Reviews
Rated 0,0 out of 5
0,0
0 global ratings
5 Stars0%
4 Stars0%
3 Stars0%
2 Stars0%
1 Star0%

Bewertung schreiben

Teile deine persönliche Erfahrung

Schreibe eine Bewertung