So verbessern Sie First Contentful Paint (FCP) in WordPress

Eine Einführung in First Contentful Paint

First Contentful Paint ist eine nützliche Metrik, die die Ladegeschwindigkeit Ihrer Seite überwacht. Es gibt eine Vielzahl ähnlicher Metriken, die die Leistung einer Website messen. FCP konzentriert sich insbesondere auf die Zeit, die es dauert, bis der erste Inhalt auf einer Seite erscheint. Sobald der FCP generiert ist, weiß der Benutzer, dass der Rest auf dem Weg ist.

Es ähnelt der Largest Contentful Paint (LCP)-Metrik in Googles Core Web Vitals. Aber während LCP misst, wie lange es dauert, den „Hauptinhalt“ einer Website zu laden, konzentriert sich FCP nur auf den ersten Inhalt, der der Hauptinhalt sein kann oder nicht.

Es gibt viele Faktoren, die zu Ihrem FCP-Score beitragen. JavaScript-Dateien und schlecht optimiertes HTML sind häufige Ursachen für eine langsame Leistung, da viele Ressourcen für ihre Verarbeitung erforderlich sind. Darüber hinaus können sich Render-Blocking-Skripts auf Ihren FCP-Score auswirken, da sie verarbeitet werden müssen, bevor andere Vorgänge ausgeführt werden können.

Ihr FCP-Score ist wichtig, da er ein Indikator für die Gesamtgeschwindigkeit Ihrer Website ist. Die Leistung ist nicht nur für Ihre UX von entscheidender Bedeutung, sondern auch ein Faktor, den Suchmaschinen wie Google bei der Entscheidung über das Ranking Ihrer Seiten berücksichtigen. Eine schlechte Leistung kann zu niedrigeren Suchrankings führen. Wenn Sie also nicht wissen, wie Sie First Contentful Paint verbessern können, kann dies die Sichtbarkeit Ihrer Website beeinträchtigen.

So messen Sie First Contentful Paint

Während FCP Ihnen einen Einblick in die Benutzerwahrnehmung gibt, ist es immer noch eine Metrik, die durch Labortests und Felddaten objektiv gemessen werden kann. PageSpeed ​​Insights ist beispielsweise ein Tool, mit dem Sie sehen können, was Ihre echten Benutzer erleben ( solange Ihre Website genügend Zugriffe hat, um in den Bericht zur Chrome-Benutzererfahrung aufgenommen zu werden ).

Selbst wenn Ihre Website nicht über genügend Daten verfügt, um echte Benutzererfahrungen zu sehen, kann PageSpeed ​​Insights Ihnen dennoch helfen, FCP-Daten in seinen simulierten Labortests zu sammeln.

Um es zu verwenden, geben Sie einfach Ihre URL ein und erhalten Sie ein sofortiges Ergebnis:

Sie können auch zwischen Mobil- und Desktopansicht wechseln, um zu sehen, wie reaktionsschnell Ihre Website auf verschiedenen Geräten ist.

Ein weiteres nützliches Tool zur FCP-Messung ist WebPageTest, das etwas länger dauert, aber eine tiefergehende Analyse liefern kann.

Was ist eine gute FCP-Zeit?

Laut Chrome hat Ihre Website einen guten FCP-Wert, wenn sie unter 1,8 Sekunden liegt. Wenn Ihr FCP-Score drei Sekunden überschreitet, ist das ein Grund zur Besorgnis.

Aber selbst wenn Ihre Website derzeit einen starken FCP-Score hat, gibt es immer Raum für Verbesserungen.

So verbessern Sie First Contentful Paint in WordPress (6 Techniken)

Nachdem Sie nun etwas mehr über FCP wissen, werfen wir einen Blick darauf, wie Sie First Contentful Paint auf Ihrer Website mit sechs effektiven Methoden verbessern können:

1. Verwenden Sie ein Content Delivery Network (CDN)
2. Bilder optimieren und komprimieren
3. Beseitigen Sie Ressourcen, die das Rendern blockieren
4. Reduzieren Sie Ihre DOM-Größe
5. Verbessern Sie die Antwortzeit des Servers
6. Vermeiden Sie zu viele Seitenumleitungen

1. Verwenden Sie ein Content Delivery Network (CDN)

Ein Content Delivery Network (CDN) ist eine einfache Möglichkeit, die Gesamtladezeit zu erhöhen. Wenn ein Benutzer Ihre Website besucht, muss er ohne einen warten, während die erforderlichen Daten zwischen dem primären Server Ihrer Website und seinem Standort übertragen werden. Dies kann zu längeren Wartezeiten für Benutzer führen, die geografisch weit von den Servern Ihres Hosting-Anbieters entfernt sind.

Auf der anderen Seite bietet ein CDN ein Netzwerk von Servern, die über den ganzen Globus verteilt sind. Daher können Inhalte von dem Server bereitgestellt werden, der jedem Besucher physisch am nächsten ist.

Ein beliebtes Beispiel für ein CDN ist Cloudflare mit über 275 Rechenzentren auf der ganzen Welt:

Mit Cloudflare können Sie andere Optimierungstechniken nutzen, wie z. B. die verlustfreie Bildoptimierung.

Typischerweise verwenden CDNs auch Caching und andere Strategien, um FCP zu verbessern. Beispielsweise bietet Ihr CDN-Anbieter möglicherweise Minifizierung und Dateikomprimierung an, um Ihre Website aufzuhellen. Dies hilft Ihnen, die Latenz zu reduzieren, die UX zu verbessern und die Last auf Ihrem primären Server zu verringern.

2. Bilder optimieren und komprimieren

Bilder sind selten das erste Element, das auf Ihrer Website geladen wird. Wenn Sie jedoch eine medienlastige Website betreiben, z. B. ein Portfolio oder eine Fotoausstellung, ist es wichtig, Bilder zu optimieren und zu komprimieren, um Ihren FCP-Wert (und die Gesamtleistung) zu verbessern.

Eine Möglichkeit, Ihre Bilder zu optimieren, besteht darin, zu einem anderen Dateiformat zu wechseln. Wenn Sie sich beispielsweise derzeit auf JPG/JPEGs oder PNGs verlassen, können Sie zu einem Format mit besserer Komprimierung wie SVG oder WebP wechseln.

Sie sollten Bilder auch auf die kleinsten Abmessungen skalieren, die Ihren Anforderungen entsprechen, und sie komprimieren, um ihre Größe weiter zu reduzieren.

Während Sie all dies manuell mit Online-Tools tun können, ist ein viel einfacherer Weg für WordPress-Benutzer die Verwendung eines Bildoptimierungs-Plugins.

Beispielsweise kann das kostenlose Optimole-Plugin Ihre Bilder automatisch in der Größe anpassen, komprimieren und konvertieren. Außerdem kann es sie auch über sein integriertes CDN bedienen, das zwei Fliegen mit einer Klappe schlägt.

Mit diesem Tool können Sie auch qualitativ hochwertige Bilder mit hoher Geschwindigkeit liefern, unabhängig davon, welches Gerät Besucher für den Zugriff auf Ihre Website verwenden. Sie können Funktionen wie Lazy Loading und Bildgrößenanpassung verwenden, um Ihre Bilder weiter zu perfektionieren.

3. Beseitigen Sie Ressourcen, die das Rendern blockieren

Render-Blocking-Ressourcen können verhindern, dass Ihre Inhalte schnell geladen werden, da der Browser sie zuerst verarbeiten muss – auch wenn sie für das Laden der ursprünglichen Inhalte Ihrer Website nicht wichtig sind. Infolgedessen können sie Ihren FCP-Score verlangsamen. Dies kann HTML-Code, CSS-Stylesheets und JavaScript-Dateien umfassen.

Wenn Sie sich fragen, wie Sie First Contentful Paint verbessern können, gibt es einige Möglichkeiten, Render-Blocking-Ressourcen zu eliminieren. Wenn Sie mit der Entwicklung vertraut sind und Code finden, der auf Ihrer Seite nicht verwendet wird, können Sie fortfahren und ihn löschen. Sie können auch Ihre kritischen Ressourcen identifizieren und sie mithilfe der Tags <script> und <style> in Ihre Seite integrieren.

Darüber hinaus ist es möglich, JavaScript zu verzögern, sodass Ihre Inhalte nicht verzögert werden, während sie darauf warten, dass der Browser diese Dateien verarbeitet. Außerdem können Sie Critical CSS generieren, um Inhalte „above the fold“ (der Teil, den Benutzer sofort sehen) anzuzeigen. Wenn Sie kein Entwickler sind, kann Ihnen ein Tool wie Jetpack dabei helfen, einige dieser Änderungen vorzunehmen.

4. Reduzieren Sie Ihre DOM-Größe

Wenn eine Webseite geladen wird, erstellt Ihr Browser ein Document Object Model (DOM). Dies ist eine Darstellung aller Objekte, aus denen Ihre Seite besteht.

Wenn Ihre Seite zu viele DOM-Knoten (HTML-Tags) enthält oder zu tief verschachtelt ist, dauert es länger, bis der Browser Ihre Seite verarbeitet. Dies kann zu langsameren Ladegeschwindigkeiten und einem schlechten FCP-Score führen.

Daher können Sie Ihren FCP verbessern, indem Sie Ihre DOM-Größe reduzieren. Sie können dies manuell tun, indem Sie unnötige <div>-Tags löschen, lange Seiten in kleinere aufteilen und die Anzahl der Beiträge in Ihrem Archiv oder auf Ihrer Homepage begrenzen.

Darüber hinaus könnten Sie Ihre HTML-Elemente mit einem Optimierungs-Plugin wie Optimole faul laden. Lazy Loading ist eine Technik, die das Laden von Inhalten verzögert, bis sie benötigt werden. Anstatt alles auf einmal zu verarbeiten, kann sich der Browser darauf konzentrieren, die Elemente bereitzustellen, die sofort sichtbar sind.

Die Auswahl eines optimierten Designs kann auch dazu beitragen, die DOM-Größe zu reduzieren, da viele Designs (und Seitenersteller) zu viele <div>-Tags verwenden. Wenn Sie auf der Suche nach einem neuen Thema sind, empfehlen wir Ihnen, Neve auszuprobieren, das schnell und leichtgewichtig ist und nur Qualitätscode verwendet.

5. Verbessern Sie die Reaktionszeit des Servers

Die Antwortzeit des Servers wird auch als Zeit bis zum ersten Byte (TTFB) bezeichnet. Diese Metrik misst die Zeit, die zwischen der Anfrage eines Benutzers und dem Senden des ersten Informationsbytes durch den Server vergeht.

Es gibt viele Möglichkeiten, die Reaktionszeit Ihres Servers (und damit Ihren FCP-Score) zu verbessern.

Zunächst ist es wichtig, einen hochwertigen Hosting-Anbieter zu wählen. Es ist am besten, nach einem Hoster zu suchen, der speziell auf WordPress-Websites ausgerichtet ist, und auf den Standort seiner Server zu achten. Idealerweise sollte Ihr Host Server haben, die sich in der Nähe Ihrer primären Zielgruppe befinden.

Wenn Sie die Leistung Ihres Hosts verbessern möchten, können Sie einen Anbieter aus unserer datengestützten Sammlung des schnellsten WordPress-Hostings auswählen.

Wenn Ihr Hosting-Provider jedoch keine geeigneten Server anbietet, können Sie sich jederzeit für ein CDN entscheiden, über das wir bereits gesprochen haben, als wir darüber gesprochen haben, wie First Contentful Paint verbessert werden kann.

Caching ist eine großartige Möglichkeit, Ihre Antwortzeiten zu verkürzen. Einige Hosts bieten integriertes Caching an. Alternativ können Sie ein Caching-Plugin wie WP Rocket oder WP Fastest Cache installieren.

6. Vermeiden Sie zu viele Seitenumleitungen

Wenn Sie eine Seite besuchen, die Sie sofort auf eine andere Seite weiterleitet, muss Ihr Browser eine weitere HTTP-Anfrage an den neuen Standort stellen. Dies kann zu einem schlechten FCP-Score führen, da es das Laden Ihrer Webseite verzögert.

Je mehr Weiterleitungen Sie auf Ihrer Seite haben, desto schlechter wird Ihr FCP-Score wahrscheinlich sein. Außerdem können zu viele Seitenumleitungen Ihre UX ernsthaft stören.

Wenn das Problem auf der gesamten Website auftritt, sollten Sie sich ansehen, wie Sie Weiterleitungen von www zu nicht-www (oder umgekehrt) und/oder von HTTP zu HTTPS verwalten.

Wenn Sie beispielsweise von http://www.yoursite.com auf http://yoursite.com und dann wieder auf https://yoursite.com umleiten, wäre es effizienter, dies in einem Schritt zu tun.

Wenn Weiterleitungen Ihren FCP nur auf einer einzelnen Seite betreffen, sollten Sie sich alle Weiterleitungen ansehen, die Sie für diese Seite erstellt haben.

Sie können Weiterleitungen manuell verwalten, obwohl dies zeitaufwändig sein kann. Es ist normalerweise besser, sich für ein WordPress-Plugin wie Redirection zu entscheiden:

Einmal installiert, können Sie mit diesem Tool Umleitungen einfach und schnell verwalten.

Verbessern Sie noch heute die FCP-Zeit Ihrer Website

Auf komplexen oder inhaltsreichen Websites kann es schwierig sein, schnelle Ladezeiten einzuhalten. Glücklicherweise können Sie durch die Ausrichtung auf Schlüsselmetriken wie First Contentful Paint (FCP) die Zeit bewerten und verbessern, die Besucher benötigen, um Ihre Inhalte zu sehen.

Um es noch einmal zusammenzufassen, hier ist, wie man First Contentful Paint in WordPress verbessert:

Weitere Möglichkeiten zur Beschleunigung Ihrer Website finden Sie in unserer Sammlung verschiedener Möglichkeiten zur Beschleunigung von WordPress.

Haben Sie Fragen zur Verbesserung von FCP in WordPress? Lassen Sie es uns im Kommentarbereich unten wissen!