Allgemein

Browser Caching für den eigenen WordPress Blog aktivieren

Der nächste Punkt unserer Onpage-Optimierungsmassnahmen betrifft das Aktivieren des Browser-Cachings. Durch aktiviertes Browser-Caching können statische Ressourcen wie bspw. Bilddateien, CSS-Dateien oder auch Javascript-Dateien des eigenen WordPress Blogs bzw. der eigenen Webseite bei wiederkehrenden Besuchern schneller geladen werden.

Jeder Browser hat heutzutage einen eingebauten Cache (sozusagen einen Zwischenspeicher), in dem unterschiedliche Daten beim Aufruf einer Webseite zwischengespeichert werden, um diese beim erneuten Aufruf der Webseite nicht nochmals herunterladen zu müssen. Damit das Browser-Caching für die eigene Webseite ordnungsgemäß funktioniert, muss allerdings vom Webserver ein Ablaufdatum für diese cachefähigen Daten festgelegt werden, damit beim erneuten Aufruf der Webseite alle zwischenspeicherbaren Daten auch wirklich aus diesem Browser Cache geladen & nicht wieder von der Webseite bezogen werden müssen.

Dieses Ablaufdatum der cachefähigen Ressourcen kann zum Einen über das Apache Modul “mod_expires” oder aber über das Modul “mod_headers” realisiert werden. Sollten Sie sich nicht sicher sein, ob diese Module auf Ihrem Webhost bereits installiert bzw. aktiviert sind, fragen Sie am Besten bei Ihrem Webhoster nach, normalerweise sollten diese aber bereits zur Verfügung stehen. Als Empfehlung in den Details des Google Pagespeed Insights Tests wird eine Cache-Lebensdauer von mindestens 7 Tagen für cachefähige Ressourcen vorgeschlagen. Ausserdem wird hier die “mod_expire”-Regelung zur Cache-Aktivierung der “mod_headers” Variante vorgezogen.

Browser Caching mittels “mod_expires” aktivieren

Um Expire- (also Ablauf-) Regelungen mittels “mod_expires” festzulegen benötigen wir zu Anfang eine .htaccess-Datei. In einem früheren Artikel habe ich schonmal gezeigt, wie man den WordPress-Admin Bereich mittels .htaccess-Datei schützt, diese Datei kann nun um die Expire-Regeln modifiziert werden, um zusätzlich das Browser-Caching auf dem Webhost zu aktivieren. Folgende Codezeilen sind dafür nötig (die Angaben hinter “//” dienen hier lediglich der Erklärung und brauchen nicht in die htaccess-Datei):

<IfModule mod_expires.c> // if-Anweisung, die überprüft ob das Apache Modul "mod_expires" überhaupt aktiv ist  ExpiresActive On // Aktiviert das Modul "mod_expires" für dieses Verzeichnis  ExpiresByType image/jpg "access plus 7 days" // Ablaufdatum für .jpg-Bilddateien auf 7 Tage setzen  ExpiresByType image/png "access plus 7 days" // Ablaufdatum für .png-Bilddateien auf 7 Tage setzen  ExpiresByType text/css "access plus 7 days" // Ablaufdatum für CSS Stylesheet-Dateien auf 7 Tage setzen  ExpiresByType text/javascript "access plus 7 days" // Ablaufdatum für JavaScript-Dateien auf 7 Tage setzen (alt)  ExpiresByType application/x-javascript "access plus 7 days" // Ablaufdatum für experimentelle/nicht-standardisierte JavaScript-Dateien auf 7 Tage setzen  ExpiresByType application/javascript "access plus 7 days" // Ablaufdatum für gecachte JavaScript-Dateien auf 7 Tage setzen (neu)</IfModule> // if-Anweisung schliessen

Diese Regeln können nach Belieben erweitert werden, um bspw. weitere Bilddateien wie .gif und .jpeg aufzunehmen muss lediglich folgender Code nach obigem Muster hinzugefügt werden:

  ExpiresByType image/gif "access plus 7 days"   ExpiresByType image/jpeg "access plus 7 days"

PDF Dokumente könnten mit dieser Codezeile hinzugefügt werden:

  ExpiresByType application/pdf "access plus 1 year"

Auch ist es wie in diesem Beispiel zu sehen möglich die Cachedauer anzupassen, hierzu muss lediglich die Zeitangabe nach “access plus” verändert werden. Möglich sind hier alle gängigen Zeitangaben:

  • years
  • months
  • weeks
  • days
  • hours
  • minutes
  • seconds

Ausserdem sind diese Angaben kombinierbar, bspw. folgendermassen:

  ExpiresByType application/pdf "access plus 1 month 19 days 3 hours"

Browser Caching mittels “mod_headers” aktivieren

Alternativ kann man das Browser-Caching auch über das Apache Modul “mod_headers” aktivieren. Dazu muss folgender Code in die htaccess-Datei eingefügt werden (die Angaben hinter “//” dienen hier lediglich der Erklärung und brauchen nicht in die htaccess-Datei):

<IfModule mod_headers.c> // if-Anweisung, die überprüft ob das Apache Modul "mod_headers" überhaupt aktiv ist  <FilesMatch ".(gif|jpeg|jpg|png|css|js|pdf)$"> // Auflistung der Dateien, welche gecacht werden sollen (über die Dateiendungen)  Header set Cache-Control "max-age=604800, public" // Angabe der Cache-Lebensdauer in Sekunden 604800 Sekunden = 7 Tage  </FilesMatch> // Schliessen der FilesMatch-Anweisung</IfModule> // Schliessen der If-Anweisung

Mit der Codezeile…

  <FilesMatch ".(gif|jpeg|jpg|png|css|js|pdf)$">

…werden alle gewünschten Dateien aufgelistet, für die das Browser Caching aktiviert werden soll. Diese Liste kann man nach Belieben anpassen, in dem einfach weitere Dateiendungen hinzugefügt bzw. entfernt werden. Alle Dateiendungen werden dabei mit “|” getrennt aufgelistet.

Mit der Codezeile…

  Header set Cache-Control "max-age=604800, public"

…wird die Cachedauer in Sekunden festgelegt. Hier kann ebenfalls nach Belieben ein anderer Wert gesetzt werden.

Wie bereits oben erwähnt zieht Google das Modul “mod_expires” dem Modul “mod_headers” vor, also habe ich im Zuge der Onpage-Optimierungsmassnahmen des Testblogs dieser Artikelserie die Expire-Regelungen in meine htaccess-Datei eingebunden. Beide Möglichkeiten liefern aber das selbe Ergebnis!

Alle Artikel der Serie

Leave a Comment