Webseitenoptimierung – Serverseitige Optimierung
Dieser Artikel beschreibt einige sehr sinnvolle Optimierungsmöglichkeiten, welche durch serverseitige Einstellungen vorgenommen werden können, wenn die nötigen Voraussetzungen erfüllt sind. Viele HTML-, CSS-, Javascript oder auch Text-Dateien können durch GZip-Auslieferung deutlich im Speicherplatz verkleinert und damit schneller zum Browser übertragen werden. Auch ein ordentliches Cachemanagement kann, zumindest bei Wiederholungsbesuchen oder beim Aufruf von Unterseiten, zu einer drastische Verringerung der Webseitenladezeit führen. Zwar können Browser dies auch selbständig steueren, fragen aber den Server bei jeder Datei erneut an, ob sich diese inzwischen geändert hat. Diese Anfragen benötigen ebenfalls Zeit und können im Regelfall mittels Expires-Header eingespart werden.
Damit Webseiten oder auch Dateien on the fly komprimiert zum Browser des Anwenders übertragen werden können, muss beim Webserver das Modul „deflate“ aktiviert sein. Im Regelfall ist dies auf Linux-Servern mit Apache bereits installiert und kann über
a2enmod deflate
aktiviert werden. Wer selber keinen Serverzugriff hat, kann nur seinen Hoster/Administrator bitten das Modul zu aktivieren.
Im 2. Schritt muss nun noch dem Webserver mitgeteilt werden, welche Dateien mittels GZip komprimiert werden sollen. Dies kann in der Apache-Konfiguration (Serverneustart nicht vergessen) sowie in der .haccess-Datei der Website erfolgen.
<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
</IfModule>
Alternativ gibt es auch eine Kurzform:
<IfModule mod_deflate.c>
<FilesMatch "\\.(js|css|htm|html|txt|xml)$">
SetOutputFilter DEFLATE
</FilesMatch>
</IfModule>
Ob alles wie gewünscht funktioniert kann man mit YSlow testen. Unter „Components“ wird in der Spalte „GZip“ die Dateigröße der komprimierten Dateien angezeigt (Unterpunkte aufrufen). Alternativ kann man sich auch die Headerdaten der Webseite/Datei anschauen. Steht dort „Content-Encoding: gzip“ wird die Webseite/Datei komprimiert ausgeliefert. Alternativ läßt sich das auch mit einem Onlinetool wie gZip-Test anzeigen.
Für ein gutes Cachemanagement benötigten Proxy-Server und auch Browser die Angaben, wie lange Dateien im Cache gehalten werden sollen. Diese Information kann der Webserver mit den Headerdaten aller Dateien ausliefern. Benötigt wird hierfür das Modul „expires“, welches im Regelfall auf Linux-Servern mit Apache bereits installiert ist. Aktivieren kann man dies über:
a2enmod expires
Wer selber keinen Serverzugriff hat, kann nur seinen Hoster/Administrator bitten das Modul zu aktivieren.
Auch hier muss dem Webserver mitgeteilt werden, welche Dateien bis zu welchem Zeitpunkt gecachet werden sollen. Dies kann in der Apache-Konfiguration (Serverneustart nicht vergessen) sowie in der .haccess-Datei der Website erfolgen.
<IfModule mod_expires.c>
ExpiresActive on
ExpiresDefault "access plus 24 hours"
ExpiresByType image/jpg "access plus 1 months"
ExpiresByType image/gif "access plus 1 months"
ExpiresByType image/jpeg "access plus 1 months"
ExpiresByType image/png "access plus 1 months"
ExpiresByType text/javascript "access plus 1 months"
ExpiresByType application/javascript "access plus 1 months"
</IfModule>
Im vorliegenden Beispiel wird der Zeitstempel für alle nicht weiter aufgeführten Dateien global auf +24 Stunden gesetzt. Das heißt, Proxy-Server sowie auch Browser speichern diese Dateien 24 Stunden im Cache, bevor sie die Dateien wieder direkt vom Originalserver holen. Darüber hinaus erhalten alle JPG-, GIF-, JPEG-, PNG- und Javascript-Dateien einen Zeitstempel von +1 Monat, werden also 1 Monat im Cache gespeichert. Wird der Cache gelöscht oder der Browser über einen Seitenreload zum Neueinlesen der Dateien gezwungen, werden alle betroffenen Dateien vom Originalserver neu eingelesen.
Auch hier kann die Kontrolle wieder über YSlow, angezeigt wird das Ablaufdatum unter „Component“ in der Spalte „Expirex“, bzw. über die Headerdaten, angezeigt werden zwei Zeilen 1) „Cache-Control: max-age=xxxxxxxx“ und 2) „Expires: Datum“ , durchgeführt werden.
Tags: css, css-datei, geschwindigkeit, html, optimierung, server, test