8 umsetzbare Möglichkeiten zur Verbesserung von FCP in WordPress

In diesem Artikel werden mehrere einfache Möglichkeiten behandelt, mit denen Sie Ihr FCP oder First Contentful Paint in WordPress verbessern können. Durch die Verbesserung dieser Leistungsmetrik wird Ihre WordPress-Website eine bessere Benutzererfahrung haben, bei Google höher eingestuft und merklich schneller geladen werden. Lassen Sie uns zunächst kurz durchgehen, was FCP ist, und dann einige einfache Möglichkeiten zur Verbesserung dieser Metrik auf Ihrer WordPress-Website diskutieren.

Was ist FCP?

FCP, auch bekannt als First Contentful Paint, ist eine Statistik, die von echten Benutzern über den Chrome-Benutzererfahrungsbericht gesammelt wurde. Dies ist eines der realistischeren Maße für die Benutzererfahrung in der realen Welt. Es soll messen, wie einzelne Besucher und Benutzer die Leistung einer Website wahrnehmen. Es ist auch eine der ersten von vielen Geschwindigkeitsstatistiken, die Google in seiner Website-Vergnügungskampagne verwenden wird, die darauf abzielt, die Benutzererfahrung für Verbraucher auf allen Websites zu verbessern.

The First Contentful Paint ist die erste Instanz des Renderns visueller Inhalte für den Endbenutzer. In diesem Beispiel tritt FCP im zweiten Frame auf und ist das erste Inhaltselement, das für den Benutzer gerendert wurde. Ein schnellerer FCP stellt sicher, dass der Benutzer auf Ihrer Website bleibt, bis der gesamte Inhalt geladen ist, da die wahrgenommene Zeit für das Laden dieses Inhalts viel schneller ist.

Wie wir in unserer ausführlichen Beschreibung von FCP und LCP angegeben haben, sollten Sie verstehen, dass sich dies je nach Website und spezifischer Seite ändert. Ihr FCP kann also auf einer Seite das eine und auf der anderen Seite etwas anderes sein. Dies macht den Optimierungsprozess etwas komplizierter, aber solange Sie verstehen, was FCP ist, und die in diesem Artikel beschriebenen Methoden befolgen, sollten Sie startklar sein.

Denken Sie daran, dass Google diese Metriken ab März 2021 als ernsthafte Ranking-Indikatoren verwenden wird. Es ist also in Ihrem besten Interesse, Ihren First Contentful Paint vor diesem Zeitpunkt herauszufinden.

Erste zufriedene Farbe testen und verstehen

Das Verstehen und Testen Ihrer First Contentful Paint-Metriken ist sehr einfach. Alles, was Sie verwenden müssen, ist das Pagespeed-Tool von Google. Geben Sie einfach Ihre URL ein, und eine der ersten Metriken sagt Ihnen in Sekundenschnelle, wie schnell Ihre Website geladen wird.

Eine Website, die in Bezug auf FCP in weniger als einer Sekunde geladen wird, wird als schnell eingestuft, eine Website, die in weniger als 3 Sekunden FCP lädt, wird als moderat bezeichnet, und eine Website, die einen First Contentful Paint von drei Sekunden oder mehr aufweist, wird als langsam bezeichnet. Wie Sie sehen können, gibt es hier nicht viel Spielraum, und Sie brauchen definitiv einen FCP, der viel schneller als 3 Sekunden ist, um bei Google gut zu ranken.

Die gute Nachricht ist, dass die Verbesserung Ihres First Contentful Paint auf WordPress mehrere umsetzbare Methoden hat, die eine sofortige und dauerhafte Verbesserung bewirken. Die meisten dieser Lösungen beinhalten Plugins, die den Optimierungsprozess für Sie automatisieren und die FCP-Optimierung auf WordPress viel einfacher machen.

Lassen Sie uns also nach dieser FCP-Einführung verstehen, wie wir diese Metrik verbessern können. Selbst wenn Sie einen guten FCP haben, könnte eine Verbesserung auch nur um Millisekunden Ihre Benutzererfahrung verbessern und direkt zu höheren Conversions und einer niedrigeren Absprungrate auf Ihrer WordPress-Website führen.

Konzentrieren Sie sich auf die Zeit bis zum ersten Byte

Das erste und umsetzbarste, was Sie tun können, um Ihre FCP-Zeit zu reduzieren und diese Punktzahl zu erhöhen, wäre, sich auf Ihre Zeit bis zum ersten Byte zu konzentrieren. Viele Websites haben eine sehr langsame TTFB oder die Zeit, die ein Browser benötigt, um den ersten Seiteninhalt zu empfangen. TTFB ist die Summe der Zeit, die benötigt wird, um die HTTP-Anforderung zu erhalten, diese Anforderung zu verarbeiten, und die Antwortzeit der HTTP-Anforderung selbst.

Einfach ausgedrückt: Wenn Ihre Website überdurchschnittlich lange braucht, um eine Verbindung zum Server herzustellen, wird das Rendern und Herunterladen von Inhalten für den Endbenutzer langsamer, was zu einem langsameren FCP führt.

Der FCP ist die erste Metrik, die angezeigt wird, also steht er fast in direktem Zusammenhang mit dem TTFB. Die zwei wichtigsten Möglichkeiten, wie Sie Ihre Zeit bis zum ersten Byte auf einer WordPress-Website verbessern können, nämlich die direkte Erhöhung Ihres First Contentful Paint-Scores, sind die Auswahl eines schnellen WordPress-Hosts und die Verwendung eines hochwertigen CDN.

Wenn Sie einen schnellen WordPress-Host haben, werden Daten viel schneller als normal an den Browser des Besuchers gesendet, was die TTFB erhöht. Wenn Sie einen Benutzer haben, der die Website von einem geografisch weit entfernten Standort in Bezug auf den Serverstandort lädt, erhöht die Verwendung eines CDN mit einem einzelnen Knoten, der physisch näher am Endbenutzer liegt, Ihren TFB erheblich und führt zu einem viel besseren First Contentful Paint Partitur.

Wenn wir einen guten WordPress-Host und CDN empfehlen, sagen wir immer, dass dies eine integrierte Lösung sein sollte. Sie sollten nicht nach einem einzelnen CDN und einem einzelnen WordPress-Host suchen, sondern nach einem sehr schnellen WordPress-Host, der ein CDN in seinen Dienst integriert. Das spart Ihnen nicht nur Geld, sondern ist auch viel weniger komplex und aufgrund der Integration wahrscheinlich schneller.

Das erste, was Sie tun können, um Ihren FCP zu verbessern, ist, sich einen guten Host anzusehen. Der beste Host, der über ein integriertes CDN (Cloudflare Enterprise, das eine automatische Plattformoptimierung beinhaltet) verfügt, ist Rocket.net.

Dies ist der WordPress-Host, mit dem wir unseren Blog für fast 100.000 Besucher pro Monat bereitgestellt haben, und aufgrund seiner Integration mit einem Premium-CDN und blitzschneller Hardware sowie einem Ganzseiten-Cache ist die TTFB unglaublich niedrig. was bedeutet, dass unser FCP nicht eingeschränkt ist.

Eliminieren Sie Render-Blocking-Ressourcen

Die nächste umsetzbare Sache, die Sie tun können, um Ihre FCP-Zeit zu minimieren, ist die Beseitigung von Ressourcen, die das Rendern blockieren. Render-Blocking-Ressourcen sind Elemente einer Website, in der Regel CSS und JavaScript, die während des Rendervorgangs Ihrer Webseite aufgerufen werden.

Da diese den Rendering-Prozess blockieren, muss der Browser warten, bis DOM-Elemente einem Besucher tatsächlich angezeigt werden, die Render-Blockierungsressource herunterladen, analysieren und dann mit dem Rendern der gesamten Seite fortfahren.

Wenn Sie davon ausgehen, dass dieses Blockieren des Renderings auch das First Contentful-Element blockiert, wäre dies richtig. Und je länger diese Ressourcen den Renderprozess blockieren, desto länger dauert es, das First Contentful-Element zu rendern, was zu einer höheren FCP-Zeitpunktzahl führt.

Der beste Weg, um Render-Blocking-Ressourcen zu eliminieren, ist die Verwendung eines Drittanbieter-Plugins namens Asset Cleanup, um JavaScript und CSS zu verzögern und asynchron zu laden. Sie können sogar verschiedene Skripte auf einer Webseite deaktivieren, wo sie nicht verwendet werden, wodurch ungenutztes CSS minimiert wird, worüber wir an späterer Stelle in diesem Artikel sprechen.

Kritisches Inline-CSS

Darüber hinaus können Sie durch Inlining von kritischem CSS das Laden Ihres Haupt-CSS-Stylesheets bis zum Ende des Rendering-Prozesses verschieben. Dies kann mit Asset Cleanup erfolgen, aber wir empfehlen auch die Kombination von WP Rocket, einem Caching- und Optimierungs-Plugin. Dies hat einen automatischen kritischen CSS-Generator und funktioniert sehr gut in Bezug auf das Entfernen von Ressourcen, die das Rendern blockieren.

Unbenutztes CSS eliminiert

Als nächstes würde, wie wir bereits angedeutet haben, unbenutztes CSS eliminiert werden. Wenn Sie ungenutzte Stile auf eine Webseite laden, können diese Renderblocker sein, aber sie machen Ihre Seite einfach schwerer, was zu mehr übertragenen Daten führt, was zu einem langsameren FCP führt.

Das Entfernen dieser nicht verwendeten CSS-Stylesheets ist eine großartige Möglichkeit, die übertragene Datenmenge zu minimieren und den Weg für das kritische First Contentful-Element freizumachen, das auf Ihrer Website gezeichnet werden kann. Dies wirkt sich direkt positiv auf den FC-Score aus.

Dafür gibt es keine automatisierte Software, aber es gibt ein Plugin, das Ihnen hilft, CSS von einzelnen Seiten und Seitenbereichen zu entfernen. Das ist Asset Cleanup, wie wir oben erwähnt haben, und es ermöglicht Ihnen, Stile und Skripte ein- und auszuschalten.

Sie können dann das Frontend Ihrer Website testen, um zu sehen, ob etwas kaputt geht, und wenn nicht, haben Sie unbenutztes CSS entfernt, was zu einer schnelleren Ladezeit der Website und einem besseren FCP-Score führt.

Skriptelemente „above the fold“ entfernen (wie JS-Anzeigen)

In Bezug auf den tatsächlichen Aufbau Ihrer Website ist das Entfernen von skriptbasierten Elementen, die sich „above the fold“ befinden, ein todsicherer Weg, um Ihren First Contentful Paint einer WordPress-Website zu verbessern. JavaScript kann so weit wie möglich optimiert werden, aber aufgrund seiner Zusammensetzung wird es immer langsamer zu rendern sein als reines HTML und Inline-kritisches CSS.

Wenn Sie also irgendein JavaScript haben, das als First Contentful Paint einer Webseite betrachtet wird (im Wesentlichen alles, was sich über der Falte befindet oder im anfänglichen Ansichtsfenster, das für den Besucher geladen wird), möchten Sie es auf jeden Fall loswerden und ersetzen mit reinem HTML.

Dies ist in der Regel ein Problem auf Content-Websites, die JavaScript-basierte Werbung verwenden, die „above the fold“ geladen wird. Diese Skripte können auch einen großen negativen Einfluss auf Ihre kumulative Layoutverschiebung haben.

Indem Sie sie durch schneller ladendes HTML ersetzen, werden Sie First Contentful Paint ernsthaft verbessern, nur aufgrund der Natur der HTML- und CSS-Technologie.

Lazy Load Above The Fold deaktivieren (verrückt, ich weiß)

Wenn Sie diese Bereinigung von JavaScript-basierten Elementen fortsetzen und Bilder faul laden, die über der Falte angezeigt werden, sollten Sie diese Funktion tatsächlich deaktivieren.

Verzögertes Laden von Bildern ist eine großartige Möglichkeit, die Leistung Ihrer WordPress-Website zu steigern, aber sie wirken sich tatsächlich negativ auf First Contentful Paint aus, da sie JavaScript-Bibliotheken verwenden, um diese Funktionalität zu ermöglichen.

Deaktivieren Sie also das verzögerte Laden von Bildern, die über dem Falz geladen werden, aber stellen Sie sicher, dass sie richtig optimiert sind. Dazu gehört das Konvertieren in das WebP-Format (verwenden Sie ShortPixel) sowie das vollständige Komprimieren, um sie so klein wie möglich zu halten, während die Klarheit erhalten bleibt.

Inline-Bilder (SVG oder Base64)

Wenn Sie mit Ihrer Bildoptimierung noch verrückter werden möchten, können Sie für kleinere Bilder, die keine großen Anforderungen an die Auflösung haben, fortfahren und sie inline. Das ist gut, wenn Sie ein bestimmtes Logo oder kleineres Bild haben, das über dem Falz geladen wird. Indem Sie sie in SVG- oder Base-64-Formate konvertieren, fügen Sie das Bild ein, reduzieren eine zusätzliche HTTP-Anforderung zum Herunterladen und verbessern Ihren FCP.

Denken Sie daran, dass dieser Ratschlag möglicherweise nur für bestimmte Anwendungsfälle hilfreich ist, und wenn Sie einen HTTP2-basierten Server oder ein unglaublich umfangreiches Image haben, das Sie in Einklang bringen möchten, ist es am besten, es so zu lassen, wie es ist.

Die Verwendung von SVG- und Base-64-Logos, Suchsymbolen, Social-Media-Symbolen und Hintergründen könnte jedoch für Ihren First Contentful Paint von Vorteil sein, die Punktzahl Ihrer WordPress-Website bei Google verbessern und Ihrem Ranking und Ihrer Benutzererfahrung zugute kommen.

Konzentrieren Sie sich auf die DOM-Größe

Die letzte wichtige Sache, die Sie tun können, ist, sich auf Ihre DOM-Größe zu konzentrieren. Das DOM oder Dokumentobjektmodell ist eine baumartige Struktur, die sich im Wesentlichen auf jedes Element auf Ihrer Seite bezieht.

Daher würden alle Divs innerhalb des Körpers, Span-Wrapper, Absätze, Überschriften, Metalinks und mehr als DOM-Elemente betrachtet. Je mehr Elemente auf einer Seite vorhanden sind, desto länger ist die Renderzeit und desto langsamer ist Ihr First Contentful Paint.

Indem Sie also die Anzahl der DOM-Elemente reduzieren, erhalten Sie eine schneller ladende Website. Dies kann erreicht werden, indem die Seite so schlank wie möglich mit allen darin platzierten Elementen komplett neu erstellt wird, oder indem ein neues Design oder ein neuer Seitenersteller verwendet wird.

Zum Beispiel wickelt Elementor seine Elemente in Dutzende von unnötigen Divs ein, sodass der Wechsel zu einem Seitenersteller mit einem geringeren Code-Bloat die Anzahl der DOM-Elemente auf einer Seite minimieren könnte, was zu weniger Datenübertragung führt, was zu schnelleren Renderzeiten führt Bessere First Contentful Paint-Ergebnisse bei Google.

Fazit

Da First Contentful Paint von der realen Benutzererfahrung auf Ihrer WordPress-Website abgeleitet ist, können Sie nicht mit einem Asset mit schlechter Leistung davonlaufen. Stattdessen müssen Sie Ihre ersten und Paint Scores direkt angehen und diese sechs Methoden in Ihre Optimierung einbeziehen, was zu einer besseren Benutzererfahrung, einer höheren Platzierung im Ranking und einer niedrigeren Absprungrate führt.

Es gibt viele andere Methoden, die Sie verwenden können, um die Gesamtleistung einer WordPress-Website zu steigern, was auch Ihrem First Contentful Paint zugute kommt, aber diese sechs Methoden sind der beste Weg, um Ihren First in Temple Paint auf einer WordPress-Website zu steigern. Wenn Sie weitere Optimierungsempfehlungen haben, können Sie diese gerne im Kommentarbereich unten hinterlassen.