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.

Der Mensch ist ungeduldig und diese Ungeduld bekommt jeder Webseitenbetreiber zu spüren. Wer unbedacht seine Seite mit ladezeitintensiven Inhalten schmückt, hofft auf eine beharrliche Kundschaft, deren Geduld groß genug ist. Besser ist es, Webseiten technisch auf eine sehr kurze Ladezeit bringen.

Viele Besucher sind durch die immer schneller werdenden Internetverbindungen einen schnellen Seitenaufbau gewohnt. Wenn aber eine Seite zu lange zum Anzeigen der Inhalte benötigt, springen die Nutzer oftmals wieder ab und suchen nach einer schnelleren Alternative. Für den Webseitenbetreiber gibt es viele Möglichkeiten, den zu präsentierenden Inhalt schneller auf den Browser ihrer Besucher zu bringen. Die meisten dieser Möglichkeiten setzen jedoch technisches Verständnis voraus. Es finden sich aber zu allen weitverbreiteten Optimierungskonzepten viele Step by Step Anleitungen. Diese verhelfen auch technisch weniger versierten Benutzern zu einem besserem Ergebnis.

Ladegeschwindigkeit testen

Es gibt verschiedene kostenlose Tools, die einen schnellen Überblick bieten. So kann man sich informieren ü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.

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. Dieses Tool liefert zusätzlich Empfehlungen zu den einzelnen Punkten und stellt komprimierte Dateien zum Download bereit.

Bilder komprimieren

Für die meisten Unternehmenswebseiten sind Bilder auf der Webseite unerlässlich. Die verwendeten Bilder sollte man schon vor dem Einbinden auf der Webseite komprimieren und für die maximale Größe, mit der sie Verwendung finden, anpassen.

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. 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 auch die Komprimierung der CSS- und JavaScript – Dateien. Hierbei werden die Leerzeichen, Kommentare und sonstige für den Computer unnötige Zeichen gelöscht. Das verkleinert die Dateien und sie benötigen 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. Das ermöglicht, dass der Besucher die Seite benutzen kann, während sich die Inhalte noch aufbauen.

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 man erreichen, 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 man aber darauf achten, die Zeiträume passend zu wählen. 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. Dieser sorgt dafür, 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 werden Inhalte auf Basis der Dateiendung komprimiert. 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 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.