Ladezeit einer Webseite: Je schneller, desto besser

Optimization Geschrieben von Rudolf Uivari

Nach dem letzten Conversion-Optimierungstipp „Fehler schnell korrigieren“ folgt heute der zehnte Tipp, mit dem Sie schrittweise zum Conversion-Optimierungsprofi werden: Je schneller, desto besser!

Rudolf Uivari

Specialist Conversion Optimization

Ladezeit einer Webseite: Je schneller, desto besser

Eine schnelle Webseite ist die Grundlage für mehr Conversions. Deswegen sollte jeder Webseitenbetreiber stets darum bemüht sein, seine Webseite auf eine kurze Ladezeit hin zu optimieren.

Warum? Der Mensch ist ein sehr ungeduldiges Wesen, dessen Dranghaftigkeit, binnen eines Wimpernschlags alle Inhalte sofort sehen zu können, jeder Webseitenbetreiber zu spüren bekommt. Wer dabei unbedacht seine Seite mit ladezeitintensiven Inhalten schmückt, hofft auf eine beharrliche Kundschaft, deren Geduld groß genug ist. Darauf sollte aber kein Webseitenbetreiber spekulieren, sondern aktiv seine Seite technisch auf eine sehr kurze Ladezeit bringen.

Viele Besucher sind durch die immer schneller werdenden Verbindungen, egal ob am Festnetz oder mobil, einen schnellen Seitenaufbau gewohnt. Wenn es passiert, dass eine Seite zu lange zum Anzeigen der Inhalte benötigt, springen diese oftmals wieder ab und suchen nach einer schnelleren Alternative. Für den Webseitenbetreiber steht eine Vielzahl an Möglichkeiten offen, den zu präsentierenden Inhalt schneller auf den Browser ihrer Besucher zu bringen. Die meisten dieser Möglichkeiten bedürfen jedoch einiges an technischem Verständnis. Es finden sich aber zu allen weitverbreiteten Optimierungskonzepten viele Step by Step Anleitungen, die auch technisch weniger versierten Benutzern zu einem besserem Ergebnis verhelfen.

Ladegeschwindigkeit testen

Es gibt verschiedene kostenlose Tools, die einen schnellen Überblick bieten zum Beispiel über die Größe der eigenen Seite, wie lange sie im Schnitt zum Laden braucht und welche Dateitypen wie stark ins Gewicht fallen. Zwei sehr bekannte Tools dafür sind Google PageSpeed Insights und die Browser Extension Yslow.

Ladegeschwindigkeit

 

Die YSlow-Extenstion gibt Informationen zu idealen Inhalten und Optimierungspotential in den Bereichen Content, Cookie, CSS, Images, JavaScript und Server. Alle Informationen sind auch über PageSpeed Insights erhältlich, welches darüber hinaus noch Empfehlungen zu den einzelnen Punkten liefert und sogar komprimierte Dateien zum Download bereitgestellt.

 

Bilder komprimieren

Webseiten ohne Bilder sind nur in sehr spezifischem Rahmen möglich, für die meisten Unternehmenswebseiten sind diese aber unerlässlich, daher sollten die verwendeten Bilder schon vor dem Einbinden auf der Webseite komprimiert werden und für die maximale Größe, mit der sie Verwendung finden, angepasst werden.

Gängige Bildbearbeitungsprogramme wie Photoshop oder dessen OpenSource Äquivalent Gimp haben eine Extra-Option parat, um die Bilder für das Web fit zu machen. Der Vorteil dieser Speicheroption ist, dass sogleich die neue Dateigröße und die Ladezeit angegeben werden können. Dabei ist darauf zu achten, ob es in gewissen Fällen nicht sogar sinnvoll wäre, das Dateiformat der Bilder an das entsprechende Bedürfnis anzupassen. Soll das Bild groß und zoombar sein (z.B. Produktbilder) oder handelt es sich um eine kleine Grafik, die in einen Fließtext eingebunden wird. Ist es ein Clipart, hat es einen transparenten Hintergrund, komplexe Farbverläufe oder ist es eine Zeichnung? Je nachdem, wozu das Bild dienen soll, kann bereits das gewählte Bildformat eine Komprimierung erwirken: Nutzen Sie je nach Bedürfnis gif, png oder jpg.

Es ist jedoch nicht zwingend nötig, eines der Programme zur Komprimierung zu verwenden, denn auch Online gibt es eine Reihe (kostenloser) Tools, z.B.: compressjpeg.com/, http://www.imgopt.com/. Für Webseiten, die täglich neue Bilder erhalten, lohnt sich eine serverseitige Lösung, die den Komprimierungsprozess automatisiert durchführen kann.

 

CSS und JS komprimieren

Auch wenn in aller Regel die Bilder die meiste Ladezeit in Anspruch nehmen, lohnt sich die Komprimierung der CSS- und JavaScript – Dateien. Hierbei werden die Leerzeichen, Kommentare und sonstige für den Computer unnötige Zeichen gelöscht. Dadurch werden die Dateien schmaler und benötigen ebenfalls weniger Ladezeit. Zur Komprimierung von CSS und JavaScript-Dateien gibt es ebenfalls Online-Tools, die hilfreiche Komprimierungsempfehlungen geben wie zum Beispiel JSCompress oder CSS Minifier.

Zur Komprimierung von JavaScript Dateien wirkt es sich positiv auf die Ladezeit aus, JavaScript am Seitenende bzw. asynchron zu laden (async), während CSS direkt im Head geladen wird. Dadurch wird ermöglicht, dass der Besucher die Seite benutzen kann, während sich die Inhalte noch aufbauen.

JS async

 

Lazy Load

Mit Lazy Load können Sie das Laden von Inhalten für gewöhnliche Bilder bis zu dem Zeitpunkt verzögern, an dem Sie wirklich angezeigt werden müssen. Dadurch lässt sich der initiale Ladevorgang der Seite deutlich verkürzen und für Besucher relevante Inhalte werden ohne große Verzögerung geladen. Lazy Load lässt sich nicht nur für einzelne Bestandteile sondern für ganze HTML Objekte anwenden. Die Verwendung von Lazy Load ist insbesondere für Elemente wichtig, die sich unterhalb des sichtbaren Bereichs befinden sowie für Elemente, die verborgen sind.

 

Caching

Mit dem Caching kann erreicht werden, dass Bilder, Javascript-Dateien und weitere webrelevante Formate und Dateien,auf dem lokalen Rechner der Besucher für einen festgelegten Zeitraum gespeichert werden. Dabei muss aber darauf geachtet werden, dass die Zeiträume passend gewählt werden. Dateien, die häufig geändert werden müssen, werden erst nach Ablauf der festgelegten Zeit erneut vom Server herunter geladen.

 

Übertragung als gzip

Bei gzip handelt es sich um einen Kompressions-Algorithmus, der dafür sorgt, dass Daten in komprimierter Form und damit sehr schnell vom Server zum Nutzer übertragen werden. Gzip wird in der Regel von allen gängigen Browsern unterstützt.

Die einfachste Methode der gzip Komprimierung ist dabei die Komprimierung über die .htaccess, mit Hilfe derer Inhalte auf Basis der Dateiendung komprimiert werden. Beispiel (Einzelfälle können Anpassungen der Konfigurationseinträge erfordern):

<IfModule mod_deflate.c>
<FilesMatch „\.(js|jpg|jpeg|gif|png|css|txt|html)$“>
SetOutputFilter DEFLATE
</FilesMatch>
</IfModule>

Durch die Nutzung von gzip ist es möglich, 40-90% des Datenvolumens einzusparen.

 

Fazit

Gerade der Trend zu immer mehr mobilen Endgeräten, die auf Webseiteninhalte zurückgreifen, bringt dieses Thema immer wieder auf und zeigt die Dringlichkeit, sich als Webseitenbetreiber diesem Thema anzunehmen. Mit den hier genannten Optimierungsmöglichkeiten lässt sich die Seitengröße deutlich reduzieren und die Besucher profitieren von einem schnellen Seitenaufbau. Schließlich soll für den Besucher das beste und schnellste Ergebnis parat sein, egal wo er sich befindet.