Browser Caching ist eine einfache Methode um den Traffic einer Webseite zu reduzieren und somit die Performance zu erhöhen. Zudem dauert die Einrichtung im Apache Webserver maximal fünf Minuten und sollte bei allen gängigen Webhosting Paketen unterstützt werden.
Browser Caching nutzen
Browser Caching mit mod_expires
Browser Caching mit mod_headers
Auswirkung und Fazit
Performance Test via Google Page Speed Insights
Auf Google Pages Speed Insights, kann man seine Website auf Geschwindigkeit (Performance) überprüfen lassen und erhält zudem eine detailierte Auswertung und sehr ernst gemeinte Verbesserungsvorschläge. Eine Überprüfung von www.sysadminslife.com sieht zB. (ohne aktiviertem Browser Cache) wie folgt aus:
Google sagt: “Browser-Caching nutzen” – Leverage Browser Caching
Jeder moderne Webbrowser (Chrome, Firefox, Internet Explorer, etc) hat einen eingebauten Cache, was bedeutet: dass Dateien zwischengespeichert und nicht bei jedem Aufruf neu heruntergeladen werden müssen. Darunter fallen in der Regel Dateitypen wie Bilder, Stylesheets, Javascripts, etc.. Der Browsercache funktioniert allerdings nur dann vernünftig, wenn auch am Webserver entsprechende Regeln bzw. ein Ablaufdatum für die einzelnen Dateitypen festgelegt wird.
Ist eine entsprechende “expire” Regel aktiviert, so wird dem Browser vom Webserver mitgeteilt, dass zB. das Bild background.jpg für 7 Tage gecached werden kann. Der Browser muss das Bild somit nicht bei jedem Seitenaufruf neu laden, sondern behält es in seinem Zwischenspeicher. Das spart somit Traffic und dadurch auch Ladezeit.
Browser Caching aktivieren – htaccess mit mod_expires
Damit man das Browser Caching nun auf dem eigenen Root Server aktivieren kann, wird zuvor das Modul “mod_expires” aktiviert, falls es noch nicht aktiviert ist. Ein managed Webhosting Paket sollte das Modul eigentlich zur Verfügung stellen. Unter den gängigsten Linux Distributionen wird mod_expires folgendermaßen auf der Commandline aktiviert. Ein Neustart des Apache Prozess ist anschließend erforderlich:
1 2 | a2enmod expires/etc/init.d/apache2 restart |
Anschließend wird in die bestehende .htaccess Datei (falls vorhanden) oder in eine neue .htaccess Datei folgender Inhalt eingefügt. Der Teil kann auch direkt in die globale Apache Konfiguration oder in die Vhost Konfiguration geschrieben werden. Die If Anweisung schützt dabei den Apache Prozess, sodass angeführte “Expire Regeln” nur zum Einsatz kommen, wenn auch das Modul mod_expires aktiviert ist:
1 2 3 4 5 6 7 8 9 10 11 12 | <IfModule mod_expires.c> ExpiresActive On ExpiresByType image/gif "access plus 7 days" ExpiresByType image/ico "access plus 7 days" ExpiresByType image/jpeg "access plus 7 days" ExpiresByType image/jpg "access plus 7 days" ExpiresByType image/png "access plus 7 days" ExpiresByType text/css "access plus 7 days" ExpiresByType text/javascript "access plus 7 days" ExpiresByType application/x-javascript "access plus 7 days" ExpiresByType application/javascript "access plus 7 days"</IfModule> |
“ExpiresByType” spricht den MIME Type an und setzt via “access plus 7 days” den Cache Wert auf 7 Tage. Die entsprechenden Dateien bleiben also bis zu 7 Tage im Browser Cache erhalten. Hier kann natürlich auch ein höherer oder für gewisse MIME Types (css, xml, js, ..) auch ein niedrigerer Wert eingestellt werden. Je nach Anwendungsgebiet kann hier variiert werden. Mit 7 Tage haben wir allerdings gute Erfahrungen gemacht.
Alternative: Browser Caching mit mod_headers
Als Alternative zur Methode mit dem Modul mod_expires gibt es noch eine Variante mit dem Modul mod_headers. Hier können die Dateitypen direkt über die Dateiendungen angesprochen werden und nicht via MIME-Types:
1 2 | a2enmod headers/etc/init.d/apache2 restart |
Nachdem das Modul aktiviert wurde, kann folgender Teil wieder direkt in die .htaccess Datei oder in die Apache Konfiguration eingetragen werden.
1 2 3 4 5 | <IfModule mod_headers.c><FilesMatch "\.(gif|ico|jpeg|jpe|png|css|js)$">Header set Cache-Control "max-age=604800, public"</FilesMatch></IfModule> |
Header set Cache-Control setzt den Wert für max-age auf 604800 Sekunden (7 Tage). Dem Browser wird somit mitgeteilt, dass die gespeicherten Dateien für 7 Tage aktuell sind und nicht erneut vom Server geladen werden müssen. Wenn man für andere Dateitypen noch verschiedene Ablaufdaten festlagen möchte, dann kann einfach eine weitere Zeile (<FilesMatch …. </FilesMatch>) eingefügt werden.
Auswirkung und Fazit
Sobald die htaccess Datei gespeichert wird, ist das Browser Caching aktiv. Eine Aktualisierung des Google Page Speed Insights sollte dabei sofort eine Score Verbesserung anzeigen:
Der Score nur durch die Aktivierung des Browser Caching von 87 auf 90 gestiegen. Das mag auf den ersten Blick nicht viel erscheinen, bringt aber tatsächlich ein wenig Geschwindigkeit und sollte daher auch genutzt werden. Warum Potential verschenken, wenn es so einfach umgesetzt werden kann? 
Weitere Verbesserungsmöglichkeiten bietet die gzip Komprimierung einer Website und die Verwendung eines OPcache für PHP.