Was bedeutet Pagespeed?
Unter Pagespeed versteht man die Ladezeit einer Website. Die Ladegeschwindigkeit einer Seite setzt sich hierbei aus zwei Teilen zusammen:
- Der Wait Time To First Byte bzw. Time To First Byte (TTFB) = Antwortzeit des Servers.
- Transfer Time = Download Dauer des HTML an für sich.
Was beeinflusst die Ladezeit?
Beim Pagespeed einer Website wird zwischen mehreren Einflussgrößen auf die Ladezeit unterschieden. Erste ausschlaggebende Einflussgröße ist die Größe der Website und die damit verbundene Datenmenge die übertragen werden muss. Die Latenz des Webservers ist die zweite Einflussgröße auf den Pagespeed und bezeichnet die Zeit, die durch Verzögerungen vergeht, ohne dass Daten übertragen werden. Des weiteren spielt auch korrektes Caching in die Berechnung des Pagespeeds mit ein.
Wieso ist der Pagespeed wichtig?
Lange Ladezeiten von Webseiten sorgen für eine negative Nutzererfahrung, die sogenannte User Experience. Durch eine zu lange Ladedauer auf einer Website, springt ein Großteil der Besucher frühzeitig ab und navigiert zur nächsten Webseite. Somit erhöht ein langsamer Pagespeed die sogenannte Absprungrate welche wiederum das Google Ranking verschlechtert.
Website Ladezeiten als Rankingfaktor für SEO bei Google?
Seit Juni 2021 gilt der Pagespeed, als Teil der Google Core Web Vitals und ist somit ebenso relevant wie andere Rankingfaktoren, wie beispielsweise Save Browsing oder unaufdringliche Interstitials wie pop-ups etc.. Eine Website mit angemessener Ladezeit unterstützt die Suchmaschinenoptimierung.
Wie kann man web core vitals messen?
Der Pagespeed einer Website zählt zu den Core Web Vitals. Anhand einer Google Service Seite lässt sich ein Report über alle Web Core Vitals der Website generieren.
Wann ist eine Website “schnell”?
Die Google Search Console differenziert zwischen schnellen und zu langsamen Websites. Das Herunterladen einer Seite von über 3 Sekunden Dauer wird hierbei als zu langsam eingestuft. Ein Pagespeed zwischen 1,8 und 3 Sekunden gilt als durchschnittlich. Mobile User springen im Schnitt bereits nach 2 Sekunden Ladegeschwindigkeit wieder ab. Eine Punktzahl von 85 bei den Pagespeed Tools gilt laut Google demnach als ausreichend.
Weshalb eine Ladezeit Optimierung Ihrer Website sinnvoll ist und wie Sie dabei vorgehen müssen um die Geschwindigkeit Ihrer Website zu erhöhen, wird Ihnen in diesem Beitrag erklärt.
Wie wird der Pagespeed gemessen?
First Contentful Paint (FCP)
Beim FCP handelt es sich um den Messwert der Ladegeschwindigkeit einer Website. Dabei wird gemessen, wie lange der Browser braucht, bis das erste Element (DOM Content) einer Website angezeigt wird, nachdem ein Nutzer auf die Website klickt. Bilder sowie nicht weiße <canvas> Elemente werden dabei ebenfalls miteinbezogen.
Speed Index
Der Geschwindigkeitsindex (=Speed Index) misst wie schnell der Inhalt beim Laden der Seite visuell dargestellt wird. Der Geschwindigkeitsindex ist ein Vergleich zwischen dem Geschwindigkeitsindex Ihrer Seite und den Geschwindigkeitsindizes echter Websites, basierend auf Daten aus dem HTTP-Archiv.
Time to Interactive (TTI)
Die “Zeit bis zur Interaktivität” misst wie lange es dauert, bis die Ressourcen, (wie z.B Navigationselemente, Buttons, Javascript) die für eine zuverlässig funktionierende und interaktive Seite notwendig sind, vollständig geladen wurden.
Eine Seite gilt als vollständig interaktiv, wenn:
- Die Seite nützliche Inhalte anzeigt, die mit dem First Contentful Paint gemessen werden.
- Event-Handler für die meisten sichtbaren Seitenelemente registriert sind.
- Die Seite auf Benutzerinteraktionen innerhalb von 50 Millisekunden reagiert.
Total Blocking Time (TBT)
= zu Deutsch “gesamte Blockierungszeit”: Misst die Gesamtzeit, in der eine Seite nicht auf Benutzereingaben wie Mausklicks, Bildschirmberührungen oder Tastatureingaben reagieren kann. Die TBT bemisst sich aus der Summe an Zeit die zwischen dem “First Contentful Paint (FCP)” und der “Time to Interactive (TTI)” vergangen ist. Jede Aufgabe, die länger als 50 ms ausgeführt wird, ist eine lange Aufgabe und wird der gesamten Blockierungszeit hinzugefügt.
Largest Contentful Paint (LCP)
Die Metrik LCP, zu Deutsch “gößtes inhaltsreiches Bild”, gibt die Renderzeit des größten im Viewport sichtbaren Bildes oder Textblocks an, relativ zum Zeitpunkt des ersten Ladevorgangs der Seite.
Cumulative Layout Shift (CLS)
Unter der kumulativen Layoutverschiebung versteht man die Bewertung aller unerwarteten Sprünge im Aufbau des Layouts einer zu ladenden Seite. Eine Layoutverschiebung tritt immer dann auf, wenn ein sichtbares Element seine Position von einem gerenderten Frame zum nächsten ändert.
Von einem Ausschlag an Layoutverschiebungen wird gesprochen, wenn eine oder mehrere einzelne Verschiebungen in kurzer Zeitspanne nacheinander auftreten. (d.h: Weniger als eine Sekunde zwischen jeder Verschiebung)
Welche Handlungsmöglichkeiten gibt es?
TTFB Optimierung
Time to First Byte (oder TTFB) ist die Dauer, zwischen der Anfrage der Website durch einen Benutzer, und dem ersten durch den Browser geladenen Bytes der Website.
Inwiefern kann dieser Zeitraum verkürzt werden?
Aktivieren des Full Page Cache
- HTML rendern bevor die erste Anfrage gesendet wird.
- Jeder anonyme Benutzer erhält eine statische HTML.
- Cookie-/Pfadbasierte Ausnahmen können ebenfalls gecacht werden.
- PHP muss hier nicht verwendet werden.
Opcode, Objekt in-Memory Cache + NVM
- Verwendung von SSDs (NVMs) anstelle von HDDs (Serverseitig).
- Vorhandener, vorverarbeiteter PHP-Code wird gespeichert.
- Häufig genutzte Objekte werden permanent im RAM gespeichert.
- Häufig genutzte Datenbank Abfragen werden im RAM gehalten.
Vorteile der Verwendung eines CDN
- Hosting in globalen Rechenzentren = nahe beim Kunden/Benutzer.
- Verwendung von Argo Routing (Cloudflare).
- Vollständig gerenderte Seiten werden vom CDN gespeichert.
- On-The-Fly Inhalts Optimierung von Inhalten.
Render Optimierung
- Optimierung des Codes durch Minifizierung
- Häufige Redirects vermeiden
- Bilder nur in ihrer benötigten Größe laden
- “Statusaktualisierung" durch progressives Rendering.
- Nicht-blockierendes CSS durch Verwendung von Inline-CSS im <head> oder dem Media-Attribut → Kritisches CSS direkt im <head>-Abschnitt.
- Reduzierung der Anwendungen von Drittanbietern.
- Rendering blockierende, externe Javascript Skripte durch async oder defer ersetzen.
Webfont Optimierung
1. Erste Schritte der Webfront Optimierung durch:
- Schriften nur in der Sprache laden die auf der Website verwendet wird
- Keine unbenutzten Gewichtungen/Schriftschnitte mitladen.
- Nur die Glyphen im CSS einbetten die auch benutzt werden.
2. Die Benutzung von Skeleton Screens
Skelett-Bildschirme (als Splash-Screens), die anzeigen, dass ein Bildschirm geladen wird, werden im Vergleich zu einem leeren Bildschirm (unsere Kontrolle) und einem Spinner als kürzere Ladezeit wahrgenommen - aber nicht viel kürzer.
Skelett Bildschirme sollten das allmähliche Laden von Inhalten nicht blockieren (echte Inhalte sollten Skelett Objekte sofort ersetzen, wenn die Daten verfügbar sind).
3. Intelligentes Vorladen
- AMP-Vorladen
- Verwendung eines universellen Hover-Preloaders
Fazit
Die Optimierung der Website Ladegeschwindigkeit bringt viele Vorteile mit sich. Mittlerweile werden ca. 50 % aller Websites über mobile Endgeräte abgerufen, vor allem hier ist ein guter Pagespeed Index ausschlaggebend. Neben der User Experience, wird eine schnelle Website vorteilhaft im Google Ranking bewertet. Es gibt verschiedene Stellschrauben welche die Seitenladezeit beeinflussen können, wie beispielsweise die hier im Artikel beschriebenen Methoden.
Weitere Informationen zum Thema Pagespeed finden Sie hier:
www.seobility.net, www.heise.de
Buchtipps
