Die 16 Schritte zur Verbesserung des First Contentful Paint in WordPress (Core Web Vitals)

Bei WordPress Webseiten beginnt die Verbesserung des First Contentful Paint (FCP) mit der Behebung der wichtigsten Probleme in deinem Lighthouse Report.

Dies kann die Optimierung von Schriftarten, TTFB, Bildern, CSS, JavaScript und Code von Drittanbietern umfassen. Einige Plugins, die FCP verbessern können, sind: Autoptimize, Asset CleanUp, Perfmatters und Cache-Plugins. Wenn du diese optimierst, sollte sich auch dein FCP verbessern.

Laut Google misst FCP wie lange der Browser braucht, um das erste Stück DOM-Inhalt zu rendern, nachdem ein Nutzer auf deine Seite navigiert ist. Google bewertet den FCP als „grün“, wenn er zwischen 0 und 2 Sekunden liegt.

First Contentful Paint	Ergebnis
0-2s	Gut
2-4s	Verbesserungsbedarf
Über 4s	Schlecht

Lasse deine Website durch Lighthouse oder PageSpeed Insights laufen und suche nach Möglichkeiten, die sich besonders auswirken und beziehe dich dann auf diese spezifischen Punkte in diesem Leitfaden. Alle sollten helfen den First Contentful Paint zu verbessern.

1. Beseitige Render-Blocking-Ressourcen

Die Beseitigung von Render-Blocking-Ressourcen ist das erste, was Google zur Verbesserung des ersten Contentful-Anstrichs empfiehlt, und das beginnt in der Regel mit der Verschiebung von JavaScript.

Autoptimize und Async JavaScript können JavaScript besser aufschieben als Cache-Plugins. Ich hatte die JavaScript-Lastverschiebung bereits in WP Rocket aktiviert, hatte aber immer noch viele Rendering-Blocking-Probleme in PageSpeed Insights. Nach der Installation der Autoptimize- und Async-JavaScript-Plugins war dieser Punkt grün und nur noch eine Ressource auf meiner WordPress-Website blockiert den Rendervorgang.

Die Lösung in WordPress

• Installiere Autoptimize und Async JavaScript.
• Aktiviere in Autoptimize die Option „CSS/JS optimieren + aggregieren“.
• Klicke unter Async JavaScript auf „apply defer“ und setze die JavaScript-Methode auf async.

2. Ungenutzte CSS- und JavaScript-Dateien entfernen

Große CSS- und JavaScript-Dateien können den ersten Contentful-Paint verlangsamen.

Kontaktformulare, Schieberegler und andere Dinge können auf deiner gesamten WordPress-Website geladen werden, auch wenn sie nicht verwendet werden. Mit Asset-Entlade-Plugins wie Asset CleanUp und Perfmatters kannst du CSS- und JavaScript-Dateien auf jeder Seite/jedem Beitrag anzeigen und sie dann dort deaktivieren, wo sie nicht verwendet werden.

Du kannst sogar Assets von Elementor und anderen Page Buildern entladen.

Wähle zunächst ein Plugin zum Entladen von Assets aus. Das UI/UX von Perfmatters ist besser, aber es ist auch ein Premium-Plugin (ich verwende es).

Die Lösung in WordPress

• Reduziere CSS und JavaScript.
• Vermeide umfangreiche Seitenerstellungsprogramme, die viel zusätzliches CSS und JavaScript hinzufügen.
• Entferne ungenutztes CSS und JavaScript mit einem Asset Unloading Plugin.
• Deaktiviere WooCommerce-Skripte und -Stile sowie nicht-eCommerce-Inhalte.
• Aktiviere die optimierte DOM-Ausgabe und das verbesserte Laden von Assets in Elementor.
• Entferne ungenutzte CSS mithilfe von RapidLoad (Premium-Plugin von Autoptimize).
• Entferne ungenutzte CSS mithilfe von Tools (PurifyCSS, Unused-CSS, UnCSS, PurgeCSS).

3. Nutze Preload und Preconnect

Preload und Preconnect sind Browser-Ressourcen-Hinweise, die den Code von Drittanbietern, Schriftarten, Skripte, Stile und andere Ressourcen beschleunigen.

Was ist ein Preload?

Preload kann in WP Rocket durchgeführt werden, aber es erlaubt nur das Vorladen von Schriftarten (die häufigste Ressource für Preload). Das Vorladen anderer Ressourcen kann in Perfmatters, mit Hinweis Plugins wie Pre* Party Resource Hints oder durch manuellen Code erfolgen. Google teilt dir in der Regel im Bericht „Preload Key Requests“ von PageSpeed Insights mit, welche Schriftarten vorgeladen werden sollen (oder überprüfe den Reiter „Schriftarten“ in GTmetrix Waterfall). Verwende beim Vorladen von Schriftarten immer Crossorigin.

Was ist Preconnect?

Preconnect wird in der Regel nur bei wichtigen Domänen von Drittanbietern wie Google Fonts (/assets/vendor/gstatic) und CDNs (https://cdn.domain.com) verwendet. Dies stellt eine frühe Verbindung zum Ursprung her und sollte, wie Google in ihrem PSI-Bericht erwähnt, sparsam eingesetzt werden.

4. Teste Cloudflare’s Rocket Loader

Wenn du Cloudflare verwendest, kann Rocket Loader manchmal den ersten zufriedenstellenden Anstrich deiner Website verbessern. Ich sage „manchmal“, weil es auch einen negativen Effekt haben kann – du könntest es wochenlang benutzen und eines Tages bricht deine Website zusammen. Verwende ihn mit Vorsicht und behalte ihn auf der Liste der möglichen Probleme, wenn du deine Geschwindigkeit testest. Dadurch wird das Laden all deiner JavaScript-Dateien bis nach dem Rendering aufgeschoben.

5. Reduziere TTFB

TTFB und Hosting gehen Hand in Hand.

Google kennzeichnet TTFBs über 500ms, aber empfiehlt 200ms.

Billiges, gemeinsam genutztes Hosting ist fast immer die Ursache für langsame TTFBs. GoDaddy, Bluehost, HostGator sind alle Budget-Hosting mit langsamen TTFBs. Sogar SiteGound hat langsame TTFBs. Dies wirkt sich zunächst auf den Inhalt aus, da dein Server deine Inhalte bereitstellt (natürlich). Ich empfehle immer, der Hosting WordPress Facebook-Gruppe beizutreten, um unvoreingenommene Meinungen zu erhalten.

Das schnellste Hosting ist von Rocket.

Doch Cloudways wird von den die meisten Leute in dieser Gruppe empfohlen und war in 18 Facebook-Umfragen die Nummer 1 unter den Hostern. Du kannst auch viele Leute sehen, die zu Cloudways gewechselt sind und schnellere Ladezeiten gemeldet haben.

Es ist eine gute Idee, das Shared Hosting zu überspringen und direkt zu Cloudways zu wechseln. Viele Hoster bieten kostenlose Testversionen an, damit du dein TTFB mit deinem bisherigen Hoster vergleichen kannst. Viele Cloud-Hoster bieten auch kostenlose Migrationen an.

6. Aktiviere Server-Level-Caching

Viele Hoster (Cloudways, SiteGround, LiteSpeed, Kinsta und andere) verwenden Caching auf Serverebene, das in deinem Hosting-Account aktiviert werden kann.

Dies ist schneller als das dateibasierte Caching der meisten Cache-Plugins und sollte von dir genutzt werden. Möglicherweise verfügt dein Hoster über andere Arten von Caching (z. B. Redis, memcached), die die erste inhaltliche Darstellung beschleunigen und gleichzeitig die Ergebnisse und Ladezeiten in Geschwindigkeitstests verbessern können.

7. Kritisches CSS generieren und einbinden

Einige Plugins wie WP Rocket generieren kritisches CSS und binden es für dich ein.

Andernfalls kannst du zb. ein kostenloses Tool zum Generieren kritischer CSS verwenden, das FOUC (Flash of Unstyled Text) verhindert. Der nächste Schritt wäre das Inlinen. Da der Browser nicht auf das CSS warten muss, kann er schneller mit dem Rendering deiner Seite beginnen, was auch die erste inhaltliche Darstellung verbessert.

Manchmal funktioniert die Auslieferung von CSS nicht, auch wenn sie in deinem Cache-Plugin aktiviert ist. Suche nach „rocket-critical-css“ in deinem Quellcode (oder ähnlichem), um sicherzustellen, dass es funktioniert. Möglicherweise musst du kritisches CSS neu generieren oder kritisches Fallback-CSS einstellen, wofür du PurifyCSS verwenden könntest. Wenn dies zu Problemen auf deiner Website führt, schließe Dateien von der CSS-Auslieferung aus, indem du das Hilfs-Plugin von WP Rocket verwendest.

8. Fehler in GTmetrix Waterfall beheben

4xx- und 5xx-errors in GTmetrix Waterfall weisen auf einen Fehler hin.

Browser sind nicht in der Lage diese Anfragen abzurufen, aber sie können dennoch Blockierzeit (und fortgesetzte Versuche, sie abzuschließen) verursachen. Sie wirken sich auf den ersten Contentful-Paint, die Gesamtblockierungszeit und die Gesamtladezeiten aus, daher solltest du diese Fehler sofort beheben, wenn sie auftreten.

9. Harter Code für Kopfzeile und Menü

Wenn es um das erste inhaltsreiche Bild geht, sind Kopfzeilen und Menüs eines der ersten Dinge, die deine Besucher sehen.

Das Erstellen von Menüs mit Hilfe von Page Buildern, schweren Plugins oder Hamburger-Menüs wird deinen FCP in Mitleidenschaft ziehen. Im nächsten Abschnitt erzähle ich, wie ich einen Entwickler beauftragt habe Elementor zu entfernen und es durch Gutenberg zu ersetzen. Er begann damit, dass er den Header, das Menü, den Footer und die Blog-Seitenleiste hart kodierte. Dies führte zu einer enormen Verbesserung der Webvitalität und beim Klicken durch meine Seiten. Auch wenn du deinen Page Builder nicht vollständig entfernen möchtest, solltest du diese Bereiche fest codieren.

10. Verwende leichtgewichtige Themes und Page Builder

Es gibt einen großen Trend weg von schweren Page Buildern (insbesondere Elementor und Divi) hin zu leichteren Alternativen wie Gutenberg, Oxygen Builder und GeneratePress.

Viele Seitenerstellungsprogramme wurden zerstört, als Core Web Vitals aufkam. Du kannst eine ganze Menge CSS und JavaScript hinzufügen und deine gesamte Website verlangsamen. Einige verfügen über Geschwindigkeitsoptimierungen, die du in den Einstellungen aktivieren kannst (Optimierung der DOM-Ausgabe und verbessertes Laden von Assets in Elementor sowie Minifizieren/Kombinieren von CSS und JavaScript in Divi). Aber das bringt normalerweise keine große Verbesserung.

Sicherlich ist es ein Klischee, „ein leichtgewichtiges Theme zu verwenden“, aber ich habe über 3.000 $ für einen Entwickler bezahlt, um Elementor zu entfernen und durch Gutenberg-Blöcke zu ersetzen. Tu dir selbst einen Gefallen und mache es von Anfang an.

11. JavaScript verzögert laden

JavaScript zu verzögern wurde von Gijo Varghese empfohlen, um den first contentful paint zu verbessern. Gijo ist der Entwickler vieler Speed-Plugins und Admin der WP Speed Matters Facebook-Gruppe.

Er ist der Ersteller von FlyingPress dem besten WordPress Speed Plugin.

Das Verzögern von JavaScript kann mit seinem Flying Scripts Plugin oder mit der Einstellung zur Verzögerung der JavaScript-Ausführung von WP Rocket geschehen. Unabhängig davon, für welche Methode du dich entscheidest, kannst du diese Standardliste von verzögertem JavaScript als Grundlage verwenden. Wenn du jedoch andere umfangreiche JavaScript-Dateien hast, die verzögert werden können, solltest du diese ebenfalls hinzufügen.

Zusätzlich zur Liste von WP Rocket solltest du auch die Verzögerung deiner Kommentare (z. B. Gravatars und wpDiscuz) sowie //cdnjs.cloudflare.com in Betracht ziehen, wenn du das CDN von Cloudflare verwendest.

12. Verwende ein leistungsfähiges CDN

Dein CDN und seine Konfiguration können sich auf den First Contentful Paint auswirken.

Cloudflare und StackPath (auch RocketCDN) können manchmal einen negativen Einfluss auf die Leistung haben. Deshalb solltest du deren Auswirkungen testen und nur dann ein CDN verwenden, wenn deine Besucher geografisch weit von Ihrem Ursprungsserver entfernt sind.

Ich empfehle im Allgemeinen BunnyCDN, das in Facebook-Gruppen sehr empfohlen wird. Wenn du Cloudflare verwendest, können die APO, die Seitenregeln, die Firewall und die Anpassung der Geschwindigkeitseinstellungen ebenfalls helfen.

13. Font-Display Swap hinzufügen

FOIT (Flash of Invisible Text) ist ein häufig auftretendes Problem mit Schriftarten und trägt zu deinem CLS bei.

Um sicherzustellen, dass der Text während des Ladens der Webfont sichtbar bleibt, stelle zunächst sicher, dass du die Schriftarten lokal auf deinem Server hostest und nicht auf Drittanbieterdomänen gehostet werden. Bearbeite dann die CSS-Datei deiner Schriftart und verwende font-display: swap. Möglicherweise hast du diese Option auf auto, block usw. gesetzt. Wenn du swap verwendest, sollte dieser Punkt in PageSpeed Insights behoben werden. Die Beseitigung von FOIT kann die erste inhaltliche Farbe verbessern.

Du kannst auch das Plugin Swap Google Fonts Display verwenden.

14. Verwende eine längere Cache-Ablaufzeit

Die Bereitstellung statischer Inhalte mit einer effizienten Cache-Richtlinie ist leicht zu beheben.

Google möchte, dass die Cache-Ablaufzeit auf 180 Tage (ca. 6 Monate) eingestellt wird, damit sie grün ist. Es ist jedoch wahrscheinlich, dass deine Schriftarten, Bilder und möglicherweise andere Dateien eine kurze Cache-Laufzeit haben. Wo du die Cache-Ablaufzeit einstellst, hängt von deinem Cache-Plugin, CDN und deiner Hosting-Einrichtung ab.

Die Lösungen mit WordPress

• Schaue dir deinen PSI-Bericht an und sehe, welche Dateien eine längere Verfallszeit benötigen.
• Wenn du Cloudflare verwendest, passe die TTL-Einstellung für deinen Browser-Cache auf 6 Monate an.
• Wenn du ein anderes CDN verwendest, setze den Ablauf des Browser-Caches ebenfalls auf 6 Monate.
• Wenn du WP Rocket verwendest, bearbeite .htaccess und passe die Cache-Ablaufzeiten auf 6 Monate an.
• Wenn du NGINX oder Apache verwendest, stelle den Ablauf des statischen Caches (oder ähnlich) auf 6 Monate ein.

15. Entferne große Skripte oberhalb des Falzes

Das Laden umfangreicher Dateien oberhalb der Falte sollte vermieden werden.

Werbung, Schaltflächen zum Teilen von sozialen Netzwerken und andere Dateien können deine erste inhaltsreiche Seite stark verlangsamen. Wenn du schwere Dateien unterhalb der Falz platzierst, können sie in der Regel dein JavaScript verzögern, Defer-Attribute verwenden und sie besser optimieren, als wenn du sie oberhalb der Falz platzieren.

16. Bilder oberhalb dem Falz vom Lazy Load ausschließen

Die Bilder ganz oben im Sichtbereich sollten vom Lazy Loading ausgeschlossen werden, da Besucher diese sofort sehen sollten. Dies gilt für dein Logo und andere Bilder, die oberhalb des Falzes erscheinen.

Du sollest Dateien, die sich oberhalb der Falz befinden (Bilder, JavaScript usw.), nicht verzögern. Bei vielen Caching- und Bildoptimierungs-Plugins kannst du in den Einstellungen bestimmte Bilder vom „Lazy Load“ ausschließen.

Teste deinen ersten Contentful-Anstrich erneut

Lasse deine WordPress-Website durch Lighthouse (idealerweise), PageSpeed Insights oder GTmetrix laufen und sieh dir deinen ersten Contentful Paint an. Denke daran, dass es 0-2 Sekunden sein sollte, wenn du willst, dass es grün ist.

Wenn du nicht gefunden hast, wonach du suchst, findest du hier Vorschläge von Facebook-Gruppen:

Häufig gestellte Fragen

Hoffentlich konnte ich dir weiterhelfen!

Grüße!

Joe