Browser-Caching: der Cache als SEO-Tool

Was ist Browser Caching und wie nutze ich es?
Andreas Kirchner

Autor: Andreas Kirchner

Kontakt: Profil Xing

Datum: 28.01.2017, 11:26 Uhr

Was ist Browser-Caching?

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?

Wie verhilft Browser-Caching zum besseren Google-Ranking?

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 rasendschnell 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, u, 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.

Welche Dateitypen kann man im Browser zwischenspeichern?

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:

  • JavaScript Dateien
  • CSS-Dateien
  • Binäre Objektdateien wie das PDF oder Mediendaten wie MOV, WAV etc.
  • Bilddateien wie JPG, GIF, PNG etc.

Wie legt man die Ressourcen für das Browser-Caching fest?

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:

  • „Last-Modified“ oder „ETag“

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.

Wie lange sollten Ressourcen beim Browser-Cache gespeichert 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, werden 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:

  • „Expires“ oder „Cache-Control max-age“

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.

Was ist der Nachteil einer zu langen Speicherzeit beim Browser-Caching?

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.

Wie wird das Ablaufdatum beim Browser-Caching festgelegt?

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”

Einfach Messung der Aufbaugeschwindigkeit mit Google Pagespeed Insights

Wie testet man die Ladezeit nach dem Browser-Caching?

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.

Warum lädt die Website trotz Caching langsam?

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.

Was ist der URL-Fingerprint?

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.

DSGVO, ePrivacy und Browser-Caching

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 keiner 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.

WordPress und Browser-Caching

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:

Was sind die Vorteile des Browser-Cachings?

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:

  • verbessertes Ranking
  • Suchmaschinenfreundlichkeit
  • Steigerung der Userexperience und Performance
  • geringere Absprungrate
  • Reduzierung des Servertraffics
  • schnellerer Aufbau der Website

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 seit dem änderten. Die meisten User wissen allerdings darüber Bescheid und entleeren dann ihren Cache.

Quellen:

Das könnte Sie auch interessieren

Besser in der Voice Search gefunden werden

Besser in der Voice Search gefunden werden

Vom: 27. Februar, 2018 | Autor: Andreas Kirchner

Viele Webseitenbetreiber haben aktuell das Problem, in der Voice Search nicht gefunden zu werden. John ...

mehr erfahren
Lead Ads in Facebook

Lead Ads bei Facebook: Was ist das?

Vom: 20. Juni, 2017 | Autor: Andreas Kirchner

Lead Ads bei Facebook sind eine hervorragende neue Möglichkeit, für optimales Online-Marketing. Wenn Sie mit ...

mehr erfahren
Passende Themen für die Website finden

Passende und gute Themen für die Website finden

Vom: 17. Juli, 2017 | Autor: Andreas Kirchner

Eine Website ist so gut, wie die Themen, die sie beinhaltet. In diesem Artikel möchten ...

mehr erfahren
zurück

Unsere Blogthemen

Rückruf anfordern und Vorteile nutzen

Nehmen Sie gerne mit uns Kontakt auf.
Wir werden uns schnellstens mit Ihnen in Verbindung setzen.

Das interessiert unsere Kunden

Fotolia / Fremde Marken im Anzeigentext
Wer effektives und gewinnbringendes Online-Marketing nutzen möchte weiß, dass dieses nur erfolgreich wird, wenn man eine ...
mehr erfahren
Was ist Google AMP?

Was ist Google AMP?

10078 Aufrufe

Google arbeitet fortwährend daran, das Surfen auf mobilen Endgeräten noch einfacher und komfortabler zu gestalten. Deshalb ...
mehr erfahren
Google Adwords Keyword Optionen
Keyword Optionen sind die Optionen, die Google Ihnen für die Auslieferung der AdWords-Werbeanzeigen anbietet. Sie können ...
mehr erfahren
http-Statuscode

http-Statuscodes

10090 Aufrufe

Sobald ein User Ihre Website aufruft, sendet der Browser (oder ein anderer Client) eine Anfrage an ...
mehr erfahren

Einfach und direkt anfragen:

Ob kostenlose Beratung oder unverbindlicher AdWords-Konto-Check.
Wir sind für Sie da!

Tel.: +49 40 570 10 75 50

Nehmen Sie gerne mit uns Kontakt auf.
Wir werden uns schnellstens mit Ihnen in Verbindung setzen.

Melden Sie sich jetzt für E-Mail-Updates aus der Online Marketing-Welt an!

Halten Sie sich mit dem Newsletter von Hanseranking zu aktuellen Online-Marketing Themen auf dem Laufenden!