hanseranking GmbH
Den Browser-Cache kennen die meisten daher, dass er hin und wieder entleert werden muss, damit der Computer wieder schneller arbeitet oder man Websites und spezielle Landingpages, die verändert wurden, im aktuellen Stand sehen kann. Grund für das nötige Löschen des Browser-Caches ist, dass ein Abbild der Website, die wir einmal besucht haben, im Browser Cache gespeichert wurde, um das erneute Laden beim nächsten Besuch des Users zu beschleunigen.
Das hat allerdings auch seinen Preis: Zu viele zwischengespeicherte Websites rauben Speicher, können Rückschlüsse auf persönliche Daten des Users und dessen Surfverhalten zulassen und beeinträchtigen die Arbeitsgeschwindigkeit des Computers. Das klingt erst einmal nicht sehr positiv, ist aber für Sie als Websitebetreiber eine Chance auf ein besseres Google-Ranking und führt auch bei anderen Browsern zu einer besseren Performance, wenn Sie das Browser-Caching, wie sich das Zwischenspeichern der Internetseiten nennt, gezielt einsetzen. Als SEO-Tool eingesetzt, sorgen Sie mit dem Browser-Caching dafür, dass Ihre Website oder Ihr Webshop durch eine schnellere Ladezeit nutzerfreundlicher performt und damit eine bessere Userexperience bietet. Auch ist die Absprungrate der Besucher geringer, da sie nicht lange auf den Aufbau der Website warten müssen.
In diesem Beitrag wollen wir u. a. Antworten zu den Fragen geben: Was sind die Vorteile des Browser-Cachings? Welche Ressourcen Ihrer Website oder Ihres Webshops sollten zwischenspeicherbar sein? Was sollten Sie sonst noch beim Browser-Caching beachten?
Kein User wartet gerne und schon gar nicht darauf, dass die Website endlich geladen ist. Der Inhalt muss dann schon extrem interessant für ihn sein, um die Wartezeit in Kauf zu nehmen. Websites, die sich rasend schnell aufbauen, sind also wesentlich userfreundlicher. Je mehr positive Userexperience Sie bieten und je länger der User auf Ihrer Seite verweilt, desto besser werden Suchmaschinen wie Google und Co. Ihren Webauftritt bewerten. Mit jeder Steigerung der Performance Ihrer Website oder Ihres Webshops verbessert sich auch Ihr Ranking!
Jeder Browser verfügt über die Implementierung eines HTTP-Cache-Speichers und muss nur noch durch einen korrekten HTTP-Header als Anweisung von Ihrem Server mit den nötigen Parametern versorgt werden, um die richtigen Ressourcen zwischenzuspeichern. Diese “Snapshots” verwenden Browser wie Google Chrome, Safari und Co. zum einen, um die Ladezeiten der Websites zu verringern und zum anderen und in erster Linie als Back-up in den Suchergebnissen, falls die aktuelle Seite einmal nicht geladen werden kann.
Damit das Browser-Caching auch perfekt funktioniert, müssen Sie dem Browser (Google, Opera, DuckDuckGo, Safari etc.) mitteilen, welche Ressourcen bzw. Dateitypen er zwischenspeichern soll und wie lange. Zu den möglichen Dateitypen gehören typischerweise:
Damit der Browser weiß, welche Dateitypen er für die Zwischenspeicherung im Caching nutzen soll, müssten Sie eine Ressourcen-Validierung durchführen. Hinsichtlich der Browser-Caching- Header haben Sie die Wahl zwischen:
Mehrere Header anzugeben, ist nicht sinnvoll. Entscheiden Sie sich daher zu Beginn für eine Version.
„Last-Modified“ oder „ETag“ überprüfen den Zweck und vergleichen, ob es sich um gleiche Ressourcen handelt, um diese bei jeder Veränderung zu aktualisieren. Die GET-Anforderung durch den Browser, um dies abzufragen, erfolgt beim Neuladen der Website durch den User. Beim Last-Modified-Header wird das Datum der letzten Veränderung bzw. Speicherung verglichen. Bei E-Tag-Header können auch andere Werte, wie beispielsweise die Dateigröße, für den Abgleich herangezogen werden.
Damit das Browser-Caching fehlerfrei genutzt werden kann, müssen außer den Dateitypen auch die Speicherzeiten festgelegt werden. Beim Browser-Caching übernehmen dies die Expires- und Cache-Control-Header. Während HTML nicht zwischengespeichert werden muss, da es schnell lädt, wird zum Beispiel durch Google empfohlen, alle anderen Browser-Caching-Ressorcen für mindestens eine Woche zu speichern. Für Widgets oder Werbeanzeigen von Drittanbietern sollten Sie die Cache-Lebensdauer für mindestens einen Tag eintragen. Für binäre Objektdaten wie das Favicon oder das Javascript, die in der Regel nicht aktualisiert bzw. verändert werden, sollten Sie mindestens einen Monat festlegen, besser noch: das Maximum, das 12 Monate beträgt.
Erst nach Ablauf des gewählten Browser-Caching-Speicherzeitraums, wird der Browser erneut prüfen, ob es eine neue Version des gespeicherten Inhalts gibt und diesen ggf. mittels einer GET-Anforderung aktualisieren.
Diese Browser-Caching-Header definieren die Speicherdauer:
Mehrere Header anzugeben, ist wie schon bei der Ressourcen-Validierung nicht sinnvoll. Entscheiden Sie sich daher für eine Version.
Tipp: Anstelle bei Cache-Control „max-age“ zu wählen, sollten Sie einen Expire-Zeitraum eingeben, da dies von Browsern in der Regel besser unterstützt wird.
User, die Ihre Website besuchen, sehen Änderungen an Ihrer Website erst, wenn Sie ihren Cache löschen und somit das Browser-Caching und somit die Ansicht der Website aktualisieren. Es ist daher wichtig, sich vorher genau zu überlegen welche Browser-Caching-Ressourcen in der Regel unverändert bleiben, welche mindestens einen Monat gleich bleiben und welche sich wöchentlich ändern. Besonders bei Webshops ist hier besondere Sorgfalt angebracht! Wenn Sie die falschen Browser-Caching-Expires in einem Webshop einsetzen, ist der Frust der User und damit ein möglicher Absprung und eine Verschlechterung des Rankings vorprogrammiert. Eine zu lange Speicherung von Produktbildern kann nämlich dazu führen, dass beispielsweise Produkte, die der Kunde in der Vergangenheit in seinen Warenkorb legte, noch immer dort angezeigt werden.
Damit Sie im Browser Ressourcen und das Expire-Date (Ablaufdatum) für das Caching festlegen können, müssen Sie Expire Header in Form einer .htaccess-Datei auf Ihrem Server definieren. Die Browser holen sie per GET-Anfrage ab und verarbeiten sie. Ein Beispiel für die Anweisung eine Ressource für einen Monat zu speichern wäre beispielsweise:
Expires: Mon, 30 Mar 2020 11:30:00 GMT
oder auch:
ExpiresDefault “access plus 1 month”
Mit hilfreichen Tools wie Google PageSpeed Insights, Pingdom, Gtmetrix oder Yslow können Sie mit wenigen Klicks messen, ob die Aktivierung des Browser-Cachings erfolgreich war, wie schnell sich Ihre Website oder Ihr Webshop aufbaut und erkennen, wo noch nachgebessert werden muss.
Wenn eine Website oder ein Webshop sich trotz Zwischenspeicherung im Cache nur langsam aufbaut, sollten Sie die Analyseergebnisse der oben genannten Tools genauer ansehen. Die Tools werden Ihnen aufzeigen, an welchen Stellen beispielsweise zu große Dateien das Tempo drücken und Ihnen Einsparungspotenzial vorschlagen. Typischerweise handelt es sich um ein zu groß geratenes Bild oder eine nicht ausreichend komprimierte Binärdatei. Nachdem Sie die nötigen Anpassungen vorgenommen haben, empfiehlt sich ein erneuter Geschwindigkeitstest.
Wenn sich verschiedene Ressourcen nicht ständig, sondern nur ab und zu verändern, gibt es eine weitere Möglichkeit der Zwischenspeicherung. Diese wird so lange durchgeführt, bis sich die Daten auf dem Server erneuern. Dies bedeutet, dass der Browser durch den Server erfährt, dass es neue Daten gibt, die sich kürzlich verändert haben. Diesbezüglich erhält jede Ressource eine eigene URL, die sowohl vom Server als auch vom Browser eindeutig wiedererkannt wird. Sie können die Ressource manuell verändern und mit dem Zusatz „_fingerprint.css“ versehen, sodass sie automatisch eine neue ID erhält. Aus diesem Grunde muss der Browser die neue Ressource abrufen, weil er keine andere Möglichkeit hat.
Ebenso besteht die Möglichkeit, pro Anwendung ein neues Verzeichnis für die Veröffentlichung zu erstellen, sodass sich die Assets entsprechend platzieren. Jedoch kann es zu einem erneuten Download kommen, was sich als nachteilig erweist. Und zwar dadurch, dass sich die Version nicht verändert, die URL sich aber dennoch erneuert. Der URL-Fingerprint ist auch dann von Vorteil, wenn Sie manuell das erneute Crawlen Ihrer Website bei Google und anderen Suchmaschinen anstoßen möchten. Denn, wenn Sie wegen einer Urheberrechtsverletzung auf Ihrem Webauftritt abgemahnt werden und eine Unterlassungserklärung abgeben, müssen Sie aktiv und unverzüglich auf eine Bereinigung des Browser-Caches hinwirken, da sonst eine Vertragsstrafe bzw. ein Ordnungsgeld droht.
Der User muss der Zwischenspeicherung durch Browser-Caching von Cookies, Passwörter und Nutzerdaten, die bei erneutem Besuch einer Website dann nicht neu eingegeben werden müssen, aktiv zustimmen. Im Cache werden eigentlich nur Abbilder der Website auf dem Computer oder mobilen Endgerät des Users gespeichert. Einige Browser nutzen den Cache allerdings zur Datensammlung. Browser wie DuckDuckGo verzichten darauf und sind daher DSGVO– und ePrivacy-konform. Hier benötigt das Caching der reinen Websitesnapshots keine Erlaubnis durch den User. Andere wie Google, Firefox und Co. speichern persönliche Nutzerdaten und Daten über das Surfverhalten und geben diese für Analysen- und Marketingzwecke an den Websitebetreiber der besuchten Website weiter. User können dies durch Einstellungen in ihrem Browser unterbinden und dem Datensammeln widersprechen.
Bei WP wird es den Websitebetreibern noch einfacherer gemacht. Es gibt zahlreiche Plug-ins, mit denen sich das Browser-Caching aktivieren lässt. Empfehlenswert sind beispielsweise:
Wenn man sich einmal mit dem Thema beschäftigt hat, muss man bestenfalls nur einmal die Einstellungen für das Browser-Caching seiner Website oder seines Webshops definieren. Somit ist das Browser-Caching eines der SEO-Tools, die sich mit einem Einsatz erledigen lassen und nachhaltige Vorteile bieten. Zu den Vorteilen des Browser-Cachings gehören:
Der einzige wirkliche Nachteil für Websitebetreiber ist die Möglichkeit, dass die Aktualität der aufgerufenen Website nicht auf dem neuesten Stand ist, wenn ein zu langer Speicherzeitraum gewählt wurde und die Ressourcen sich seitdem änderten. Die meisten User wissen allerdings darüber Bescheid und entleeren dann ihren Cache.
