Der First Contentful Paint erklärt: Wie du deine Zeit verbessern kannst

Hast du Probleme mit dem First Contentful Paint (FCP)-Zeiten auf deiner Website?

Egal, ob du nicht einmal weißt, was First Contentful Paint ist, oder ob du nach konkreten Tipps suchst, wie du die First Contentful Paint-Zeiten auf deiner Website beschleunigen kannst, dieser Beitrag ist für dich.

Zunächst erklären wir dir, was First Contentful Paint ist und wie du es auf deiner Website messen kannst.

Dann stellen wir dir eine Reihe von Maßnahmen vor, mit denen du die FCP-Zeiten auf deiner Website verkürzen kannst. Und um diesen Beitrag so zugänglich wie möglich zu machen, werden wir versuchen, nicht-technische Tools und WordPress-Plugins vorzustellen, die dir bei der Umsetzung helfen.

Lasst uns loslegen!

Was ist First Contentful Paint (FCP)?

First Contentful Paint, oft abgekürzt mit FCP, ist eine auf das Nutzererlebnis ausgerichtete Leistungskennzahl, die misst, wie lange es dauert, bis der erste Teil der Seite auf dem Bildschirm des Nutzers sichtbar ist.

FCP ist eine wichtige Kennzahl, weil sie die wahrgenommene Leistung beeinflusst. Wenn ein Besucher deine Website zum ersten Mal besucht, zeigt sein Browser einen leeren Bildschirm an, was für die Besucher kein gutes Erlebnis ist.

Sobald der Inhalt geladen wird, hat der Besucher zumindest das Gefühl, dass „etwas“ passiert, und der gesamte Inhalt der Seite wird bald geladen. Daher kann eine schnelle FCP-Zeit dem Nutzer das Gefühl geben, dass deine Website schnell ist, auch wenn es etwas länger dauert, bis der Rest des Inhalts geladen ist.

Im Gegensatz dazu ist eine langsame Ladezeit für die Nutzer/innen frustrierend, denn sie macht deutlich, dass die Seite sehr lange zum Laden braucht. Es gibt nichts Schlimmeres als Besucher, die auf einen leeren Bildschirm starren und sich fragen, ob deine Website überhaupt funktioniert.

First Contentful Paint vs. Largest Contentful Paint

Largest Contentful Paint (LCP) ist eine weitere beliebte Kennzahl, die sich an der Nutzererfahrung orientiert und ähnlich wie First Contentful Paint funktioniert.

Da die Kennzahlen so ähnlich sind, kann es schwierig sein, die Unterschiede zwischen First Contentful Paint und Largest Contentful Paint zu verstehen.

Hier ist der grundlegende Unterschied zwischen ihnen:

• FCP – misst, wie lange es dauert, bis das erste Objekt erscheint. Das kann alles Mögliche sein – solange irgendeine Art von Inhalt auf der Seite erscheint.
• LCP – misst, wie lange es dauert, bis der Hauptinhalt der Seite erscheint.

Wegen dieses Unterschieds sollte die FCP-Zeit deiner Seite immer mindestens ein bisschen schneller sein als die LCP-Zeit. Nach der Definition der Kennzahlen ist es unmöglich, dass deine LCP-Zeit schneller ist als deine FCP-Zeit. Technisch gesehen könnten sie zwar gleich sein, wenn das „erste“ Element, das geladen wird, dasselbe ist wie das „Hauptelement“, aber das wird auf den meisten Seiten nicht der Fall sein.

Zur Veranschaulichung siehst du hier eine visuelle Filmstreifen-Zeitleiste einer WebPageTest-Analyse, die wir auf der Kinsta-Startseite durchgeführt haben.

• FCP tritt im 1,0-Sekunden-Filmstreifen auf (.924 Sekunden, um genau zu sein). Das ist das erste Mal, dass die Seite von einer leeren weißen Seite zu einem visuellen Inhalt übergeht.
• LCP tritt im 1,3-Sekunden-Filmstreifen auf (1,217 Sekunden, um genau zu sein). Das ist der Zeitpunkt, an dem der „Hauptinhalt“ der Seite sichtbar wird.

Was ist eine gute First Contentful Paint Zeit?

Google empfiehlt, dass du eine First Contentful Paint Zeit von 1,8 Sekunden oder weniger für die Seiten deiner Website anstrebst.

Google stuft FCP-Zeiten zwischen 1,8 und 3,0 Sekunden als „verbesserungsbedürftig“ ein, während FCP-Zeiten über 3,0 Sekunden als „mangelhaft“ gelten

Wie man die First Contentful Paint-Zeit einer Seite misst

Am einfachsten kannst du die First Contentful Paint Zeit einer Seite auf deiner Website mit dem Google PageSpeed Insights Tool messen, aber es gibt auch andere Tools, die du verwenden kannst.

Das Schöne an PageSpeed Insights ist, dass es dir sowohl simulierte Testergebnisse als auch FCP-Daten von echten Nutzern liefert (wenn deine Seite genug Traffic hat, um in den Chrome User Experience-Bericht aufgenommen zu werden).

Außerdem deckt es sowohl die Desktop- als auch die mobile Leistung ab, da die FCP-Zeit deiner Seite je nach Gerät und Verbindungsgeschwindigkeit des Nutzers variiert.

Hier erfährst du, wie du eine Seite testen kannst:

1. Öffne die PageSpeed Insights Seite.
2. Gib die URL der Seite auf deiner Website ein, die du testen möchtest.
3. Klicke auf die Schaltfläche Analysieren.

Nach einer kurzen Wartezeit solltest du deine Ergebnisse sehen.

Wenn deine Seite genug Traffic hat, um in den Chrome User Experience Bericht aufgenommen zu werden, siehst du 2 verschiedene FCP-Zeiten:

• Die Zeit im Abschnitt „Entdecke, was deine echten Nutzer erleben“ ist die durchschnittliche FCP-Zeit für echte menschliche Besucher deiner Website.
• Die Zeit im Abschnitt „Diagnose von Leistungsproblemen“ basiert auf einem simulierten Test. Die Bedingungen für die Simulation siehst du in dem grauen Kasten unter den Zahlen.

Du kannst auch zwischen mobilen und Desktop-Ergebnissen wechseln, indem du die Registerkarten oben benutzt.

Um andere Seiten auf deiner Website zu testen, kannst du den gleichen Vorgang wiederholen.

Deine FCP-Zeiten variieren je nach Seite. Wir empfehlen daher, mehrere Seiten zu testen, um ein gutes Gefühl für die Leistung deiner Website zu bekommen.

Du könntest zum Beispiel die Startseite, die Blog-Liste, einen einzelnen Blog-Beitrag und so weiter testen. Und auch hier solltest du darauf achten, dass du sowohl die mobilen als auch die Desktop-Daten berücksichtigst.

Andere Möglichkeiten zur Messung der First Contentful Paint-Zeiten

Während PageSpeed Insights eine der einfachsten Möglichkeiten bietet, die realen und simulierten FCP-Zeiten für deine Website zu sehen, gibt es auch andere Leistungstests, die du als Ergänzung oder Ersatz für PageSpeed Insights nutzen kannst.

Hier sind einige gute Möglichkeiten, um anzufangen:

• WebPageTest – lässt dich simulierte Tests mit verschiedenen Verbindungsgeschwindigkeiten, Geräten und Standorten durchführen.
• Chrome Developer Tools – damit kannst du Leistungstests direkt in deinem Browser durchführen.
• DebugBear – lässt dich simulierte Tests sowohl von Desktop- als auch von Mobilgeräten aus durchführen und enthält zusätzlich zu FCP eine Vielzahl von Daten.
• GTmetrix – lässt dich simulierte Tests von verschiedenen Standorten aus durchführen. Die FCP-Zeit siehst du auf der Registerkarte Leistung – in unserem vollständigen Leitfaden zu GTmetrix-Tests findest du weitere Informationen dazu.

Was kann die FCP-Zeit deiner Website beeinflussen?

Im Großen und Ganzen gibt es 2 „Bereiche“, die die FCP-Zeit verlangsamen können:

• Langsame Server-Antwortzeit – Wenn dein Server zu lange braucht, um die Daten deiner Website an die Browser der Nutzer/innen zu übermitteln, hat deine Seite eine langsame FCP-Zeit. Das kann z. B. an einem langsamen Hosting oder DNS liegen, daran, dass der Server kein Caching verwendet (wodurch der Server mehr Arbeit leisten muss, bevor er eine Seite bereitstellen kann), daran, dass er kein Content Delivery Network (CDN) verwendet, usw.
• Schlecht optimierter Website-Code – selbst wenn dein Server schnell reagiert, kann es sein, dass du eine langsame FCP-Zeit hast, wenn der Code deiner Website schlecht optimiert ist. Deine Seite könnte zum Beispiel viel JavaScript enthalten, das den sichtbaren Inhalt beim Laden blockiert. Es könnte auch Probleme mit CSS, Bildern oder anderen Bereichen des Codes deiner Website geben.

Je nach Website können die Probleme nur in einem Bereich oder in beiden Bereichen auftreten.

Wie du First Contentful Paint beschleunigst: 10 Tipps, die funktionieren

Jetzt, wo du mehr darüber weißt, was First Contentful Paint ist und warum es so wichtig ist, kommen wir zu den Tipps, die du umsetzen kannst, um die Zeiten deiner Website zu verbessern.

Das Schöne an der Umsetzung dieser Tipps ist, dass sie alle Leistungskennzahlen deiner Website verbessern, nicht nur FCP.

Hier ist eine kurze Zusammenfassung der Liste – wir gehen sie weiter unten im Detail durch:

1. Wechsel zu schnellerem Hosting

Es gibt eine unvermeidliche Tatsache, wenn es um FCP geht:

Wenn das zugrunde liegende Hosting deiner Website langsam ist, wird dein FCP auch dann langsam sein, wenn du eine perfekt optimierte Website hast.

Wenn du die anderen Tipps auf dieser Liste befolgst, wird dein FCP zwar schneller, aber die Leistung deiner Website wird immer durch die Qualität deines Hostings beeinträchtigt werden.

Du kannst also zuerst die anderen Tipps auf dieser Liste umsetzen. Wenn du aber immer noch mit langsamen FCP-Zeiten kämpfst, nachdem du alles andere getan hast, musst du vielleicht zu einem schnelleren Hosting wechseln.

Wenn du dir nicht sicher bist, wo du anfangen sollst, ist das verwaltete WordPress-Hosting von Kinsta eine gute Wahl.

Nicht nur die zugrundeliegende Infrastruktur ist auf Leistung optimiert, Kinsta kann dir auch dabei helfen, viele der anderen Strategien auf dieser Liste automatisch zu implementieren, darunter Caching, Content Delivery Network (CDN), optimierte DNS, optimierte Bilder und mehr.

2. Verwende Seiten-Caching (idealerweise auf Server-Ebene)

Wenn du deine Website mit WordPress erstellt hast, muss es den serverseitigen Code für jeden einzelnen Besucher dynamisch verarbeiten (standardmäßig).

Wenn eine Person deine Seite besucht, muss dein Hosting-Server das PHP von WordPress ausführen und die Datenbank deiner Website abfragen, um das fertige HTML-Dokument für den Browser des Nutzers zu erstellen.

Das dauert seine Zeit, vor allem bei leistungsschwachen Hostern, was sich stark auf die FCP-Zeiten deiner Seite auswirken kann.

Mit dem Seiten-Caching kannst du die fertige HTML-Version jeder Seite „zwischenspeichern“. Anstatt den serverseitigen Code bei jedem Besuch zu verarbeiten, antwortet dein Server sofort mit dem fertigen HTML-Code im Cache.

Wenn du Kinsta-Hosting nutzt, implementiert Kinsta das Seiten-Caching automatisch für dich über seine Edge-Caching-Funktion.

Das Einzigartige am Edge Caching von Kinsta ist, dass es die zwischengespeicherten Seiten aus dem globalen Netzwerk von Cloudflare ausliefern kann. Was ein Content-Delivery-Network ist, erklären wir im nächsten Abschnitt, aber der große Vorteil ist, dass du damit sehr schnelle globale Ladezeiten erreichen kannst.

Wenn du bei einem anderen Hoster untergebracht bist, kannst du prüfen, ob dein Hoster eine Caching-Funktion auf Server-Ebene anbietet oder eines der vielen WordPress-Caching-Plugins wie WP Rocket und FlyingPress verwenden.

3. Implementiere ein Content Delivery Network (CDN)

Ein Content Delivery Network (CDN) ist ein globales Netzwerk von Servern, die eine Kopie einiger oder aller Inhalte/Dateien deiner Website speichern.

Wenn eine Person deine Website besucht, stellt das CDN die Dateien deiner Website automatisch von dem Standort aus bereit, der dem Besucher physisch am nächsten ist.

Da die physische Entfernung immer noch eine Rolle bei den Ladezeiten spielt (wir haben die Lichtgeschwindigkeit noch nicht besiegt!), empfängt der Browser des Besuchers die Dateien deiner Website schneller, wodurch sich die FCP-Zeit verbessert.

Wenn du Kinsta-Hosting nutzt, implementiert Kinsta automatisch ein kostenloses Cloudflare-gestütztes CDN für die gesamten Seiten deiner Website, das die schnellste globale Leistung bietet.

Wenn du ein anderes Hosting nutzt, kannst du selbst ein CDN einrichten, indem du Anbieter wie Cloudflare, Amazon CloudFront, Fastly und andere nutzt.

4. Verwende einen schnelleren DNS-Anbieter

Bevor der Browser eines Nutzers eine Verbindung zum Server deiner Website herstellen kann, muss er zunächst das Domain Name System (DNS) nutzen, um den Webserver zu finden, der mit dem Domainnamen deiner Website verbunden ist.

Der DNS-Anbieter, für den du deinen Domainnamen konfiguriert hast, beeinflusst die Dauer dieses Prozesses und damit auch den FCP deiner Website.

Laut DNSPerf beträgt der Unterschied zwischen dem schnellsten und dem langsamsten Anbieter zum Beispiel über 130 ms, was ziemlich viel ist.

Wenn du bei Kinsta hostest, hast du bereits Zugang zu Premium-DNS von Amazon Route53, wenn du die Nameserver von Kinsta nutzt.

Wenn du anderswo hostest, bietet Cloudflare einen der besten kostenlosen DNS-Dienste.

5. Optimiere das CSS deiner Website

Nachdem du die Probleme mit der Antwortzeit des Servers behoben hast, ist es nun an der Zeit, den Code deiner Website zu optimieren, angefangen beim CSS.

CSS steuert das Design und den Stil der Elemente auf deiner Seite. CSS ist zwar ein wichtiger Bestandteil jeder Website, aber es kann die Ladezeiten verlangsamen, wenn es nicht optimal geladen wird und/oder wenn du CSS auf Seiten lädst, auf denen es nicht benötigt wird.

Wir haben einen ganzen Beitrag darüber geschrieben, wie man CSS optimiert, aber lass uns die wichtigsten Maßnahmen zur Beschleunigung von FCP durchgehen.

Ungenutztes CSS entfernen

Als Erstes solltest du ungenutztes CSS von Seiten entfernen, auf denen es nicht benötigt wird.

Eine Möglichkeit, dies zu tun, ist die manuelle Methode. Ein Tool wie PurifyCSS kann deine Seiten nach ungenutztem CSS scannen und du kannst den Code dann manuell entfernen. Auch PageSpeed Insights meldet ungenutztes CSS im Abschnitt „Ungenutztes CSS reduzieren“ seiner Diagnose.

Wenn du WordPress verwendest, gibt es jedoch einige hilfreiche Plugins, die den gesamten Prozess für dich automatisieren können, was viel einfacher ist (vor allem für Nicht-Entwickler/innen). Einige gute Optionen sind WP Rocket, FlyingPress und Perfmatters.

Alle diese Plugins sind Premium-Tools. Wir denken jedoch, dass sie die Investition wert sind, weil sie dir auch bei der Umsetzung vieler anderer Tipps auf dieser Liste helfen können.

Kritische CSS einbinden und unkritische CSS aufschieben

Standardmäßig wartet deine Website wahrscheinlich, bis der gesamte CSS-Code geladen ist, bevor sie mit dem Rendering des „above the fold“-Inhalts beginnt. Das ist jedoch aus Sicht der Benutzerfreundlichkeit nicht optimal, denn du brauchst wirklich nur das CSS, das für den „above-the-fold“-Inhalt benötigt wird – alles andere kann bis später warten.

Das CSS für den „above-the-fold“-Inhalt einer Seite wird kritisches CSS genannt.

Um den FCP deiner Seite und andere Leistungskennzahlen zu beschleunigen, kannst du dieses kritische CSS direkt in den <head> Abschnitt der Seite einfügen (auch bekannt als inline), anstatt es als Teil eines externen Stylesheets zu laden.

Fortgeschrittene Benutzer können das kritische CSS einer Seite auch manuell mit einem Tool wie diesem erstellen.

Aber auch in WordPress kannst du diesen Prozess für jede einzelne Seite deiner Website mit FlyingPress oder WP Rocket automatisieren.

Sobald du das kritische CSS einer Seite eingefügt hast, kannst du das Laden des restlichen CSS der Seite auf einen späteren Zeitpunkt verschieben (nachdem der Inhalt der Seite bereits gerendert wurde).

Sowohl WP Rocket als auch FlyingPress erledigen dies automatisch für dich als Teil ihrer kritischen CSS-Funktionalität, was ein weiterer Grund ist, sie zu nutzen.

CSS-Code verkleinern

Eine weitere Möglichkeit, die Leistung des CSS-Codes deiner Website zu verbessern, ist das Mining des Codes. Wenn du den CSS-Code verkleinerst, entfernst du überflüssige Zeichen und Leerzeichen, wodurch du noch mehr Platz einsparen kannst.

Plugins wie WP Rocket und FlyingPress können dies für dich tun. Es gibt auch spezielle Minifizierungs-Plugins wie Fast Velocity Minify.

6. Optimiere das JavaScript deiner Website

Neben CSS ist auch das JavaScript deiner Website ein Bereich, in dem du etwas Zeit für die Optimierung deines Codes aufwenden solltest.

Wie bei CSS gibt es auch hier verschiedene Strategien, mit denen du die Auswirkungen von JavaScript auf die FCP-Zeiten deiner Website verringern kannst.

Verwende keine JavaScript-abhängigen Elemente oberhalb des Falzes

Wenn du dich auf JavaScript verlässt, um wichtige „above-the-fold“-Funktionen wie das Navigationsmenü deiner Website zu steuern (dies ist besonders häufig bei der mobilen Version einer Website der Fall, da viele mobile Menüs auf JavaScript angewiesen sind), kann dies deine FCP-Zeit verlangsamen, da die Browser der Nutzer/innen das umfangreiche JavaScript erst laden müssen, bevor sie mit dem Rendern der Seite beginnen können.

Wenn du WordPress verwendest, solltest du ein leistungsoptimiertes Theme wählen, um dies zu vermeiden, denn gute Entwickler vermeiden es, JavaScript für diese Funktionen zu verwenden.

Du kannst auch versuchen, die Verwendung von Schiebereglern und anderen JavaScript-gesteuerten Elementen in Above-the-Fold-Bereichen zu vermeiden.

Entferne unnötiges JavaScript

Auch wenn du besonders darauf achten solltest, die Verwendung von JavaScript in „above the fold“-Elementen zu reduzieren, ist es auch generell eine gute Idee, so viel unnötiges JavaScript wie möglich von jeder Seite zu entfernen.

Als Erstes solltest du alle WordPress-Plugins löschen, die deine Seite nicht sinnvoll verbessern, denn viele WordPress-Plugins sind für ihre Funktionalität auf JavaScript angewiesen.

Eine andere Möglichkeit ist die Verwendung eines Skriptmanager-Plugins wie Asset CleanUp oder Perfmatters, um JavaScript seitenweise zu deaktivieren. Damit kannst du Skripte auf Seiten deaktivieren, auf denen sie nicht benötigt werden, während sie auf anderen Seiten weiterhin aktiviert bleiben.

Wir haben auch einen technischen Leitfaden, wie du Plugins seitenweise deaktivieren kannst.

Beseitige Rendering-blockierendes JavaScript (aufschieben oder verzögern)

Egal, was du tust, du wirst wahrscheinlich immer noch JavaScript auf deiner Seite laden müssen. Um sicherzustellen, dass dein JavaScript das Laden von „above-the-fold“-Inhalten nicht behindert, gibt es 2 gängige Strategien, die du anwenden kannst:

• Aufschieben von JavaScript, das den Rendering-Prozess blockiert: Du kannst vermeiden, dass das Laden anderer Inhalte blockiert wird, indem du das Laden von JavaScript auf einen späteren Zeitpunkt im Rendering-Prozess der Seite verschiebst. Du kannst defer oder async verwenden, und es gibt WordPress-Plugins, die diesen Prozess automatisieren.
• Verzögere das Laden von JavaScript bis zur Benutzerinteraktion: Du kannst mit dem Laden von JavaScript ganz oder teilweise warten , bis ein Benutzer mit der Seite interagiert (z. B. durch Klicken oder Scrollen). Dies bietet die beste Leistungsverbesserung, aber du musst eventuell bestimmte Skripte manuell ausschließen, um Probleme zu vermeiden.

Du kannst beide Taktiken in WordPress mit Plugins wie WP Rocket oder FlyingPress umsetzen.

Wir haben auch Anleitungen dazu, wie du das Parsen von JavaScript aufschiebst und wie du Rendering-blockierende Ressourcen eliminierst.

JavaScript-Code verkleinern

Zu guter Letzt solltest du das restliche JavaScript deiner Website minifizieren, um durch das Entfernen unnötiger Zeichen weitere kleine Leistungsvorteile zu erzielen.

Wie beim Mining von CSS können die meisten Caching- und Performance-Plugins (einschließlich WP Rocket und FlyingPress) diese Aufgabe für dich übernehmen. Du kannst auch ein gezieltes Plugin wie Fast Velocity Minify verwenden.

7. Lazy Loading für above-the-fold Bilder deaktivieren

Mit dem Lazy Loading kannst du das Laden von Bildern auf deiner Website so lange hinauszögern, bis sie benötigt werden (z. B. wenn ein Nutzer auf der Seite nach unten scrollt).

Normalerweise ist das gut für die Leistung, wenn du Bilder, die unterhalb des Falzes liegen, verzögert lädst. Allerdings kann sich die Verwendung von „Lazy Loading“ für Bilder oberhalb des Falzes negativ auf die FCP- und LCP-Zeiten deiner Website auswirken.

Deshalb solltest du sicherstellen, dass du alle Bilder, die über der Ausklappleiste liegen, vom Lazy Loading ausschließt.

Wenn du die Kernfunktion „Lazy Loading“ in WordPress nutzt, sollte WordPress dies automatisch tun. Wenn du jedoch Probleme hast, kannst du dieses Verhalten mit der Funktion wp_omit_loading_attr_threshold manuell anpassen.

Wenn du ein Plugin für Lazy Loading verwendest, sollte das Plugin dir hoffentlich eine entsprechende Option zur Verfügung stellen. Bei Perfmatters kannst du zum Beispiel automatisch eine bestimmte Anzahl von führenden Bildern ausschließen und bei Bedarf bestimmte Bilder manuell ausschließen.

Wenn dein Plugin diese Funktion nicht bietet, solltest du auf ein anderes umsteigen, das diese Funktion bietet.

8. Optimiere die Bereitstellung von Schriften

Um sicherzustellen, dass Textinhalte während des Ladens sichtbar sind (was sich auf deine FCP-Zeiten und das Nutzererlebnis auswirken kann), ist es wichtig, auch das Laden von Schriftarten zu optimieren, wenn du benutzerdefinierte Schriftarten verwendest (z. B. solche , diedu bei Google Fonts gefunden hast).

Um Probleme zu vermeiden, kannst du die Optionen Font-Display: Optional oder Font-Display: Swap CSS Deskriptoren verwenden.

Mit Font-Display: Optional kannst du den Browsern der Nutzer/innen mitteilen, dass sie eine Ersatzschriftart verwenden sollen, wenn die benutzerdefinierte Schriftart nicht schnell genug geladen wird.

Wenn du dies nicht über dein eigenes CSS hinzufügen möchtest, gibt es eine Reihe von WordPress-Plugins, die das Laden von Schriften für dich optimieren können, darunter WP Rocket, FlyingPress und Perfmatters.

9. Versuche, die DOM-Größe so weit wie möglich zu reduzieren

Laut Mozilla ist das Document Object Model (DOM) „die Datendarstellung der Objekte, die die Struktur und den Inhalt eines Dokuments im Web ausmachen“

Obwohl menschliche Besucher nicht direkt mit dem DOM interagieren, ist das DOM einer Seite wichtig, damit Webbrowser den Inhalt einer Seite verstehen und anzeigen können.

Generell gilt, dass eine größere und komplexere DOM-Struktur zu langsameren FCP-Zeiten führt als eine kürzere, optimierte DOM-Struktur.

Hier sind einige Tipps, wie du die Größe des DOMs deiner Website reduzieren kannst:

• Verwende ein leistungsoptimiertes WordPress-Theme – bei WordPress spielt dein Theme eine große Rolle für die DOM-Größe deiner Seite. Schau dir unsere datengestützten Beiträge mit den schnellsten WordPress-Themes und den schnellsten WooCommerce-Themes an.
• Nutze den Seitenumbruch-Block – mit dem Seitenumbruch-Block kannst du eine lange Seite unterbrechen.
• Optimiere die Paginierung – du kannst die Paginierung in WordPress nutzen, um die Seiten aufzuteilen, auf denen deine Blogbeiträge (oder andere benutzerdefinierte Beitragstypen) aufgeführt sind.
• Zeige Auszüge – anstatt den gesamten Text auf den Auflistungsseiten zu zeigen, solltest du einen Auszug zeigen.
• Beschränke oder vermeide die Verwendung „schwerer“ Seitenerstellungsprogramme – visuelle Drag-and-Drop-Seitenerstellungsprogramme können zwar aus gestalterischer Sicht sehr schön sein, sie können aber auch das DOM stark aufblähen. Aus Sicht der Leistung ist es besser, wenn du dich an den nativen Editor hältst. Es kann sein, dass sich die Leistungseinbußen eines visuellen Builders für die zusätzlichen Gestaltungsmöglichkeiten lohnen, und das ist normalerweise in Ordnung, solange du die anderen Tipps umsetzt.

10. Vermeide Weiterleitungen (insbesondere Mehrfachweiterleitungen)

Mit Weiterleitungen kannst du Besucher von einer URL zu einer anderen URL weiterleiten, bevor die Seite geladen wird. Du könntest zum Beispiel jemanden, der die HTTP-Version deiner Website besucht, auf die HTTPS-Version umleiten.

Da die Weiterleitung jedoch abgeschlossen sein muss, bevor der Browser des Nutzers die Seite laden kann, führt jede Weiterleitung in der Regel zu einer Verzögerung von Hunderten von Millisekunden bei der FCP-Zeit deiner Website (und anderen Leistungskennzahlen).

Hier sind einige Tipps, um unnötige Weiterleitungen zu vermeiden:

• Aktualisiere fest kodierte URLs, wenn du von HTTP auf HTTPS umstellst – wenn du deine Website auf HTTPS umstellst, solltest du alle URLs in der Datenbank deiner Website aktualisieren, um HTTPS zu verwenden, anstatt dich auf Weiterleitungen zu verlassen.
• URLs auf die richtige WWW- oder Nicht-WWW-Version verweisen – stelle sicher, dass alle deine URLs die richtige Version verwenden, um Weiterleitungen von WWW zu Nicht-WWW (oder umgekehrt) zu vermeiden.
• Repariere kaputte interne Links – aktualisiere alle internen Links, die kaputt sind, anstatt dich auf Weiterleitungen zu verlassen, um die Nutzer/innen an die richtige Stelle zu schicken.
• Bitte andere Websites, kaputte externe Links zu reparieren (wenn es sich lohnt) – wenn du viel Traffic auf einen kaputten Link von einer fremden Website erhältst, kannst du den Eigentümer der Website bitten, den Link zu reparieren, anstatt dich auf Weiterleitungen zu verlassen.

Um Weiterleitungsprobleme zu finden, kannst du das kostenlose Tool Kinsta Redirect Checker verwenden. Wir haben auch einen Beitrag über die besten Praktiken für WordPress-Weiterleitungen.

Hier kannst du zum Beispiel sehen, dass der Redirect Checker von Kinsta mehrere Weiterleitungen entdeckt hat, als wir http://www.wordpress.org als URL eingegeben haben:

• Eine Weiterleitung von HTTP zu HTTPS.
• Eine zweite Weiterleitung von WWW zu nicht-WWW.

Wenn du solche mehrfachen Weiterleitungen siehst, musst du sie korrigieren.

Zusammenfassung

First Contentful Paint ist eine auf das Nutzererlebnis ausgerichtete Leistungskennzahl, mit der du sehen kannst, wie lange es dauert, bis der erste Inhalt auf deiner Seite sichtbar wird. Sie ist ähnlich wie Largest Contentful Paint, unterscheidet sich aber leicht davon.

Wenn du die First Contentful Paint-Zeit deiner Seite optimierst, verbessert sich dadurch natürlich auch die Largest Contentful Paint-Zeit und die meisten anderen Leistungskennzahlen deiner Seite.

Um die Zeiten zu verkürzen, solltest du dich darauf konzentrieren, sowohl den Frontend-Code deiner Website als auch die Reaktionszeit des Servers zu optimieren.

Wenn du eine Website mit optimiertem Code auf einem schnellen WordPress-Hosting wie Kinsta betreibst, solltest du in der Lage sein, die FCP-Zeiten deiner Website deutlich unter die 1,8-Sekunden-Marke zu bringen, die Google als „gut“ einstuft.