Hinweis: Der folgende Artikel hilft Ihnen dabei: Optimierung von First Contentful Paint (FCP) und Largest Contentful Paint (LCP) in WordPress
Studien haben gezeigt, dass über 50 % der Nutzer eine Webseite verlassen, wenn das Laden länger als 3 Sekunden dauert. Angesichts der rasanten Zunahme der mobilen Internetnutzung weltweit ist die Geschwindigkeit von Webseiten von größter Bedeutung geworden.
Es ist jedoch nicht immer einfach zu verstehen, welche Kennzahlen Sie zur Bewertung der Leistung Ihrer Website verwenden sollten. Während sich einige auf Time to First Byte (TTFB) verlassen, glauben andere, dass benutzerzentrierte Kennzahlen mehr Aufmerksamkeit verdienen.
First Contentful Paint (FCP) und Largest Contentful Paint (LCP) konzentrieren sich auf das Benutzererlebnis und wurden eingeführt, um die wahrgenommene Ladegeschwindigkeit zu messen. FCP und LCP machen etwa 10 % des von Google berechneten Gesamtleistungswerts Ihrer Website aus.
In diesem umfassenden Leitfaden zu FCP und LCP als neuen wichtigen Website-Leistungsindikatoren befasst sich Hostinger intensiv mit der Optimierung von First Contentful Paint in WordPress. Sie erfahren, was FCP und LCP sind und wie Sie die benutzerzentrierten Metriken nutzen, um Verzögerungen bei der Bereitstellung von Inhalten für Ihre Website-Besucher zu vermeiden.
Einführung von First Contentful Paint (FCP) und Largest Contentful Paint (LCP)
Google hat in den letzten Jahren seine Ranking-Algorithmen verbessert und sich nach und nach auf die Benutzererfahrung als Hauptfaktor bei der Messung der Leistungsbewertung einer Website konzentriert. Dies hat zur Einführung von Core Web Vitals als Methode zur Bewertung der gesamten wahrgenommenen Ladegeschwindigkeit einer Webseite geführt.
Google Core Web Vitals
Core Web Vitals sind eine Reihe benutzerzentrierter Kennzahlen, die die Geschwindigkeit und Reaktionsfähigkeit einer Website bewerten. Zu den Core Web Vitals gehören drei Metriken: Largest Contentful Paint (LCP), First Input Delay (FID) und Cumulative Layout Shift (CLS).
Um die Core Web Vitals-Bewertung zu bestehen, muss Ihre WordPress-Website für alle drei Punkte „gut“ abschneiden, basierend auf den Felddaten, die von echten Benutzern über den Chrome User Experience Report gesammelt wurden. Durch die Verbesserung der Metriken können Sie ein besseres Benutzererlebnis schaffen und ein höheres Ranking erzielen, was mehr Besucher auf Ihre WordPress-Website lockt und die Konversionsraten erhöht.
Obwohl First Contentful Paint nicht zum Core Web Vitals-Trio gehört, ist es von größter Bedeutung, dass Ihre WordPress-Website im World Wide Web gut abschneidet. Sie fragen sich vielleicht: Was ist First Contentful Paint in WordPress und warum ist es so wichtig? Lesen Sie weiter, um mehr darüber zu erfahren, wie Sie damit Ihr Benutzererlebnis verbessern können.
Was ist First Contentful Paint (FCP)?
First Contentful Paint ist eine benutzerzentrierte Leistungsmetrik, die die Zeit misst, die benötigt wird, um dem Website-Besucher den ersten Inhalt aus dem DOM zu rendern, nachdem er eine bestimmte Webseite zum Laden geöffnet hat.
Der FCP-Zeitstempel markiert den Moment, in dem der Browser einen Text, ein Bild (einschließlich des Hintergrundbilds oder eines Logos) oder ein nicht schreibbares Canvas-Element rendert.
Mit anderen Worten: First ContentFul Paint ist die Zeit, die ein Website-Besucher benötigt, um Inhalte auf der geladenen Webseite zu sehen. Ein großartiger FCP versichert dem Besucher, dass die angeforderte Webseite kurz nach dem ersten Inhaltselement im Browser angezeigt wird.
Was ist ein guter First Contentful Paint für WordPress?
Ein guter First Contentful Paint liegt laut Google zwischen 0 und 1,8 Sekunden. Google bewertet FCP in drei Kategorien: gut, verbesserungswürdig und schlecht:
- Gut: zwischen 0 und 1,8 Sekunden
- Muss verbessert werden: zwischen 1,8 und 3 Sekunden
- Puhr: über 3 Sekunden
Wie Sie sehen, müssen Sie bei einem Ergebnis von mehr als 2 Sekunden First Contentful Paint verbessern, damit Ihre WordPress-Website einen höheren Rang erhält und mehr Besucher anzieht.
All-in-One-WordPress-Lösungen
Versorgen Sie Ihre Website mit dem branchenweit am besten optimierten WordPress-Hosting
Was ist Largest Contentful Paint (LCP)?
Largest Contentful Paint ist einer der drei Core Web Vitals, der die Zeit misst, die es dauert, bis das größte Inhaltselement einer Webseite sichtbar wird. Der größte Teil des Inhalts ist für jede Website unterschiedlich und besteht häufig aus einem Bild, einem Textblock oder einem Video.
Da das größte Inhaltselement für die wahrgenommene Ladegeschwindigkeit und das Benutzererlebnis am relevantesten ist, hilft ein schnelles LCP dabei, dem Website-Besucher zu zeigen, dass die geladene Webseite für ihn relevant und nützlich ist. Wenn Elemente den größten Teil des Inhalts blockieren, ist es wahrscheinlich, dass eine Webseite vollständig aufgegeben wird.
Was ist ein guter Largest Contentful Paint für WordPress?
Ein guter Largest Contentful Paint dauert höchstens 2,5 Sekunden, was bedeutet, dass es bis zu 1 Sekunde dauern sollte, das größte Inhaltselement zu laden, nachdem das erste gerendert wurde. Hier sind die von Google definierten Schwellenwerte für die LCP-Zeit:
- Gut: kleiner oder gleich 2,5 Sekunden
- Muss verbessert werden: zwischen 2,5 und 4 Sekunden
- Arm: über 4 Sekunden
So messen Sie FCP und LCP
Sie können eine Vielzahl von Tools verwenden, die sowohl auf Feld- als auch auf Labordaten basieren, um FCP und LCP auf Ihrer WordPress-Website zu messen. Die Labordaten zeigen Ihnen Ergebnisse automatisierter Tests, während Felddaten Ihnen helfen, mehr darüber zu erfahren, wie echte Benutzer mit Ihrer Website interagieren, und die Unterschiede bei Geräten und Benutzerverhalten hervorzuheben.
Hier sind die fünf besten Tools zum Messen von Largest Contentful Paint und First Contentful Paint in WordPress:
- Leuchtturm. Lighthouse ist ein beliebtes Open-Source-Tool, das Prüfungen für Leistung, Zugänglichkeit, SEO und mehr bietet.
- PageSpeed-Einblicke. Google PageSpeed Insights ist ein äußerst zuverlässiges Tool zur Messung der Website-Leistung und des Benutzererlebnisses.
- Chrome DevTools. DevTools ist eine Reihe von Webentwicklertools, die in den Google Chrome-Browser integriert sind und Ihnen bei der Analyse von FCP und LCP auf Ihrer Website helfen.
- WebPageTest. WebPageTest ist ein beliebtes Tool zum Messen kritischer Leistungsmetriken.
- GTmetrix. GTmetrix ist ein weiteres Open-Source-Tool, mit dem Sie die Leistung Ihrer Website anhand einer Reihe von Metriken bewerten können.
Wenn Sie Felddaten verwenden möchten, Chrome-Benutzererfahrungsbericht Und Suchkonsole kann eine benutzerorientiertere Analyse ermöglichen.
9 Möglichkeiten zur Optimierung von First Contentful Paint und Largest Contentful Paint in WordPress
Durch die Optimierung von First Contentful Paint und Largest Contentful Paint können Sie den Content-Bereitstellungsprozess beschleunigen und alle Faktoren eliminieren, die sich negativ auf das Benutzererlebnis auswirken. Im Folgenden erfahren Sie, wie Sie in neun Schritten First Contentful Paint und Largest Contentful Paint für Ihre WordPress-Website verbessern.
1. Verbessern Sie Ihre Zeit bis zum ersten Byte (TTFB)
Die Zeit bis zum ersten Byte gibt an, wie lange es dauert, bis der Server auf die vom Browser des Benutzers gesendete HTTP-Anfrage antwortet. Dies ist der erste Schritt im Inhaltsbereitstellungsprozess, der den Zeitpunkt markiert, an dem der Webserver mit dem Senden der angeforderten Inhalte beginnt.
TTFB ist ein Benchmark eines gut konfigurierten Anwendungsstapels, der in der Serverinfrastruktur verwendet wird. Daher ist die Wahl eines qualitativ hochwertigen Hostings von größter Bedeutung.
Stellen Sie sicher, dass Ihr Webserver ordnungsgemäß konfiguriert ist, um den täglichen Datenverkehr auf Ihrer WordPress-Website zu bewältigen. Berücksichtigen Sie den Speicher Ihres Servers, wenn Sie entscheiden, wie viele Prozesse Ihr Webserver erstellen kann und wie viele Anfragen jeder bearbeiten kann.
Wenn Sie einen verwalteten WordPress-Hostingplan von Hostinger nutzen, haben wir die Serverinfrastruktur für Sie vorkonfiguriert, sodass Sie sich keine Sorgen über Verzögerungen bei der Inhaltswiedergabe oder in die Warteschlange gestellte HTTP-Anfragen machen müssen.
2. Verwenden Sie Caching auf Serverebene
Es ist kein Geheimnis, dass statische Websites aufgrund einer deutlich geringeren Anzahl an Manipulationen, die hinter den Kulissen vorgenommen werden müssen, um Inhalte darzustellen, eine bessere Leistung erbringen. Während Sie WordPress als Headless-CMS verwenden können, bleiben die meisten WordPress-Websites dynamisch.
WordPress wird zum Erstellen dynamischer, datenbankgestützter Websites verwendet. Das bedeutet, dass der Großteil der Inhalte in der WordPress-Datenbank gespeichert ist und abgerufen und mit Vorlagendateien zusammengeführt werden muss, um eine Webseite zu erstellen. Dies ist das Herzstück der Inhaltswiedergabe.
Caching trägt dazu bei, die zum Laden Ihrer Website benötigte Zeit zu verkürzen, indem statische Kopien kürzlich angeforderter Inhalte gespeichert werden. Dabei kann es sich um Ergebnisse von Abfragen an die WordPress-Datenbank oder auch um ganze Webseiten handeln.
Sofern die angeforderte Webseite keine personalisierten Informationen enthält, die auf jeden Besucher zugeschnitten werden müssen, kann die Verwendung von Caching auf Serverebene dazu beitragen, First Contentful Paint und Large Contentful Paint in WordPress zu verbessern. Stellen Sie sicher, dass Sie eine großartige Seiten- und Objekt-Caching-Lösung für WordPress verwenden.
Die vollständig verwalteten WordPress-Hostingpläne von Hostinger umfassen Object Cache Pro, ein Premium-WordPress-Objekt-Caching-Plugin und eine Ganzseiten-Caching-Lösung basierend auf dem Cache Enabler von KeyCDN. Fortschrittliche, von Experten abgestimmte Caching-Lösungen helfen Hostinger-Kunden dabei, eine unübertroffene Website-Leistung und großartiges Largest Contentful Paint und First Contentful Paint in WordPress zu erzielen.
3. Eliminieren Sie Render-blockierende Ressourcen
Renderblockierende Ressourcen können als alle Inhaltselemente definiert werden, die die Ladezeit einer Webseite verlängern und sich negativ auf die Gesamtleistung der Website und das Benutzererlebnis auswirken.
Während des Content-Rendering-Prozesses analysiert WordPress die Adresse, die Sie im Browser öffnen, um eine Reihe von Abfrageparametern zu bilden, die dann zur Abfrage der Datenbank verwendet werden. Die angeforderte Webseite wird als Ergebnis der Zusammenstellung mehrerer Elemente wie HTML, CSS und JavaScript bereitgestellt.
Der Browser muss alle referenzierten Ressourcen herunterladen, bevor er eine Webseite rendern kann. Dies kann viel Zeit in Anspruch nehmen und dazu führen, dass der Besucher Ihre Website verlässt. Die Reduzierung der Anzahl der Rendering-blockierenden Ressourcen verkürzt den kritischen Rendering-Pfad und hilft Ihnen, First Contentful Paint in WordPress zu verbessern.
Entfernen Sie die JavaScript- und CSS-Ressourcen, die nicht mehr verwendet werden. Sie können unkritischen Code in einer Rendering-blockierenden URL behalten und die URL mit asynchronen oder verzögerten Attributen markieren.
4. Kritisches Inline-CSS
Möglicherweise stellen Sie fest, dass Ihre WordPress-Website so konfiguriert ist, dass CSS asynchron geladen wird, was dazu führt, dass nicht formatierte Inhalte im Browser angezeigt werden. Dieses Verhalten wird auch als Flash of Unstyled Content (FOUC) bezeichnet. FOUC kann zu einer schlechten Leistung und Benutzererfahrung führen und sollte daher von WordPress-Website-Besitzern vermieden werden.
Gleichzeitig verzögern Browser das Rendern von Inhalten, bis alle im
einer Webseite referenzierten CSS-Stylesheets geladen, analysiert und ausgeführt wurden. Die Identifizierung des kritischen CSS – der Mindestsatz an CSS-Dateien, der erforderlich ist, um dem Benutzer den Inhalt des ersten Bildschirms zur Verfügung zu stellen – und dessen Inlining ist der Schlüssel zum Erreichen eines hervorragenden FCP und LCP.Neben der Eliminierung von Rendering-blockierenden Ressourcen hilft Ihnen die Einbettung von kritischem CSS in den
Ihrer Webseiten dabei, First Contentful Paint in WordPress erheblich zu verbessern. Der Browser rendert nun sofort den kritischen Teil der Webseite, ohne auf das asynchrone Laden der CSS-Stylesheets warten zu müssen.5. JavaScript zurückstellen
JavaScript-Dateien gehören zu den häufigsten Rendering-blockierenden Ressourcen. Genau wie bei kritischem CSS können Sie First Contentful Paint und Largest Contentful Paint verbessern, indem Sie die Prioritäten des geladenen JavaScript ändern.
Wenn der Browser beim Laden von HTML auf das Tag stößt, muss er das referenzierte Skript ausführen, bevor er mit der DOM-Erstellung fortfahren kann. Durch die Verzögerung von Javascript mithilfe des Defer-Attributs lädt der Browser nun die Dateien nach dem Erstellen des DOM-Baums und eliminiert so alles, was den Inhaltsrendering-Prozess blockiert.
6. Verwenden Sie ein CDN
Ein Content Delivery Network (CDN) ist entscheidend für das Erreichen einer hohen Leistung und die Verbesserung von First ContentFul Paint und Large Contentful Paint in WordPress. CDN kann Ihre Website erheblich beschleunigen, indem es Inhalte näher an Website-Besucher bringt und Latenzzeiten eliminiert.
Ein CDN ist ein großes Netzwerk geografisch verteilter Server, das einen Pool zusätzlicher Serverressourcen zum Zwischenspeichern und Rendern statischer Inhalte bietet, ohne Webanfragen an den Ursprungsserver senden zu müssen. Die Verwendung von WordPress mit einem Content Delivery Network kann einen dramatischen Unterschied machen, wenn es um FCP und LCP geht, unabhängig von den Inhalten, die Sie hosten.
Achten Sie bei der Auswahl eines CDN-Hosting-Anbieters genau auf die Netzwerkgröße und die darin enthaltenen Leistungs- und Sicherheitsoptimierungen, wie z. B. Komprimierung und Unterstützung für HTTP/2. Das von Cloudflare betriebene Hostinger Edge CDN bietet weltweit über 280 Points of Presence mit HTTP/2- und Brotli-Komprimierung, um eine erheblich schnellere Ladegeschwindigkeit von Webseiten zu ermöglichen.
7. Vermeiden Sie 301-Weiterleitungen
Weiterleitungen können als die Schritte definiert werden, die der Browser ausführen muss, um den angeforderten Inhalt bereitzustellen. Wenn es dem Umleitungspfad folgt, muss es eine Reihe nachfolgender Webanfragen stellen, um das endgültige Ziel zu erreichen und die Webseite zu empfangen.
Die Konfiguration mehrerer permanenter 301-Weiterleitungen kann sich erheblich negativ auf die Leistung Ihrer Website auswirken und zu einer höheren Zeit bis zum ersten Byte führen. Da TTFB der Schlüssel zur Optimierung von Largest Contentful Paint und First Contentful Paint für WordPress ist, sollten Sie Weiterleitungen auf ein Minimum beschränken.
Überprüfen Sie den Umleitungspfad Ihrer WordPress-Website, um zu verstehen, wie Sie First Contentful Paint verbessern und unnötige Verzögerungen bei der Bereitstellung von Inhalten für Ihre Website-Besucher vermeiden können.
8. Stellen Sie Bilder in WebP bereit
Während ein CDN dazu beitragen kann, die Bildbereitstellung zu beschleunigen, ist die Bildoptimierung ein weiterer entscheidender Schritt zur Verbesserung der Leistung Ihrer Website und zur Erzielung hervorragender FCP- und LCP-Werte.
Da ein Bild oft das größte Inhaltselement auf einer Seite ist, ist es entscheidend, wie schnell es bereitgestellt werden kann. Während Lazy Loading die Leistung Ihrer Website effektiv steigern kann, sollten Sie es nicht für kritische Bilder verwenden.
Die beiden wichtigsten Aspekte der Bildoptimierung sind die Wahl des richtigen Bildformats und der richtigen Größe. Komprimieren Sie Ihre Bilder, um sie ohne nennenswerten Qualitätsverlust zu verkleinern. Mit dem richtigen Bildformat können Sie noch bessere Ergebnisse erzielen.
Mehrere Tools (oft von Content-Delivery-Netzwerken angeboten) können Ihnen dabei helfen, Ihre Bilder an die Geräteeigenschaften des Besuchers anzupassen. Dies kann das Surferlebnis des Benutzers erheblich verbessern und gleichzeitig die Belastung des Ursprungsservers verringern.
WebP ist das von Google empfohlene Bildformat. Das Konvertieren von Bildern in dieses Format kann zu einer deutlichen Leistungssteigerung führen und sowohl Largest Contentful Paint als auch First Contentful Paint in WordPress verbessern.
WordPress erwägt sogar die Einbeziehung automatische JPEG-zu-WebP-Konvertierung in die Kernfunktionen der Plattform ein. Obwohl es aus WordPress 6.1 entfernt wurde, sehen wir es möglicherweise immer noch in der nächsten großen WordPress-Version.
9. Löschen Sie alle nicht verwendeten Plugins
Plugins erweitern die nativen Funktionen von WordPress und bringen neue Funktionen auf Ihre WordPress-Website. Da Hunderttausende Plugins verfügbar sind, hat jeder Besitzer einer WordPress-Website jederzeit mindestens ein paar Add-Ons aktiviert.
Software-Add-ons erweitern die Menge des ausgeführten Codes. Sperrige, schlecht codierte WordPress-Plugins führen zu Leistungseinbußen und integrieren FCP und LCP auf Ihrer Website.
Gehen Sie bei der Plugin-Verwaltung achtsam vor. Überprüfen Sie die Liste der aktiven Plugins und löschen Sie alle, die nicht verwendet werden oder aus nicht überprüften Quellen installiert wurden. Dies trägt nicht nur zu einer besseren Webseitengeschwindigkeit bei, sondern trägt auch dazu bei, die Angriffsfläche deutlich zu reduzieren.
Hostinger vereint die beste Premium-Software für WordPress, damit Sie bei der Suche nach den besten WordPress-Plugins Zeit und Geld sparen können. Mit dem Hostinger Installer Plugin können Sie branchenführende Lösungen für bessere Leistung und Sicherheit, verbesserte SEO und erweiterte E-Commerce-Funktionalität nutzen – und das kostenlos.
FCP und LCP sind wichtig für die wichtigsten Web-Vitalfunktionen
First Contentful Paint und Largest Contentful Paint sind die wichtigsten benutzerzentrierten Kennzahlen zur Messung der Leistung Ihrer WordPress-Website und des gesamten Benutzererlebnisses.
FCP und LCP markieren den Zeitstempel, an dem der Benutzer das erste Inhaltselement und das größte Inhaltselement einer Webseite sieht. Sie geben an, ob der Besucher auf der Website bleibt oder sie verlässt.
Da LCP eine der drei Metriken ist, die Google Core Web Vitals bilden, machen First Contentful Paint und Largest Contentful Paint etwa 10 % des Gesamtleistungswerts Ihrer WordPress-Website aus. Wenn Sie die in diesem Artikel beschriebenen neun Schritte befolgen, können Sie Verzögerungen bei der Inhaltswiedergabe erheblich reduzieren und ein besseres Google-Ranking erzielen.
Hostinger bietet für WordPress optimiertes Managed Hosting an, um Grenzen zu überwinden und den Besuchern Ihrer Website Inhalte näher zu bringen. Eine vollständig skalierbare Infrastruktur mit einem Anwendungs-Stack der Enterprise-Klasse, einem integrierten, blitzschnellen CDN von Cloudflare und erweiterten Caching-Optionen hilft Ihnen dabei, eine starke Online-Präsenz aufzubauen und sich von der Konkurrenz abzuheben.
Schauen Sie sich die von Hostinger verwalteten WordPress-Hosting-Pläne an, um noch heute loszulegen.