PageSpeed Optimieren: So haben wir die Geschwindigkeit 3x erhöht und easy einen Durchbruch bei den Google-Rankings erzielt

PageSpeed bezieht sich auf die Ladezeit einer Webseite. Sie ist ein entscheidender Faktor für die
Benutzererfahrung und die Leistung einer Website. Google hat PageSpeed zu einem wichtigen
Ranking-Faktor gemacht, da schnellere Websites eine bessere Benutzererfahrung bieten und somit die
Zufriedenheit der Nutzer erhöhen.
Ein nützliches Tool zur Messung der Ladezeit ist das PageSpeed Insights Tool von Google. Es
analysiert den Inhalt einer Webseite und generiert Verbesserungsvorschläge für den PageSpeed.
Der Pagespeed umfasst verschiedenste Metriken, hier sind diese nochmal Erklärt:

1. First Contentful Paint (FCP)

• Was es misst: Die First Contentful Paint misst die Zeit, die vom Abrufen einer Seite bis zum ersten sichtbaren Content vergeht. Dabei handelt es sich um das erste sichtbare Element im Browser, das entweder Text oder ein Bild sein kann.

• Warum es wichtig ist: FCP ist eine der wichtigsten Metriken, da sie dem Benutzer sofort anzeigt, dass die Seite zu laden beginnt. Eine schnelle FCP vermittelt den Eindruck, dass die Seite schnell geladen wird, auch wenn sie noch nicht vollständig geladen ist. Der Nutzer bekommt hier also das erste visuelle Feedback, dass etwas passiert.

• Optimierungstipps: Du kannst die FCP verbessern, indem du kritische CSS-Dateien frühzeitig ladest und sicherstellst, dass wichtige Ressourcen wie Schriftarten und Bilder schnell bereitgestellt werden.

2. Largest Contentful Paint (LCP)

• Was es misst: Der Largest Contentful Paint misst die Zeit, die verstreicht, bis das größte sichtbare Inhaltselement der Seite vollständig geladen ist. Es kann sich dabei um ein großes Bild, ein Video, einen Textblock oder andere größere Elemente auf der Seite handeln.

• Warum es wichtig ist: LCP ist eine der wichtigsten Metriken, um zu messen, wann die Seite für den Benutzer nutzbar wird. Wenn LCP schnell ist, fühlt sich die Seite für den Benutzer „fertig“ an. Eine langsame LCP-Zeit lässt die Seite zäh erscheinen, was besonders problematisch ist, wenn es sich um den Hauptinhalt der Seite handelt (z. B. ein großes Bild oder ein zentraler Textblock).

• Optimierungstipps: Die Ladegeschwindigkeit des größten Inhalts kann durch die Reduzierung der Größe von Bildern und die Verwendung von Lazy Loading (d. h. nur die Bilder zu laden, die im sichtbaren Bereich sind) verbessert werden. Zudem können serverseitige Optimierungen wie Caching und Content Delivery Networks (CDNs) helfen.

3. First Input Delay (FID)

• Was es misst: First Input Delay misst die Zeit, die zwischen der ersten Benutzerinteraktion (z. B. einem Klick auf einen Button, einem Tippen auf ein Textfeld oder dem Scrollen) und der tatsächlichen Reaktion des Browsers verstreicht. Das bedeutet, wie lange der Browser braucht, um auf die Eingabe des Benutzers zu reagieren.

• Warum es wichtig ist: Ein niedriger FID-Wert bedeutet, dass die Seite sofort auf Benutzerinteraktionen reagiert, was ein flüssiges und reaktionsschnelles Erlebnis für den Benutzer schafft. Wenn der FID-Wert hoch ist, kann es zu spürbaren Verzögerungen kommen, was die Benutzererfahrung erheblich beeinträchtigen kann.

• Optimierungstipps: Eine hohe FID entsteht oft durch JavaScript-blockierende Ressourcen. Um diesen Wert zu optimieren, solltest du JavaScript-Resourcen aufteilen (z. B. Code-Splitting) und sicherstellen, dass wichtige Interaktionen schnell verarbeitet werden. Auch das Minimieren von JavaScript-Dateien und das Priorisieren von kritischem JavaScript hilft, den FID zu senken.

4. Cumulative Layout Shift (CLS)

• Was es misst: Der Cumulative Layout Shift misst die visuelle Stabilität einer Webseite, indem er verfolgt, wie stark sich die Layouts von Elementen während des Ladens der Seite verschieben. Wenn ein Nutzer z. B. auf einen Button klickt und dieser plötzlich nach unten rutscht, ohne dass der Nutzer das erwartet hat, sorgt das für eine hohe CLS.

• Warum es wichtig ist: Ein hoher CLS-Wert kann zu einer unangenehmen Nutzererfahrung führen, da unvorhersehbare Verschiebungen die Navigation der Seite schwierig machen. Insbesondere bei mobilen Geräten kann dies die Benutzererfahrung erheblich verschlechtern, da Touch-Interaktionen häufig versehentlich „verschoben“ werden.

• Optimierungstipps: Um CLS zu minimieren, solltest du sicherstellen, dass:

  • Bilder und Videos immer eine festgelegte Größe (z. B. durch CSS oder HTML-Attribute) haben.

  • Webfonts nur dann geladen werden, wenn sie tatsächlich benötigt werden, und Fallback-Schriftarten sollten definiert sein.

  • Dynamisch hinzugefügte Inhalte (wie z. B. Werbung) nicht die Layouts der Seite verschieben, wenn sie nachgeladen werden.

5. Time to Interactive (TTI)

• Was es misst: Time to Interactive misst die Zeit, die benötigt wird, bis die Seite vollständig interaktiv ist. Das bedeutet, dass alle notwendigen JavaScript-Ressourcen geladen sind und der Benutzer ohne Verzögerung auf der Seite interagieren kann.

• Warum es wichtig ist: Eine niedrige TTI sorgt dafür, dass die Seite schnell reagiert, wenn der Benutzer mit ihr interagiert. Wenn die Seite nach dem Laden weiterhin blockiert oder träge ist, kann dies zu einer schlechten Benutzererfahrung führen, selbst wenn visuelle Inhalte schnell erscheinen.

• Optimierungstipps: Eine Optimierung der TTI erfolgt durch Asynchrones Laden von JavaScript, das Vermeiden von Rendering-blockierenden Skripten und das Minimieren des Umfangs und der Komplexität von Skripten, die die Interaktivität verzögern könnten.

6. Total Blocking Time (TBT)

• Was es misst: Total Blocking Time misst die Zeit, in der der Haupt-Thread des Browsers blockiert ist und keine Benutzerinteraktionen verarbeitet werden können. Diese Blockierung passiert vor allem durch JavaScript, das während des Ladens der Seite intensiv verarbeitet wird.

• Warum es wichtig ist: Eine hohe TBT bedeutet, dass die Seite während des Ladevorgangs „gefroren“ ist und der Benutzer keine Eingaben machen kann. Dies führt zu einem langsamen oder unvollständigen Benutzererlebnis.

• Optimierungstipps: Die TBT kann durch die Optimierung von JavaScript und das Vermeiden von langen Skriptverarbeitungen gesenkt werden. Code-Splitting, das Verzögern von nicht-kritischen Skripten und das Verwenden von Web-Worker für rechenintensive Prozesse sind hier hilfreich.

7. Page Load Time (PLT)

• Was es misst: Die Page Load Time ist die Zeit, die von der Anfrage des Benutzers bis zum vollständigen Laden der Webseite vergeht. Sie umfasst alle Phasen, vom Abrufen der Ressourcen bis zur vollständigen Darstellung aller Inhalte.

• Warum es wichtig ist: Diese Metrik gibt einen allgemeinen Überblick über die Ladegeschwindigkeit der Seite. Während sie hilfreich ist, um eine grobe Vorstellung von der Performance zu bekommen, sollte sie nicht als alleinige Metrik betrachtet werden, da sie nicht die interaktive Erfahrung des Benutzers misst.

• Optimierungstipps: Eine schnelle Ladezeit lässt sich durch optimierte Serverkonfigurationen, Content Delivery Networks (CDNs) und das Minimieren von HTTP-Anfragen erreichen. Auch das Caching von Ressourcen und die Optimierung der serverseitigen Antwortzeit sind von entscheidender Bedeutung.

8. Speed Index

• Was es misst: Der Speed Index misst, wie schnell der sichtbare Inhalt einer Seite während des Ladeprozesses angezeigt wird. Diese Metrik berücksichtigt die Zeit, die vergeht, bis der größte Teil des sichtbaren Inhalts dargestellt wird.

• Warum es wichtig ist: Der Speed Index gibt an, wie „flüssig“ die Seite lädt und gibt einen guten Eindruck davon, wie schnell der Benutzer relevante Inhalte sehen kann, auch wenn die Seite noch nicht vollständig geladen ist.

• Optimierungstipps: Eine schnellere Anzeige des sichtbaren Inhalts wird erreicht, wenn kritische Ressourcen wie CSS und JavaScript vorab geladen werden. Lazy Loading und Asynchrones Laden von Skripten können ebenfalls helfen, den Speed Index zu verbessern.