So verbesserst du die Ladezeit deiner Webseite

Air Show schneller Jet in der Luft

Wer zuerst liefert, gewinnt! Die Ladezeit deiner Webseite ist nicht nur ein SEO-Faktor, sondern erhöht auch die Conversion-Rate und sollte daher unbedingt bestmöglich optimiert werden.

Wie schnell eine Webseite lädt hängt von vielen Faktoren ab. Das Webhosting spielt natürlich eine Rolle, die Anzahl an Bildern und die Dateigrößen der Bilder sind relevant und auch Stylesheets und Javascript Code können deine Webseite verlangsamen. Damit du nicht den Überblick verlierst, gibt es Tools, welche deine Webseite analysieren und die Faktoren auflisten, die deine Webseite am meisten ausbremsen. Wir nutzen vor allem den Pingdom PageTest und Google PageSpeed Insights. An Pingdom gefällt uns, dass er eine Menge Informationen zu den einzelnen Requests anzeigt. Google PageSpeed gibt ebenfalls nützliche Tipps zur Optimierung.

Das richtige Caching deiner Webseite

Die meisten Webseiten werden im Hintergrund von einem Content-Management-System zusammengesetzt. Das CMS generiert bei einem Seitenaufruf, aus den verschiedenen Daten wie Templates, Inhalte und Funktionen deine Webseite. Es fügt Daten aus einer Datei oder eine Datenbank in das Template deiner Webseite ein, schneidet eventuell Bilder auf die passende Größe zu oder blendet Inhalte dynamisch ein und aus. Das kostet natürlich alles Zeit. Damit nicht jede Seite bei jedem Seitenaufruf neu generiert werden muss, gibt es bei vielen Content-Management-Systemen eine Cache-Funktion. Das System speichert das fertig generierte HTML einer Unter-Seite und überprüft beim nächsten Aufruf, ob es für diese Seite bereits eine fertig generierte Seite im Cache hat. Ist dies der Fall, liefert das CMS diese bereits fertige HTML sofort aus, ansonsten wird die Seite generiert und dann für zukünftige Aufrufe zwischengespeichert. Caching spart also Ladezeit. Deshalb solltest du unbedingt prüfen, ob dein CMS eine Cache-Funktion hat und ob diese aktiviert ist.

Zusätzlich zun "Onpage"-Caching hat man die Möglichkeit, dem Browser des Besuchers mitzuteilen, wie lange er Inhalte der Webseite wie zum Beispiel Bilder und CSS oder Javascript-Dateien zwischenspeichern darf. So muss der Browser nicht bei jedem Seitenaufruf die gesamte Webseite inklusive aller Dateien neu vom Server herunterladen. Falls als Webserver Apache zum Einsatz kommt, fügst du einfach nachfolgende Codezeilen in die .htaccess-Datei im Root-Verzeichnis deines Webspaces ein. Es kann sein, dass dein Webhoster dies nicht zulässt oder der Server nicht das dafür notwendige Modul installiert hat. Wende dich in diesem Fall am besten an deinen Webhoster.

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/ico "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType image/jpg "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType text/css "access plus 14 days"
ExpiresByType application/x-javascript "access plus 14 days"
ExpiresByType application/javascript "access plus 14 days"
ExpiresByType text/javascript "access plus 14 days"
</IfModule>

Bei anderen Webservern funktioniert das mit der .htaccess-Datei nicht. Am besten suchst du dir dann im Internet eine Anleitung für das Browser-Caching in Verbindung mit deinem Webserver raus. Für Webseiten mit dem WordPress CMS gibt es auch ein Plugin (welches aber auch nur mit dem Apache-Webserver funktioniert): Leverage-Browser-Caching WordPress Plugin

Schnelles SSD-Webhosting

Das Webhosting spielt bei der Ladezeit deiner Webseite meist eine sehr große Rolle. Nach Möglichkeit solltest du dir einen Webhoster suchen, welcher nah bei deiner Zielgruppe ist. Richtet sich deine Webseite zum Beispiel an deutsche Leser, solltest du am besten auch einen Hoster mit Serverstandort in Deutschland wählen. Neben dem Standort solltest du auch darauf achten, dass dein Webhosting-Paket genügend Leistung für deine Webseite beinhaltet. Ein weiterer Tipp: Webseiten bestehen aus vielen kleinen Dateien die auf einer herkömlichen Festplatte an unterschiedlichen Stellen auf der Disk gespeichert sein können. Der Lesekopf der Festplatte muss also viele Runden drehen, um die Daten deiner Webseite zusammen zu bekommen. Daher empfiehlt sich das Hosting auf SSD-Festplatten. Diese Festplatten mit Flash-Speichertechnologie bieten einen erheblichen Geschwindigkeitsvorteil beim Webseiten-Hosting. Oft kostet das SSD-Webhosting etwas mehr, aber die 2-3€ Mehrkosten pro Monat sind gut investiert!

Optimale Bild-Dateigrößen

Bild-Composing: Elefant trinkt mit seinem Rüssel aus einer Kaffeetasse
Ein Bild sagt mehr als tausend Worte. Eine Webseite ohne Bilder wäre deshalb ziemlich langweillig. Wie du dir sicherlich denken kannst, sind Bilder oft auch die größten Datenmengen und bieten somit das größte Optimierungs-Potenzial. Bilder sollten nach Möglichkeit nicht größer sein, als unbedingt notwendig. Falls du ein CMS nutzt, bietet dieses eventuell die Möglichkeit, Bilder auf verschiedene Größen zuzuschneiden. Bei WordPress kannst du die Größen vordefinieren, WordPress schneidet das Bild dann beim Upload auf die entsprechenden Größen zu. Beim GRAV CMS können die Bilder im Template on-the-fly exakt auf die notwendige Größe zugeschnitten werden. Diese einmal zugeschnittenen Bilder speichert GRAV dann im Cache, sodass die Bilder nicht bei jedem Aufruf erneut zugeschnitten werden müssen.

Responsive Images (das HTML srcset Attribut)

Mit dem neuen HTML srcset Attribut kannst du dem Browser mehrere Bilder übergeben, die dieser je nach Pixeldichte des Endgeräts lädt.

<img src="picture.jpg" srcset="picture.jpg 1x, picture@2x.jpg 2x, picture@3x.jpg 3x">

Neben der Pixeldichte hast du auch die Möglichkeit, unterschiedliche Bilder je nach Viewport Größe des Nutzers zu defnieren. So kannst du beispielsweise auf Handys ein kleines Bild mit einer kleinen Dateigröße laden und auf Desktop ein größeres.

<img src="picture.jpg" srcset="picture_480.jpg 480w, picture_960.jpg 960w, picture_1920.jpg 1920w">

Für WordPress gibt es ein Plugin: Responsive Images, GRAV bietet hierfür eine Menge Funktionalitäten out-of-the-box! Blogbeitrag Grav Retina responsive Images und Grav Media Docs

Javascript Files und Stylesheets

Um die Anzahl der HTTP-Requests zu senken und somit das Laden deiner Webseite zu beschleunigen, solltest du nach Möglichkeit all deinen Javascript Code in eine Datei zusammenfassen und auch deine CSS-Assets auf eine Datei reduzieren. Am besten komprimierst du dann noch beide Dateien. Auch hier gibt es für WordPress unzählig viele Plugins. Das Flat-File CMS Grav kann selbst automatisch deine verschiedenen Assets zusammenfassen und komprimieren. Dabei kannst du sogar die Reihenfolge vorgeben, damit zum Beispiel erst jQuery und dann die jQuery Plugins geladen werden.

AMP-Pages

AMP ist eine neue Technik von Google, mit denen du deine Webseite für mobile Geräte besonders schnell machen kannst. Dafür muss deine Webseite aber technisch optimiert werden. Es existieren bereits einige Plugins, in den meisten Fällen reicht das aber noch nicht zu 100% aus. Daher ist oft zusätzlich ein Programmierer erforderlich, um die Webseite AMP-kompatibel zu machen. Mehr zum Google AMP-Projekt gibt es direkt auf der Projekt-Webseite.

Newsletter

Du willst keinen Artikel verpassen? Abonniere unseren kostenlosen Newsletter!

Gastautor werden!

Wir freuen uns immer über Beiträge von Gastautoren zu den Themen Webdesign, Programmierung und Marketing. Für Details kontaktiere uns am besten vorab