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 aber auch ohne solche Erweiterung das Browser-Caching aktivieren. Dafür benötigt ihr Zugriff auf die .htaccess-Datei, die sich im Root-Verzeichnis eures Webservers befindet.

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 in der ersten Zeile zuerst 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>

Kopiert einfach beide Abschnitte in eure .htaccess-Datei. Prüft danach auf jeden Fall, ob eure Webseite noch ordnungsgemäß funktioniert. Je nach Serverkonfiguration kann es zu 500er-Fehlern kommen. .htaccess-Dateien sind da äußerst empfindlich. Bereits ein falsches Zeichen kann zu einem Fehler kommen. Falls das passiert, löscht einfach die entsprechenden Passagen wieder.

Browser-Caching für WordPress

Für WordPress gibt es zahlreiche Erweiterungen, die neben dem Browser-Caching noch viele weitere Performance-Hacks für euch übernehmen. Die beste Erweiterung, die ich bisher gefunden habe ist WP-Rocket.

WP-Rocket

WP-Rocket ist kostenpflichtig, aber mit 42 € in meinen Augen relativ günstig. Die Konfiguration von WP-Rocket ist kinderleicht und die Performance steigert sich enorm. Ich setze WP-Rocket mittlerweile für alle meine Webseiten ein. Das Browser-Caching funktioniert ganz hervorragend damit. Zudem liefert das Plugin zahlreiche weitere Methoden, um die Performance zu verbessern.

WP Fastest Cache & WP Super Cache

WP Super Cache & WP Fastest Cache sind kostenlose WordPress-Plugins. Der Hauptfokus dieser beiden Plugins liegt darauf, die vom WordPress dynamisch erzeugten Seiten als statische HTML-Seiten abzulegen. Beim erneuten Aufruf, wird WordPress gar nicht mehr geladen, sondern nur noch die statische HTML-Datei ausgeliefert. Das kann große Vorteile haben, da Browser diese Datei sowie alle dazugehörigen statischen Ressourcen problemlos zwischenspeichern können. Jedoch solltet Ihr wissen, dass es bei dieser Art von Cache-Plugins bei dynamischen Seiten, Seiten mit rotierender Werbung etc. zu Problemen kommen kann. Oft sind solche Plugins leicht zu konfigurieren, erreichen aber auch nicht die Performance von WP-Rocket oder W3 Total Cache.

W3 Total Cache

W3 Total Cache kann der absolute Ferrari unter den Cache-Plugins sein. Die Konfigurationsmöglichkeiten sind aber extrem vielfältig, was das Plugin sehr kompliziert macht. Weiß man was man tut und hat die entsprechenden Fähigkeiten lässt sich mit W3 Total Cache das Maximum aus Eurer Webseite herausholen. Wenn Ihr einen eigenen Server habt, ist W3 Total Cache noch mal zusätzlich eine Empfehlung wert, da sich dann noch weitere Optimierungsmethoden ergeben, die Ihr bei anderen Plugins nicht habt.

Ich selbst habe eine ganze Zeit lang meine Webseiten mit W3 Total Cache betrieben. Da meine Webseiten aber alle bei All-Inkl im Shared-Hosting-Paket laufen, konnte ich die Vorteile von W3 Total Cache nicht ausnutzen. Die Konfiguration war mir dann einfach zu kompliziert, sodass ich auf WP Rocket umgestiegen bin. Damit bin ich sehr zufrieden und konnte vergleichbare Resultate erzielen.

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.

Aktuelle Performance-Plugins und Erweiterungen, wie z.B. WP Rocket bieten euch die Möglichkeit externe Ressourcen wie Google Analytics, Facebook-Pixel, Googletag-Manager-Skripte etc. lokal zu hosten. Ihr könnt diese Funktionen in der Konfigurationsoberfläche von WP Rocket aktivieren bzw. deaktivieren. So entscheidet ihr selbst, ob die Skripte von eurem Webserver oder von dem Webserver des Anbieters geladen werden. Dadurch habt ihr die Möglichkeit Browser-Caching für Google-Analytics bzw. den Facebook-Pixel einzusetzen.

Tools wie GTMetrix bzw. Google Pagespeed meckern immer, wenn für Skripte kein Browser-Caching aktiviert ist. Bei externen Skripten habt ihr aber nun mal keine Möglichkeit Browser-Caching zu aktivieren. Mit dem lokalem Hosting von externen Skripten verbessert ihr euren GTMetrix-Score.

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

Was bringt Browser-Caching?

Was ist Caching?

Caching bedeutet, dass Ressourcen (Dateien, Webseiten, Bilder) in einen Zwischenspeicher geladen werden. Caching kommt an verschiedenen Stellen zum Einsatz. So sorgt Caching dafür, dass Dateien nicht erneut übertragen werden bzw. nicht erneut erzeugt werden müssen.

Browser-Cache

Beim Browser-Caching speichert der Browser des Benutzers Dateien lokal auf seinem PC, Smartphone oder Tablet zwischen. Das sind meist statische CSS- bzw. JavaScript-Dateien, Webfonts, Cookies, Formulardaten, Videos, Bilder und Layouts. Beim Browser-Caching kommt der Vorteil erst zum Tragen, wenn der Besucher die Webseite ein weiteres Mal besucht, bzw. eine weitere Unterseite aufruft. Alle statischen Dateien, die sich nun im Cache des Browsers befinden wie z.B. die CSS-Dateien und das Logo werden nicht erneut geladen. Die Seite lädt nun nicht nur wesentlich schneller, sondern es werden auch viel weniger Daten übertragen. Das ist gerade für das mobile Internet ein großer Gewinn.
Bist du Besitzer einer stark frequentierten Webseite, so schont der Browser-Cache zudem Deinen Webserver, da dieser viel weniger Anfragen bearbeiten muss.

Ob Browser-Cache zum Einsatz kommt hängt von zwei Faktoren ab. Zum einen muss beim Webserver Browser-Cache aktiviert sein. Der Webserver gibt dem Browser also die Anweisung statische Ressourcen zwischenzuspeichern. Über sog. Ablaufzeiten wird dem Browser mitgeteilt, wie lange er diese Ressourcen maximal speichern soll. Wird die Webseite nach dem Ablaufdatum erneut aufgerufen, werden die zwischengespeicherten Ressourcen gelöscht. So wird verhindert, dass der Browser-Cache die Festplatte des Benutzers auf Dauer zumüllt und immer größer und größer wird.
Zum anderen muss der Browser Caching unterstützen, was aber alle modernen Browser tun. Nichts desto trotz gibt es Anwendungsfälle, in denen das Caching eures Webbrowsers deaktiviert sein soll. Der Browser ignoriert dann seinen Zwischenspeicher. Alternativ könnt ihr auch den Cache eures Browsers leeren. Gebt dafür den Namen eures Browsers sowie das Keyword „Cache leeren“ bei Google ein.

Server-Cache

Beim Server-Caching speichert der Webserver Dateien zwischen, die z.B. aus einer Datenbank geladen oder erzeugt werden müssen. So wird ebenfalls die Auslieferungszeit verbessert und Webserver sowie Datenbank geschont.

Browser-Cache bei Google Chrome deaktivieren

Möchtest Du kurzzeitig den Browser-Cache bei Google Chrome deaktiveren, solltest Du mit F12 die Entwickler-Konsole aufrufen. Im Reiter „Network“ findest Du nun den Punkt „Disable Cache“. Solange die Entwickler-Konsole jetzt offen ist, wird der Browser-Cache in Google Chrome ignoriert. Das kann z.B. für Webentwickler interessant sein, oder wenn Webseiten mal nicht richtig angezeigt werden.

Wie kann ich meinen Browser-Cache löschen?

Möchtet Ihr euren Browser-Cache löschen, müsst Ihr in den Einstellungen eures Browsers nachschauen. Falls Ihr den entsprechenden Punkt nicht findet, gibt es im Internet zahlreiche aktuelle Anleitungen. Gebt dafür einfach den Namen eures Browsers sowie das Keyword „Cache leeren“ bei Google ein.

Caching testen

Ihr könnt testen, ob das Caching erfolgreich funktioniert, indem Ihr Eure Webseite bei GTmetrix eingebt. Dort werden euch Empfehlungen des Google Pagespeeds sowie von YSlow. Diese Auswertungen beinhalten Vorschläge, wie eine Webseite Daten aufbereiten und zur Verfügung stellen sollte, um eine schnelle Auslieferungszeit und hohe Performance der Webseite zu garantieren.
Dabei werden besonders protokollspezifische Eigenschaften der Übertragungsprotokolle berücksichtigt. Die optimale Auslieferung der Daten einer Webanwendung sorgt dafür, dass die Übertragungsprotokolle HTTP und TCP die Übertragung möglichst schnell und effizient ausführen.