In unserem vollständigen Leitfaden erfahren Sie, was PageSpeed bedeutet, wie Sie es messen können und warum die Ladegeschwindigkeit für Ihre Website so wichtig ist. Anschließend erklären wir, was die Seitengeschwindigkeit verlangsamen kann und wie Sie die Ladezeiten durch gezielte Maßnahmen optimieren können.
Welchen Einfluss hat der Pagespeed?
Crawling: Langsam ladende Websites werden vom Googlebot langsamer und weniger intensiv gecrawlt, da er nur ein begrenztes Budget für das Crawling hat. Mit der Ladegeschwindigkeit bestimmen Sie auch, wie gut Ihre Website gecrawlt wird und wie aktuell Ihre Inhalte im Google-Index sind.
Positive Nutzererfahrung: Laut einer Studie erwartet fast die Hälfte aller Internetnutzer, dass eine Website innerhalb von zwei Sekunden geladen wird. Dauert das Laden länger als drei Sekunden, brechen 40 Prozent der Besucher ab. Je kürzer also Ihre Ladezeit ist, desto länger bleiben die Nutzer und desto geringer ist die Absprungrate. Eine schlechte Website-Performance kann Besucher sogar gänzlich abschrecken. Laut einer anderen Umfrage gaben fast 80 Prozent an, dass sie langsame Websites kein zweites Mal besuchen würden.
Optimierung der Konversionsrate: Wenn sich das Laden einer URL um eine Sekunde verzögert, können die Konversionsraten laut einer Studie um bis zu sieben Prozent sinken. Was sich zunächst nicht nach viel anhört, lässt sich jedoch mit einer einfachen Rechnung veranschaulichen. Wenn Ihr Online-Shop einen täglichen Umsatz von 2.000 Euro macht, kann eine Verzögerung der Ladezeit um eine Sekunde zu einem Verlust von 140 Euro pro Tag führen. Auf den Monat gerechnet, entgehen Ihnen 4.200 Euro Umsatz. Auf das Jahr gerechnet ist eine langsame Website ein echter Umsatzkiller.
SEO-Ranking-Faktor: Für Google und andere Suchmaschinen ist eine positive Nutzererfahrung ein wichtiger Faktor bei der Bestimmung der Qualität einer Website. Aus diesem Grund hat Google die Seitengeschwindigkeit zu einem Ranking-Faktor erhoben. Je schneller Ihre Website lädt, desto höher sind die Chancen auf gute Platzierungen. Pagespeed ist Teil der Suchmaschinenoptimierung.
Pagespeed ist Rankingfaktor
Die Ladezeit einer Website hat schon immer wichtige Nutzersignale beeinflusst: Eine schnelle Website wirkt sich positiv auf Absprungrate und Return-to-SERP-Rate sowie Verweildauer, Klickrate in den SERPs und die Anzahl der Seitenaufrufe aus und hat sogar einen direkten Einfluss auf die Conversion Rate. PageSpeed war also schon seit der Nutzung von Nutzerdaten ein indirekter Rankingfaktor und wird nun zu einem vollwertigen Rankingfaktor aufgewertet.
Spätestens jetzt sollten Sie über die Ladezeitoptimierung Ihrer Website nachdenken und handeln. Der PageSpeed einer Website kann in der Regel durch die Berücksichtigung und Optimierung der folgenden Punkte positiv beeinflusst und langfristig gesteigert werden.
Richtwert für Pagespeed und Performance
Grundsätzlich sollte eine Webseite in weniger als zwei Sekunden geladen sein, um ein zufriedenstellendes Nutzererlebnis zu gewährleisten. Je kürzer die Ladezeit, desto besser. Wenn sie weniger als eine Sekunde beträgt, ist das schon sehr gut. Wie schnell Ihre Website lädt, hängt von vielen verschiedenen Faktoren ab. Einige können Sie durch OnPage-Optimierung verbessern, auf andere haben Sie keinen Einfluss.
Wie wird Performance gemessen?
Es gibt zahlreiche Methoden, um die Ladezeit einer Webseite zu bestimmen. Du könntest zum Beispiel Deine Server-Logdateien auslesen oder manuell stoppen. Tatsächlich ist ein langsamer Seitenaufbau oftmals relativ, da jeder Nutzer Zeit anders empfindet. Wenn Du jedoch valide Daten verwendest, kannst Du langfristig besser an der Optimierung der Ladegeschwindigkeit arbeiten. In unserem Artikel über verschiedene Tools für Website Speed Tests findest Du eine Auswahl an Hilfestellungen zur Page Speed Messung.
Unter der Ladezeit einer Webseite versteht man im Allgemeinen die in Sekunden gemessene Zeit zwischen dem Aufruf und der vollständigen Darstellung der Webseite im Browser. Neben dem Begriff „Ladezeit“ wird auch der Begriff „Ladegeschwindigkeit“ oder „PageSpeed“ verwendet. Wenn Sie also im Internet nach dem Thema suchen, werden Sie verschiedene Begriffe für dasselbe Phänomen finden. Wie lange eine Website zum Laden braucht, kann auch in verschiedene Messstationen unterteilt werden:
- Zeit bis zur Interaktivität (TTI): Der Zeitpunkt, an dem die Website fertig gerendert und bereit für Benutzereingaben ist.
- First Meaningful Paint (FMP): Der Zeitpunkt, an dem der Nutzer spürt, dass die Website geladen ist.
- Zeit bis zum ersten Byte (TTFB): Die Zeit zwischen dem Zugriff auf die Website und dem Laden des ersten Bytes durch den Webserver.
- First Contentful Paint (FCP): Der Zeitpunkt, zu dem ein Anzeigeelement zum ersten Mal im Browser angezeigt wird.
Wie optimiere ich die Ladezeit der Webseite konkret?
Zunächst einmal gibt es zwei verschiedene Faktoren, die die Ladezeit einer Website beeinflussen: Erstens die Größe der Webseite, d.h. die zu übertragenden Daten, und zweitens die Latenz des Webservers, d.h. die Zeit, die aufgrund von Verzögerungen vergeht, ohne dass Daten übertragen werden.
Im Allgemeinen gilt: Je größer die zu übertragende Datenmenge und je geringer die verfügbare Bandbreite, desto länger dauert die Übertragung. Ziel jeder PageSpeed-Optimierung muss es daher sein, die Datenmenge bzw. die Größe der Website zu reduzieren.
Da moderne Websites jedoch aus unzähligen kleinen Dateien wie HTML, CSS, JS, WebFonts usw. bestehen, hat auch die Latenz, d. h. die Zeit zwischen Anfrage und Antwort, einen enormen Einfluss auf die Gesamtladezeit einer Website. Neuerdings (seit der Einführung von Core Web Vitals) werden auch die visuelle Stabilität und die Reaktionsfähigkeit einer Website in die Berechnung des PageSpeed-Scores einbezogen, so dass auch diese Punkte berücksichtigt werden sollten.
Bilder optimieren = Performance erhöhen
Die wichtigste Maßnahme bei der PageSpeed-Optimierung ist die Reduzierung der zu übertragenden Dateimenge. Je kleiner die Webseite als solche ist, desto schneller kann sie geladen werden. Hierfür stehen verschiedene Methoden zur Verfügung:
Bilder sind wichtig, um eine Website lebendig und attraktiv für die Nutzer zu gestalten. Aber gerade Bilder bergen die Gefahr, dass die Dateigröße Ihrer Website enorm ansteigt und sich dadurch die Ladezeit verzögert. Daher sollten Sie nur Bilder verwenden, die für die Verwendung im Web optimiert sind. Ganz allgemein: Fotos und hochwertige Grafiken sollten als JPEG-Dateien gespeichert werden, kleinere Grafiken und Grafiken mit wenigen Farben oder Transparenzen als PNG-Dateien.
Empfohlener Weg:
- Komprimieren Sie Ihre Bilder, bevor Sie sie auf der Website verwenden, mit einem Bildbearbeitungsprogramm wie Gimp oder Adobe Photoshop. Beide Programme bieten Anfängern eine Funktion zum „Speichern für das Web“. Damit wird die Dateigröße automatisch optimiert.
- Geben Sie die geeignete Bildgröße im Quellcode an: Wenn ein Browser die Abmessungen von Grafiken selbst berechnen muss, kann dies Ladezeit kosten. Die angegebene Größe sollte der Originalgröße des auf dem Server gespeicherten Bildes entsprechen. Sie können die Ausgabe der Bildgröße auch über CSS definieren.
- Entfernen Sie Meta-Tags und EXIF-Daten: Wenn Sie Bilder z.B. von Ihrer eigenen Kamera oder Ihrem Smartphone verwenden, enthalten diese eine Menge zusätzlicher Informationen wie den Aufnahmeort, die verwendete Kamera und andere Daten. Mit einem Tool wie tinypng können Sie diese entfernen und Speicherplatz sparen.
Unterschied zwischen mobiler und Desktop Darstellung
In Zukunft wird mehr als die Hälfte aller Nutzer über ein mobiles Gerät statt über einen Desktop-Computer auf Websites zugreifen. Die Anforderungen an die Bilder sind bei den beiden Ausgabemedien sehr unterschiedlich. Auf dem Desktop gibt es in der Regel eine gute Internetverbindung, und auf großen HD-Monitoren will der Nutzer hochauflösende Bilder in bester Qualität.
Auf mobilen Geräten hingegen werden Websites oft von unterwegs aufgerufen und haben daher nicht die höchste Bandbreite. Aufgrund des kleinen Displays sind auch die Qualitätsanforderungen geringer. Hinzu kommt, dass Bilder aufgrund des Bildschirmformats in einer anderen Auflösung dargestellt werden als auf dem Desktop. Daher ist es sinnvoll, zwischen den Ausgabemedien zu unterscheiden und zwei Varianten eines Bildes zu erstellen.
Ähnlich wie im vorangegangenen Beispiel für WebP können Sie auch hier im Code der Website Schalter definieren. Mit CSS kann man beispielsweise die Bildschirmauflösung abfragen und so die Darstellung an das Ausgabemedium anpassen.
Lazy Loading einrichten und unnötige Daten vermeiden
Generell ist es wichtig, das Herunterladen von Dateien aus dem Browser zu vermeiden, die für die Anzeige und Nutzung der Website nicht benötigt werden. So sollten z. B. WebFonts, Symbole oder JavaScript-Bibliotheken nur geladen werden, wenn sie tatsächlich auf der Website verwendet werden.
Lazy Loading“ sorgt dafür, dass nur die Bilder heruntergeladen werden, die der Nutzer tatsächlich sieht. Wenn beispielsweise ein Bild ganz unten auf der Seite platziert ist und der Besucher nicht so weit nach unten scrollt, muss die Bilddatei gar nicht übertragen werden.
In älteren Browsern musste dies mit JavaScript implementiert werden; moderne Browser unterstützen das „Lazy Loading“ von Haus aus über Attribute in Bildern und iFrames.
Bei größeren CSS- und JavaScript-Bibliotheken ist es schon mal der Fall, dass ein Teil der übertragenen Daten für die aktuelle Webseite gar nicht benötigt wird und entsprechend reduziert werden kann.
Moderne Webanwendungen können durch einen modularen Entwicklungsansatz und den Einsatz von Code-Splitting automatisch in notwendige Pakete aufgeteilt werden.
Server Caching
Damit häufig angeforderte Inhalte, wie z.B. Datenbankabfragen, nicht immer wieder ausgeführt werden müssen, können sie auf dem Server zwischengespeichert werden. Dies ist besonders wichtig für Nutzer, die mehrere Artikel lesen oder Produkte ansehen wollen – also mehrere Seiten in ihrer Sitzung aufrufen. Ladezeiten nach dem ersten Seitenaufruf können auf diese Weise reduziert werden.
In den Einstellungen der Webserver-Software – am häufigsten verwendet werden Apache HTTP Server und Nginx – kann das serverseitige Caching aktiviert und eingerichtet werden. Wer nicht über die nötigen Kenntnisse verfügt, kann seinen Hosting-Provider fragen oder das Caching und andere PageSpeed-Maßnahmen von einem automatisierten Cloud-Service durchführen lassen.
Browser Caching
Mit Hilfe des Browser-Caching werden Elemente Ihrer Website nicht wie beim Server-Caching vom Webserver zwischengespeichert, sondern von einem Webbrowser. Wenn also eine neue URL Ihrer Website aufgerufen wird, müssen nicht alle Elemente erneut geladen werden. Dies erhöht die Ladegeschwindigkeit.
Browser-Caching kann bei vielen CMS über Plugins oder Erweiterungen aktiviert werden. Sogenannte Cache-Buster können eingesetzt werden, um zu verhindern, dass bei Aktualisierungen der Inhalte die alten Versionen der Website für die Nutzer weiterlaufen.
CSS priorisieren
Standardmäßig sind eingebundene Stylesheets (CSS-Dateien) auch Ressourcen, die das Rendering blockieren, da das Rendering ohne CSS beeinträchtigt wäre. Aus diesem Grund sollten Sie das benötigte CSS in verschiedene Teile aufteilen:
Eine kleine Menge CSS, die für den „ersten Anstrich“ benötigt wird, d.h. das Rendering aller Elemente im „above-the-fold“-Bereich. Dieses sogenannte kritische CSS sollte inline in das HTML-Dokument eingebunden werden. Ein externes Stylesheet sollte die übrigen Stile für den Rest der Seite enthalten. Auf diese Weise kann es geladen werden, ohne das Rendering des kritischen Bereichs zu blockieren.
HTTP/2 einsetzen
Standardmäßig werden alle Dateien der Website (z. B. Bilder und Skripte) über das Protokoll HTTP/1.1 geladen. Sie werden nacheinander über eine separate Verbindung heruntergeladen. Sie können sich das so vorstellen, als ob Sie mehrere Pizzen bestellen wollten und der Pizzabote jede Pizza einzeln ausliefern würde.
Das ist natürlich unpraktisch und verlangsamt den Ladevorgang. Mit einem SSL-Zertifikat kann der Webserver auf das HTTP/2-Protokoll umgestellt werden. Mit HTTP/2 werden alle Dateien über eine einzige Verbindung heruntergeladen. Außerdem werden sie dabei priorisiert. Mittlerweile unterstützen alle gängigen Browser das Protokoll, so dass Sie bedenkenlos damit arbeiten können.
Layout stabilisieren
Ein relativ neues Thema in der PageSpeed-Optimierung ist die sogenannte visuelle Stabilität. Darunter versteht man Veränderungen in der Größe und Position von bereits sichtbaren Elementen.
Bei der Recherche zu den Core Web Vitals stellte sich heraus, dass es besonders ärgerlich ist, wenn Nutzer mit einer Seite interagieren wollen und sich Elemente wie Links oder Schaltflächen verschieben. Dies kann dazu führen, dass sie auf die falsche Seite gelangen oder eine unerwünschte Aktion ausführen, was zu Frustration bei den Besuchern führt.
Die so genannte kumulative Layoutverschiebung (CLS) wird nicht nur während des Ladevorgangs gemessen, sondern auch über den gesamten Lebenszyklus einer Website hinweg aufgezeichnet.
Google verwendet für die Bewertung dieses Effekts den CLS-Wert aus den Core Web Vitals, der sich aus dem Produkt des prozentualen Anteils des betroffenen Bereichs auf dem Bildschirm und dem prozentualen Anteil der Entfernung der Verschiebung ergibt.