Zahlreiche Studien (Akamai, Walmart, Mozilla) belegen, dass die Ladezeit von Webseiten erheblichen Einfluss auf die Conversion-Rate hat. Google’s Webexperte Paul Irish empfiehlt in seinem RAIL Framework, eine initiale Ladezeit von 1 Sekunde. Nach 7 Sekunden brechen nahezu alle Nutzer den Ladevorgang ab und wenden sich etwas anderem zu. 
Seit einiger Zeit nutzt auch Google die Ladezeit von Webseiten als Ranking-Faktor: Schnelle Webseiten erreichen bessere Platzierungen in den Suchergebnissen. Bei AdWords Kampagnen hat die Ladezeit der Landingpage direkten Einfluss auf den Qualitätsfaktor und damit auf den Erfolg Ihrer Werbekampagnen.
Ladezeit messen
Was zunächst einfach klingt, stellt sich als komplex heraus: Die Ladezeit einer Webseite besteht nicht (nur), aus der Zeitspanne, die der Webserver braucht, um den HTML-Code auszuliefern. Die relevante Zeitspanne ist: Zeitpunkt der Anfrage bis Zeitpunkt der Inhaltsdarstellung im sichtbaren Bereich des Webbrowsers. Dazu gehört nicht nur die eigentliche Webseite, sondern auch alle Grafiken und Stylesheets, JavaScript Dateien und Schriftarten. Einige Ressourcen können die Darstellung blockieren, bis sie vollständig heruntergeladen werden. Dadurch wird die Ladezeit deutlich erhöht. Blockierende Elemente (vor allem JavaScripts) sollten daher mit Bedacht eingesetzt werden.
Tools zur Messung der Ladezeit
Es gibt mehrere Tools, die versuchen, einen echten Webbrowser zu emulieren.
- Page Speed Insights Service (gratis)
Google’s eigener Dienst misst die Ladezeit für mobile Geräte und Desktop PCs. Er testet verschiedene Faktoren wie Bildgröße, Server-Geschwindigkeit und vergibt anschließend einen Score zwischen 0-100 Punkten. 80 Punkte sollten Sie mindestens erreichen. - Pingdom (gratis)
Zeigt die Ladezeit aller eingebetteten Dateien an (Bilder, JavaScript Dateien, CSS, etc.) inkl. aller HTTP-Header an. Richtet sich an technisch versierte Anwender. - Yahoo YSlow (gratis)
Ähnlich wie der Dienst von Google hat auch Yahoo einen Service, der Tipps zur Optimierung der Webseiten-Geschwindigkeit ermittelt. Yahoo’s Dienst ist etwas älter als das Google-Pendant, aber die Ergebnisse lassen sich weiterhin sehr gut nutzen.
Tipps zur Landingpage Optimierung
Hier sind sieben Maßnahmen, die den größten Einfluss auf die Seitengeschwindigkeit haben.
JavaScript und CSS
-
JavaScript und CSS Dateien kombinieren
Warum? Für jede einzelne Datei schickt der Browser ihres Besuchers eine eigene Anfrage los. Gerade bei WordPress kommen so schnell 40-50 Anfragen zu stande. Alleine dadurch kann eine Verzögerung von 4-5 Sekunden entstehen. Durch Kombinierung aller CSS Dateien zu einer einzigen Datei lassen sich diese Anfragen zusammenfassen und viel wertvolle Zeit sparen.
Nachteile: Keine
Aufwand: mittel -
JavaScript und CSS Dateien minimieren
Warum? Durch die Entfernung unnötiger Zeichen (z.B. Zeilenumbrüche) und die Umbenennung von Variablen und Funktionsnamen wird das CSS und JavaScript zwar für menschen unlesbar, für den Browser stellt das allerdings kein Problem dar. Dadurch lassen sich durchaus 30-40% der unkomprimierten Dateigröße einsparen.
Nachteile: Keine
Aufwand: mittel -
Nicht benötigte Plugins und Stylesheets entfernen
Warum? Viele Themes und Webseitenvorlagen verwenden verschiedene Plugins, z.B. für Slider oder Animationen. Oft werden diese Bibliotheken überhaupt nicht benutzt, aber werden trotzdem geladen. Nicht verwendete Plugins sollten daher immer entfernt werden. Außerdem sollte im Rahmen der Landingpage Optimierung geprüft werden, ob schwergewichtigte Bibliotheken wie jQuery nicht vielleicht ersetzt werden können.
Nachteile: Keine
Aufwand: gering-mittel
Bilder und Grafiken
-
Bilder im richtigen Dateiformat abspeichern
Warum? Dateiformate haben einen entscheidenden Einfluss auf die Dateigröße. Fotos sollten nahezu immer in JPEG Format abgespeichert werden, PNGs eignen sich für Illustrationen. Auf GIFs sollte wenn möglich verzichtet werden.
Nachteile: Keine
Aufwand: mittel -
Bilder immer in der richtigen Auflösung ausliefern.
Warum? Die Dateigröße eines Bilds steigt schnell, je größer die Auflösung. Durch Responsive Design und Retina Displays benötigt man Bilder in unterschiedlichen Dimensionen. Leider machen es sich viele Designer zu einfach und verwenden eine einzige Grafik in der höchsten Auflösung. Für Retina und Responsive Layouts auf Responsive Images setzen: Dadurch liefert man dem Browser eine Anzahl unterschiedlicher Auflösungen zu
Nachteile: Keine
Aufwand: Hoch
Serverkonfiguration
-
GZIP Komprimierung für HTML, CSS und JavaScript Dateien aktivieren
Warum? Durch die Komprimierung der HTML, CSS und JavaScript Dateien lassen sich bis zu 90% der Bandbreite für diese Dateien einsparen. Der Server sendet die Daten dann komprimiert an den Browser und dieser dekomprimiert die Dateien anschließend. Sowohl für Apache als auch NGINX gibt es zahlreiche Konfigurationen um die Komprimierung serverseitig zu aktivieren.
Nachteile: Geringfügig höhere CPU Auslastung
Aufwand: gering -
ETAG Header aktivieren
Warum? Durch den ETAG-Header werden Dateiversionen eindeutig* gekennzeichnet um Browser-Caching zu ermöglichen. Der Server sendet bei der ersten Anfrage einer Resource einen ETAG Header mit – bei einer erneuten Anfrage der selben Resource fragt der Browser nun nach, ob sich das ETAG geändert hat – ansonsten wird die gecachte Version genutzt. Das beschleunigt das Laden einer Seite erheblich, jedoch nicht beim ersten Seitenaufruf.
Nachteile: –
Aufwand: gering (bei kleinen Seiten) – hoch (bei verteilten Anwendungen) -
Expires Header aktivieren
Warum? Der Expires Header ermöglicht noch aggressiveres Caching als der ETAG-Header: Anstatt überhaupt beim Server anzufragen, ob sich die Resource geändert hat, nimmt der Browser direkt die Resource aus dem Cache. Expires Header sollten bei statischen Ressourcen (z.B. Bilder, Downloads) eingesetzt werden, die sich nicht ändern. Zusätzlich kann ein Cache-Buster eingesetzt werden um das erneute Anfordern der Resource zu erzwingen.
Nachteile: aktualisierte Ressourcen werden nicht geladen
Aufwand: mittel (bei kleinen Seiten) – hoch -
Reverse Proxy einrichten
Warum? Das serverseitige Erstellen einer HTML-Seite nimmt Zeit und Serverleistung in Anspruch: Daten werden aus der Datenbank geladen, verschiedene Dateien zusammgefügt und ein gutes Stück Logik ausgeführt. Durch einen Reverse-Proxy wird dieser Schritt übersprungen: In Verbindung mit den ETAG und Cache Headern nutzt ein Reverse-Proxy diese Caching-Informationen und speichert die komplette HTML-Seite. Wird diese Seite nun von einem anderen Besucher angefordert, wird die gecachte HTML Seite ausgeliefert, anstatt die Anfrage an den eigentlichen Webserver weiterzuleiten. Dadurch müssen keine Datenbankabfragen, etc. ausgeführt werden. Der wohl verbreiteste Reverse-Proxy ist Varnish.
Nachteile: Caching ist Vorraussetzung
Aufwand: hoch
Fazit
Mit wenigen Maßnahmen lässt sich die Ladezeit einer Landingpage bereits erheblich reduzieren. Durch die Kombination seiner CSS und JavaScript Dateien kann man schon Geschwindigkeitsvorteile von 50% erreichen und damit bereits einen großen Beitrag zur Landingpage Optimierung leisten. Die Verbreitung von Retina-Displays und den damit verbundenen Einsatz von hochauflösenden Grafiken zwingt Webdesigner umzudenken: Hier sind Responsive Images ein vielversprechender Ansatz.
Für groß angelegte Kampagnen, etwa TV Werbespots sollten zusätzliche Maßnahmen ergriffen werden: Ein Reverse-Proxy ist in solchen Fällen unumdingbar.
