Seit der Einführung von Lighthouse sind neue Parameter im Zusammenhang mit der Seitengeschwindigkeit aufgetaucht. Einer der wichtigsten dieser Parameter ist First Contentful Paint (FCP). In Lighthouse Version 10, gültig ab Juni 2024, beträgt der Einfluss von FCP auf die Gesamtpunktzahl 10 %.

Um FCP als Messgröße zu übernehmen und zu verstehen, ist es wichtig, zunächst die Psychologie dahinter zu untersuchen. Das Konzept ähnelt dem Spiegel in Aufzügen installiert:

Um es kurz zusammenzufassen: In der ersten Hälfte des 1900. Jahrhunderts nahm die Nutzung von Aufzügen in hohen Gebäuden deutlich zu, aber im Vergleich zu heute waren die Aufzugssysteme primitiv. Daher entstand die Idee, Spiegel in Aufzügen anzubringen, um die im Aufzug verbrachte Zeit kürzer erscheinen zu lassen.

 

image-11.png
Quelle: https://web.dev/fcp/

 

Um auf unser Thema zurückzukommen: Der Punkt, der Sie beim Versuch, eine Seite aufzurufen, während der Ladezeit spürbar warten lässt, ist FCP. Die Definition von First Contentful Paint ist die Zeit, die benötigt wird, bis der erste Text, das erste Bild, die erste nicht weiße Leinwand usw. für den Benutzer angezeigt wird.Die Einheit von FCP sind Sekunden.

In Lighthouse wird die Farbskala für FCP wie folgt bestimmt:

  • 0-2 Sekunden: Grün => Schnell
  • 2-4 Sekunden: Orange => Verbesserungswürdig
  • 4+ Sekunden: Rot => Langsam

Laut HTTP-Archivdaten ist die Anzahl der Websites, die als schnell ist 25%, und 50 % der bestehenden Websites werden als langsam eingestuft.

 

image-10.png
Quelle: https://web.dev/first-contentful-paint/

 

Was kann getan werden, um FCP zu verbessern?

Reduzieren Sie die Serverantwortzeit

Im Allgemeinen kann dies als notwendiger Server- und Software-Verbesserungsbedarf interpretiert werden. Hier sind die Probleme, die sich negativ auf die Server-Antwortzeit auswirken:

  • Die Freigabe des Servers, die Konfiguration (d. h. die Servereinstellungen) und die Serverressourcen könnten das Problem sein. Die Kapazität Ihres Servers sollte entsprechend Ihrem Datenverkehr erhöht werden. In einigen Fällen können schlecht geschriebene Datenbankabfragen und hochkomplexe Softwarekomponenten die Serverantwortzeit erheblich beeinträchtigen.
  • Wenn kein CDN (Content Delivery Network) verwendet wird, kann es zu Verzögerungen beim Zugriff auf Inhalte kommen, was sich auf FCP auswirkt. Wenn die Inhaltsgröße zunimmt, z. B. wenn versucht wird, ein großes animiertes GIF oder Video ohne CDN aufzurufen und der Hauptserver auf einem anderen Kontinent steht, müssen Sie möglicherweise CDN-Lösungen in Betracht ziehen, um FCP zu beheben.

 

image-12.png
Quelle: https://gtmetrix.com/blog/first-contentful-paint-explained/

 

  • Wenn statische Inhalte nicht mit einer geeigneten und konsistenten Cache-Richtlinie bereitgestellt werden, kann dies zu einer Überlastung führen Ihren Server unnötig, wenn die Anzahl der Besucher steigt. Wenn Sie beispielsweise Ihr Logo nicht im Langzeitcache behalten, während Sie es auf jeder Seite laden, verkürzen Sie die Reaktionszeit Ihres Servers unnötig.
  • Unnötige Seitenumleitungen beim Zugriff auf die Seite kann Ihr FCP unnötig beeinträchtigen. 

In der Vergangenheit gab es beispielsweise Setups wie dieses: Wenn ein Benutzer eine Site aufrufen wollte, gab es eine Weiterleitung von HTTP zu HTTPS, wenn es sich um eine mobile Site handelte, eine Weiterleitung von HTTPS zu einer mobilen Site (z. B. von https://www zu https://m), und wenn die Seite entfernt und mit einer 301-Weiterleitung an eine andere Stelle weitergeleitet wurde, fühlte es sich an, als würde der Benutzer in einem Steuerbüro von Schreibtisch zu Schreibtisch weitergereicht. Dies ist ein extremes Beispiel zum besseren Verständnis, aber wenn Sie eine Seite mit einer 301-Weiterleitung zu einer anderen URL weiterleiten und diese Seite dann mit einer 301-Weiterleitung zu einer anderen, könnten Sie dasselbe unlogische Setup erstellen.

  • Wenn Sie Verwenden Sie kein Preconnect oder DNS-Prefetch. Wenn Sie bei der Verbindung mit Ihren Drittanbieterdiensten Präfixe verwenden und eine Verbindung zu vielen Drittanbieterdiensten herstellen, tun Sie nichts Nützliches für FCP.

Reduzieren Sie renderblockierende Ressourcen

Ich muss zugeben, dass es Monate dauern kann, bis dieser einzelne Punkt als Einzelpunkt behandelt wird.

image-13.png
Quelle: https://gtmetrix.com/eliminate-render-blocking-resources.html

Um dies zu erreichen, gibt es eine Lösungsmethode, bei der alle JS, CSS und ähnliche Ressourcen, die das Rendern der Seite blockieren, werden nach der Seitenerstellung geladen, aber der zunächst sichtbare Teil der Site wird zuerst geladen, während die Site geladen wird. Dazu müssen jedoch alle JS-, CSS- und ähnlichen Ressourcen untersucht und die zeitaufwändigsten Prozesse getrennt werden. Darüber hinaus hilft die Verwendung möglichst weniger Dienste von Drittanbietern bei der Optimierung von FCP.