Ein schneller Webserver ist kein garant für den schnellen Aufbau einer Webseite im Browser des Clients. Die unten angeführten Punkte helfen bei der Optimierung der Ladezeiten.

Tools für die Ladezeiten-Analyse

• Firefox-Plugins: FireBug, YSlow
• Safari: eingebaute Entwickler Tools:
• Web: http://webpagetest.org/

9 Tipps für optimierte Ladezeiten

Dateien säubern

Liefern Sie Ihre CSS, JS und HTML/PHP Dateien gesäubert aus. Entfernen Sie unnötige Kommentare, Leerzeichen und Leerzeilen. JS-Libraries sollten immer in der vorliegenden Minified-Version verwendet werden. Auch eigene JS und CSS-Dateien können durch spezielle "Minifier" verkleinert werden, meistens sind diese jedoch sehr fehleranfällig.

Gzip

Aktivieren sie die Gzip-Kompression des Servers. Unter Apache sind dafür die Module mod_gzip (Apache 1.3) und mod_deflate (Apache 2) zuständig. Generell sollten alle Textformate (CSS, JS, HTML, PHP, usw.) durch den Kompressor geschickt werden, für bereits komprimierte Dateiformate wie pdf oder jpeg macht es keinen Sinn. Gzip macht jedoch auch für bereits durch "minify" optimierte Dateien sinn, sollte auf Grund des Overheads aber generell erst ab einer Dateigröße von ca. 150Byte - 1KB angewandt werden.

Achten Sie des weiteren auf einen Bug von IE6 und IE7 der Gzip-komprimierte Dateien immer im Cache ablegt.

Anzahl der Requests verringern

Verringern Sie die Anzahl der Datei-Requests an den Server. Wenn möglich sollte nur eine Basis-CSS und eine Basis-JS-Datei ausgeliefert werden. Des weiteren können für in CSS eingebunden Grafiken sogennante CSS-Sprites verwendet werden.

Requests auf mehrere Server verteilen

Um die Anzahl der parallelen Downloads im Browser zu erhöhen, macht es Sinn für statische Inhalte (CSS, JS, Images) eigene Domains oder Subdomains zu verwenden. Auf Grund des DNS-Anfrage-Overheads aber max. 2-4 verschiedene Domains.

Etag

Die Ausgabe des Etags im HTTP-Header sollte serverseitig ganz deaktiviert werden, da diese an den jeweiligen physischen Server gebunden sind und daher bei Clustersystemen immer unterschiedliche Etags ausgeliefert werden. Dies führt dazu, dass der Browser Inhalte nie als gecacht ansehen wird.

Cache Expires

Um dem Browser die Möglichkeit zu geben effektiv zu Cachen sollte man im HTTP-Header das Cache-Expires-Date auf einen möglichst hohen Wert setzen. Dabei ist allerdings darauf zu achten, dass neue Versionen der Dateien vom Client erst nach Ablauf dieses Datums vom Server abgerufen werden. Um dennoch sicher zu stellen, dass die geänderten Dateien ausgeliefert werden, sollte man Versionsnummern in den Dateinamen einführen.

CSS @import

Oft werden CSS-Dateien über eine Datei mit @import eingebunden. Dies ist aus Performance-Gründen nicht zu empfehlen. Stattdessen sollte wie bei JS jede Datei einzeln in den Header eingebunden werden.

JS am Ende der Datei einfügen

Da der Download von JS-Dateien im Browser alle parallelen Downloads blockiert, sollte man diese erst am Ende der Datei vor dem schließenden body-Tag einbinden. Zu beachten sind hierbei allerdings der Ausführungszeitpunkt und die Inkompatibilität diverser JS-Frameworks zu dieser Methode.

CSS-Expressions vermeiden

CSS-Expressions sind in CSS eingebettetes JS, dass allerdings sehr unperformant ausgeführt wird und ist daher zu vermeiden. (Grundregel: JS das im CSS steht kann auch als normales JS ausgeführt werden)