Ladezeiten für Websites und Online-Shops optimieren

Wie inzwischen allgemein bekannt ist, legt auch Google Wert auf die Ladezeiten einer Website und nutzt diese sogar als Rankingkriterium. Aber auch Online-Shop-Betreiber sollten größeren Wert auf den Ladezeiten ihres Shops legen, denn dadurch kann sowohl die Bounce-Rate, als auch die Return-to-SERP-Rate minimiert werden. Außerdem wirkt sich eine kurze Ladezeit auf eine positive Nutzererfahrung mit Online-Shops oder Websites aus. Weiter kann das Optimieren der Ladezeiten auch zu einer Steigerung der Verweildauer der Besucher führen.

 

Ein Fachartikel von Axel Scheuering

Die Ladegeschwindigkeit Ihres Online-Shops oder Ihrer Website kann erheblichen Einfluss auf das Kaufverhalten Ihrer Besucher nehmen. Denn sind wir einmal ehrlich: Wer kehrt schon zu einem Online-Shop zurück, dessen Seiten gefühlte Stunden brauchen, um Informationen oder Angebote zu laden? Bevor es an die Ladezeitenoptimierung geht, sollten Sie sich zunächst mit dem Status Quo der Ladezeit Ihrer Website oder Ihres Online-Shops in Ihrem Web-Analyse-Tool wie Google Analytics, etracker, Piwik beschäftigen. Nachfolgend ein Report aus Google Analytics zur Websitegeschwindigkeit.

Wie können Sie als Website- oder Online-Shop-Betreiber die Ladezeiten Ihres Shops konkret optimieren?

Es gibt eine Vielzahl unterschiedlicher Ansätze, um die Ladegeschwindigkeit Ihres Shops oder Ihrer Website zu verbessern. Hier finden Sie die fünf wichtigsten Grundlagen zur Optimierung der Ladezeiten.

Browser-Caching

Ziel des Browser-Caching ist eine schnellere Datendarstellung. Um diese Zielsetzung zu erreichen, werden die Daten Ihrer Website im Browser-Cache Ihrer Besucher zwischengespeichert.

Was bedeutet das konkret?

Wenn ein Nutzer Ihre Website oder Ihren Online-Shop besucht, so werden die Elemente der Website im Browser-Cache des Besuchers zwischengespeichert. Kommt eben dieser Nutzer ein zweites Mal auf Ihre Website, fragt der Browser zunächst beim Webserver Ihrer Website nach, ob sich Inhalt, Layout etc. geändert haben. Ist dies nicht der Fall, so lädt der Browser Ihres Besuchers Ihre Website aus seinem Cache.

Können lokal zwischengespeicherte Daten verwendet werden, so kann Ihre Website um einiges schneller geladen werden, da sie lediglich aus dem Cache Ihres Besuchers gezogen wird. Haben sich Inhalt, Layout etc. verändert, so lädt der Server Ihre Website neu.

Das Frage-Antwort-Spiel zwischen Browser und Server benötigt Zeit, denn der Browser prüft jede einzelne Datei, z.B. CSS-Datei, JavaScript, Logo etc. Ihrer Website auf Änderungen – nicht gerade förderlich um die Ladezeiten zu verbessern.

 

Doch es gibt eine Lösung: Expires-Header!

Sie können dafür sorgen, dass der Server dem Browser Ihres Besuchers mitteilt, dass dieser für einen bestimmten Zeitraum auf die Abfrage nach Änderungen verzichten soll. Die Definition dieses Zeitraums wird durch den Expires-Header ermöglicht. Natürlich ist dieses Vorgehen nur sinnvoll, wenn Sie sicher sind, dass im von Ihnen definierten Zeitraum keinerlei Änderungen vorgenommen werden. Die Einbindung des Expires-Header erfolgt für Apache-Server in der .htaccess wie folgt:

 

Einbindung des Expires-Header in die .htaccess

 

<ifmodule mod_expires.c>
ExpiresActive on
ExpiresDefault "access plus 1 week"
</ifmodule>

Die erste Zeile dient der Abfrage, ob das Apache-Modul mod_expires verfügbar ist. Wenn dies der Fall ist, wird es aktiviert, sowie der Zeitraum für die einzelnen Dateien eingestellt. D.h. Sie haben die Möglichkeit für jede einzelne Datei Ihrer Website einen Zeitraum zu definieren, in dem nicht auf Änderungen geprüft wird.

In diesem Beispiel wird für die CSS-Datei einer Website ein Zeitraum von einer Woche definiert, in welchem diese spezifische Datei nicht nach Änderungen abgefragt werden soll. Es können beliebig viele ExpiresByTyp-Elemente mit jeweiligem Zeitraum hinzugefügt werden.

Bilder-Optimierung

Ein weiterer wichtiger Punkt zur Optimierung der Ladezeiten Ihrer Website odeIhres Online-Shops betrifft die Optimierung Ihrer Bilder bzw. Grafiken. Oftmals führen gerade zu große Bilddateien zu einer langsamen Ladezeit. Um den Ladegeschwindigkeit Ihrer Website zu verbessern, ist es sinnvoll die Tags „width“ und „height“ innerhalb des image-Tags anzugeben.

Die Nutzung dieser Tags ermöglicht die Erstellung eines Platzhalters, der den Maßen des jeweiligen Bildes entspricht. Dadurch kann Ihre Site noch vor dem Laden des Bildes aufgebaut werden.

Prinzipiell empfehlenswert: Nutzen Sie von Anfang an die passende Bildgröße, um die Ladezeiten Ihrer Website zu verbessern. Denn sind Ihre Bilder zu groß, werden diese vom Browser herunterskaliert, um eine optimale Bilddarstellung zu gewährleisten. Das Runterskalieren der Bilder benötigt Zeit und wirkt sich negativ auf die Ladezeiten aus.

 

Einbindung der Tags "width" und "height"

 

<img scr="beispiel.png" width="200" height="200"</img>

Gzip-Komprimierung verwenden

Um die Datenmenge zu verkleinern ist es sinnvoll diese zu komprimieren. Am populärsten ist hier die Gzip-Komprimierung, mit deren Hilfe sich bis zu ca. 80% der jeweiligen Dateigröße einsparen lässt. Eine komprimierte Datei kann deutlich schneller übertragen werden und ermöglicht eine erhöhte Ladegeschwindigkeit von Websites und Online-Shops. Die einfachste Möglichkeit für Apache-Server ist der Eintrag in der .htaccess:

 

Umsetzung der .htaccess für Apache Server

 

<IfModule mod_deflate.c>
<FilesMatch "\.(js|css|html|xmls)$">
SetOutputFilter DEFLATE
</FilesMatch>
</IfModule>

Um die Gzip-Kompression für Apache-Server nutzen zu können, muss das Modul mod_deflate aktiviert sein. In der ersten Zeile wird diese Voraussetzung überprüft. Die zweite Zeile dient der eigentlichen Komprimierung, d.h. alle Dateien mit der Endung .js, .css, .html, .xml werden komprimiert.

CSS und JavaScript reduzieren

Ein weiterer wichtiger Punkt, um die Ladezeiten für Websites und Online-Shops zu optimieren, betrifft die Minimierung von CSS- und JavaScript-Dateien. Es bietet sich beispielsweise an, Leerzeichen, sogenannte „Whitespaces“, zu entfernen. Bei der Entwicklung kann das Verwenden von Leerzeichen und Zeilenumbrüchen zur Übersicht des Entwicklers beitragen, dennoch sollte beim Abschluss des Codes auf eine komprimierte Form geachtet werden. D.h. es empfiehlt sich, alle Leerzeichen und Zeilenumbrüche zu entfernen, um die Dateigröße des Codes zu minimieren und dadurch die Ladegeschwindigkeit positiv zu beeinflussen.

 

CSS mit Leerzeichen und Zeilenümbrüchen


#beispiel {

margin: 10px;

padding: 15px;

display: block;

font-size: 1.3em

font-weight: bold;

}

 

CSS ohne Leerzeichen und Zeilenümbrüchen

 

#beispiel{margin:10px;padding:15px;display:block;font-size:1.3emfont-weight:bold;}

Nützliche Tools

Weitere Unterstützung, um die Ladegeschwindigkeit Ihrer Website oder Ihres Online-Shops zu verbessern, geben eine Reihe unterschiedlicher Tools. Zwei sehr bekannte und nützliche Tools sind „Google PageSpeed Insights“ und „Pingdom“.

Google PageSpeed Insights

Google selbst entwickelte ein kostenloses Tool zur Analyse der Ladegeschwindigkeit einer Website – Google PageSpeed Insights. Die Ladezeit einer Site wird mittels einer Skala von 0-100 Punkten bewertet, wobei 100 Punkte das Optimum darstellen.

Neben der Analyse werden auch konkrete Optimierungsmaßnahmen vorgeschlagen und ausführlich beschrieben. Das Tool ist sowohl für die mobile Mobil-Version als auch Desktop-Version anwendbar.

Pingdom

Mit dem Tool Pingdom können Sie sich sowohl die Ladezeit Ihrer Website anzeigen lassen, als auch konkrete Empfehlungen zur Optimierung der Ladezeiten. Pingdom ermöglicht außerdem eine Analyse hinsichtlich der Reihenfolge der zu ladenden Dateien. D.h. Sie erhalten eine grafische Auswertung, welche Datei wann geladen wird. Basierend auf dieser Auswertung lassen sich Aussagen treffen, zum Beispiel welche Dateien zusammengelegt werden könnten, um eine Verbesserung der Ladezeit zu erzielen. Kostenlosen Pingdom Website Speed Test durchführen.

Fazit

Verzichten Sie nicht auf potentielle Käufer und Wiederkehrer nur weil Sie der Ladezeitgeschwindigkeit Ihres Online-Shops oder Ihrer Website keine oder zu wenig Beachtung geschenkt haben. Es wäre schade, wenn Sie Ihren Besucher auf Grund eines miserablen Pagespeeds nicht von Ihrem Shop und dessen Angebot überzeugen könnten. Sie haben bereits die größte Hürde gemeistert: Ihre Website bzw. Ihr Angebot konnte den Besucher in den SERPs überzeugen! Jetzt heißt es Pagespeed optimieren und das Finetuning der Webseite angehen. Mehr SEO-Tipps für Online-Shops gibt es zum Beispiel in unserem Whitepaper.

Über den Autor

Axel Scheuering ist Gründer und Geschäftsführer der eology GmbH - eine auf Suchmaschinenmarketing spezialisierte Agentur. Unsere Schwerpunkte sind Suchmaschinenoptimierung mit Linkbuilding und On-Page-SEO, Google-AdWords-Kampagnen, Facebook-Werbung und Conversion-Rate-Optimierung, hauptsächlich für Online-Shops.