Wie optimiere ich eine Webseite auf Geschwindigkeit

Die Bedeutung der Geschwindigkeit einer Webseite ist ein von vielen Webmastern unterschätzter Faktor. Da ich das Thema bisher nur am Rande (Multimediale Ausgestaltung) beleuchtet habe möchte ich nun genauer darauf eingehen wie man die Auslieferung einer Webseite beschleunigen kann bzw. wie man eine schnelle Webseite bauen sollte.

1. Der Einsatz von CSS

Gerade bei älteren Seiten befindet sich meist ein Großteil der Layoutinformationen wie Schriftarten, Farben, Abmessungen und die Ausrichtung der einzelnen Elemente direkt im Quelltext der Seite und blähen diesen deutlich auf. Durch den Einsatz von CSS-Dateien kann der überwiegende Teil der Layoutinformationen in eine externe Datei ausgelagert werden die vom Browser im Idealfall nur beim ersten Seitenaufruf geladen wird. Mehrere CSS-Dateien lassen sich zu einer einzelnen Datei zusamenfassen und reduzieren die Zahl der Verbindungen die zum Server aufgebaut werden muss.

2. Der Einsatz von Javascript

Genau wie schon bei CSS ist auch bei Javascript die Auslagerung in eine seperate Datei möglich und im Idealfall ist ebenfalls nur ein einzelner Zugriff auf diese Datei nötig. Beim Einsatz umfangreicher Javascript-Bibliotheken sollte man darauf achten, dass nur Code geladen wird den die Seite nachher auch benötigt und nur selten benutzter Code bei Bedarf nachgeladen wird. Javascript-Dateien lassen sich wie auch CSS ggf. zu einer einzelnen Datei zusammenfassen.

3. Komprimierung von CSS und Javascript

Auch nach der Zusammenfassung zu einer Datei können CSS und Javascript-Dateien noch eine beachtliche Größe erzielen. Diese kann stark reduziert werden, wenn man die betreffenden Dateien weiter verkleinert. Leerzeichen und Kommentare etwa müssen bei einem Livesystem nicht vorhanden sein und lassen sich einsparen. Darüber hinaus ist es bei CSS möglich gewisse Ausdrücke zusammenzufassen bzw. in Kurzschreibweise auszudrücken und bei Javascript ist es möglich durch Variablenersetzung beachtliche Mengen Code zu sparen. Geeignete Tools für diese Arbeit sind z.B. der ebine-Compressor (CSS und Javascript) sowie Shrinksafe und Javascriptcompressor. Der komprimierte Code sollte vor dem produktiven Einsatz getestet werden.

4. Komprimierung von HTML

Genau wie CSS und Javascript lässt sich auch der HTML-Quellcode durch das Entfernen von Leerzeichen und Kommentaren meist deutlich verkleinern. Bei statischen Seiten lassen sich hierzu ähnliche Tools wie bei CSS und Javascript einsetzen, bei dynamischen Seiten besteht die Arbeit im wesentlichen darin die Templates der Seite von Hand zu editieren. Um den Überblick zu behalten empfiehlt es sich Kopien der Dateien anzulegen welche den original Quellcode enthalten.

Eine weitere Möglichkeit ist es entsprechende Optimierungen dynamisch durchzuführen indem man z.B. HTML Tidy einsetzt. HTML Tidy wurde entwickelt um unsauberen HTML-Code zu korrigieren. Durch die Verwendung von Parametern lassen sich aber auch eine Vielzahl von Leerzeichen, Kommentaren und Zeilenumbrüche entfernen oder auch Tags kombinieren. HTML Tidy steht für diverse Sprachen zur Verfügung und lässt sich auch als Apache 2 Modul einsetzen.

5. Komprimierung der ausgelieferten Seite

Auch wenn CSS, Javascript und HTML mit den beschriebenen Mitteln schon in Ihrer Größe reduziert wurden sind noch weitere Einsparungen zu erreichen wenn die Daten in gepackter Form an den Browser übertragen werden. Die GZIP-Komprimierung von Inhalten wird von allen gängigen Browsern unterstützt. Bei statischen Seiten erfolgt die Komprimierung der Inhalte meist über den Webserver selbst, bei dynamischen Seiten sollten entsprechende Funktionen implementiert werden.

6. Caching

Gerade die Optimierung und die Komprimierung von Quelltext zur Laufzeit ist sehr kostenintensiv. Um nicht bei jedem Seitenaufruf den Quelltext einer Seite neu aufbauen und komprimieren zu müssen empfiehlt es sich diesen vorübergehend zu speichern. Viele CMS-Systeme haben bereits Caching implementiert, die wenigsten haben es jedoch zur Perfektion gebracht. Bei Alinki haben wir uns entschlossen sowohl den komprimierten als auch den unkomprimierten Quelltext zu speichern um bei weiteren Seitenaufrufen diesen nicht neu packen oder entpacken zu müssen. Darüber hinaus laden wir bei einem Zugriff auf den Cache nur ein sehr kleiner Teil unserer Bibliotheken.

7. Modified Since

Modified Since Header geben Auskunft darüber wann die letzte Änderung einer Seite stattgefunden hat und führen bei vielen Browsern beim erneuten Aufruf der Seite zu einem “if-modified-since” Header der im Falle einer Änderung mit dem neuen Seiteninhalt und ansonsten mit einem 304 Not Modified beantwortet werden kann. Erhält der Browser einen 304 Header so wird dieser die Seite anzeigen welche im Browsercache liegt. Außer dem Header werden dann keine Daten vom Server zum Client übertragen. Enorme Trafficeinsparungen sind die Folge.

Aktualisiert am 3. November 2008
Kategorie Technik