Zurück zur Übersicht
22. Juli 2018

Webseite schneller machen (I): Die Grundlagen

Wie kann ich meine Webseite schneller machen?
In den folgenden Tutorials versuche ich dieser Herausforderung auf den Grund zu gehen.

Die Ladezeit ist entscheidend für den Verbleib von mobilen Nutzern

Die Ladezeit einer Webseite ist extrem wichtig für das Verhalten der Besucher.
Die Absprungrate (Prozentanteil aller Besucher, die nur eine einzige Seite aufrufen) sinkt mit der Geschwindigkeit der Seite stark. Je schneller die erste Seite lädt, desto mehr Seiten werden dann in Folge besucht – das zeigt eine Untersuchung des amerikanischen CDN Section IO für die kumulierte mobile und Desktop Nutzung (2017).
Auf Seiten mit einer Ladezeit von 2 Sekunden springen nur etwa 10% der Besucher ab. Bei 4 Sekunden Ladezeit verdoppelt sich die Absprungrate – und ab 7 Sekunden sind schon ein Drittel aller Besucher weg.

Für mobile Besucher ist die tolerierte Zeitspanne noch kritischer: Laut Google Benchmarks (2017) brechen 53% aller Smartphone Nutzer die Seite ab, wenn die Ladezeit 5 Sekunden übersteigt!

Ausnahmen gibt es natürlich immer: Beispielsweise war Amazon vor einigen Jahren ziemlich langsam. Trotzdem warteten die Benutzer geduldig, bis sich das Angebot vor Ihnen ausgebreitet hatte. Aber Amazon ist für viele Kunden alternativlos und eine der bekanntesten Marken im Netz.  „Normale“ Webseiten müssen sich die Loyalität der Nutzer erst erarbeiten: Hohe Geschwindigkeit bekommt hierbei immer grössere Bedeutung.

Messung der realen Ladezeit ist wichtig

Der Begriff Ladezeit bedarf einer näheren Betrachtung: Webseiten werden oft nicht vom Original-Server geholt, sondern zuerst aus einem Zwischenspeicher (Cache). Zunächst speichert der eigene Browser Teile einer Webseite – sofern diese schon einmal besucht wurde. Dann wird die Seite lokal – also sehr schnell – geladen. Mit der Tastenkombination Strg + F5 kann ich auf dem Desktop das Laden aus dem lokalen Browser-Cache unterbinden. In mobilen Browsern ist das etwas umständlicher: Hier muss ich in den Privatsphäre-Einstellungen zuerst die gespeicherten Browserdaten löschen.

Aber auch die Internet-Provider (Hoster) halten auf ihren Servern einen Cache vor, um im Bedarfsfall häufig benötigte Ressourcen zur Verfügung zu haben. Auch dann erscheint die Ladezeit verkürzt, da die Webseite (oder wesentliche Bestandteile) nur von der letzten Station ausgeliefert wird. Alle zwischengespeicherten Versionen sind aber mit einem Ablaufdatum versehen, damit keine veralteten Versionen einer Seite zu stark verbreitet werden. Als Seitenbetreiber muss ich immer davon ausgehen, dass eine aktuelle Version vom eigenen (weiter entfernten) Webserver geholt wird. Die Zeit – die dann verstreicht bis alle Inhalte der ersten Seite auf dem Bildschirm angezeigt werden – ist die „echte“ – also reale Ladezeit. So lange muss der Besucher im Zweifelsfall warten. Es gibt auch Webseiten, die bestimmte Bereiche erst dann laden, wenn der Nutzer sie im Blickfeld hat (beispielsweise die Timeline von Facebook). Diese Techniken werde ich in einem späteren Beitrag behandeln.

Tools zur Messung der realen Ladezeit

Die Messung der Ladezeit wird zunächst auf dem eigenen, lokalen Gerät erfolgen. Dafür eignen sich die Developer Tools (F12) im Chrome Browser. Hier kann ich zum Beispiel den Unterschied zwischen bereits im Browser-Cache gespeicherten und den vom Server geholten Webseiten erfassen (Strg + F5). Die Developer Tools enthalten auch Lighthouse  – ein hervorragendes Open Source Werkzeug – das umfangreiche Infos über die Performance beliebiger Seiten bis zu meinem Standort liefert.

Für die Ermittlung der Leistungsdaten einer Webseite die von unterschiedlichen Servern geladen wird, kann ich einen Online-Service wie Pagespeed Insights verwenden. Hier werden aber keine Absolutwerte ermittelt, sondern es wird eine Vergleichs-Analyse mit Durchschnittsdaten vorgenommen. Ein hervorragender Dienst ist auch Webpagetest.org. Die Plattform erlaubt die absolute Performancemessung nach Aufruf von Servern auf der ganzen Welt mit verschiedenen Endgeräten.

Details dazu im kommenden Tutorial über Geschwindigkeitsmessung.

Das Laden von Medien (Videos, Grafiken und Fotos) beansprucht die meiste Zeit

Laut Machmetrics (2018) beträgt die Last einer durchschnittlichen Webseite etwa zwei Megabyte. Dabei haben Mediendateien  – also Bilder und Videos in der Regel den weitaus größten Anteil.  Da Videos streamen (progressiv herunterladen) wird von den Nutzern eine gewisse Verzögerung toleriert. Für Fotos warten die meisten User hingegen nicht mehr.

Die nächsten Tutorials behandeln deshalb die Größenanpassung und dann Kompression von Grafiken und Bildern. Danach folgt die Bereitstellung von unterschiedlichen Bildern für Desktop – und mobile Versionen.