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.
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.
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:
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:
<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:
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.
<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?
.htaccess & Komprimierung
Die Komprimierung von Internetseiten kann zu einer ganzen Reihe von Vorteilen führen: So kann es beispielsweise zu einer schnelleren Auslieferung der Website kommen, was wiederum die Usability der Seite erhöht. Aber auch der Kostenaspekt spielt eine Rolle, denn schließlich kostet das durch eine Website übertragene Datenvolumen auch Geld. Apache-Server verfügen über einen eingebauten Mechanismus zur Komprimierung, der über die Konfigurationdatei .htaccess gesteuert wird.
Durch Komprimierung von Inhalten – sowohl HTML-Seiten als auch Stylesheets und JavaScript-Dateien – kann der durch eine Website zu versendende Traffic (bzw. das Datenvolumen) signifikant verringert werden. Dies führt nicht nur dazu, dass Traffic-Kosten geringer ausfallen, sondern kann auch die Auslieferungsgeschwindigkeit beim Seitenabruf verkürzen. Hierdurch entsteht der schöne Nebeneffekt, dass – gerade wenn die auszuliefernden Dateien recht groß geraten sind – die bei der Auslieferung entstehende Latezzeit der Internetseite kürzer ausfällt als es ohne Komprimierung der Fall ist. Der schnellere Download der durch den Browser benötigten Informationen steigert die Usability der Website – der Seitenbesucher freut sich über geringere Ladezeiten.
Und so sieht meine .htaccess datei aus.
# Deflate Compression by FileType
<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/atom_xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/x-shockwave-flash
</IfModule>
<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>
Zu der eigendeliche Frage jetzt, was könnte man hier noch verbessern ? Gibt es vielleicht andere meinungen hier zu, um das Ganze noch weiter zu Optimieren. Würde mich freuen!
Ach ja, meine eckdaten von PageSpeed Insights 81 Mobil / 89 Desktop