Browser-Caching aktivieren

Wenn das PageSpeed Tool den Punkt Leverage browser caching moniert, dann weist dies auf nicht vorhandenes oder eingeschränktes Cachen der analysierten Webseite hin. In diesem Fall muss der Browser, mit dem der Besucher die Webseite aufruft, alle Inhalte wie Bilder, Logo, CSS und Javascript Dateien neu von der Webseite laden. Je mehr Daten/Inhalte der Browser neu laden muss, desto mehr Traffic versursacht dies, sowie die Ladezeit erhöht sich.
Wenn man nun dem Browser erlaubt einige der Daten der Webseite aus dem Cache zu beziehen, dann wird nicht nur die Ladezeit und der Traffic geringer, sondern die Webseite baut sich in dem Browser schneller auf. Mittels Leverage browser caching lässt sich dies erreichen.

Browser-Caching mit PHP aktivieren

Eine einfache Variante des Browser Caching lässt sich mit einigen Zeilen PHP-Code erreichen. Fügt daher, am besten am Anfang einer jeden Seite, die folgenden Codezeilen hinzu:

<?php
$expires_timestamp = mktime(0, 0, 0, 12, 31, 2012);
$lastmodified_timestamp = mktime(0, 0, 0, 1, 1, 2012);

header("Expires: ".date("D, j M Y H:i:s", $expires_timestamp)." GMT");
header("Last-Modified: ".date("D, j M Y H:i:s", $lastmodified_timestamp)." GMT");
header("Pragma: cache");
header("Cache-Control: store, cache");
?>

Browser-Caching mit .htaccess aktivieren

Damit das Leverage browser caching (Browsercache) optimal genutzt werden kann, muss auf dem Server (wo die Webseite liegt) eines der beiden Module mod_expires oder mod_headers aktiviert sein. Dies ist glücklicherweise bei den meisten Webspace-Anbietern der Fall.
Weiterhin muss die Möglichkeit gegeben sein Einstellungen per .htaccess vornehmen zu können. Sollte dies mit dem aktuellen Webspace nicht möglich sein, hilft eventuell ein Upgrade oder eine Nachfrage bei dem Hoster.

In die .htaccess Datei kann unter Nutzung des Modules mod_expires folgendes eingefügt werden:

<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 1 month 1 days"
ExpiresByType text/html "access plus 1 month 1 days"
ExpiresByType image/gif "access plus 1 month 1 days"
ExpiresByType image/jpeg "access plus 1 month 1 days"
ExpiresByType image/png "access plus 1 month 1 days"
ExpiresByType text/css "access plus 1 month 1 days"
ExpiresByType text/javascript "access plus 1 month 1 week"
ExpiresByType application/x-javascript "access plus 1 month 1 days"
ExpiresByType text/xml "access plus 1 seconds"
</IfModule>


Alternativ kann man anstelle von “access plus 1 month 1 days” auch “access plus 604800 seconds” schreiben.

Nutzt man dagegen das Modul mod_headers, dann kann folgendes in die .htaccess Datei eingetragen werden:

<IfModule mod_headers.c>
<FilesMatch “\.(js|css)$”>
Header set Cache-Control “max-age=86400, public”
</FilesMatch>

<FilesMatch “\.(gif|png|jpg|jpeg|pdf|ico)$”>
Header set Cache-Control “max-age=604800, public”
</FilesMatch>
</IfModule>


Dabei ist der erste Eintrag für Javascript und CSS Dateien, der zweite für Bilder und PDF-Dokumente.

Leverage browser caching Einstellungen
Mittels der “IfModule mod_expires.c” Abfrage wird geprüft ob das Modul mod_expires aktiviert und somit genutzt werden kann. Erst wenn diese Server-Abfrage erfolgreich war, greifen die nachfolgenden Leverage browser caching Einstellungen.

Der Wert innerhalb der Anführungszeichen(„) legt das Verfallsdatum fest. So z.B. bei “access plus 604800 seconds” nach 604800 Sekunden. Man kann mittels der verschiedenen Zeilen für jeden einzelnen Dateityp genau festlegen wann dessen Verfallsdatum sein soll. Wer z.B. für CSS und HTML Dateien kein Verfallsdatum festlegen möchte, aufgrund von ständigen Änderungen, der entfernt die entsprechenden Zeilen einfach aus der .htaccess Datei.

Wer einen eigenen Webserver mit vollen Zugriff hat, der kann diese Einstellungen auch direkt Konfigurationsdatei des Servers durchführen und muss keine .htaccess Datei nutzen.

Fazit: Mit den kleinen Leverage browser caching (Browsercache) Einstellungen lassen sich sehr schnell große Erfolge hinsichtlich der PageSpeed Optimierung erzielen. Denn die Ladezeit der Webseite verbessert sich deutlich wenn nicht bei dem Aufruf jeder einzelnen Seite alle Dateien (CSS, Javascript, Bilder) neu von dem Server herunter geladen werden müssen.

Keine Browser-Caching Optimierungen möglich

Bei einigen Codes habt Ihr jedoch keine Möglichkeit Einfluss auf das Browser-Caching zu nehmen. Gemeint sind Codes wie:
- http://pagead2.googlesyndication.com/pagead/expansion_embed.js (60 Minuten)
- http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js (60 Minuten)
- http://pagead2.googlesyndication.com/pagead/osd.js (60 Minuten)
- https://apis.google.com/js/plusone.js (30 minutes)
- http://connect.facebook.net/de_DE/all.js (20 minutes)
- http://platform.twitter.com/widgets.js (30 minutes)
- etc.

Die entsprechenden Browser-Caching Werte werden direkt von dem Anbieter (google, Facebook, Twitter, etc.) vorgegeben. Ihr habt in diesen Fällen nur die Alternative diese Codes aus Eurem Quellcode zu entfernen. Leider!