Website-Besitzer können viel Geld und Zeit darauf verwenden, um sicherzustellen, dass ihre Websites perfekt aussieht: Mit einem effektiven CTA, informativem Design und intuitiver Navigation. Sie lassen dabei aber oft außer Acht, welchen Effekt das auf den Page Speed (die Ladegeschwindigkeit) ihrer Seite hat. Unabhängig von der Plattform oder dem Browser lieben alle Benutzer eine Website, die ihnen sofort zur Verfügung steht – denn User sind ungeduldiger geworden. Und auch bei Google wird eine schnelle Seite oft mit einem besseren Ranking in den SERPs belohnt. Genug Gründe, mal einen Blick auf den Page Speed der eigenen Site zu werfen!
Bevor Sie mit der Optimierung starten, ist es empfehlenswert, über den Status Quo der Seite Bescheid zu wissen. Dafür stehen Ihnen mehrere Tools zur Verfügung – geeignet ist hierfür zum Beispiel Google Insights. Das Tool ist kostenlos und ermöglicht es detailliert die Performance Ihrer Website zu messen. Nach Eingabe Ihrer Website URL, erhalten Sie nicht nur Angaben zu Ihrer Ladegeschwindigkeit, sondern auch Informationen darüber, wie Sie diese verbessern können. Zugegeben, das Tool ist etwas verwirrend – die Einarbeitung lohnt sich aber.
Welches Tool Sie letztendlich verwenden wollen, bleibt natürlich Ihnen überlassen. Wichtig: Verwenden Sie vor und nach Ihrer Optimierung das gleiche Tool, um den "wahren" Unterschied Ihrer Bemühungen zu sehen. Nachfolgend möchte ich Ihnen in 4 Schritten zeigen, wie Sie die Ladezeit Ihrer Website verbessern können. Da es sich hierbei um konkrete Tipps aus der Praxis handelt, wird ein wenig Vorwissen vorausgesetzt.
Schritt 1: Statische Dateien optimieren
Der erste Schritt bezieht sich auf die Optimierung von statischen Dateien – am häufigsten in Form von Stylesheets (CSS-Dateien) und Skripten (JS-Dateien).
CSS "nach oben", JS "nach unten"
Ihre Website wird erst vollständig angezeigt, wenn alle CSS-Dateien und JavaScripte geladen wurden. Die ideale Position für CSS-Dateien ist im <head>-Bereich der Website, JavaScript darf gerne "nach unten", also in den Footer. Die Logik dahinter: Im Allgemeinen sind Stylesheets kleiner als Skripte.
Sobald Stylesheets in das <head>-Tag geladen wurden, bevor der Browser den Text der Seite wiedergibt, haben alle Elemente, die auf der Seite angezeigt werden, ein korrektes Styling.
Die Funktionalität der Skripte kommt in der Regel zum Tragen, sobald der Inhalt der Seite geladen ist, so dass Skripte meist im Footer der Website eingebaut wird.
Minification des Quellcodes
Die Minification oder Verkleinerung im Quellcode ist der Prozess des Entfernens derjenigen Teile einer Datei, die für die korrekte Ausführung nicht notwendig sind. Beim Abruf einer Website werden diese unnötigen Teile des Quellcodes Zeile für Zeile ausgelesen. Ein unnötiges Leerzeichen hier und ein paar Kommentare da, werden sicherlich keinen gravierenden und negativen Einfluss auf Ihre Page Speed haben – aber: die Summe macht den Unterschied!
Manche Seiten bestehen aus hunderten von Quellcode-Zeilen. Ist hier in jeder zweiten Zeile unnötiger Code, wird sich dies deutlich negativer auf die Ladezeit auswirken. Für Stylesheets oder Skripten gilt es daher folgende Faktoren für die Ausführung zu überprüfen und diese dann ggf. zu löschen:
- Whitespace für Einrückungen (unnötige Leerzeichen)
- Kommentare im Quellcode
- lange Funktions- und Variablennamen
- unbenutzter Code
Verwenden Sie die GZIP-Komprimierung
Die GZIP-Komprimierung ist eine Technik zur Komprimierung von Ressourcen durch HTTP-Requests. Einfacher gesagt: Mit GZIP lässt sich eine komplette Website komprimieren. Dies reduziert die zu ladenden Dateien und verbessert somit auch die Ladezeit. Ein Vorteil dieser Maßnahme: Alle modernen Browser unterstützen GZIP und verhandeln automatisch die GZIP-Komprimierung für alle HTTP-Anfragen.
Ein Browser oder ein Suchmaschinenbot benötigen dadurch weniger Zeit, Ihre Website zu rendern und somit lädt die Site schneller.
Schritt 2: Bilder optimieren
Bilder sind für eine Website unerlässlich – nur so wird sie anschaulich und attraktiv. Diese sollten so weit komprimiert sein, dass die Größe reduziert ist, ohne, dass dabei jedoch drastisch die Bildqualität verloren geht.
Alleine für die Optimierung von Bildern für den Page Speed könnte man leicht die Seiten eines Whitepapers füllen, hier aber ein paar grundlegende Tipps:
- Komprimieren Sie Ihre Bilder bevor Sie das Bild auf Ihre Seite laden. Hierfür eignen sich Bildbearbeitungs-Tool wie Gimp oder Adobe Photoshop.
- Verwenden Sie den richtigen Bildtyp. Die beiden am häufigsten verwendeten Arten von Bildern im Web sind JPGs und PNGs. Sie werden oft gleichbedeutend verwendet – sind sie aber nicht. JPG-Bilder sind für Fotos und andere komplexe Bilder mit vielen Farbinformationen gedacht. PNG-Bilder sind perfekt für Grafiken mit geringen Farbinformationen, wie zum Beispiel Screenshots von Benutzeroberflächen.
Ein Beispiel: Für Ihre E-Commerce-Website haben sie ein Produkt-Bild mit einer Auflösung von 4000x3000px. Für Ihre Produkt-Übersichtsseite auf Ihrer Website brauchen Sie aber nur ein kleines Bild mit 200x300px Auflösung. Komprimieren Sie also das Originalbild, denn – Sie ahnen es – kleinere Bilder = schnellere Ladezeit.
Schritt 3: Optimieren von HTTP-Requests
Um die Last von HTTP-Requests zu minimieren sollten Sie zum einen ähnliche Ressourcen kombinieren und zum anderen Redirects (Umleitungen) minimieren.
CSS-Dateien zusammenlegen
Mit CSS werden Schriftgröße, Farben und andere Designelemente festgelegt. Wenn jedoch jeder einzelne Style mit einem eigenen CSS-Befehl im HTML-Code hinterlegt wird, erfolgt für jedes einzelne dieser Elemente eine neue Abfrage, was negative Auswirkungen auf den Page Speed haben kann. Für jede dieser Dateien, die in Ihrem HTML verlinkt sind und beim Aufruf Ihrer Seite geladen werden sollen, schickt der Browser einen HTTP-Request an den Web Server. Der Server sendet daraufhin wiederum einen Request dieser benötigten Dateien an den Browser zurück. Logische Konsequenz: Je mehr Dateien es in Ihrem HTML-Dokument gibt, desto mehr Requests fallen an und verlangsamen dementsprechend die Ladezeit.
Was also tun? Sie können beispielsweise alle Stylesheets (CSS-Dateien) und alle benutzerdefinierten JavaScript-Dateien zu einer einzelnen Datei zusammenfassen.
Anzahl der Umleitungen minimieren
Ein Redirect ist eine Anweisung, welche von einer Website-Seite auf eine andere verweist. Klickt der User also zum Beispiel auf einen Link, dann landet er nicht auf der eigentlich angeklickten URL, sondern wird über einen Redirect weitergeschickt an eine andere URL. Redirects können sehr sinnvoll sein, um zum Beispiel Duplicate Content (doppelte Inhalte) zu vermeiden oder nicht mehr benötigte URLs auf eine neue URLs weiterzuleiten, wie es oft bei einem Website Relaunch der Fall ist.
Jede Umleitung erhöht allerdings die Ladezeiten Ihrer Webseite. Daher gilt: Wenn nicht unbedingt notwendig, sollten Sie Umleitungen vermeiden.
Wichtig: Zeigen Sie vor allem nicht mit einer 301-Umleitung auf eine weitere 301-Umleitung.Denn der 301-Redirect zwingt den Webbrowser, auf eine neue URL zuzugreifen – bei dieser neuen URL muss der Browser erneut warten, bis die HTTP-Anfrage empfangen wird. Darüber hinaus folgt etwa der Google-Bot nur drei Umleitungen, sodass eine Verkettung von Redirects auch für das Crawling – und damit gegebenenfalls auch für das Ranking – von Nachteil ist.
Empfehlenswert wäre die URL-Struktur der Seite zu dokumentieren, inklusive aller 301-Redirects. Sollte hier eine Verkettung auffallen (Redirect zu Redirect zu Redirect), sollten Sie die erste Site bzw. Weiterleitung in dieser Kette finden und diese dann direkt auf die gewünschte URL führen.
Schritt 4: Caching
Es gibt kaum einen Leitfaden zur Geschwindigkeitsoptimierung von Websites ohne einen Abschnitt über das sogenannte Caching. Hierbei wird eine Ressource in einem Zwischenspeicher gespeichert, um sie bei Bedarf schnell wiederherstellen zu können.
Wenn das Browser-Caching aktiviert ist, werden die Elemente einer Webseite im Browser der Nutzer gespeichert, so dass beim nächsten Besuch der Browser diese sofort laden kann, ohne eine weitere HTTP-Anfrage an den Server für eines der zwischengespeicherten Elemente senden zu müssen.
Sobald die erste Seite geladen wurde und ihre Elemente im Cache des Benutzers gespeichert sind, müssen nur noch neue Elemente auf den Folgeseiten heruntergeladen werden. Dies kann die Anzahl der Dateien, die während einer typischen Browsersitzung heruntergeladen werden müssen, drastisch reduzieren.
Ein CDN nutzen
Unter einem Content Delivery Network (CND) versteht man einen dezentralen Server an unterschiedlichen Standorten, auf welchen Teile Ihrer Website gespeichert werden.
Über einen CDN ist es also möglich, Elemente der Website zu laden, ohne den eigenen Server zu belasten. Dies gilt für alle Teile der Website die per Request geladen werden müssen. Wie im Punkt davor beschrieben, können das CSS-Dateien sein, aber auch Skripte und Bilder. Jedes dieser Elemente muss per HTTP-Request geladen werden. Durch die Nutzung eines CDN kann man einige dieser HTTP-Requests an den eigenen Server einsparen. Zusätzlicher Vorteil: CDNs arbeiten regional. Was heißt das genau? Wenn Ihr Client in Deutschland Teile der Website laden soll, dann werden diese auch direkt an einem Standort in Deutschland geladen. Auf diese Weise können Sie die Ladegeschwindigkeit durch kürzere Übertragungswege verbessern.
Ein kostengünstiges CDN ist beispielsweise Amazon CloudFront oder Google App Engine. Ob ein kostenloses Content-Delivery-Netzwerk akzeptable Geschwindigkeiten und Dienste bietet, sollte jedoch individuell geprüft werden.
Fazit
Wenn Ihre Website langsam ist, wird Sie vermutlich weniger genutzt werden, es kommt schneller und öfter zu Bounces und viele Besucher werden nicht mehr auf die Seite zurückkommen.
Oftmals können Sie eine positive und nachhaltige Wirkung und Steigerung des Page Speed der Website erzielen, indem Sie die Punkte dieses Blogposts berücksichtigen:
- Verringern/Kürzen von HTTP-Anfragen
- Nur ein CSS-Stylesheet verwenden
- Optimieren Sie Ihre Bilder
- Verwenden Sie die GZIP-Kompression
- 301-Umleitungen reduzieren
- Verwendung von serverseitigem Caching
- Benutzung eines CDN
Egal ob Sie die Ladezeit Ihrer Website aufbessern wollen, um ein besseres Ranking zu erzielen, um die User Experience zu verbessern, oder um eine bessere Conversion zu erzielen: Es gibt viele gute Anlässe, die eigene Page Speed Optimierung von Zeit zu Zeit erneut auf die Tagesordnung zu rufen.
