Was ist First Contentful Paint (FCP)?<\/h2>\n
First Contentful Paint, oft abgek\u00fcrzt 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.<\/p>\n
FCP ist eine wichtige Kennzahl, weil sie die wahrgenommene Leistung<\/em> beeinflusst. Wenn ein Besucher deine Website zum ersten Mal besucht, zeigt sein Browser einen leeren Bildschirm an, was f\u00fcr die Besucher kein gutes Erlebnis ist.<\/p>\n Sobald der Inhalt geladen wird, hat der Besucher zumindest das Gef\u00fchl, dass „etwas“ passiert, und der gesamte Inhalt der Seite wird bald geladen. Daher kann eine schnelle FCP-Zeit dem Nutzer das Gef\u00fchl geben, dass deine Website schnell ist, auch wenn es etwas l\u00e4nger dauert, bis der Rest des Inhalts geladen ist.<\/p>\n Im Gegensatz dazu ist eine langsame Ladezeit f\u00fcr 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 \u00fcberhaupt funktioniert.<\/p>\n Largest Contentful Paint (LCP)<\/a> ist eine weitere beliebte Kennzahl, die sich an der Nutzererfahrung orientiert und \u00e4hnlich wie First Contentful Paint funktioniert.<\/p>\n Da die Kennzahlen so \u00e4hnlich sind, kann es schwierig sein, die Unterschiede zwischen First Contentful Paint und Largest Contentful Paint zu verstehen.<\/p>\n Hier ist der grundlegende Unterschied zwischen ihnen:<\/p>\n 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\u00f6glich, dass deine LCP-Zeit schneller ist als deine FCP-Zeit. Technisch gesehen k\u00f6nnten 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<\/em>.<\/p>\n Zur Veranschaulichung siehst du hier eine visuelle Filmstreifen-Zeitleiste einer WebPageTest-Analyse, die wir auf der Kinsta-Startseite durchgef\u00fchrt haben.<\/p>\n Google empfiehlt, dass du eine First Contentful Paint Zeit von 1,8 Sekunden oder weniger f\u00fcr die Seiten deiner Website anstrebst.<\/p>\n Google stuft FCP-Zeiten zwischen 1,8 und 3,0 Sekunden als „verbesserungsbed\u00fcrftig“ ein, w\u00e4hrend FCP-Zeiten \u00fcber 3,0 Sekunden als „mangelhaft“ gelten<\/p>\n Am einfachsten kannst du die First Contentful Paint Zeit einer Seite auf deiner Website mit dem Google PageSpeed Insights Tool<\/a> messen, aber es gibt auch andere Tools, die du verwenden kannst<\/a>.<\/p>\n Das Sch\u00f6ne 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<\/em>).<\/p>\n Au\u00dferdem deckt es sowohl die Desktop- als auch die mobile Leistung ab, da die FCP-Zeit deiner Seite je nach Ger\u00e4t und Verbindungsgeschwindigkeit des Nutzers variiert.<\/p>\n Hier erf\u00e4hrst du, wie du eine Seite testen kannst:<\/p>\n Nach einer kurzen Wartezeit solltest du deine Ergebnisse sehen.<\/p>\n Wenn deine Seite genug Traffic hat, um in den Chrome User Experience Bericht aufgenommen zu werden, siehst du 2<\/em> verschiedene FCP-Zeiten:<\/p>\n Du kannst auch zwischen mobilen und Desktop-Ergebnissen wechseln, indem du die Registerkarten oben benutzt.<\/p>\n Um andere Seiten auf deiner Website zu testen, kannst du den gleichen Vorgang wiederholen.<\/p>\n Deine FCP-Zeiten variieren je nach Seite. Wir empfehlen daher, mehrere Seiten zu testen, um ein gutes Gef\u00fchl f\u00fcr die Leistung deiner Website zu bekommen.<\/p>\n Du k\u00f6nntest 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\u00fccksichtigst.<\/p>\n W\u00e4hrend PageSpeed Insights eine der einfachsten M\u00f6glichkeiten bietet, die realen und simulierten FCP-Zeiten f\u00fcr deine Website zu sehen, gibt es auch andere Leistungstests<\/a>, die du als Erg\u00e4nzung oder Ersatz f\u00fcr PageSpeed Insights nutzen kannst.<\/p>\n Hier sind einige gute M\u00f6glichkeiten, um anzufangen:<\/p>\n Im Gro\u00dfen und Ganzen gibt es 2 „Bereiche“, die die FCP-Zeit verlangsamen k\u00f6nnen:<\/p>\n Je nach Website k\u00f6nnen die Probleme nur in einem Bereich oder in beiden Bereichen auftreten.<\/p>\n Jetzt, wo du mehr dar\u00fcber wei\u00dft, 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.<\/p>\n Das Sch\u00f6ne an der Umsetzung dieser Tipps ist, dass sie alle<\/em> Leistungskennzahlen deiner Website verbessern<\/a>, nicht nur FCP.<\/p>\n Hier ist eine kurze Zusammenfassung der Liste – wir gehen sie weiter unten im Detail durch:<\/p>\n Es gibt eine unvermeidliche Tatsache, wenn es um FCP geht:<\/p>\n Wenn das zugrunde liegende Hosting deiner Website langsam ist, wird dein FCP auch dann langsam sein, wenn du eine perfekt optimierte Website hast.<\/p>\n Wenn du die anderen Tipps auf dieser Liste befolgst, wird dein<\/em> FCP zwar schneller, aber die Leistung deiner Website wird immer durch die Qualit\u00e4t deines Hostings beeintr\u00e4chtigt werden.<\/p>\n Du kannst also zuerst die anderen Tipps auf dieser Liste umsetzen. Wenn du aber immer noch mit langsamen FCP-Zeiten k\u00e4mpfst, nachdem du alles andere getan hast, musst du vielleicht zu einem schnelleren Hosting wechseln<\/a>.<\/p>\n Wenn du dir nicht sicher bist, wo du anfangen sollst, ist das verwaltete WordPress-Hosting von Kinsta<\/a> eine gute Wahl.<\/p>\n 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.<\/p>\n Wenn du deine Website mit WordPress erstellt hast, muss es den serverseitigen Code f\u00fcr jeden einzelnen Besucher dynamisch verarbeiten (standardm\u00e4\u00dfig).<\/p>\n Wenn eine Person deine Seite besucht, muss dein Hosting-Server das PHP<\/a> von WordPress ausf\u00fchren und die Datenbank deiner Website<\/a> abfragen, um das fertige HTML-Dokument f\u00fcr den Browser des Nutzers zu erstellen.<\/p>\n Das dauert seine Zeit, vor allem bei leistungsschwachen Hostern, was sich stark auf die FCP-Zeiten deiner Seite auswirken kann.<\/p>\n Mit dem Seiten-Caching<\/a> 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.<\/p>\n Wenn du Kinsta-Hosting nutzt, implementiert Kinsta das Seiten-Caching automatisch f\u00fcr dich \u00fcber seine Edge-Caching-Funktion.<\/p>\n Das Einzigartige am Edge Caching von Kinsta<\/a> ist, dass es die zwischengespeicherten Seiten aus dem globalen Netzwerk von Cloudflare ausliefern<\/a> kann. Was ein Content-Delivery-Network ist, erkl\u00e4ren wir im n\u00e4chsten Abschnitt, aber der gro\u00dfe Vorteil ist, dass du damit sehr schnelle globale Ladezeiten erreichen<\/a> kannst.<\/p>\n Wenn du bei einem anderen Hoster untergebracht bist, kannst du pr\u00fcfen, ob dein Hoster eine Caching-Funktion auf Server-Ebene anbietet oder eines der vielen WordPress-Caching-Plugins wie WP Rocket und FlyingPress verwenden.<\/p>\n Ein Content Delivery Network (CDN)<\/a> ist ein globales Netzwerk von Servern, die eine Kopie einiger oder aller Inhalte\/Dateien deiner Website speichern.<\/p>\n 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\u00e4chsten ist.<\/p>\n Da die physische Entfernung immer noch eine Rolle bei den Ladezeiten spielt (wir haben die Lichtgeschwindigkeit noch nicht besiegt!<\/em>), empf\u00e4ngt der Browser des Besuchers die Dateien deiner Website schneller<\/a>, wodurch sich die FCP-Zeit verbessert.<\/p>\n Wenn du Kinsta-Hosting nutzt, implementiert Kinsta automatisch ein kostenloses Cloudflare-gest\u00fctztes CDN<\/a> f\u00fcr die gesamten Seiten deiner Website, das die schnellste globale Leistung bietet.<\/p>\n Wenn du ein anderes Hosting nutzt, kannst du selbst ein CDN einrichten, indem du Anbieter wie Cloudflare, Amazon CloudFront, Fastly und andere nutzt.<\/p>\n Bevor der Browser eines Nutzers eine Verbindung zum Server deiner Website herstellen kann, muss er zun\u00e4chst das Domain Name System (DNS)<\/a> nutzen, um den Webserver zu finden, der mit dem Domainnamen deiner Website verbunden ist.<\/p>\n Der DNS-Anbieter, f\u00fcr den du deinen Domainnamen konfiguriert hast, beeinflusst die Dauer dieses Prozesses und damit auch den FCP deiner Website.<\/p>\n Laut DNSPerf<\/a> betr\u00e4gt der Unterschied zwischen dem schnellsten und dem langsamsten Anbieter zum Beispiel \u00fcber 130 ms, was ziemlich viel ist.<\/p>\n Wenn du bei Kinsta hostest<\/a>, hast du bereits Zugang zu Premium-DNS von Amazon Route53<\/a>, wenn du die Nameserver<\/a> von Kinsta nutzt.<\/p>\n Wenn du anderswo hostest, bietet Cloudflare einen der besten kostenlosen DNS-Dienste.<\/p>\n 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.<\/p>\n CSS steuert das Design und den Stil<\/a> der Elemente auf deiner Seite. CSS ist zwar ein wichtiger Bestandteil jeder Website<\/a>, aber es kann die Ladezeiten verlangsamen, wenn es nicht optimal geladen wird und\/oder wenn du CSS auf Seiten l\u00e4dst, auf denen es nicht ben\u00f6tigt wird.<\/p>\n Wir haben einen ganzen Beitrag dar\u00fcber geschrieben, wie man CSS optimiert<\/a>, aber lass uns die wichtigsten Ma\u00dfnahmen zur Beschleunigung von FCP durchgehen.<\/p>\n Als Erstes solltest du ungenutztes CSS von Seiten entfernen, auf denen es nicht ben\u00f6tigt wird.<\/p>\n Eine M\u00f6glichkeit, dies zu tun, ist die manuelle Methode. Ein Tool wie PurifyCSS<\/a> 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.<\/p>\n Wenn du WordPress verwendest, gibt es jedoch einige hilfreiche Plugins, die den gesamten Prozess f\u00fcr dich automatisieren k\u00f6nnen, was viel einfacher ist (vor allem f\u00fcr Nicht-Entwickler\/innen). Einige gute Optionen sind WP Rocket<\/a>, FlyingPress<\/a> und Perfmatters<\/a>.<\/p>\n 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\u00f6nnen.<\/p>\n Standardm\u00e4\u00dfig wartet deine Website wahrscheinlich, bis der gesamte<\/em> 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\u00fcr den „above-the-fold“-Inhalt ben\u00f6tigt wird – alles andere kann bis sp\u00e4ter warten.<\/p>\n Das CSS f\u00fcr den „above-the-fold“-Inhalt einer Seite wird kritisches CSS<\/strong>\u00a0genannt.<\/p>\n Um den FCP deiner Seite und andere Leistungskennzahlen zu beschleunigen, kannst du dieses kritische CSS direkt in den Fortgeschrittene Benutzer k\u00f6nnen das kritische CSS einer Seite auch manuell mit einem Tool wie diesem<\/a> erstellen.<\/p>\n Aber auch in WordPress kannst du diesen Prozess f\u00fcr jede einzelne Seite deiner Website mit FlyingPress oder WP Rocket automatisieren.<\/p>\n Sobald du das kritische CSS einer Seite eingef\u00fcgt hast, kannst du das Laden des restlichen CSS der Seite auf einen sp\u00e4teren Zeitpunkt verschieben (nachdem der Inhalt der Seite bereits gerendert<\/em> wurde).<\/p>\n Sowohl WP Rocket als auch FlyingPress erledigen dies automatisch f\u00fcr dich als Teil ihrer kritischen CSS-Funktionalit\u00e4t, was ein weiterer Grund ist, sie zu nutzen.<\/p>\n Eine weitere M\u00f6glichkeit, die Leistung des CSS-Codes deiner Website zu<\/em> verbessern, ist das Mining des Codes. Wenn du den CSS-Code verkleinerst, entfernst du \u00fcberfl\u00fcssige Zeichen und Leerzeichen, wodurch du noch mehr Platz einsparen kannst.<\/p>\n Plugins wie WP Rocket und FlyingPress k\u00f6nnen dies f\u00fcr dich tun. Es gibt auch spezielle Minifizierungs-Plugins wie Fast Velocity Minify<\/a>.<\/p>\n Neben CSS ist auch das JavaScript<\/a> deiner Website ein Bereich, in dem du etwas Zeit f\u00fcr die Optimierung deines Codes aufwenden solltest.<\/p>\n Wie bei CSS gibt es auch hier verschiedene Strategien, mit denen du die Auswirkungen von JavaScript auf die FCP-Zeiten deiner Website verringern kannst.<\/p>\n Wenn du dich auf JavaScript verl\u00e4sst, um wichtige „above-the-fold“-Funktionen wie das Navigationsmen\u00fc deiner Website<\/a> zu steuern (dies ist besonders h\u00e4ufig bei der mobilen Version einer Website der Fall, da viele mobile Men\u00fcs auf JavaScript angewiesen sind<\/em>), kann dies deine FCP-Zeit verlangsamen, da die Browser der Nutzer\/innen das umfangreiche JavaScript erst laden m\u00fcssen, bevor sie mit dem Rendern der Seite beginnen k\u00f6nnen.<\/p>\n Wenn du WordPress verwendest, solltest du ein leistungsoptimiertes Theme w\u00e4hlen<\/a>, um dies zu vermeiden, denn gute Entwickler vermeiden es, JavaScript f\u00fcr diese Funktionen zu verwenden.<\/p>\n Du kannst auch versuchen, die Verwendung von Schiebereglern<\/a> und anderen JavaScript-gesteuerten Elementen in Above-the-Fold-Bereichen zu vermeiden.<\/p>\n 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\u00f6tiges JavaScript wie m\u00f6glich von jeder Seite zu entfernen.<\/p>\n Als Erstes solltest du alle WordPress-Plugins l\u00f6schen<\/a>, die deine Seite nicht sinnvoll verbessern, denn viele WordPress-Plugins sind f\u00fcr ihre Funktionalit\u00e4t auf JavaScript angewiesen.<\/p>\n Eine andere M\u00f6glichkeit ist die Verwendung eines Skriptmanager-Plugins wie Asset CleanUp<\/a> oder Perfmatters<\/a>, um JavaScript seitenweise zu deaktivieren. Damit kannst du Skripte auf Seiten deaktivieren, auf denen sie nicht ben\u00f6tigt werden, w\u00e4hrend sie auf anderen Seiten weiterhin aktiviert bleiben.<\/p>\n Wir haben auch einen technischen Leitfaden, wie du Plugins<\/a> seitenweise deaktivieren kannst.<\/p>\n Egal, was du tust, du wirst wahrscheinlich immer noch JavaScript auf deiner Seite laden m\u00fcssen. Um sicherzustellen, dass dein JavaScript das Laden von „above-the-fold“-Inhalten nicht behindert, gibt es 2 g\u00e4ngige Strategien, die du anwenden kannst:<\/p>\n Du kannst beide Taktiken in WordPress mit Plugins wie WP Rocket oder FlyingPress umsetzen.<\/p>\n Wir haben auch Anleitungen dazu, wie du das Parsen von JavaScript aufschiebst<\/a> und wie du Rendering-blockierende Ressourcen eliminierst<\/a>.<\/p>\n Zu guter Letzt solltest du das restliche JavaScript deiner Website minifizieren<\/a>, um durch das Entfernen unn\u00f6tiger Zeichen weitere kleine Leistungsvorteile zu erzielen.<\/p>\n Wie beim Mining von CSS k\u00f6nnen die meisten Caching- und Performance-Plugins (einschlie\u00dflich WP Rocket und FlyingPress) diese Aufgabe f\u00fcr dich \u00fcbernehmen. Du kannst auch ein gezieltes Plugin wie Fast Velocity Minify verwenden.<\/p>\n Mit dem Lazy Loading<\/a> kannst du das Laden von Bildern auf deiner Website so lange hinausz\u00f6gern<\/a>, bis sie ben\u00f6tigt werden (z. B. wenn ein Nutzer auf der Seite nach unten scrollt).<\/p>\n Normalerweise ist das gut f\u00fcr die Leistung, wenn du Bilder, die unterhalb des<\/em> Falzes liegen, verz\u00f6gert l\u00e4dst. Allerdings kann sich die Verwendung von „Lazy Loading“ f\u00fcr Bilder oberhalb des Falzes<\/em> negativ auf die FCP- und LCP-Zeiten deiner Website auswirken.<\/p>\n Deshalb solltest du sicherstellen, dass du alle Bilder, die \u00fcber der Ausklappleiste liegen, vom Lazy Loading ausschlie\u00dft.<\/p>\n Wenn du die Kernfunktion „Lazy Loading“ in WordPress nutzt, sollte<\/em> WordPress dies automatisch tun. Wenn du jedoch Probleme hast, kannst du dieses Verhalten mit der Funktion wp_omit_loading_attr_threshold<\/a> manuell anpassen.<\/p>\n Wenn du ein Plugin f\u00fcr Lazy Loading verwendest, sollte<\/em> das Plugin dir hoffentlich<\/em> eine entsprechende Option zur Verf\u00fcgung stellen. Bei Perfmatters kannst du zum Beispiel automatisch eine bestimmte Anzahl von f\u00fchrenden Bildern ausschlie\u00dfen und bei Bedarf bestimmte Bilder manuell ausschlie\u00dfen.<\/p>\n Wenn dein Plugin diese Funktion nicht bietet, solltest du auf ein anderes umsteigen, das diese Funktion bietet.<\/p>\n Um sicherzustellen, dass Textinhalte w\u00e4hrend 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<\/a> (z. B. solche <\/em>, diedu bei Google Fonts<\/a> gefunden hast<\/em>).<\/p>\n Um Probleme zu vermeiden, kannst du die Optionen Font-Display: <\/strong>Optional<\/strong> oder Font-Display: Swap<\/strong><\/a> CSS Deskriptoren verwenden.<\/p>\n Mit Font-Display: Optional<\/strong> kannst du den Browsern der Nutzer\/innen mitteilen, dass sie eine Ersatzschriftart verwenden sollen, wenn die benutzerdefinierte Schriftart nicht schnell genug geladen wird.<\/p>\n Wenn du dies nicht \u00fcber dein eigenes CSS hinzuf\u00fcgen m\u00f6chtest, gibt es eine Reihe von WordPress-Plugins, die das Laden von Schriften f\u00fcr dich optimieren k\u00f6nnen, darunter WP Rocket, FlyingPress und Perfmatters.<\/p>\n Laut Mozilla<\/a> ist das Document Object Model (DOM) „die Datendarstellung der Objekte, die die Struktur und den Inhalt eines Dokuments im Web ausmachen“<\/p>\n 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\u00f6nnen.<\/p>\n Generell gilt, dass eine gr\u00f6\u00dfere und komplexere DOM-Struktur zu langsameren FCP-Zeiten f\u00fchrt als eine k\u00fcrzere, optimierte DOM-Struktur.<\/p>\n Hier sind einige Tipps, wie du die Gr\u00f6\u00dfe des DOMs deiner Website reduzieren kannst:<\/p>\n Mit Weiterleitungen kannst du Besucher von einer URL zu einer anderen URL weiterleiten, bevor die Seite geladen wird. Du k\u00f6nntest zum Beispiel jemanden, der die HTTP-Version<\/strong> deiner Website besucht, auf die HTTPS-Version<\/strong> umleiten.<\/p>\n Da die Weiterleitung jedoch abgeschlossen sein muss, bevor der Browser des Nutzers die Seite laden kann, f\u00fchrt jede Weiterleitung in der Regel zu einer Verz\u00f6gerung von Hunderten von Millisekunden bei der FCP-Zeit deiner Website (und anderen Leistungskennzahlen).<\/p>\n Hier sind einige Tipps, um unn\u00f6tige Weiterleitungen zu vermeiden:<\/p>\n Um Weiterleitungsprobleme zu finden, kannst du das kostenlose Tool Kinsta Redirect Checker verwenden<\/a>. Wir haben auch einen Beitrag \u00fcber die besten Praktiken f\u00fcr WordPress-Weiterleitungen<\/a>.<\/p>\n 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:<\/p>\nFirst Contentful Paint vs. Largest Contentful Paint<\/h3>\n
\n
\n
![\"Der](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/04\/first-contentful-paint-vs-largest-contentful-paint-example-1024x450.jpg\")
Was ist eine gute First Contentful Paint Zeit?<\/h2>\n
![\"Google](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/04\/good-fcp-time-1024x269.jpg\")
Wie man die First Contentful Paint-Zeit einer Seite misst<\/h2>\n
\n
\n
![\"Wo](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/04\/fcp-time-pagespeed-insights-683x1024.jpg\")
Andere M\u00f6glichkeiten zur Messung der First Contentful Paint-Zeiten<\/h3>\n
\n
Was kann die FCP-Zeit deiner Website beeinflussen?<\/h2>\n
\n
Wie du First Contentful Paint beschleunigst: 10 Tipps, die funktionieren<\/h2>\n
1. Wechsel zu schnellerem Hosting<\/h3>\n
2. Verwende Seiten-Caching (idealerweise auf Server-Ebene)<\/h3>\n
![\"Die](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/04\/kinsta-page-caching-edge-1024x771.jpg\")
3. Implementiere ein Content Delivery Network (CDN)<\/h3>\n
![\"Cloudflare](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/04\/cloudflare-global-network-1024x645.jpg\")
4. Verwende einen schnelleren DNS-Anbieter<\/h3>\n
![\"Die](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/04\/kinsta-dns-management-1024x663.jpg\")
5. Optimiere das CSS deiner Website<\/h3>\n
Ungenutztes CSS entfernen<\/h4>\n
![\"Die](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/04\/wp-rocket-remove-unused-css-1024x847.jpg\")
Kritische CSS einbinden und unkritische CSS aufschieben<\/h4>\n
<head><\/code> Abschnitt der Seite einf\u00fcgen (auch bekannt als <\/em>inline<\/em><\/strong>), anstatt es als Teil eines externen Stylesheets zu laden.<\/p>\n![\"Wie](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/04\/flyingpress-optimize-css-delivery-1024x705.jpg\")
CSS-Code verkleinern<\/h4>\n
6. Optimiere das JavaScript deiner Website<\/h3>\n
Verwende keine JavaScript-abh\u00e4ngigen Elemente oberhalb des Falzes<\/h4>\n
Entferne unn\u00f6tiges JavaScript<\/h4>\n
Beseitige Rendering-blockierendes JavaScript (aufschieben oder verz\u00f6gern)<\/h4>\n
\n
![\"Die](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/04\/wp-rocket-javascript-optimization-1024x986.jpg\")
JavaScript-Code verkleinern<\/h4>\n
7. Lazy Loading f\u00fcr above-the-fold Bilder deaktivieren<\/h3>\n
![\"Die](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/04\/perfmatters-optimize-lazy-loading-1024x822.jpg\")
8. Optimiere die Bereitstellung von Schriften<\/h3>\n
![\"Wie](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/04\/flyingpress-optimize-fonts-1024x721.jpg\")
9. Versuche, die DOM-Gr\u00f6\u00dfe so weit wie m\u00f6glich zu reduzieren<\/h3>\n
\n
10. Vermeide Weiterleitungen (insbesondere Mehrfachweiterleitungen)<\/h3>\n
\n
![\"Eine](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/04\/kinsta-redirect-tool-1024x812.jpg\")