Die Seitenladegeschwindigkeit ist einer der essentiellen Optimierungsschritte bei der Website-Optimierung. Je kürzer die Seite zum Laden auf einem Endgerät braucht, desto höher ist die Wahrscheinlichkeit, dass der Besucher nicht gleich wieder abspringt, da er auf die gesuchten Informationen nicht lange warten muss.
Außerdem verbessert eine bessere Website-Performance die mobile Ansicht des Seite, da Smartphones oft ein begrenztes Datenvolumen zur Verfügung haben. Heute erkläre ich, wie du deine Webseite mit einfachsten Schritten performance-technisch optimierst und stelle Tools vor, die zur Überprüfung der Seitengeschwindigkeit (PageSpeed) geeignet sind.
Grundlegende Verbesserungen
Um die Seitengeschwindigkeit zu erhöhen, kannst du sowohl Änderungen direkt an deiner Seite vornehmen, als auch serverseitige Parameter überprüfen. Da du in den wenigsten Fällen Zugriff auf die Steuerungselemente deines Webspace-Servers haben dürftest, konzentrieren wir uns auf Verbesserungen, die deine Website selbst betreffen. Diese Verbesserungen zielen allesamt darauf ab, die zu bearbeitenden Dateien zu verkleinern, sodass Dateien schneller vom Server zum Besucher geschickt werden können und multimediale Inhalte wie Bilder oder Videos schneller geladen werden.
Das größte Problem sind hierbei große Bilder, da diese oft mehrere hundert Kilobyte groß sind, was einen beträchtlichen Datenaustausch verursacht. Du solltest bei der Verwendung von Bildern im Internet darauf achten, dass du das richtige Format wählst: Große Bilder, die nicht zwingend jedes kleinste Detail darstellen müssen, sollten im platzsparenden JPG-Format gespeichert werden. Mit gängigen Bildbearbeitungsprogrammen wie GIMP oder Adobe Photoshop kannst du die Qualität von JPGs festlegen; hier musst du ein ideales Verhältnis zwischen Qualität und Größe finden.
Transparente Bilder, Logos oder möglichst hochauflösende Grafiken sollten im PNG-Format gespeichert werden. PNG-Dateien können eine Transparenz speichern und sind relativ verlustfrei; dabei solltest du darauf achten, dass du „Interlacing“ beim Bearbeiten des Bildes aktivierst. Das Interlacing-Verfahren ermöglichst ein schnelleres Laden des Bildes, indem die einzelnen Schichten nicht nacheinander, sondern gleichzeitig und versetzt aufgebaut werden. Bewegte Bilder kannst du mit Hilfe des GIF-Formats ablegen und so die Größe gegenüber Videos reduzieren.
Um die Seitengeschwindigkeit weiter zu verbessern, solltest du dir außerdem den Quellcode deiner Seite ansehen. Klient-seitige Skripte wie JavaScript oder Gestaltungsdateien wie CSS-Dateien sollten so weit wie möglich verkleinert werden, da hier wieder Zeit eingespart werden kann, in der der Server Daten zum Klienten senden müsste. Dies kannst du über das Entfernen von unnötigen Kommentaren bewerkstelligen oder durch das Zusammenfassen mehrerer Skript-Dateien in eine Datei.
Tools zum Monitoring
Die folgenden Tools habe ich bereits verwendet und sie geben einen guten Überblick über den aktuellen PageSpeed. Außerdem können mit Hilfe dieser Seiten Verbesserungen sofort überprüft werden und wie sich diese auf die Ladegeschwindigkeit der Seite auswirken.
PageSpeed Insights
Die PageSpeed Insights von Google geben einen tollen Ausblick auf die Geschwindigkeit einer Seite. Dabei unterscheidet der Google-Dienst zwischen mobiler Ansicht und Desktop-Version der Seite, sodass einzelne Bereiche speziell angepasst werden können. Auch hier werden detailliert Fehler aufgelistet und mögliche Fehlerbehebungen vorgeschlagen. Einfacher gehts nun wirklich nicht.
WebPageTest
Der Seitentest von WebPageTest vergibt Buchstaben-Wertungen für folgende Kategorien: „First Byte Time“, „Keep-alive Enabled“, „Compress Transfer“, „Compress Images“, „Cache static content“ und „Effective use of CDN“. Wenn du kein Seitencaching verwendest, kannst du den vorletzten Punkt getrost ignorieren. Interessant sind vor allem die ersten beiden Indices, da diese angeben, wie lange der Server braucht, um das erste Byte an den Nutzer zu senden und ob er die Verbindung aufrecht erhalten kann.
OctaGate SiteTimer
Der OctaGate SiteTimer führt in einer Liste detailliert alle einzelnen Schritte auf, die beim Laden einer Seite anfallen. Einzelne Dateien wie Schrift-Dateien, Bilder, Videos, Skripte und mehr werden einzeln dargestellt und die benötigte Zeit wird angezeigt. Auf diese Weise kannst du Zeitfresser identifizieren und gezielt bekämpfen.
ShowSlow
ShowSlow bietet die tolle Möglichkeit, mehrere Seiten gleichzeitig zu überwachen und deren Geschwindigkeiten miteinander zu vergleichen. Es wird ein Buchstabe (A – F), ein Index von 1 – 100 und ein Balken angezeigt, die den PageSpeed anzeigen. Vor allem die Funktion zum Monitoring mehrerer Seiten gleichzeitig ist hier aber interessant.