Google PageSpeed – Browser-Caching nutzen

In der Reihe Bessere Performance für ein höheres Google Ranking gehen wir auf die einzelnen Empfehlungen des Google PageSpeed genauer ein.

Ein wichtiger und oft vernachlässigter Geschwindigkeits-Boost kann Browser-Caching sein. Browser-Caching ist immer dann sinnvoll, wenn Besucher eure Webseite mehr als einmal besuchen. Der Server weist den Browser an gewisse statische Ressourcen im eigenen Cache zu behalten. Diese werden dann bei einer erneuten Anforderung nicht mehr vom Webserver, sondern von der lokalen Festplatte geladen. Das spart nicht nur Netzwerktraffic, sondern ist auch deutlich schneller.

Welche Dateien soll der Browser im Cache halten?

Browser-Caching sollte für alle statischen Ressourcen festgelegt werden. Dazu gehören folgende:

  • Bilder
  • JavaScript Dateien
  • CSS Dateien
  • Mediendateien
  • PDF’s und weitere Objektdateien

Wie aktiviere ich Browser-Caching?

Es gibt verschiedene Möglichkeiten Browser-Caching zu aktivieren. Benutzt ihr ein Content-Management-System wie WordPress, Typo3 oder Joomla gibt es Erweiterungen, welche die Arbeit für euch erledigen.

Selbstverständlich könnt ihr auch ohne solche Erweiterung das Browser-Caching aktivieren.

Browser-Caching über .htaccess aktivieren

Um Browser-Caching nutzen zu können muss eines der Module mod_headers oder mod_expires auf eurem Webserver aktiviert sein. Mit folgendem Code aktiviert ihr das Browsercaching. Wie ihr sehen könnt wird erst geprüft ob das Modul mod_expires vorhanden ist. Ist dies der Fall werden für einzelne Dateitypen unterschiedliche Ablaufzeiten festgelegt. Der Browser würde die Dateien nun einen Monat lang im Cache halten und aus diesem abrufen ohne einen HTTP-Request an den Webserver zu starten.

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

Um mittels mod_headers das Browser-Caching zu aktivieren müsst ihr folgendes in eure .htaccess-Datei schreiben.

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

Browser-Caching für externe Ressourcen

Ladet ihr externe Ressourcen wie Google Analytics, Skripte für Soziale Netzwerke, Page Ads wie Google Adsense etc. in eure Seite, könnt ihr keine Ablaufzeit festlegen. Die Browser-Caching Werte werden vom direkten Anbieter festgelegt. Darauf könnt ihr leider keinen Einfluss nehmen.

Die einzige Möglichkeit besteht darin den Code der externen Skript-Dateien auf euren Server zu laden und manuell einzubinden. Dadurch besteht allerdings die Gefahr, dass ihr Updates nicht mitbekommt und die Dateien irgendwann unbrauchbar werden.

Habt ihr noch weitere Fragen zum Thema Browser-Caching? Hinterlasst mir doch einen Kommentar wie ihr Browser-Caching bereits einsetzt.

5 Kommentare
  1. Rick
    Rick says:

    Oka Danke für diesen Artikel, gibt es denn für wordpress auch explizite plug ins dafür, die ich installieren kann die das dann quasi voll automatisch machen, wenn ja wäre cool wenn mir da jemand ne Auskunft drüber geben könnte welche das wären.

    Ich danke schon einmal im Voraus

    Viele Liebe Grüße

    Antworten
    • SEO-Head
      SEO-Head says:

      Hallo Rick,

      für WordPress gibt es mehrere Plugins, die aber alle unterschiedliche Funktionalitäten haben. W3 Total Cache bietet mit Sicherheit die meiste Funktionalität, ist aber auch nicht ganz einfach zu konfigurieren.
      Ansonsten hatten wir schon Cachify erfolgreich im Einsatz. Es gibt aber noch zahlreiche weitere Plugins.

      Viele Grüße
      Dein Team von SEO Head

      Antworten
  2. Claudia Kessler
    Claudia Kessler says:

    Hallo,

    ich hatte einen vorgefertigten Code in meine .htaccess Datei eingefügt, allerdings ging dann die Seite nicht mehr. Nach Rücksprache mit one.com kam raus, dass ich diesen wohl an die falsche Stelle geschrieben hatte. Ich habe ihn dann an den Anfang gesetzt, doch das Problem blieb. Auch ein Code, den mir der Support von one.com gab funktionierte nicht, die Seite wird dann nicht mehr richtig angezeigt.

    Woran kann das noch liegen? Zur Info ich arbeite mit Joomla.
    Vielen Dank. LG Claudia

    Antworten
    • SEO-Head
      SEO-Head says:

      Hallo Claudia,

      wieso du genau Probleme mit der htaccess-Datei hast lässt sich aus der Ferne nur schwer feststellen. Eventuell unterstützt dein Hoster nicht alles. Die Rücksprache solltest du aber mit one.com halten. Die sollten eigentlich in der Lage sein, deine htaccess-Datei zum Laufen zu bringen, sodass du vom Browser-Caching profitierst.

      Viele Grüße
      Dein Team von SEO Head

      Antworten

Trackbacks & Pingbacks

Dein Kommentar

Want to join the discussion?
Feel free to contribute!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.