So nutzt Du Browser Caching zur Beschleunigung Deiner Website

Umso wichtiger ist es deshalb, dass Du Deine Website schnell machst. Browser Caching ist eine Methode, um den Turbo zu zünden. Hier erfährst Du, worauf es dabei ankommt.

Was bedeutet Caching?

Beim Caching werden Daten in einen kleinen Zwischenspeicher, Cache, geladen. Die Daten aus dem Cache müssen dadurch bei verschiedenen Anwendungen - sei es am Desktop, auf dem Smartphone oder Tablet - nicht mehr neu geladen werden, wenn sie benötigt werden. Der Cache kann somit die Ladegeschwindigkeit von PC-Programmen ebenso wie von Websites erhöhen.

Serverseitiges Caching vs. Browser Caching

Caching kann bei Websites sowohl auf dem Server als auch im Browser erfolgen.
Wenn der Server einen Cache erstellt, wird dieser Zwischenspeicher auch auf dem Server abgelegt. Diese Dateien werden dann bei einer Serveranfrage durch einen Browser nicht jedes Mal neu geladen. Auf diese Weise lassen sich die Anfragen auf Datenbanken schonen. Zugleich sparst Du Datenvolumen und Ressourcen.

Ist der Servercache erstellt, stehen die im Voraus geladenen Inhalte allen Nutzern zur Verfügung, die auf Deine Seite zugreifen. Solltest Du jedoch Inhalte oder Dateien auf Deiner Website ändern, musst Du auch den Server-Cache erneuern.

Serverseitiges Caching kann aus kompletten HTML-Seiten bestehen.

Beim Browser Caching werden die Daten, wie es der Name bereits verrät, nicht auf dem Server, sondern im Browser des Nutzers zwischengespeichert. Dabei handelt es sich üblicherweise um statische Ressourcen, die sich auch beim Aufruf unterschiedlicher Seiten Deiner Website nicht verändern, wie CSS- oder JavaScript-Dateien.

Webbrowser können neben Formularen, Layouts oder Videos auch Cookies oder andere Dateien wie Loginnamen im Cache speichern.

Browser Caching ist vor allem dann von Vorteil, wenn Besucher wiederkehren oder viele URLs auf Deiner Seite aufrufen. Die statischen Elemente sind dann im Browser verfügbar und müssen nicht jedes Mal erneut geladen werden. Dadurch wird ebenfalls Dein Server geschont und zugleich die Geschwindigkeit Deiner Website erhöht.

Ein Nachteil beim Browser Caching: Wenn ein Nutzer seinen Browsercache löscht, sind die angelegten Daten verloren. Sie müssen beim nächsten Besuch Deiner Website erneut geladen werden.

Wenn Du Browser Caching nutzen möchtest, kannst Du das bei vielen CMS über ein Plugin aktivieren oder Du verwendest die .htaccess-Datei dafür.

Aktivierung von Browser Caching

Browser-Caching lässt sich bei vielen CMS über Plugins oder Erweiterungen aktivieren. Mögliche Plugins für das Browser-Caching mit WordPress sind zum Beispiel:

• WP Rocket

• W3 Total Cache

• WP Fastest Cache

Caching über die .htaccess einrichten

Wenn Du Browser Caching über die .htaccess-Datei Deines Apache-Webservers aktivieren möchtest, stehen Dir zwei Module zur Verfügung, die Du starten musst. Die entsprechenden Anweisungen werden in der .htaccess-Datei hinterlegt, die von Deinem Server bei jedem Seitenabruf geladen wird.

• mod_headers:

In der Regel ist bei den meisten gemanagten Webservern mod_headers bereits aktiviert. Ansonsten muss das Modul vom Serveradmin erst gestartet werden. Der Befehl dazu lautet:

Danach werden die Dateitypen definiert, die in den Browser Cache geladen werden sollen. Die Angaben werden entweder in eine bereits vorhandene .htaccess-Datei eingefügt oder in einer neuen Datei gespeichert.

Der Browser erhält nun die Anweisung, die Dateitypen in den runden Klammern für eine bestimmte Zeit (max-age) zu speichern. In diesem Beispiel sind das 2.592.000 Sekunden, also 30 Tage.

Du kannst auch für einzelne Dateitypen eine unterschiedliche Cache-Laufzeit festlegen. In diesem Fall fügst Du eine weitere Zeile mit <FilesMatch…> </FilesMatch> hinzu und gibst dort den gewünschten Dateityp sowie die Ablaufzeit ein.

In diesem Fall werden CSS und JavaScript für maximal 30 Tage in den Browser Cache geladen, Bilddateien wie gif und jpg für eine Woche (=604.800 Sekunden).

• mod_expires:

Üblicherweise ist auch dieses Modul bereits auf Deinem Server aktiviert. Wenn nicht, kann es mit diesem Befehl gestartet werden:

Mit folgenden Zeilen kann dann die .htaccess-Datei ergänzt werden:

Mit der “IF-Anweisung” wird zunächst sichergestellt, dass die Dateien dann ablaufen, wenn das expires-Modul aktiviert ist. Der Hinweis “access plus …” gibt die Ablaufzeit des entsprechenden Dateityps an. Sie kann individuell verändert werden.

Diese Dateien kann der Browser zwischenspeichern

Browser Caching kann für unterschiedliche Dateien genutzt werden. Möglich ist das Caching von folgenden Dateitypen:

• Bilddateien: .jpg, .jpeg, .png, .gif

• Statische Ressourcen: css-Dateien, JavaScript

• Objektdaten: PDF-Dateien, Mediendateien

Caching testen

Mit der Einzelseiten-Analyse kannst Du prüfen, ob Browser Caching auf Deiner Website aktiviert ist. Die Prüfung startest Du im Tool Website Success. Gib danach eine URL Deiner Website in die Suchleiste ein und klicke anschließend auf “Einzelseiten-Analyse”. Ist das Browser Caching nicht aktiviert, erhältst Du eine Warnung.

Abbildung 1: Browser Caching mit der Einzelseiten-Analyse von Ryte Website Success kontrollieren.

Ob Browser Caching auf Deiner Website aktiviert ist, lässt sich auch mit den PageSpeed Insights von Google kontrollieren. Mit dem Tool lässt sich die Ladegeschwindigkeit Deiner Webseiten testen. Es gibt Dir nach dem Test Optimierungshinweise. Hierzu zählt auch der Tipp, Browser Caching zu nutzen.

Abbildung: Browser Caching mit Google PageSpeed Insights kontrollieren.

Mit wenig Aufwand mehr Speed erreichen

Browser Caching ist neben diesen Möglichkeiten eine praktische Methode, um die Performance Deiner Website deutlich zu verbessern. Zugleich kann diese Optimierung die Belastung Deines Servers bei vielen Besuchern deutlich verringern, da häufig benötigte Dateien in den Zwischenspeicher des jeweiligen Browsers geladen werden. Grundsätzlich ist Browser Caching für Websites jeder Größe geeignet und mit relativ geringem Aufwand umzusetzen. Es gibt also keine Ausrede für Optimierungsmuffel.