Browser-Caching aktivieren

Wenn das PageSpeed Tool den Punkt Browser-Caching (Leverage browser caching) als offenen Punkt aufzeigt, 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 bei jedem Besuch neu von der Webseite laden. Je mehr Daten/Inhalte der Browser neu laden muss, desto mehr Traffic versursacht dies. Damit einher gehend erhöht sich so auch die Ladezeit und Performance der Webseite.
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 des Besuchers auch wesentlich schneller auf. Mittels Browser Caching lässt sich dies sehr schnell erreichen.

Browser-Caching mit PHP aktivieren
Eine einfache Variante der Aktivierung 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");
?>

Bei der Verwendung von Content Management System ist dies relativ einfach. Sucht und öffnet eine Datei namens header.php (oder ähnlich benannt) und fügt hier den PHP-Code einmalig ein.

Browser-Caching mit .htaccess aktivieren
Damit das Browser-Caching per .htaccess 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 individuelle 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 anstelle von „access plus 1 month 1 days“ auch „access plus 604800 seconds“ in die .htacces eingetragen werden.

Nutzt Ihr 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, dann PDF-Dokumente, etc.

Browser Chaching Einstellungen
Mittels der „IfModule mod_expires.c“ Abfrage wird geprüft ob das Modul mod_expires aktiviert und genutzt werden kann. Erst wenn diese Server-Abfrage erfolgreich war, greifen die nachfolgenden 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.
Nach dem Ablauf des Verfallsdatums werden die Dateien von dem Browser des Besuchers wieder neu in den Cache geladen.

Solltet Ihr das Design der Webseite wechseln, dann deaktiviert für eine Zeit die Browser Caching Einstellungen.

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

Fazit: Mit den kleinen Browsercache Einstellungen lassen sich sehr schnell, sehr 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.

Für externe Anbieter sind oft keine Browser-Caching Optimierungen möglich!

Bei einigen auf Eurer Webseit eingebundenen Codes habt Ihr jedoch keine oder nur eine sehr geringe Möglichkeit Einfluss auf das Browser-Caching zu nehmen. Gemeint sind Codes wie:
– http://pagead2.googlesyndication.com/pagead/expansion_embed.js
– http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js
– http://pagead2.googlesyndication.com/pagead/osd.js
– https://apis.google.com/js/plusone.js
– http://connect.facebook.net/de_DE/all.js
– http://platform.twitter.com/widgets.js
– 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!