PageSpeed Optimierung für rasend schnelle Ladezeiten

Vorteile schneller Ladezeiten

(1) Bessere UX und geringere Absprungrate

Webseiten mit schnellen Ladezeiten erzeugen ein besseres Nutzererlebnis (UX/ User Experience). Seiten mit hoher UX generieren niedrigere Absprungraten. Bei der Nutzung von Mobilgeräten, besonders dort wo die Netzabdeckung schlecht (ländliche Gebiete) bzw. gering (U-Bahn) ist, wirkt sich ein hoher PageSpeed positiv auf die UX aus. Auch für Google sind Websites mit schnellen Ladezeiten wichtig, denn sie können effizienter gecrawlt werden.

(2) Höhere Konversionsraten

Für Shop-Betreiber ist der PageSpeed eine wichtige Kennzahl zur Umsatzsteigerung. Wird eine Artikelseite schnell geladen, wirkt sich das positiv auf die User Experience und somit auf die Umsätze aus. Laut einer Berechnung des E-Commerce Riesen Amazon führt ein um 100 ms längerer PageSpeed zu einer Verringerung der Konversionsrate um ca. 1 Prozent. (Make Data Useful; Greg Linden; Standford Data Mining; 2006)

(3) Bessere Crawlability

Performante Webseiten erzeugen eine bessere Crawlability. Suchmaschinen-Bots können Webseiten effizienter crawlen und das kann zu besseren organischen Keyword-Rankings führen. Die Google Search Console bietet eine Übersicht zu den Crawling-Statistiken für die letzten 90 Tage.

Kostenfreie Tools zur PageSpeed-Prüfung

Es gibt eine Vielzahl kostenfreie PageSpeed-Tools, um die Ladezeiten aus unterschiedlichen Perspektiven zu analysieren. Im Folgenden stelle ich empfehlenswerte kostenfreie Tools vor:

Google PageSpeed Insights

Das wohl populärste Tool ist Google PageSpeed Insights. Nach Eingabe einer URL führt das Tool einen Live Check durch und stellt eine Bewertung des PageSpeed auf Basis einer Maximal-Punktzahl von 100 Punkten dar, wobei zur Erreichung sehr viele Faktoren perfekt feinjustiert sein müssen. Gut an PageSpeed Insights finde ich die Unterscheidung zwischen Desktop-Systeme und Mobilgeräte. Die Auflistung der Prüfkriterien und der bestehenden Optimierungspotenziale ermöglicht eine effektive PageSpeed-Optimierung. Persönlich finde ich das Tool sehr scharf, also kritisch, eingestellt. Deshalb nutze ich häufig andere Tools zur Analyse.

---

WebPagetest.org

WebPagetest ist mein Favorit unter den kostenfreien PageSpeed-Tools. Eine Vielzahl von Einstellungen stehen zur Verfügung. Auch Benchmarks mehrerer URLs sind möglich. Trotz das Webpagetest kostenfrei ist, handelt es sich um ein hochwertiges Analyse-Werkzeug. Auch Google empfiehlt Webpagetest.org – siehe hier.

Der tatsächliche Nutzen des Tools zeigt sich in den Ergebnissen. Zugegeben, durch den Umfang verliert sich das ungeübte Auge schnell in den Daten und Charts. Deshalb ein paar Empfehlungen: Alle Basis-Informationen befinden sich im Reiter „Summary“. In der übersichtlichen Matrix empfehle ich die „Time“ unter „Fully Loaded“ zu bewerten.

Besonders informativ ist auch die Spalte „First Byte“. Damit ist die „TTFB“ (Time to First Byte) gemeint – die Antwortgeschwindigkeit des Servers. Das ist die Zeit, die vergeht, bis der Server das erste Byte zurückgeliefert hat. Bei der TTFB wird die Download-Geschwindigkeit der Antwort nicht gemessen. Beträgt die TTFB über 1.0 Sekunde, scheint der Server zum Zeitpunkt des Tests langsam gewesen zu sein. Es lohnt sich, den Server zu überwachen, um herauszufinden, ob dieser generell schwach ist und unter Last ggf. schnell zusammenbricht.

---

Pingdom Website Speed Test

Meine dritte Tool-Empfehlung zur PageSpeed-Analyse ist Pingdom. Der schwedische Anbieter eines Server-Monitoring Dienstes bietet auch einen kostenfreien PageSpeed-Test an. Die Einstellungen und Ergebnisse sind im Vergleich mit WebPagetest etwas limitiert. Trotzdem erhält man viele hilfreiche Insights und deshalb ist der Test für OnDemand-Analysen sehr gut geeignet.

Pingdom skaliert die Ergebnisse für verschiedene Prüfkriterien auf maximal 100 erreichbare Punkte. Die Ladezeit („Load time“) wird in Sekunden (s) angegeben, leider ohne Angabe der TTFB. Die Performance Insights bieten eine Zusammenfassung der größten Optimierungshebel zur PageSpeed-Optimierung der Seite. Schnell kann man ungewünschte Flaschenhälse identifizieren und diese gezielt beheben. Besonders hilfreich finde ich die Waterfall Analyse, die einen detaillierten Überblick der Ladezeiten aller Ressourcen (CSS/JavaScript/Bilder) gibt. Grafisch ist Pingdom ein Augenschmaus.

---

GTMetrix

Meine nächste Empfehlung ist GTMetrix. Das Tool ermöglicht vielseitige Tests. Ist eine URL eingegeben, können optional der Server-Standort, der Web-Browser, die Verbindung und weitere individuelle Einstellungen getroffen werden. Hilfreich finde ich die HTTP Authentifizierung, die genutzt werden kann, wenn die URL eine Authentifizierung fordert.

Auf dem Dashboard werden die Performance-Daten der getesteten URL dargestellt. Das umfasst nicht nur einen PageSpeed Score und YSlow Score, sondern auch Seitendetails, wie die Ladezeit, die Dateigröße und die Anzahl der Requests der betreffenden URL.

Unter diesen Daten befinden sich zahlreiche Detail-Reports, die in Form eines Reiter-Menüs dargestellt werden. Diese Reports bieten tiefgründige Einblicke zur durchgeführten Analyse: Die beiden Reiter „PageSpeed“ und „YSlow“ bieten hilfreiche Empfehlungen (ähnlich wie Googles PageSpeed Insights). Durch das Wasserfall-Diagramm, die Timings- und History-Daten werden viele „Bremsklötzer“ identifiziert.

---

Image Analysis Tool

Sollen die Bilder einer Seite analysiert werden, ist das Image Analysis Tool zu empfehlen. Nach Angabe einer URL analysiert die Software den Optimierungsgrad der Bild-Dateien, die im HTML Quellcode der Seite verlinkt sind.

---

Damit möchte ich es bei der Empfehlung von Tools zur Messung des PageSpeed belassen und mich nun dem Kernthema des Blog-Beitrags widmen.

10 garantiert wirksame Tipps für rasend schnelle Ladezeiten

(1) HTTP-Requests verringern

HTTP ist die Abkürzung für „Hypertext Transfer Protocol“. Es wird verwendet, um Daten von einem Server aus dem Internet zu einem Client (Browser) zu übertragen. Das HTTP Protokoll ist als allgemeines Datenübertragungsprotokoll weit verbreitet.

Zur vollständigen Darstellung einer Webseite im Browser sind stets unterschiedlich viele HTTP-Requests zwischen Server und Client erforderlich – je nach Umfang und Optimierungsgrad der Webseite. Jede erforderliche Datei (CSS-Styles, JavaScripte, Bilder, usw.) wird dabei einzeln angefragt und übertragen. Je weniger HTTP-Requests erforderlich sind, desto schneller wird die Seite geladen. Deshalb sollten man die Anzahl der HTTP-Requests auf ein Mindestmaß reduzieren.

Anzahl der HTTP-Requests ermitteln

Es ist einfach zu ermitteln, wie viele HTTP-Requests zur vollständigen Darstellung einer Ressource erforderlich sind. Ich verwende dazu den Chrome Browser. Durch Rechtsklick und Auswahl von „Untersuchen“ im Menü öffnet sich der „Chrome Inspector“ mit dem man die HTTP-Requests ermittelt.

Im Reiter-Menü wählt man nun „Network“ und gibt im Suchschlitz des Browsers die gewünschte Adresse ein, oder man lädt die Seite erneut. Sobald die Seite geladen ist, wird im unteren linken Browser-Fenster die Anzahl der HTTP-Requests dargestellt. In meinem Beispiel sind 24 HTTP-Requests erforderlich, um die Seite vollständig zu laden (Bild: roter Rahmen). Je weniger HTTP-Requests, desto besser.

Der Chrome Inspector informiert auch darüber, welche Dateien geladen wurden, von welchem Dateityp sie sind, wie groß die Datei ist, deren Latenz beträgt, usw. Ich empfehle diese Daten einfach mal für die eigene Website zu prüfen. Dateien mit HTTP Statuscode 3xx oder 4xx sollten zum Beispiel vermieden werden.

(2) Gzip Kompression aktivieren

Gzip ist ein von patentierten Algorithmen freies Kompressionsprogramm. Durch die Nutzung von Gzip werden die Daten komprimiert vom Server zum Client übertragen. Das spart Bandbreite und erhöht den PageSpeed. Nicht selten lässt sich ein hoher Kompressionsgrad von über 70% erreichen.

Gzip Kompression durch Erweiterung der .htaccess-Datei

Durch den folgenden .htaccess-Datei Eintrag lässt sich die Gzip Kompression schnell aktivieren. Dafür ist ein Apache HTTP Server mit dem installierten Extension Modul „mod_gzip“ erforderlich.

Deflate Kompression durch Erweiterung der .htaccess-Datei

Wenn die Konfiguration mit Gzip nicht funktioniert, kann man auch die Deflate Kompression mit folgendem .htaccess-Datei Eintrag ausprobieren (nicht genutzte Dateitypen einfach entfernen):

(3) Browser Caching einrichten

Viele Website Betreiber erfreuen sich wiederkehrender Besucher, besonders Nachrichten-Portale und aktiv gepflegte Blogs. Auch im E-Commerce sind wiederkehrende Besucher einer Website durchaus üblich, besonders wenn man Preisvergleiche durchführt oder sich zur Verfügbarkeit von Produkten informieren möchte. Durch die Aktivierung des Browser Caching kann dem Browser mitgeteilt werden, welche Dateien aus dem bestehenden Cache bezogen werden sollen – quasi dem Bestand des letzten Besuches. Je mehr Dateien aus dem Browser Cache und nicht vom Server geladen werden, desto schneller kann die Seite geladen werden. Das sogenannte „Leverage Browser Caching“ kann auf unterschiedliche Weise erfolgen und individuell für Dateitypen festgelegt werden.

Browser Caching durch .htaccess-Datei

Voraussetzung für das Browser Caching durch .htaccess-Datei ist die Aktivierung des Apache Server Moduls „mod_expires„. In die .htaccess-Datei wird nun folgender Eintrag ergänzt:

Die Angaben zwischen den „access plus …“ legen die Cache-Lebensdauer fest, die individuell angepasst werden sollte. In meinem Beispiel sind die Dateien einen Monat und einen Tag gültig, bis sie verfallen und der Browser diese erneut vom Server laden muss. Ruft ein Nutzer zum Beispiel eine Seite nach 24 Tagen erneut auf, werden die vom Browser gecachten Daten geladen, was die Ladezeit verringert und den PageSpeed begünstigt.

Sobald eine Ressource ihre Gültigkeit verloren hat, wird diese beim nächsten Besuch wieder vom Server geladen. Das Thema ist sehr komplex, denn durch weitere Modifikationen, zum Beispiel die Nutzung des HTTP-Headerfeldes „last-modified“ können weitere Features genutzt werden. So kann der Browser den letzten Änderungszeitpunkt einer Datei auf dem Server abgleichen. Wurde diese nach Ablauf der Cache-Lebensdauer nicht modifiziert, kann der Browser die gecachten Daten auch weiterhin verwenden.

Auch Google empfiehlt die Aktivierung des Browser-Caching. Statische Dateien sollten eine Cache-Lebensdauer von mindestens einer Woche besitzen, Drittanbieter-Ressourcen (Werbeanzeigen, Widgets) von mindestens einen Tag. Weitere Informationen dazu bieten diese Google Hilfeseiten.

Browser Caching durch CMS Plugins

Wer technisch wenig versiert ist, kann auch mit einem CMS Plugin oder einer Extension effektive PageSpeed Optimierungen erzielen. Für WordPress sind besonders populär: W3 Total Cache und Cachify. Einmal installiert lassen sich relativ bequem mächtige PageSpeed-Optimierung bewerkstelligen.

Auch für die mächtige E-Commerce Lösung Magento gibt es Erweiterungen gegen ein Entgelt zur Optimierung der Ladezeit. Dabei muss man selbst entscheiden, ob man in der .htaccess-Datei selbstständig feinjustieren oder das Geld in eine Fertiglösung investieren möchte.

(4) HTML Quellcode reduzieren

Eine effektive Maßnahme zur PageSpeed Optimierung ist die Reduzierung des Quellcodes durch Auslagern von CSS Styles und JavaScript. Inline Styles sollten im Quellcode vermieden und besser in einer CSS Datei zusammengefasst werden. Das wirkt sich positiv auf die Ladezeit aus. Wichtig dabei ist, sich auf ein notwendiges Maß zu beschränken. Es ist also sinnvoll alle CSS Styles in eine Datei auszulagern, weil dadurch die Anzahl der HTTP-Requests reduziert wird. Je weniger HTTP-Requests erforderlich sind, desto größer die Auswirkung auf den PageSpeed.

(5) CSS und JavaScript komprimieren

Der Effekt zur Verbesserung des PageSpeed ist noch größer, wenn die ausgelagerten Styles und Scripte komprimiert werden. Inzwischen beherrschen viele HTML Editoren die Kompression von Dateien aber auch online stehen eine Vielzahl kostenloser Tools zur Verfügung, wie beispielsweise für CSS http://csscompressor.com/ und für JavaScript http://javascript-compressor.com/.

(6) Bilder und Grafiken optimieren

Bilder und Grafiken sollten komprimiert werden, um die Dateigröße und folglich die Ladezeit zu verringern. Die Dateitypen JPG/JPEG und PNG sind universell einsetzbar. Zur Komprimierung empfehle ich den kostenlosen Dienst TinyPNG bzw. TinyJPG.

(7) CSS-Sprites verwenden

Als CSS-Sprites bezeichnet man eine Grafikdatei, die viele einzelne Symbole, Icons, Bilder und Grafiken enthält. CSS-Sprites sind Teil der PageSpeed Optimierung, da die Anzahl von HTTP-Requests drastisch reduziert werden kann. Durch die CSS Eigenschaften „background-position“, „width“ und „height“ werden Spites (Bildausschnitte) der Gesamtdatei ausgewählt, die auf einer Website im Browser dargestellt werden. CSS-Sprites werden bereits seit 2004 verwendet.

Besonders empfehlenswert ist die Verwendung von CSS-Sprites zur Darstellung von grafischen Elementen die zum Seitenaufbau statischer Template-Elemente benötigt werden, ebenso für Icons und Symbole. Beispiele für CSS-Sprites

(8) Bildsprache fürs Web optimieren

Nicht alle Bilder und Grafiken sind für CSS-Sprites geeignet. Content-Images oder Produktbilder werden sehr oft hochauflösend bereitgestellt. Nutzer mit Mobilgeräten benötigen derart große Bilder nicht, weil das Bild vom Endgerät entsprechend des Displays kleiner skaliert wird. Trotzdem wird das große Bild geladen und das wirkt sich negativ auf den PageSpeed aus. Ich empfehle die Bilder im Content-Bereich auch nur in der Größe auf den Server zu laden, wie sie maximal (Desktop-PC) dargestellt werden. Wird ein Bild auf der Frontpage zum Beispiel auf 400 x 400px skaliert, wäre es nutzlos, es größer hochzuladen.

Weiterführende SEO-Tipps: XXL Praxisguide zur Google Bilder Optimierung

(9) Vollständige Größenangaben für Bilder nutzen

Wenn jedes Bildelement die Größenangaben „width“ und „height“ erhalten, können Texte, Tabellen, Listen, etc. schneller geladen werden. Der Browser reserviert den Platz des Bildes und lädt das Bild nach. Das verbessert den vom Nutzer „gefühlten PageSpeed“. Deshalb empfehle ich die Darstellungsgröße im Quellcode für jedes Bild zu hinterlegen.

(10) Wichtige Inhalte zuerst laden

Um die Nutzerzufriedenheit beim Laden einer Webseite zu erhöhen, empfehle ich relevante Inhalte als Erstes zu laden. Alles was zum „Aufhübschen“ dient, sollte im Quellcode weit unten (über dem „</body>“) integriert werden. Dadurch können Nutzer die Seiteninhalte bereits konsumieren, während stylistische Elemente und Zusatzfunktionen geladen werden.

Schlussbemerkung

PageSpeed wird immer wichtiger – nicht nur in der Suchmaschinenoptimierung. Die Akzeptanz und steigende Nutzung des Internets im Alltag ist inzwischen allgegenwärtig – auf der Couch, beim Kochen, während sportlicher Aktivitäten, in Bus oder Bahn, usw. Eine Website sollte immer gut nutzbar sein und dabei spielt der PageSpeed eine entscheidende Rolle. Höchste Zeit also, um die eigene Website zu prüfen und zu optimieren.