Der First Contentful Paint (FCP) deiner Website ist eine der aussagekräftigsten Metriken in den Core Web Vitals von Google. Im Gegensatz zu anderen Mal- und Lademetriken ist der FCP keine rein technische Kennzahl für die Antwortzeit. FCP konzentriert sich auf die Erfahrung des Nutzers und auf das, was er zuerst auf der Website wahrnimmt, und nicht auf das, was im Hintergrund geladen wird.
Durch die Optimierung des First Contentful Paint Ihrer Website beschleunigen du nicht nur die allgemeinen Ladezeiten und erhöhen die Bewertungen der Seitengeschwindigkeit, du zeigst deinen Besucher*innen auch im wahrsten Sinne des Wortes, dass ihre Anfragen bearbeitet werden und das Laden nicht ins Stocken geraten ist.
In diesem Artikel gehen wir näher darauf ein, was First Contentful Paint ist, wie man es misst und optimiert, und beantworten einige häufig gestellte Fragen zu FCP, damit du sicher sein kannst, dass deine Website so effizient und benutzerfreundlich ist, wie sie nur sein kann.
Was ist First Contentful Paint (FCP)?
Das erste inhaltsreiche Bild deiner Website ist, wenn der Browser das erste DOM-Element auf deiner Seite rendert. Dazu gehören Bilder, Leinwandelemente (nicht weiß) oder Text. Im Klartext bedeutet FCP, dass sich ein Teil deiner Seite für den Benutzer ändert. Häufig ist dies eine Kopfleiste oder ein Hintergrundbild. Dieses Element ist vielleicht nicht das erste, das gerendert oder vom Server geladen wird, aber es ist das erste, das der Benutzer sehen kann, was es für die UX deiner Website so wichtig macht.
Alles, was deine Website innerhalb eines iframe enthält, wird von FCP nicht berücksichtigt. Auch das Malen von Nicht-Inhalten, wie z. B. eine Änderung der Hintergrundfarbe, wird nicht berücksichtigt. Das ist First Paint, nicht First Contentful Paint.
FCP ist eine interessante Kennzahl. Man kann sie zwar quantitativ messen, aber sie ist auch relativ subjektiv. Ein schnelles First Contentful Paint ist wichtig, weil es Nutzer*innen suggeriert, dass deiner Website schnell lädt. Unabhängig davon, ob dies tatsächlich der Fall ist oder nicht. Deine Website hat vielleicht eine viel längere erste interaktive Verzögerung (die Zeit, nach der Nutzer*innen mit der Website interagieren kann) als die der Konkurrenten, aber sie erscheint den Nutzern vielleicht als schneller, weil sie schneller ist als die FCP.
Wie man FCP misst
Obwohl FCP aufgrund der Benutzerwahrnehmung wichtig ist, handelt es sich um eine quantifizierbare Metrik, die du messen und bewerten kannst. Dennoch kannst du diese Tools verwenden, um die Auswirkungen des FCP in der Praxis (mit echten Nutzer*innen) und im Labor (simulierte Seitenladevorgänge zu Testzwecken) zu ermitteln.
Was ist ein gutes FCP-Ergebnis?
Bevor du dich mit den verschiedenen Tools zur Überprüfung deines FCP beschäftigst, musst du wissen, was als guter FCP-Wert gilt. Aus der Google-Dokumentation zur Bestimmung der metrischen Werte geht hervor, dass die FCP-Zeiten in drei Kategorien eingeteilt werden – gut, verbesserungsbedürftig und schlecht – und es wird erläutert, wie die vom Lighthouse-Tool verwendete Perzentilbewertung zustande kommt.
- Gut – zwischen 0 Sekunden und 1,8 Sekunden
- Verbesserungsbedürftig – zwischen 1,8 und 3 Sekunden
- Schlecht – über 3 Sekunden
Im Folgenden haben wir verschiedene Tools aufgelistet, mit denen du herausfinden kannst, in welche dieser Kategorien deine Website fällt.
Field-Tools
Field tools sind solche, mit denen du verfolgen kannst, wie die Seite bei deinen Nutzer*innen ankommt. Echte Benutzer*innen. Diese Tools stützen sich nicht auf APIs und Annahmen über Ihre Website. Sie werden direkt und in Echtzeit auf deinem Server ausgeführt, so dass du die genauesten und aktuellsten Informationen erhältst, die möglich sind.
In der Google-Dokumentation für FCP auf https://web.dev werden diese Tools als die besten Tools für die Bestimmung von FCP aufgeführt:
- PageSpeed Insights
- Chrome-Bericht zur Benutzerfreundlichkeit
- Search Console (Geschwindigkeitsbericht)
- Web Vitals JavaScript-Bibliothek
Darüber hinaus ist das vielleicht beste Tool Real User Monitoring (RUM). Dabei verfolgst du, wie echte Nutzer*innen mit deiner Website interagieren. Du kannst ihre Ladezeiten mit den oben genannten Tools quantitativ verfolgen und dann ihre subjektiven Wahrnehmungen von FCP und deiner Seitenladegeschwindigkeit direkt von ihnen erhalten. Wenn es darum geht, einen möglichst vollständigen Überblick über FCP und seine Auswirkungen auf deine Besucher*innen zu erhalten, steht RUM definitiv an der Spitze der Liste. Allerdings ist sie auch am kompliziertesten und am schwierigsten durchzuführen.
Lab Tools
Lab tools für die FCP-Prüfung simulieren in der Regel Ergebnisse, die zeigen, wie dein FCP unter idealen Bedingungen aussehen würde. Anstelle von realen Situationen, in denen Latenz, Bandbreite, Netzwerküberlastung und andere Hindernisse auftreten, bieten diese von Google empfohlenen Labor-Tools einen Überblick darüber, was deine Website bei optimalem Betrieb leisten kann.
Wenn du eine Website entwickelst, die noch nicht in Produktion ist, ist es unmöglich, sie unter realen Bedingungen zu testen. Die Verwendung von Labor-Tools kann dir auch dabei helfen, Benchmarks und Meilensteine zu setzen, während dein Projekt den Entwicklungszyklus durchläuft.
Wie du dein FCP-Ergebnis optimierst
Die oben genannten Tools geben dir einen Überblick und eine Bewertung deiner Website-Geschwindigkeit und deines FCP, klar. Aber sie – wie auch andere wie GT Metrix und Pingdom – geben dir auch Einblicke in das, was du tun kannst, um deinen FCP-Wert zu optimieren und ihn noch schneller zu machen. Wir geben dir einen Überblick über einige der häufigsten Schritte zur Verbesserung der First Contentful Paint-Zeiten, damit du weißt, wie du alles angehen kannst, was die Tests und Tools dir vorschlagen.
Renderblockierende Ressourcen entfernen
Dies könnte der wichtigste On-Page-Faktor für die Senkung deiner FCP-Zeit sein. Render-Blocking-Ressourcen sind Dateien auf deiner Website, die deine Seite zum Rendern haben muss. Dazu gehören HTML, JavaScript, Schriftarten und CSS-Dateien. Sie haben Vorrang vor allen anderen Dateien auf der Seite und halten den Ladeprozess aller anderen Dateien an, bis sie fertig sind. Bilder, einfacher Text oder andere benutzerseitige Inhalte werden auf Eis gelegt, bis die wichtigen Dateien fertig sind.
Dieser Halt verursacht aus zwei Gründen einen dramatischen Anstieg in FCP:
- Rendering-Blocking-Dateien sind im Allgemeinen sehr groß
- Rendering-Blocking-Dateien enthalten in der Regel keine Seiteninhalte, sondern nur Struktur und Formatierung.
Indem du diese Ressourcen aus dem kritischen Rendering-Pfad entfernen, schaffst du Platz für inhaltsreiche Malerei. Du kannst das Laden der Ressourcen aufschieben, die Verwendung von @import für CSS vermeiden (verwende stattdessen @media für bedingtes CSS) und darauf achten, dass du deine CSS-, HTML- und JavaScript-Dateien minimierst und kombinierst (was wir später in diesem Artikel besprechen).
Darüber hinaus können Divi-Benutzer von unserem Critical CSS-System profitieren, das automatisch jede einzelne Rendering-blockierende CSS-Anfrage beseitigt. Darüber hinaus verfügt das Theme über geschwindigkeitssteigernde Optionen, die in dieser Hinsicht sehr hilfreich sind. Nicht nur, dass es Google Fonts zwischenspeichert und sie inline im Header ausgibt (wodurch @import vermieden wird), Divi lässt dich auch wählen, ob du die nativen und (wahrscheinlich) ungenutzten Emoji von WordPress entfernen möchtest, die Ressourcen für FCP beanspruchen, jQuery aufschieben und das Stylesheet des Gutenberg-Blockeditors davon abhalten, zuerst zu rendern und andere Ressourcen zu blockieren. Aus diesem Grund ist die Leistung von Divi so großartig und kann Ihnen helfen, sofort gute FCP-Ergebnisse zu erzielen.
WordPress-Benutzer ohne Divi finden möglicherweise auch einige Rendering-Blocking-Optionen in ihren Caching-Plugins wie WP Rocket, und die Aktivierung dieser Optionen wird ebenfalls dazu beitragen, die FCP-Zeit zu verringern.
Text vor und während des Ladens der Schrift anzeigen
Hast du schon einmal eine Website gesehen, auf der der gesamte Text auf einer Seite auf einmal erscheint, obwohl alle anderen Inhalte bereits vorhanden sind?
Das liegt daran, dass der Browser ihn ausblendet. Der Textinhalt der Website wird erst geladen, wenn er lesbar ist. Text besteht in der Regel nur aus einer Handvoll Bytes an Inhalt. Aber auf vielen Websites kann das Laden exponentiell länger dauern. Das liegt daran, dass die Schriftartdatei noch nicht „anzeigebereit“ ist. Von allen Möglichkeiten, eine blitzschnelle FCP-Zeit zu erreichen, ist das Malen des Textinhalts Ihrer Website vielleicht die beste.
Du kannst verschiedene Schriftart-Anzeige-Parameter verwenden, du kannst den Browser anweisen, den Text deiner Website sofort mit einer Systemschriftart zu laden und ihn dann durch die von dir angegebene Anzeige-Schriftart zu ersetzen, sobald er geladen ist.
Textinhalte haben eine minimale Dateigröße, oft nur ein paar Bytes, und wenn du den Browsern sagst, dass sie ihn ohne Verzögerung anzeigen sollen, kann dein FCP fast nicht mehr existieren. Füge einfach font-display:swap zu jedem @font-face-CSS hinzu, das du hast. Das allein könnte viele Ihrer First Contentful Paint Zeitprobleme lösen.
Divi macht dies standardmäßig, so dass unsere Mitglieder keine Änderungen vornehmen müssen. Die Seiten werden automatisch von einer Systemschriftart zu einer anderen wechseln, anstatt den Inhalt der Seite zu verbergen, bis die Dateien vollständig geladen sind.
Verringer dein HTML, CSS und JavaScript
Bei der Minimalisierung werden überflüssige Zeichen (wie Leerzeichen) aus den HTML-, CSS- und JavaScript-Dateien deiner Website entfernt. Während Leerzeichen das Lesen und Parsen für Menschen erleichtern, brauchen Browser und Server sie nicht. Diese Leerzeichen sind immer noch Zeichen, die Bytes beanspruchen. Indem du Dinge wie deine CSS-Dateien minimierst, verringerst du die Seitengröße. Das erhöht die Geschwindigkeit der Seite und verbessert die Zeit bis zum FCP.
Wenn Du ein WordPress-Nutzer bist, hast du wahrscheinlich bereits eine Minifizierungsoption in Deinem Theme oder Caching-Plugin. Für Divi-Benutzer ist das bereits erledigt. Divi wird automatisch seine minimierte Version von Skripten in die Warteschlange stellen. Wenn diese aktiviert sind, wird dein FCP fallen.
Ungenutztes CSS herausnehmen
Wenn du Code in deinen Stylesheets hast, der nicht verwendet wird, warum solltest du ihn dann behalten? Veralteter oder ungenutzter Code sollte entfernt werden, damit er nicht jedes Mal geladen wird, wenn deine Website aufgerufen wird. Chrome DevTools (das wir oben verlinkt haben) kann dir unter der Registerkarte Coverage zeigen, welche Teile deines CSS geladen, aber nicht gerendert werden.
Divi-Benutzer sollten außerdem beachten, dass wir die Art und Weise, wie unser Theme CSS und diese Art von Style-Bloat behandelt, komplett überarbeitet haben. Unser umfangreiches Divi-Performance-Update sorgt dafür, dass CSS dynamisch in kleine, minimierte Dateien sortiert wird, die auf den Modulen basieren, die du für Deine Seite ausgewählt hast. Darüber hinaus erkennen wir, welche Teile des CSS oberhalb des Falzes geladen werden und rendern diese zuerst. Und das reduziert deinen FCP.
Wir haben also nicht nur deinen CSS automatisch verkleinert, sondern es auch in mundgerechte Häppchen für deinen Browser zerlegt und diejenigen priorisiert, die die FCP und die Gesamtladezeit der Seite erhöhen.
Verkürzung der Zeit bis zum ersten Byte (TTFB)
Im Wesentlichen ist TTFB der Zeitpunkt, an dem das erste Byte der Daten an den Browser übertragen wird. FCP hängt von dieser Kennzahl ab, und je schneller sie ist, desto schneller ist dein First Contentful Paint. Die besten Methoden, um TTFB zu reduzieren und deine Seite zu beschleunigen, sind ziemlich einfach:
- Verwende einen hochwertigen Hoster
- Inhalte über ein CDN ausliefern
- Browser-Caching aktivieren (bei WordPress durch ein Plugin wie WP Rocket)
Wenn du sicherstellst, dass diese drei Elemente angemessen beachtet werden, kannst du TTFB und damit dein FCP drastisch reduzieren.
Halte deine DOM-Größe klein
Das könnte ein Gimme sein. Aber oft ist einer der größten limitierenden Faktoren für ein schnelles First Contentful Paint ein zu großes DOM. Du versuchst auf Anhieb, zu viel zu tun. Google sagt, dass „der Sweet Spot eine Baumtiefe <32 Elemente und weniger als 60 Kinder/Eltern-Elemente ist“.
Viele von uns verkomplizieren ihre Homepages und Landingpages zu sehr, um die Besucher zu beeindrucken. Diese zusätzlichen Elemente blähen jedoch das DOM auf und führen zu einer höheren FCP-Zeit. Du kannst dem entgegenwirken, indem du die Anzahl der CSS-Selektoren, die du verwendest, reduzierst und vielleicht viel mehr klassenbasiertes CSS als ID oder spezielle Media-Queries verwendest. Pseudo-Selektoren machen die Sache noch komplizierter und erhöhen die Größe des DOM.
Außerdem kannst du die Anzahl der Elemente, auf die die Selektoren angewendet werden, verringern. Es dauert weniger Zeit, 5 Elemente zu laden und Stile anzuwenden als 10. Dies gilt insbesondere für ältere und veraltete Browser, die trotz aller Bemühungen immer noch täglich verwendet werden.
SVG- oder WebP-Bilder verwenden
Dieser Punkt betrifft vielleicht nicht jede Website, weshalb wir ihn als letzten auf unserer Liste aufgeführt haben. Bilder sind in der Regel nicht das Erste, was auf eine Seite gemalt wird, vor allem nicht über Text oder zusätzliche Frames, aber es ist möglich, dass eine deutliche Verringerung der Dateigröße von wichtigen/vorherrschenden Bildern (wie z. B. Ihr Website-Logo) bei FCP helfen kann.
Während .gif, .jpg und .png die häufigsten Bilddateien sind, die du verwendest, kannst du eine Menge Zeit sparen, wenn du diese in .webp- oder .svg-Dateien umwandelst. Da die Dateigrößen manchmal eher im Byte- als im Kilobyte-Bereich liegen, werden deine Bilder im Handumdrehen geladen. Wenn du WordPress benutzt, hat Version 5.8 eine eingebaute .webp-Unterstützung, und wir haben eine Übersicht über die Verwendung von SVG-Bildern in unserem Archiv.
Höchstwahrscheinlich wird sich diese Methode mehr auf dein Largest Contentful Paint (LCP) als auf FCP auswirken, aber ein SVG-Logo, das klein genug ist, kann sicherlich das erste sein, was deine Nutzer*innen sehen.
First Contentful Paint (FCP) Häufig gestellte Fragen
Wie passt FCP zur Gesamtleistung meiner Website?
Als direkte Messgröße für die Leistung einer Website nicht sehr. Die FCP ist eine nutzerzentrierte, wahrgenommene Kennzahl, die nicht unbedingt auf die Leistung einer Website schließen lässt. Wie bereits erwähnt, können zwei Websites die exakt gleiche Ladezeit haben, aber diejenige mit einer niedrigeren FCP-Zeit kann als schneller angesehen werden. Diese Wahrnehmung kann sich auf das Benutzererlebnis auswirken, wenn auch nicht auf die Gesamtleistung der Website.
First Contentful Paint ist jedoch eine fantastische Metrik, die man verfolgen kann, um die Gesamtleistung der Website auf ein höheres Niveau zu bringen. Jede Maßnahme, die Sie ergreifen, um die FCP zu senken, wird auch die Geschwindigkeit deiner Seite insgesamt verringern. Du kannst sie also fast als ein Signal für deine Gesamtleistung ansehen.
Eine niedrige FCP-Zeit geht im Allgemeinen nicht mit einer hohen Gesamtladezeit einher. Wenn du also eine einzelne Kennzahl brauchst, um zu sehen, wo du stehst, kann die FCP ein guter Wegweiser sein. Du kannst sie auch mit LCP (Largest Contentful Paint) kombinieren, um ein vollständigeres Bild davon zu erhalten, was deine Nutzer in den ersten Sekunden sehen, wenn sie auf deine Website kommen.
Was ist der Unterschied zwischen First Paint und First Contentful Paint?
Obwohl die beiden Begriffe gelegentlich synonym verwendet werden, handelt es sich technisch gesehen um zwei unterschiedliche Messgrößen. Wie wir bereits besprochen haben, ist First Contentful Paint der Zeitpunkt, an dem der Browser das erste DOM-Element auf der Seite rendert. Man kann sich das als jeden brauchbaren (wenn auch nicht interaktiven) Inhalt auf der Seite vorstellen. Ein Hintergrundbild, Text oder Ihr Kopfmenü-Div, zum Beispiel.
First Paint ist jedoch der Zeitpunkt, an dem der Browser die ersten Informationsbytes rendert, unabhängig davon, ob es sich um einen Inhalt handelt oder nicht. Eine Änderung der Hintergrundfarbe (nicht das Laden eines Hintergrundbildes) ist nicht inhaltsrelevant. Der Benutzer kann sie nicht als Inhalt konsumieren, weshalb sie kein Beispiel für FCP ist.
Das erste Bild kann genau dasselbe sein wie dein erstes inhaltsreiches Bild. Aber dein FCP muss nicht dasselbe sein wie dein erstes Bild.
Schlussfolgerung
FCP ist eine absolut wichtige Kennzahl für deine Website. Google bewertet die Seitengeschwindigkeit als einen der wichtigsten Aspekte deiner Seitenrankings. Für die Nutzer*innen ist die Seitengeschwindigkeit einer der entscheidenden Faktoren, ob sie auf deiner Website bleiben. Ein niedriger First Contentful Paint kann die Nutzer*innen auf deiner Website halten und ihnen helfen, deine Website überhaupt erst zu finden. Auch wenn die FCP-Kennzahl oft schwer zu fassen ist, verbessern Optimierungen zur Verringerung der FCP-Zeit die Benutzerfreundlichkeit und tragen dazu bei, wertvolle Sekunden und Millisekunden von den Gesamtladezeiten deiner Website abzuziehen.
übersetzt von Lisa Kraus
von Website Freiburg
Quelle, unser Divi Websoftware Partner Elegant Themes:
www.elegantthemes.com/blog/wordpress/fcp-first-contentful-paint
