1. Blog

Pagespeed-Optimierung: Schneller ist besser!

„Wieso sollte ich die Ladezeit meiner Webseite optimieren? Das Internet ist doch heutzutage schnell genug.“ Leider nein! Das „Highspeed-Internet“ trügt. Erfahren Sie, warum Sie die Pagespeed Ihrer Webseite optimieren sollten und wie man Pagespeed-Optimierung richtig macht.

Pagespeed-Optimierung: Schneller ist besser!

Warum sollte ich die Pagespeed meiner Webseite optimieren?

Die Ladezeit einer Webseite ist ein offizieller Faktor für das Ranking in der Suchmaschine Google. Und das nicht ohne guten Grund: Nutzer erwarten, dass eine Webseite schnell lädt. Dies trifft insbesondere auf mobile Nutzer zu, die je nach Branche mehr als 50% des Traffics aus machen.

Die Auswirkungen einer langsameren Pagespeed sind enorm: Google selbst hat in einer Studie über die eigene Suchmaschine heraus gefunden, dass eine Verschlechterung der Ladezeit um 100 bis 400 Millisekunden zu einer Abnahme der Suchanfragen je Nutzer von 0,2% bis 0,6% führt. In einer ähnlichen Studie hat der Online-Händler Amazon herausgefunden, das eine Verlangsamung der Pagespeed von je 100 Millisekunden zu einer Verschlechterung bei den Verkäufen zu 1% führt.

Mit Projekten wie „Accelerated Mobile Pages“ (AMP) und „Instant Articles“ treiben sowohl Google als auch Facebook das Thema (mobile) Pagespeed-Optimierung aktiv voran.

Die Optimierung der Ladezeit Ihrer Webseite ist daher keine Kür, sondern absolute Pflicht. Wenn Sie den Faktor Pagespeed außer Acht lassen, verlieren Sie unnötig Geld.

Mit welchen Tools kann ich die Pagespeed meiner Webseite messen?

1. Google PageSpeed Insights

Google PageSpeed Insights

Das bekannteste Tool zur Messung der Pagespeed sind die Google PageSpeed Insights. Das Google-Tool ist umstritten: Einige der für ein gutes Abschneiden erforderlichen Faktoren sind entweder unrealistisch oder unwirtschaftlich, gerade bei bestehenden und größeren Webseiten. Trotzdem liefern die Google PageSpeed Insights gute erste Hinweise zur Optimierung der Ladezeit einer Webseite.

Vorteile:

  • Zusätzliche Auswertung zur Nutzererfahrung für Mobil wie z.B. die optimale Größe von Links
  • Einfaches Punkte- und Ampelsystem zur Bewertung der Pagespeed
  • Verweis auf ausführliche Hilfetexte im Entwickler-Bereich von Google (primär für Programmierer geeignet)
  • Das Tool ist von Google, eine ähnliche Bewertung der Pagespeed könnte also in das Ranking der Suchmaschine mit einfliessen

Nachteile:

  • Der Test misst nicht die tatsächliche Ladezeit der Webseite, nur die Antwortzeit des Servers
  • Ein gutes Abschneiden bei den Google PageSpeed Insights bedeutet nicht automatisch eine schnelle Webseite
  • Einige Anforderungen, wie z.B. das Vermeiden von CSS-Ressourcen, die das Rendering blockieren, können bei größeren Webseiten gar von Nachteil für die Pagespeed sein

2. Pingdom Website Speed Test

Pingdom Website Speed Test

Pingdom, ein langjähriger Anbieter für Website-Monitoring, stellt ebenfalls einen Pagespeed-Test zur Verfügung. Verzichtet man auf automatisiertes Testing, ist dieser genau so wie das Google-Tool kostenlos.

Im Gegensatz zu den PageSpeed Insights misst der Website Speed Test die tatsächliche Ladezeit der Webseite. Das sollten Sie aber unbedingt bei den angegebenen Werten beachten:

  1. Die Ladezeit Ihrer Webseite ist je nach Standort, von dem die Webseite aufgerufen wird und wo der Server steht, auf dem Ihre Webseite liegt, unterschiedlich. Je weiter diese auseinander liegen, z.B. auf verschiedenen Kontinenten, umso Langsamer die Ladezeit. Ausnahme: Sie nutzen ein Content Delivery Network (CDN), was aber nicht der Regelfall ist. Wählen Sie daher beim Pingdom Website Speed Test unter „Test from“ den nächstgelegenen Standort aus. Aktuell ist das für Deutschland „Stockholm, Sweden“.
  2. Die Ladezeit Ihrer Webseite ist nicht immer gleich. Die Antwortzeit des Servers und die Zeit, bis diverse Skripte ausgeführt und Ressourcen wie Bilder geladen sind, ist variabel und hängt von ganz unterschiedlichen Faktoren ab. Daher die Empfehlung: Machen Sie den Test immer mehrmals hintereinander und vergleichen Sie die angegebenen Ladezeiten.

Vorteile:

  • Misst die tatsächliche Pagespeed
  • Messung von Standort in Europa ist möglich (nicht nur USA)
  • Ebenfalls gut verständliche Bewertung über Punkte und Rot, Gelb, Grün
  • Angabe „Faster than x% of tested sites“
  • Sehr knappe aber konkrete Handlungsempfehlungen

Nachteile:

  • Keine eigenen Hilfetexte (nur Verweis auf Google-Texte)
  • Angegebene Ladezeit kritisch betrachten (siehe die beiden Hinweise weiter oben)

3. Varvy Page Speed Optimization

Varvy Page Speed Optimization

Die Webseite Varvy bietet viele gute englischsprachige Artikel zu den Themen SEO, Speed und Mobile. Darüber hinaus auch ein Tool zur Page Speed Optimization.

Das Tool ist derzeit noch in einer Beta-Version, dahingehend aber erfrischend, als das die Webseite nicht bewertet wird. Auf den ersten Blick ist das weniger übersichtlich, als die beiden zuvor genannten Lösungen, löst aber den Fokus von einer Punktzahl. So kann man sich besser auf die einzelnen Faktoren konzentrieren. Zudem werden als Hilfetexte auf eigene Artikel zum Thema Pagespeed verlinkt, die praxisnahe und leicht verständlich sind.

4. Webpagetest.org

Webpagetest.org

Das Tool Webpagetest.org macht optisch keinen guten Eindruck und zu Stosszeiten muss man mehrere Minuten auf die Testergebnisse warten. Es lohnt sich aber! Unter einigen Experten gilt Webpagetest.org als DAS Online-Tool zur Messung der Pagespeed. Warum? Die Ergebnisse sind sehr detailliert, aber auch sehr technisch. Mit diesem Tool können nur Pagespeed-Experten was anfangen.

Der Test analysiert nicht nur das erste Laden einer Seite (First View), sondern auch das wiederholte Laden einer Seite (Repeat View). Die meisten hier genannten Tools haben nur Ersteres im Blick. So besteht die Gefahr das man die Pagespeed ausschließlich auf die First View optimiert und dabei unabsichtlich die Pagespeed für die Repeat View erheblich verschlechtert. Gerade bei mobilen Landingpages ist der Wert für die First View enorm wichtig, damit die Absprungrate gering bleibt, trotzdem ist es immer sinnvoll beide Werte im Blick zu behalten.

5. Sitespeed.io

Sitespeed.io

Zu guter Letzt noch ein kleiner Tipp für Entwickler: sitespeed.io ist ein Open-Source-Tool, welches sich auf dem eigenen (lokalen) Server installieren lässt. Wenn Ihnen Node.js, Grunt und Gulp nicht fremd sind, sollten Sie sich das Tool unbedingt mal ansehen. Vorteil: Pagespeed-Analyse und Performance-Budget können so direkt im eventuell schon vorhandenen Build Process für Ihre Webseite mit einfliessen.

Wichtig bei allen vorgestellten Pagespeed-Tools: Die Software gibt Ihnen nur Hinweise, die Sie immer, eventuell gemeinsam mit einem Experten, hinterfragen sollten. Nicht jeder Optimierungsvorschlag ist wirklich sinnvoll. Trotzdem sind solche Tools sehr wichtig, da Sie eine Diskussion über das Thema Pagespeed überhaupt erst eröffnen.

Welche Faktoren sind wichtig für die Pagespeed meiner Webseite?

Der wichtigste Faktor für die Pagespeed ist die Ladezeit. Das wird niemanden überraschen. Alle weiteren Faktoren beeinflussen zwar die Ladezeit, trotzdem ist die Ladezeit an sich ein eigener Faktor. Nehmen wir z.B. an, alle anderen Faktoren sind optimiert, dann müsste doch auch die Pagespeed ok sein. Leider nein! Die Art der Webseite, statisch oder Content-Management-System, die Anzahl der Anfragen auf den Server und dessen Ausstattung sind direkte Kriterien für die Ladezeit einer Webseite. Tools können aber nur die Ladezeit an sich, zu einem gegebenen Zeitpunkt, von einem gegebenen Standort aus messen. Die Ladezeit muss daher individuell und kontinuierlich beurteilt werden.

1. Seite

Der HTML-Code der geladenen Seite ist ein wichtiger Faktor. Die meisten Tools betrachten die getestete Seite isoliert vom Rest der Webseite. Es wird angenommen, das der Nutzer zuerst die getestete Seite besucht, diese zuvor noch nicht besucht hat und danach auch keine weitere Seite der Webseite besucht. Im Fokus steht, das nur diese alleinige Seite der Webseite so schnell wie möglich geladen wird. Das macht Sinn, wenn es sich um eine Einstiegsseite handelt, über welche die Nutzer z.B. über Suchmaschinen auf die Webseite gelangen.

Der Umfang der Seite bzw. deren HTML-Code, sowie die Anordnung der Elemente und Ressourcen im Code sind entscheidend für die Pagespeed. Daher sollten sekundäre Elemente wenn möglich nachgeladen werden, damit die erstmalige Anzeige der Seite nicht unnötig verzögert wird.

Einzelne Faktoren:

  • HTML reduzieren
  • Sichtbare Inhalte priorisieren
  • Wenn möglich/sinnvoll, Ressourcen, die das Rendering blockieren, beseitigen

2. Ressourcen

Webseiten bestehen heutzutage nicht nur aus HTML, sondern vor allem CSS, JS und Bildern. Diese Ressourcen können das Laden der Webseite erheblich verlangsamen. Neben vielen möglichen technischen Optimierungen (Bilder komprimieren, Javascript/CSS zusammenfassen und minimieren usw.) sollte man sich bei einer neuen Webseite oder einem Relaunch immer Gedanken machen, was für den Nutzer wirklich notwendig ist. Da die Ladezeit auch Teil der Nutzererfahrung (User Experience, UX) ist, gilt „weniger ist mehr“. In darauf spezialisierten Programmier-Teams werden bei Projektstart eigens sogenannte „Performance Budgets“ erstellt, bei denen Anzahl und Größe der Ressourcen für eine Webseite vorweg limitiert werden.

Einzelne Faktoren:

  • Optimierung der Bilder
  • CSS reduzieren
  • Javascript reduzieren

3. Server

Ein schneller Server, muss nicht immer eine schnelle Ladezeit zur Folge haben. Im Gegenteil: Ein schneller Server bedeutet erstmal nur mehr Kosten. Daher kann man mit der Pagespeed-Optimierung nicht nur Ranking und potenzielle Verkäufe steigern, sondern unter Umständen auch Kosten sparen. Je weniger der Server „zu arbeiten“ hat, umso mehr kann er leisten. Unter Umständen erspart man sich teure Server-Power. Das nennt man effizient.

Am Server gibt es viele Punkte einzustellen, die direkte Auswirkungen auf die Pagespeed haben, wie Komprimierung oder Cache (Zwischenspeichern von Daten). Übrigens: Einfache statische Seiten sind schneller als Seiten, die über ein CMS mit Datenbankabfragen ausgeliefert werden. Hier ist Realisierbarkeit und notwendige Funktionalität mit der Pagespeed abzuwägen. Nicht Alles lässt sich statisch realisieren, wie z.B. ein großer Online-Shop, Einiges jedoch über Javascript in den Browser des Nutzers auslagern, wie die Suche oder das Kontaktformular.

Einzelne Faktoren:

  • Antwortzeit des Servers
  • Komprimierung
  • Browser-Caching
  • Weiterleitungen (Redirects)

Checkliste: Pagespeed

Diese Checkliste soll Ihnen einen ersten Hinweis zur Optimierung der Pagespeed Ihrer Webseite geben. Sie orientiert sich größtenteils an den Kriterien der gängigen und weiter oben vorgestellten Pagespeed-Tools. Aufgrund der Kürze sind technische Sachverhalte nicht immer detailliert aufgeführt.

Antwortzeit des Servers reduzieren
Wenn Sie ein serverintensives Content-Management-System (CMS) oder Shop-System verwenden, kann ein kleines oder mittleres Webhosting-Paket zu wenig sein. Bevor Sie aber gleich mehr Geld in Ihre Server-Infrastruktur stecken, sollten Sie prüfen, ob eine Optimierung des serverseitigen Codes nicht ausreicht - und Geld spart!

Bilder optimieren
Grundsätzlich sollten Bilder nur dann eingesetzt werden, wenn Sie für die Nutzererfahrung notwendig sind, und dann auch nur in der erforderlichen Größe. Komprimierungs-Tools wie tinypng oder entsprechende Build Tools holen dann noch mal das letzte Byte raus.

CSS reduzieren
CSS kann im Gegensatz zu Javascript nicht komplett asynchron oder nach dem HTML-Code geladen werden, da das Stylesheet essentiell für das Aussehen der Seite ist. Die Anzahl der zu ladenden CSS-Dateien und deren Inhalt kann aber reduziert werden. Der „Idealfall“, das sich der CSS-Code direkt im Header des HTML-Codes befindet und keine externe CSS-Datei mehr geladen wird, ist erfahrungsgemäß nur bei kleineren Webseiten von Vorteil. (Anmerkung: Letzteres wird bei der Google-Technologie „Advanced Mobile Pages“ (AMP) vorausgesetzt.)

Tipp: Viele Webseiten integrieren größere CSS-Bibliotheken, wie z.B. das bekannte Bootstrap von Twitter, nutzen aber nur einen Teil deren Funktionen. Das ist unnötig und wirkt sich negativ auf die Pagespeed aus. Besser: Nur den Teil einer Bibliothek nutzen, den man wirklich braucht oder auf externe Bibliotheken komplett verzichten.

Javascript reduzieren
Für Javascript gilt ähnliches wie für CSS: Nur das nötigste und das so kompakt wie möglich verwenden. 95% des im Web vorhandenen Javascript-Code kann asynchron oder als letztes Element im HTML-Code geladen werden, damit es das Laden der Seite nicht unnötig blockiert. Leider wird dies in der Praxis viel zu selten umgesetzt, was auch daran liegt, das einige Content-Management-Systeme im nicht optimierten Zustand Javascript-Dateien automatisch im Header der Seite inkludieren.

Tipp: Ähnlich Bootstrap ist bei vielen Webseiten die JS-Bibliothek jQuery im Einsatz, und das meist noch mit einigen Plugins. Der Einsatz von jQuery kann Sinn machen, sollte aber geprüft werden. In einer Zeit wo man ältere Browser aufgrund des geringeren Marktanteils nicht mehr unterstützen muss, braucht man in 99% der Fälle einfach nur Javascript und kein jQuery mehr. Das zeigt u.A. die Webseite „You might not need jQuery“.

Komprimierung aktivieren
Um die serverseitige Komprimierung zu aktivieren ist je nach Hosting und Betriebssystem des Servers eine andere Einstellung notwendig. Sprechen Sie mit Ihrem Dienstleister. Informationen für die bekannteren Systeme Apache und Nginx finden Sie hier.

Übrigens: Apache ist bei den meisten Webhosting-Anbietern vorinstalliert. Bei größeren Unternehmen, die Ihre Server selbst konfigurieren, findet sich aber zunehmend das Server-Betriebssystem Nginx. Warum? Es ist schneller!

Browser-Caching nutzen
Genau wie bei der Komprimierung muss dies über den Server konfiguriert werden.

Interessant: Falls Sie Tracking-Codes auf Ihrer Webseite nutzen, werden die Pagespeed-Tools trotz großer Bemühungen das fehlende Browser-Caching anmerken. Viele der Codes, allen voran die Google-eigenen Codes für den Tag Manager, Analytics und AdWords unterstützen kein Browser-Caching.

Weiterleitungen vermeiden
Umleitungen kosten Zeit, das kennen wir vom Autofahren. Bei Webseiten ist das nicht anders. Sind die Weiterleitungen (Redirects) aus Sicht der Suchmaschinen-Optimierung (SEO) notwendig, dann ist das ok. Vermeiden Sie aber auf jeden Fall unnötige Weiterlungen die von A nach B und von B nach C führen. Direkt von A nach C ist der schnellere Weg!

Fazit

Pagespeed-Optimierung ist mittlerweile ein eigenes Gebiet und weder ausschließlich Teil der Suchmaschinen-Optimierung oder Web-Entwicklung. Auch wenn insbesondere bei bestehenden Webseiten der Aufwand für die Verbesserung der Pagespeed hoch sein kann, ist der Nutzen doch gegeben.

Wie so oft ist der Grad der Optimierung mit anderen Faktoren, allen voran den Umsatz, den man durch eine zu langsame Webseite verliert, abzuwägen.

Die Nutzer jedenfalls erwarten zunehmend eine schnellere Webseite, das Zeigen auch oben erwähnte Studien. Ohne eine gute Pagespeed wird es zunehmend schwieriger werden oben mitzuspielen. Bleiben Sie daher am Ball!