Wir leben in einer Gesellschaft, in der alles schnell gehen muss. Sowohl an der Supermarktkasse als auch im Internet ist unsere Geduld sehr begrenzt; kaum jemand möchte mehr als 3 Sekunden warten, bis die gewünschte Webseite geladen ist.
Mobile-First lautet nun die Devise – Google wird seinen Hautindex Ende des Jahres auf eine mobile Ausrichtung umstellen, dies folgt aus der stark steigenden Nutzung des mobilen Internets. Gerade wenn wir mobil online sind, muss alles besonders schnell gehen. Aus diesem Grund ist die Ladezeit einer Webseite auch ein Rankingfaktor für Google. Im Jahre 2012 errechnete Amazon, dass eine Ladezeitverschlechterung von 0,1 Sekunden die Conversion-Rate um ein Prozent reduziert.
Die Ladegeschwindigkeit einer Webseite hat also nicht nur einen Effekt auf die User Experience und das Google Ranking, sondern auch darauf, wie viel Umsatz eine Webseite generieren kann. Daraus folgt: Je schneller eine Webseite lädt, desto besser.
Im Folgenden zeige ich dir, wie ich die Ladezeit meiner Webseite auf unter 0,5 Sekunden optimiert habe. Mit meiner Schritt-für-Schritt-Anleitung kannst auch du die Ladezeit deiner Webseite auf unter eine Sekunde drücken.
Wie schnell lädt meine Webseite?
Um die Ladezeit deiner Webseite zu optimieren, müssen wir zuerst feststellen, wie schnell deine Webseite lädt und wo es noch Optimierungspotential gibt. Es existieren zahlreiche Tools, um die Ladezeit deiner Webseite zu ermitteln, zum Beispiel Pingdom, GTmerix & WebPagetest. Ich empfehle dir eines der genannten Tools zu nutzen und nicht das Google PageSpeed Tool, da dieses keine Auskunft über die tatsächliche Ladezeit deiner Webseite gibt. In meinem Beispiel nutzte ich Pingdom, da es mir eine super Aufschlüsselung darüber gibt, welche Elemente einer Webseite die Ladezeit negativ beeinflussen.
Welche Elemente beeinflussen die Ladezeit meiner Webseite?
Ich optimiere regelmäßig die Ladezeit von Webseiten und stelle dabei immer wieder fest, dass Bilder den größten Teil einer Webseite ausmachen. In der Regel sollte eine Webseite zwischen 1-3 MB groß sein. Ich selber habe bereits Webseiten optimiert, deren Größe 20 MB überstieg. Der zweite große Faktor ist die Menge an JavaScript auf einer Webseite. Als Data-Driven-Marketers können wir jedoch nur schwer auf JavaScript verzichten, da sämtliche Client-Site-Tracking-Technologies (Google Analytics, Adobe Analytics) JavaScript nutzen, um User-Aktivitäten auf den Webseiten zu tracken. Aus diesem Grund solltest du JavaScript verkleinern („Minified JavaScript“) sowie das JavaScript-Snippet in den Footer anstatt in den Header setzen. Die dritte wesentliche Einflussgröße ist dein Hoster. Bei der Wahl deines Hosters solltest du möglichst darauf achten, dass er ein spezialisierter Hoster für das verwendete CMS ist.
Schritt-für-Schritt-Anleitung: Ladezeitoptimierung deiner WordPress-Seite
- Zuerst schauen wir uns mithilfe von Pingdom die aktuelle Ladezeit der Webseite an. Nachdem du die URL der zu optimierenden Seite angegeben hast, gibt dir Pingdom einige Zahlen zur Performance wieder.
In unserem Beispiel sehen wir, dass die Ladezeit der Webseite 3,91 Sekunden beträgt. Wir können auch sofort erkennen, wie groß die Webseite ist. Mit 3,3 MB ist die Webseite für meinen Geschmack deutlich zu groß. Ich möchte, dass die Webseite unter 1 MB groß ist.
- Nun schauen wir uns an, welcher Content-Typ für die 3,1 MB verantwortlich ist. Dafür scrollst du einfach zu „Content size by content type“.
Hier sehen wir, dass 2,62 MB auf die Bilder entfallen. Insbesondere bei E-Commerce-Seiten werden viele Bilder verwendet. Achte darauf, dass die Bilder stets komprimiert sind. Du kannst die Bilder deiner Webseite mit Online-Tools wie PNG & JPEG Compressor komprimieren. Selbstverständlich ist es eine Menge Arbeit, wenn du dies für jedes Bilder einzeln machen musst. Es gibt aber einige tolle Plugins, mit denen du deine WordPress-Seite richtig auf Vordermann bringen kannst. Optimus.io ist zum Beispiel eine grandiose Erweiterung, die die Bildkomprimierung automatisiert. Ein weiteres Feature, welches für mich unverzichtbar ist, ist die WebP-Konvertierung. WebP ist ein alternatives Grafikformat für die verlustfreie Komprimierung von Bildern. Es ist bis zu 10 Mal kleiner als JPED & PNG. Nachdem du Optimus installiert hast, solltest du dir nun das Cache Enabler Plugin von KeyCDN holen, welches Hand in Hand mit Optimus deine Bilder als WebP darstellen wird.
- Nach der Installation von KeyCDN & Optimus müssen wir noch einige Einstellungen bearbeiten. Um die Optimus-Einstellungen anzupassen, gehst du auf Einstellungen -> Optimus. Nun stehen dir fünf verschiedene Optionen zur Verfügung. Hier wählst du die Option WebP-Dateien aus. Danach begeben wir uns in die Cache-Enabler-Einstellungen und wählen dort unter Cache-Verhalten die Option „Anlegen einer zusätzlichen gecachten Version für Bilder im WebP Format“ aus. Nun müssen wir noch die bestehenden Bilder optimieren. Dafür gehen wir auf Werkzeuge -> Bilder optimieren. Dort findest du sämtliche Bilder, die noch nicht optimiert sind. Klick einfach auf Bilder optimieren. Je nachdem, wie viele Bilder du in deiner Datenbank hast, kann es bis zu 30 Minuten dauern, bis alle Bilder optimiert sind.
JavaScript- & CSS-Komprimierung
Die Bildoptimierung sollte den größten Hebel haben, um deine Ladezeit zu optimieren. Die Komprimierung von JS & CSS sollte man jedoch ebenfalls nicht vernachlässigen. Für die Optimierung von JS & CSS empfehle ich das Plugin BWP Minify. Wenn du BWP Minfy installiert hast, gehst du in die allgemeinen Einstellungen und wählst dort die Optionen „JavaScript-Dateien automatisch komprimieren“ & „CSS-Dateien automatisch komprimieren“ aus. Alternativ empfehle ich das Plugin Autoptimize, welches neben JS- & CSS-Komprimierung auch den JS-Code in den Footer packt. Das hat zur Folge, dass JavaScript erst nachgelagert geladen wird. Ebenfalls bietet Autoptimize eine CDN-Anbindung an deinen CDN-Anbieter.
Webhoster & Time to first byte
Neben der Anzahl & Größe der Bilder und JavaScript-Dateien hat die Auswahl deines Webhosters einen großen Einfluss auf die Performance deiner Webseite. Ich persönlich habe bereits viele Hoster ausprobiert; von Alfahosting über 1&1, Mittwald bis hin zu Raidboxes. Bei der Auswahl des Hosters solltest du darauf achten, dass du kein Shared Hosting nutzt. Darüber hinaus sollte der Sever über eine SSD-Festplatte verfügen. Egal welchen Anbieter du wählst: Wenn du eine WordPress-Seite hosten möchtest, solltest du auf jeden Fall auf einen Nginx-Server setzen anstatt auf einen Apache. Ich selber habe nach der Optimierung von Bildern und JavaScript meinen Webserver von Apache auf Nginx gewechselt und so nochmals eine Sekunde Ladezeit eingespart. Für meine Seite nutze ich den Webhoster Raidboxes (raidboxes.de). Neben einem eigenen vServer übernimmt Raidboxes sogar den gesamten Umzug deiner WordPress-Seite.
Fazit:
Die Optimierung der Ladegeschwindigkeit einer Webseite sollte höchste Priorität für Webseitenbetreiber haben, denn die Ladegeschwindigkeit ist nicht nur ein direkter Google-Ranking-Faktor, sondern hat auch einen starken Einfluss auf die Conversion-Rate auf deiner Webseite. Ich hoffe, dass ich dir mit meinen Optimierungstipps einige Hinweise geben konnte, wo und wie du die Ladezeit verbessern kannst. Wenn du Fragen haben solltest oder Unterstützung bei der Optimierung benötigt, dann schreib mir gerne eine Nachricht.
