Wer heutzutage eine Website betreibt, muss sich über einiges Gedanken machen. Der Content muss exzellent sein, viele natürliche Links sollen auf die Seite zeigen, das Design erfrischend daherkommen und sowohl Nutzer als auch Googlebot zufriedengestellt werden. Da bleiben bei der Optimierung der Website manche Punkte auf der Strecke; unter anderem der Page Speed – ein wichtiger Aspekt der Ladezeit einer Website. Warum das fatal sein kann, verrät Carsten Weddig von der Agentur Weddig & Keutel.
Dass die Geschwindigkeit einer Website wichtig ist, überrascht nicht. Schon im April 2010 gab es einen Artikel im Google Webmaster Central Blog, der dieses Thema behandelte. Die Essenz von damals gilt auch noch heute: Schnelle Websites erfreuen nicht nur den Googlebot, sondern vor allem die Besucher. Eine langsam ladende Seite ist oft gleichbedeutend mit einer höheren Absprungrate. Und seit dem Google-Panda-Update ist gerade die Interaktion der Besucher mit der Website (noch viel) wichtiger geworden. Eine hohe Absprungrate gibt das Signal an Google, dass mit dieser Website etwas nicht stimmt und sie zu hoch eingestuft wurde. Das kann natürlich auch am Inhalt liegen, aber eine lange Ladezeit (und damit auch der Page Speed) sind häufig eine der Ursachen, wenn es um Zufriedenheit oder Unzufriedenheit von Besuchern geht. Dabei muss direkt ein vermehrt auftretendes Missverständnis ausgeräumt werden: Page Speed und die Ladezeit einer Website sind nicht dasselbe. Der Page Speed ist lediglich ein Teilaspekt der generellen Ladezeit. Vereinfacht gesagt gibt der Page Speed Auskunft darüber, wie optimierungsfähig (oder -bedürftig) eine Website unabhängig von ihrem Load (den insgesamt zu übertragenden Daten) ist. Der Page Speed dient also als eine wichtige Stellschraube, sorgt aber im Regelfall nicht dafür, allgemeine Ladezeiten durch Verringerung des Loads rigoros zu reduzieren.
Wie wichtig Ladezeit wirklich ist, zeigen die Zahlen folgender Studie der Firma Akamai: 75 Prozent der Teilnehmer würden eine Seite mit einer längeren Ladezeit als vier Sekunden nicht noch einmal besuchen. Das hört sich erst einmal nicht so dramatisch an. Allerdings ist diese Studie von 2006! 2009 gaben 40 Prozent bei einer ebenfalls von Akamai beauftragten Studie an, dass drei Sekunden Ladezeit das tolerierbare Maximum sind. Ladezeit ist ein entscheidender Faktor, um Besucher auf der Website zu halten. Und ein guter Page-Speed-Wert ist dabei ein unterschätzter Aspekt. Beides wird die Performance einer Seite weiterhin maßgeblich bestimmen und Webmaster auch im Jahr 2014 in Atem halten.
Die Website zu beschleunigen, scheint aber leichter gesagt als getan. Die Besucher erwarten heute ein schickes Design sowie eine multimediale Aufbereitung mit Bilderstrecken, Videos und ähnlichen Ressourcenfressern. Gerade Bilder sind eine oft übersehene Bremse, die sich aber leicht lösen lässt. Im Verlauf dieses Artikels werden die größten Page-Speed-Killer noch genauer besprochen.
Bessere organische Rankings und optimiertes Besucher-Erlebnis sind nur zwei Faktoren, warum Page Speed so wichtig ist. Ein weiterer interessanter Faktor ist die Konversionsrate. Schnelle Seiten sind auch hier im Vorteil gegenüber den Schnecken im Web. Das Team der Firma WordStream hatte sich Ende 2010 zusammengesetzt und beschlossen, Page-Speed-Optimierung ganz oben auf die Agenda zu setzen, vor allem zu SEO-Zwecken. Überraschend stellten sie einige Monate später fest, dass mit schnelleren Ladezeiten auch die Konversionsrate der betreuten Seiten stark anstieg. Auch wenn dabei natürlich noch andere Faktoren eine Rolle spielten, waren der Page Speed und die Ladezeit-Verkürzung maßgeblich an besseren Erträgen der optimierten Projekte beteiligt. Die zuvor erwähnte Studie von Akamai und eine weitere von Gomez.com kamen ebenfalls zu dem Ergebnis, dass langsame Seiten den Conversions schaden. Fast die Hälfte der Besucher erwartet, dass die Website in zwei Sekunden geladen ist. Wenn die Website schlecht performt, kehren 79 Prozent der Befragten nicht mehr zurück und raten auch ihren Freunden von einem Besuch ab. Es lohnt sich also, am Page Speed zu arbeiten.
Einige externe Faktoren können bei der Ladezeit-Optimierung nicht beeinflusst werden, zum Beispiel, wenn der Browser des Nutzers durch Plug-ins langsam arbeitet oder die Internetverbindung träge ist. Ladezeiten müssen also im Umkehrschluss neutral analysiert werden, unabhängig von den oben genannten Faktoren. Folgende vier Tools sind dabei besonders hilfreich:
Über das Google-Developers-Tool wurde schon einiges geschrieben. Auf weddig-keutel.de sind inzwischen Hauptseite und Blog so optimiert, dass das Tool 100 von 100 Punkten ausgibt. Doch wie bei den meisten Analyse-Tools ist nicht jeder automatische Ratschlag immer unbedingt sinnvoll. Vielmehr sollten Tester PageSpeed Insights als einen Gradmesser nutzen; ein praktisches Werkzeug, um die gröbsten Geschwindigkeitsbremsen an der eigenen Website auszumachen.
Das Tool zeigt die Ladezeit der angegebenen Website und gibt an, welche Elemente zu welchem Zeitpunkt geladen wurden. So lassen sich die Zeitversetzung beim Laden sehen und Ressourcenfresser analysieren.
Uptrends ist das erste kostenpflichtige Tool in dieser Liste. Wer mehrere Websites betreibt und regelmäßig über die Ladezeit einzelner Projekte benachrichtigt werden möchte, sollte sich die vierwöchige Testversion ansehen. Das Tool analysiert jeden Teilaspekt der Website und zeigt auf, welche Ressourcen die Ladezeit drosseln.
Zuvor haben wir beschrieben, dass externe Faktoren nicht für die Berechnung der Lasdezeit herangezogen werden können. GTmetrix kann dieses Problem teilweise beheben. Mit GTmetrix lässt sich für den Ladezeit-Test einstellen, mit welcher hypothetischen Geschwindigkeit die Website aufgerufen wird. So lässt sich analysieren, bei welchen Geschwindigkeiten seitens der Nutzer die Seite zu langsam lädt.
Es gibt übrigens keine Faustregel, wie der perfekte Wert für Ladezeiten oder Page Speed aussehen soll. Natürlich ist es schön, das Maximum-Rating eines Tools erreicht zu haben. Aber je nach Ausrichtung der Website und des Contents wird es unterschiedliche Ladezeiten geben. Man sollte immer im Rahmen des Contents auf der Seite optimieren. Eine reine Textseite wird in der Regel verständlicherweise schneller geladen als eine mit Bildern und Videos gespickte Landingpage oder ein komplexer redaktioneller Beitrag. Solange die User Experience stimmt, interessiert der Höchstwert nur Perfektionisten und sollte nicht zu dogmatisch behandelt werden.
Die gerade genannten Analyse-Tools bieten gute Einblicke, was auf der Website die Geschwindigkeit ausbremst. Die folgenden sechs Tipps lassen sich aber praktisch auf jede Website anwenden, unabhängig von Tests und Analysen.
Diesen Tipp beherzigen bereits viele Webmaster, oft genug werden hier aber auch die vermeidbarsten Fehler gemacht: Die Bilder werden nur mittels CSS skaliert. Das bedeutet, dass Bilder zwar auf der Website kleiner angezeigt werden, aber im Hintergrund trotzdem die Original-Datei in voller Größe lädt. Hier gab es schon so manche Extremfälle, bei denen Fotos quasi direkt und „unbehandelt“ von der Digitalkamera in eine Website integriert wurden. Schneller macht das die Website nicht. Man sollte also immer darauf achten, Fotos und Grafiken nur in der Größe zu benutzen, die auch wirklich benötigt wird, und eine CSS-Skalierung von Bildern nach Möglichkeit vermeiden. Bei mobilen Varianten von Responsive-Websites mag dies in Teilen notwendig oder zumindest verschmerzbar sein (auch wenn es hier natürlich noch weiterführende Lösungen gibt), auf der klassischen Desktop-Ansicht gilt es aber gemeinhin als No-Go.
Ein zweiter Aspekt bei Bildern ist die pure Dateigröße. Programme wie etwa Photoshop bieten zwar von Haus aus die Möglichkeit, z. B. bei JPG-Dateien einen Kompromiss aus Dateigröße und Bildqualität zu wählen, aber eine optimale Dateigröße geben solche Programme häufig nicht aus. Das liegt unter anderem an Meta-Daten und anderem Ballast, der „unter der Motorhaube“ mitgespeichert wird, aber meist unnötig ist und mit dem Bildinhalt nichts zu tun hat. Webmaster sollten deshalb nach Photoshop & Co. Programme einsetzen, die Grafiken nochmals in ihrer Dateigröße optimieren. Für die beiden gängigsten Formate JPG und PNG gibt es hierfür zwei kostenlose Lösungen in Form von JPEGmini.com und tinypng.org. Mit dieser Vorgehensweise kann man teils geringe, teils beträchtliche Einsparungen erzielen.
Nicht nur Analyse-Tools und Googlebots, sondern auch der Browser – und damit am Ende der Nutzer – freuen sich über guten Code. Eigentlich ein absolutes Basic in der Webentwicklung, aber leider regelmäßig vernachlässigt: saubere, schlanke HTML-Syntax. Der Code sollte möglichst auf dem aktuellen HTML5-Standard basieren, keine Fehler enthalten und nach W3C-Vorgaben validieren (validator.w3.org). Auch zu verschachtelt und unnötig komplex sollte er nicht sein oder unbenutzte Passagen enthalten, die lediglich auskommentiert, aber nicht entfernt wurden. Je schlanker und sauberer der Code, umso geringer der Load und umso einfacher kann ein Browser die Seite rendern. Auch mokiert die Page-Speed-Analyse fehlerhafte Aufrufe von integrierten, aber nicht vorhandenen Dateien. Dies kann zum Beispiel passieren, wenn etwa eine Javascript-Datei nicht mehr benutzt und deshalb gelöscht wird, aber im Code weiterhin integriert ist.
Besucht ein Nutzer eine Website, sieht er von der ladenden Seite vorerst nur den Bereich „above the fold“. Anders gesagt: den Bereich, der, ohne zu scrollen, im Browser sichtbar ist. Für diesen muss natürlich der Content schnell geladen werden. Die Skripte oder Bilder weiter unten auf der Seite kommen aber erst zum Tragen, wenn der Nutzer dorthin scrollt. Darum verbessert es die Geschwindigkeit entscheidend, wenn dieser Content erst geladen wird, wenn der Nutzer diesen auch sieht. Man spricht hier auch vom sogenannten „Lazy Loading“.
Plug-ins und vor allem extern eingebundene Skripte stehlen Ladezeit, egal, ob es Social-Share-Buttons sind, eine YouTube-Galerie in der Sidebar oder ein Tracking-Plug-in. Lösungen sind hier das Suchen nach Alternativen, die schneller laden, oder die Entwicklung eigener Plug-ins. Auch verschlechtert sich die Ladezeit einer Seite generell quasi mit jedem eingebundenen Skript (egal, ob intern oder extern). Ein Layer-Skript hier, ein Slider dort. All das summiert sich. Man sollte also bei jedem Skript-basierten Feature genau überlegen, ob es wirklich notwendig oder vielleicht doch nur unnötige Spielerei ist.
Eine weitere Möglichkeit, den Page Speed zu verbessern, ist das Cachen der Website. Dabei werden bestimmte Elemente auf dem Rechner des Nutzers und gegebenenfalls auf dem Server zwischengespeichert. Das Ergebnis: Die Website lädt spätestens ab dem zweiten Klick schneller, weil weniger Dateien beim Aufruf geladen werden müssen. Für WordPress gibt es hierfür einige gute Plug-ins wie etwa W3 Total Cache oder Cachify.
Der letzte Tipp betrifft den HTML-Code und die Javascript- und CSS-Dateien, die die Darstellung und Funktionen des Designs, der Plug-ins, Widgets etc. regeln. Im Editor ist der Code recht großflächig verteilt mit vielen Zeilenumbrüchen. Das ist natürlich notwendig, wenn man am Code arbeitet, geht aber im finalen Betrieb zulasten der Ladezeit. Sinnvoller ist es da, entweder händisch oder mittels Tools die Dateien zu komprimieren. Dafür empfehlen wir javascriptcompressor.com und csscompressor.com. Dabei werden unter anderem alle unnötigen Zeilenumbrüche, Leerzeichen oder Kommentare entfernt und ein solider Code-Block erstellt. Für den Menschen kaum mehr lesbar, für den Browser aber optimal. Zusätzlich ist es hilfreich, wenn man mehrere Skript- oder CSS-Dateien miteinander verbindet. Anstatt z. B. zehn einzelne CSS-Dateien in eine Website einzubinden, sollte man nach Möglichkeit versuchen, die Dateien zu einer einzelnen zusammenzufassen. Das verringert nicht zwangsweise den Load, aber die Server-Anfragen des Browsers, die notwendig sind, um die Website darzustellen, und das wiederum ist für den Page Speed ein Pluspunkt.
Diese sechs Tipps können auch Anfänger gut umsetzen. Sie bringen schon entscheidende Fortschritte beim Page Speed und der allgemeinen Ladezeit. Wer tiefer in die Materie einsteigt, wird auf weitere Ladezeit-Killer stoßen und nicht um fortgeschrittene Techniken wie die gerade kurz angerissene Reduzierung der Anfragen an den HTTP-Server oder die Bereitstellung weiterer Ladekanäle für die Website herumkommen.
Für weddig-keutel.de war nach dem Erscheinen des Tools Page Speed Insights von Google das Ziel, eine 100/100-Wertung beim Page Speed zu erreichen. Auf der Hauptseite war das kein unlösbares Problem. Es reichte aus, die Anmerkungen von Google Schritt für Schritt abzuarbeiten und schon nach überschaubarer Zeit stand das optimale Ergebnis. Gerade bei statischen Seiten ohne Plug-ins ist das mit ein wenig Zeitaufwand kein Problem. Die große Herausforderung kam, als auch der Blog auf das Top-Ergebnis optimiert werden sollte. Dort wurden damals einige Plug-ins genutzt, die inzwischen unverzichtbar waren, aber die Geschwindigkeit der Seite arg ausbremsten. Da gab es nur zwei Möglichkeiten:
Man musste also in den sauren Apfel beißen, die lieb gewonnenen WordPress-Plug-ins entfernen und von Grund auf neue Tools für den WordPress-Blog entwickeln. Gerade Sharing- und Tracking-Plug-ins hatten die Geschwindigkeit der Seite stetig zurückgeworfen und auch alternative Plug-ins von Fremdanbietern halfen nicht weiter. Deshalb arbeitet der Autor an neuen Plug-ins, die WordPress-Nutzern einen entscheidenden Geschwindigkeitsvorteil mit auf den Weg geben können.
Bishier her ist klar geworden, wie wichtig Page Speed und Ladezeit gerade für das Nutzer-Erlebnis sind. Wenig überraschend ist auch, dass längst nicht jede Website auf Ladezeit optimiert wurde. Bei beispielhaften Tests mit bekannten Websites kam folgendes Ergebnis heraus:
Die Sprinter
websmapp.de (1,3 Sek.) / optimus.io (1,51 Sek.) / www.torbenleuschner.de (2,62 Sek.) – alle Page Speed 100
Bei diesen Websites stimmt alles. Einerseits laden die Seiten aus subjektiver Sicht schnell,andererseits sind sich auch die Analyse-Tools einig. Hier haben die Webmaster ganze Arbeit geleistet, um den Page Speed zu optimieren. Sehr beeindruckend ist das bei der Seite von Torben Leuschner. Sie ist, vor allem wegen eines eingebauten Videos, 5,3 MB groß.
Die Jogger
Die Seiten zum Buch, www.website-boosting.de (2.10 Sek. & Page Speed 82/100) und zum Magazin, www.websiteboosting.com (2,25 Sek. & Page Speed 90/100) blieben ebenfalls unter der magischen Grenze von drei Sekunden. Allerdings sind beide Seiten im Load ziemlich schlank mit 221 respektive 315,4 KB. Da wäre mit weiterer Optimierung das Durchbrechen der Zwei-Sekunden-Schallmauer möglich.
Die Geher
www.bild.de (4,88 Sek. & Page Speed 49/100) / www.heise.de (5,83 Sek. & Page Speed 58/100) / www.t3n.de (3,82 Sek. & Page Speed 72/100)
Bei diesen drei großen Portalen sah es schlecht mit dem Page Speed aus. Allerdings kann davon ausgegangen werden, dass bei Seiten wie etwa bild.de die Absprungrate nicht so hoch sein wird wie bei unbekannten Seiten. Die bekannten Brands und exklusive Inhalte dürften einen Bonus geben, um die Geduld von Nutzern etwas auszudehnen. Dennoch gibt es hier drastisches Optimierungspotenzial. Ein Schmunzler am Rande: Ein Artikel von t3n zum Thema „Page Speed optimieren“ brauchte fast fünf Sekunden Ladezeit.
Studien zeigen, dass die Toleranz für das Laden einer Website seit Jahren sinkt – das dürfte für Nutzer und Suchmaschine gleichermaßen gelten. Die Erklärung liegt auf der Hand: Die Internetverbindungen sind rasend schnell geworden, wenn man der Werbung glauben mag. Da fällt es dem Nutzer schwer zu verstehen, warum die aufgerufene Seite so langsam lädt. Vor allem im mobilen Bereich werden hier die Toleranzgrenzen kaum größer sein als bei Desktoprechnern. Darum muss beim Punkt Ladezeiten-Optimierung besonderes Augenmerk auf die mobile Website gelegt werden. Größen wie Amazon und Zalando werden auch den Page Speed im Hinterkopf haben, wenn sie ihre Seiten mit einer mobilen Ansicht ins Rennen schicken. Auch Responsive Design muss so ausgelegt sein, dass das Nutzer-Erlebnis auf allen Plattformen möglichst gleichermaßen gut ist. Hinzu kommt noch das Problem, dass aufwendige Seiten nicht nur beim Page Speed Ressourcen fressen, sondern auch den Akku des Smartphones schneller leeren. Optimierte Bilder und Videos oder komplett neue Formate (wie etwa vektorbasierte SVG-Dateien im Grafikbereich) können einige Probleme ungeduldiger Nutzer lösen, sind aber aufgrund der Browserkompatibilität teils noch begrenzt einsetzbar. Ansonsten gleicht es dem Blick in die Kristallkugel, das Thema Page Speed – und alles, was damit zusammenhängt – vorauszusagen. Da gibt es nur eins: Dem Nutzer eine möglichst flinke Seite mit allen heute zur Verfügung stehenden Mitteln bieten. Klar ist, dass es keinen Weg zurück zu langsamen Websites gibt. Wir müssen immer schneller werden. Wer seine Inhalte nicht in wenigen Sekunden ausspielt, hat beim User schon verloren.