Alles übers Browser-Caching! Unser XXL-Beitrag zur Steigerung deiner Pagespeed

Durch das Browser-Caching müssen Dateien beim Aufruf einer Webseite nicht immer wieder neu heruntergeladen werden, sondern sind im Browser gespeichert.

 

User profitieren davon, dass die Wartezeit bis zum vollständigen Aufruf einer Webseite sinkt. Die kürzere Ladezeit von Seiten hat auch für Website-Betreiber Vorteile: Dank der höheren Pagespeed (Seitenladegeschwindigkeit) wird das Ranking in den Suchmaschinen positiv beeinflusst.

 

Erfahre in unserem Blogbeitrag alles über das Browser-Caching und darüber, wie du es richtig einsetzt!

 

Was ist der Cache im Browser?

Als Browser-Cache bezeichnet man den Zwischenspeicher eines Webbrowsers, in dem Kopien von bereits abgerufenen Ressourcen (z. B. Bilder, JavaScript-Dateien, Videos) gespeichert sind.

 

Wenn eine Seite im Internet bereits einmal aufgerufen und ein Teil der Ressourcen im Browser-Cache gespeichert wurde, lädt die Seite beim zweiten Besuch schneller. Der Grund hierfür ist, dass die Daten nicht nochmal neu heruntergeladen werden müssen, sondern aus dem Cache abrufbar sind.

 

Du kannst es dir den Ablauf des Browser-Cachings so vorstellen:

 

• Wenn du eine bestimmte Seite im Internet erstmalig besuchst, müssen alle Elemente auf dieser Seite heruntergeladen werden. Der Besuch einer Webseite ist also immer mit dem Download von Daten verbunden.
• Einige der Elemente auf Webseiten verändern sich regelmäßig, andere sind statisch. Die statischen Elemente von Webseiten eignen sich für den Browser-Cache. Sie werden in dem Cache deines Browsers gespeichert.
• Beim nächsten Aufruf der Seite greift der Browser auf die in seinem Cache gespeicherten Ressourcen zurück. Er muss folglich weniger Daten beim Server anfordern und der Server muss weniger Daten senden.

 

Das Konzept des Cachings ist weit verbreitet. Es kommt u. a. auch bei Proxy-Servern in größeren Rechennetzwerken zum Einsatz. Bei einer hohen Menge an Teilnehmern im Netzwerk veranlasst der Proxy-Server, dass die Ressourcen aus dem Cache an die Nutzer gesendet werden. So muss er die Anfrage des Clients nicht an den Server weiterleiten und es ist nicht erforderlich, zum Abruf der Ressourcen das Internet zu durchlaufen.

 

Bereits aus der bloßen Definition des Browser-Caches wird dessen großer Vorteil ersichtlich: Es führt zu einer Optimierung der Ladegeschwindigkeit. Da die Kommunikation mit dem Server kürzer ausfällt und Ressourcen direkt aus dem Speicher abrufbar sind, können sie schneller bereitgestellt werden.

 

Vorteil: Geschwindigkeit

Der Vorteil des Browser-Cachings besteht in der Optimierung der Ladegeschwindigkeit. Als SEO-Agentur nutzen wir von der Specht GmbH das Browser-Caching zur Steigerung der Pagespeed (Seitenladegeschwindigkeit). Eine hohe Pagespeed ist für Suchmaschinen wie Google einer der wichtigsten Rankingfaktoren.

 

Je schneller deine gesamte Website und alle zugehörigen Unterseiten beim Aufruf durch Nutzer laden, umso besser sind deine Chancen auf gute Platzierungen in den Suchergebnissen. Hohe Rankings in den Suchergebnissen gehen mit einer besseren Sichtbarkeit, mehr Website-Besuchern und der schnelleren Erreichung deiner individuellen Ziele einher. Außerdem wirkt sich eine verbesserte Pagespeed positiv auf die User Experience (UX) aus.

 

In der Onpage-SEO sollten vor allem die folgenden Möglichkeiten zur Verbesserung der Ladezeit wahrgenommen werden:

 

• Komprimierung von Bildern
• Beseitigung überflüssiger Plug-ins aus dem CMS
• Nutzung des Browser-Caches

 

Google unterstützt Website-Betreiber (Webmaster), SEO-Experten und Online-Marketing-Agenturen in der Suchmaschinenoptimierung. Es liefert zahlreiche nützliche Tools zur Optimierung der eigenen Website, wie etwa Google Search Console und Google Analytics. Auch zur Verkürzung der Ladezeit von Webseiten stellt der Suchmaschinenbetreiber mit Google Pagespeed Insights ein nützliches SEO-Tool zur Verfügung.

 

Nachteil: Aktualität

Ein Nachteil von Browser-Caches ist deren möglicherweise eingeschränkte Aktualität. Als Nutzer kann man nicht wissen, wann Webmaster einzelne Unterseiten oder sogar ganze Websites aktualisieren. Die im Cache gespeicherten Ressourcen sind nach Aktualisierungen womöglich veraltet.

 

Um das Problem der mangelnden Aktualität zu umgehen, sind sowohl Webmaster als auch Nutzer in der Verantwortung. Webmaster entscheiden, ob sie das Caching nutzen möchten und welche Ressourcen für welchen Zeitraum gecached werden sollen – darauf, wie Webmaster die Regeln fürs Caching korrekt definieren, gehen wir im nächsten Abschnitt ein.

 

Während Webmaster zur Gewährleistung der Datenaktualität dazu aufgerufen sind, nur die statischen Ressourcen fürs Caching auszuwählen, haben Nutzer die Verantwortung, ihren Cache regelmäßig zu leeren. Durch die Leerung des Caches werden alle gespeicherten Inhalte im Cache gelöscht.

 

Wird eine Seite nach der Leerung des Caches neu geladen, so werden alle Aktualisierungen dieser Seite angezeigt. Zudem werden im Cache die aktualisierten und somit neuen statischen Ressourcen gespeichert, sodass das nächste Mal neue Inhalte aus dem Cache geladen werden. Die regelmäßige Leerung des Caches hat außerdem den Vorteil, dass die Festplatte des Endgeräts entlastet wird und als Folge dessen die Leistung des Endgeräts wieder höher ist.

 

 

Regeln zur Speicherung von Ressourcen im Browser-Cache korrekt definieren

Bei der Umsetzung des Cachings gibt es zwei Seiten: einmal die theoretische, außerdem die praktische. Auf die praktische Seite gehen wir im nächsten Abschnitt ein. Zunächst möchten wir das bereits in diesem Blogbeitrag vermittelte theoretische Wissen über das Caching erweitern, damit du den praktischen Teil noch besser verstehst. Bis hierhin weißt du Bescheid:

 

• Das Caching von Ressourcen von deiner Website im Browser der Nutzer ist absolut sinnvoll, denn es trägt zu einer höheren Ladegeschwindigkeit deiner Website und aller Unterseiten bei.
• Um zu gewährleisten, dass die im Browser-Cache gespeicherten Ressourcen aktuell sind, müssen Webmaster die Regeln fürs Caching richtig definieren.
• Auch die Nutzer sind in der Verantwortung: Für eine Datenaktualität empfiehlt sich die regelmäßige Leerung des Caches.

 

Wenn du als Webmaster die Regeln fürs Caching definierst, unterscheidest du am besten zwischen drei Zeiträumen: langfristig, mittelfristig und kurzfristig. Du ordnest jede Ressource einem dieser Zeiträume zu. Dadurch stellst du sicher, dass die jeweilige Ressource automatisiert aus dem Cache entfernt wird, wenn deren Aktualität gefährdet ist.

 

Empfehlungen: Wann welche Ressourcen aus dem Cache geladen werden sollten

Zur Gewährleistung der Aktualität der Ressourcen im Browser-Cache solltest du als Webmaster nur statische Ressourcen langfristig (z. B. einen Monat lang; ein Jahr lang) cachen. Beispiele für statische Ressourcen sind JavaScript-Dateien und CSS-Dateien. Hier eine Übersicht über die fürs Caching geeigneten Ressourcen:

 

• CSS, HTML und JavaScript
• Bild-Dateien wie JPG, JPEG, PNG und GIF
• Objekt-Dateien wie Videos und PDFs

 

Man nehme als Beispiel Bilder: Das Logo eines Unternehmens oder die Infografik in einem informativen Artikel ändert sich gar nicht oder erst nach mehreren Jahren. Bilder wie Logos können somit problemlos langfristig im Cache des Browsers gespeichert werden, da sie ihre Aktualität über eine lange Zeit von beispielsweise über einem Jahr behalten.

 

Dadurch, dass auch Ressourcen wie CSS, HTML und JavaScript im Browser-Cache speicherbar sind, kann z. B. das Layout einer Seite gespeichert werden. Vor allem die Speicherung von CSS-Dateien wirkt sich positiv auf die Performance von Webseiten aus. Man kann CSS-Dateien über eine Dauer von einem Monat speichern.

 

Alle anderen Dateien, die sich regelmäßig – vielleicht sogar innerhalb eines Tages mehrmals – ändern, sollten maximal für einige Stunden im Browser-Cache gespeichert werden. Ein Beispiel für kurzfristige Caching-Zeiträume sind HTML-Dateien. Diese dienen u. a. der Formatierung von Texten. Da Texte des Öfteren geändert werden, sollten alle damit verbundenen Dateien möglichst jedes Mal neu geladen werden.

 

Header: Hier werden die Informationen hinterlegt

Im Seitenaufbau gibt es den sogenannten Header. In diesen werden Regeln definiert, die beispielsweise den Austausch von Informationen zwischen Browser und Server oder das Crawling durch die Algorithmen von Google regeln. Da in Headern auch die Regeln fürs Caching hinterlegt werden, spielen diese eine zentrale Rolle im Browser-Caching.

 

Im Caching-Header wird durch Befehle festgelegt, welche Ressource oder Datei zwischengespeichert werden darf. Wird keine entsprechende Information gesetzt, dann erfolgt auch kein Caching. Man differenziert zwischen zwei Caching-Headern: dem Cache-Control-Header sowie dem Expires-Header.

 

Der Cache-Control-Header enthält Informationen dazu, welche Ressource bzw. Datei überhaupt zwischengespeichert werden darf. Dabei sind folgende Anweisungen üblich:

 

• no-cache: Der Browser darf zwischenspeichern, muss aber beim Server nachfragen, ob es sich bei der jeweiligen Ressource um die neueste Version handelt.
• public: Die Ressource darf im Cache gespeichert werden.
• privat: Die Ressource darf im Cache gespeichert werden, jedoch nur vom Browser und nicht von evtl. vorhandenen Proxy-Servern.
• no-store: Es ist nicht gestattet, die Ressource zwischenzuspeichern.

 

Während im Cache-Control-Header mitgeteilt wird, welche Ressourcen und Dateien wo gespeichert werden können, dient der Expires-Header der Definition von Zeiträumen fürs Caching. In diesem Caching-Header lassen sich die Empfehlungen aus dem vorigen Abschnitt dieses Blogbeitrags umsetzen: Durch die konkrete Nennung eines Zeitraums im Expires-Header weiß der Browser, ab welchem Zeitpunkt er beim Server eine neue Kopie der jeweiligen Ressource bzw. Datei anfordern und in seinem Cache zwischenspeichern soll.

 

 

Umsetzung: So nutzt du den Browser-Cache richtig!

Es gibt zwei Möglichkeiten, um das Caching umzusetzen. Der einfache Weg besteht in der Nutzung von Plug-ins im CMS, der komplizierte Weg mit der größeren Kontrolle über das Caching ist die Änderung der htaccess-Datei.

 

Caching über htaccess-Datei einrichten

Die htaccess-Datei ist im Stammverzeichnis der Website unter dem Namen „.htaccess“ zu finden. Öffne die htaccess-Datei und aktiviere zunächst das Browser-Caching über das Modul „mod_headers“, indem du als Administrator den folgenden Befehl einsetzt:

 

a2enmod headers
/etc/init.d/apache2 restart

 

Als nächstes hast du die Möglichkeit, die Dateitypen fürs Caching festzulegen. Dabei kannst du zum einen wie in diesem Beispiel alle Dateitypen zusammenfassen:

 

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

 

Zum anderen kannst du bei der Festlegung der Dateitypen fürs Caching unterschiedliche Vorgaben für die verschiedenen Dateitypen machen, indem du einfach eine neue Files-Match-Zeile beginnst:

 

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

 

Die Angabe „max-age“ informiert darüber, wie viele Sekunden (z. B. 604.800 Sekunden = eine Woche) lang eine Datei im Cache gespeichert werden soll. Die Abkürzungen gif, jpg, jpeg und png sind Formate für Bilder, während css und js für CSS- bzw. JavaScript-Dateien stehen.

 

Der Browser zieht immer die Angaben in dem soeben erwähnten Modul „mod_headers“ vor. Die Angaben im alternativen Modul „mod_expires“ werden nur dann beachtet, wenn es in „mod_headers“ keine Vorgaben dazu gibt, wie lange Dateien geached werden sollen, ehe sie beim Server neu angefordert werden. Du als Webmaster profitierst beim Expires-Modul von einer besseren Übersichtlichkeit.

 

Wenn dir die Angabe der Zeiträume fürs Caching bei „mod_headers“ zu aufwendig ist, startest du über den folgenden Befehl das Expires-Modul:

 

a2enmod expires
/etc/init.d/apache2 restart

 

Von nun an kannst du den Expires-Header mit allen wichtigen Informationen für die Caching-Zeiträume füllen, indem du beispielsweise die folgenden Anweisungen setzt:

 

<IfModule mod_expires.c>

ExpiresActive On

ExpiresByType image/jpg “access 1 year”

ExpiresByType image/jpeg “access 1 year”

ExpiresByType text/css “access 1 month”

ExpiresByType application/javascript “access 1 month”

ExpiresByType application/x-javascript “access 1 month”

ExpiresByType application/x-shockwave-flash “access 1 month”

ExpiresByType image/x-icon “access 1 year”

ExpiresByType text/html “access plus 300 seconds”

</IfModule>

 

Die letztgenannte Zeile „ExpiresByType text/html“ informiert darüber, wie lange die gesamte Seite – also alle darauf befindlichen Inhalte – im Cache gespeichert werden soll.

 

Da sich vor allem die Texte auf HTML-Seiten regelmäßig ändern, haben sich als Zeiträume fürs Caching bei HTML-Seiten Angaben in Höhe von 180 bis 600 Sekunden etabliert – vorausgesetzt, dass diese Seiten häufig besucht sind und/oder die auf den Seiten befindlichen Inhalte häufig von den Website-Betreibern aktualisiert werden.

 

Caching mithilfe von Plug-ins einrichten

Das meistgenutzte CMS (Content-Management-System; System zur Erstellung und Verwaltung von Websites) ist WordPress. Für WordPress gibt es Plug-ins, die eine Erweiterung des Funktionsumfangs ermöglichen. Einige der Plug-ins sind auf das Caching spezialisiert. So ermöglichen u. a. die folgenden WordPress-Plug-ins die Einrichtung sowie Verwaltung eines Cachings im Browser:

 

• WP Rocket
• W3 Total Cache
• WP Fastest Cache
• WP Super Cache
• WP Speed of light
• SG Optimizer
• Swift Performance
• Hummingbird
• Cache Enabler
• Comet Cache

 

Diese 10 WordPress-Plug-ins reichen bereits vollkommen aus, um im Browser ein individuelles Caching einzurichten, das die Leistung der gesamten Website steigert und die User Experience der Website-Besucher durch eine höhere Geschwindigkeit beim Laden der Website deutlich verbessert.

 

Dank den WordPress-Plug-ins können Laien ohne technische Kenntnisse ganz einfach das Caching im Browser regulieren. Darüber hinaus haben einige der WordPress-Plug-ins (z. B. WP Rocket; Swift Performance) weitergehende Vorteile. Sie verhelfen zu einer ganzheitlichen Verbesserung der Performance und Ladezeit der Website.

 

Fazit: Caching einrichten und deutliche SEO-Vorteile erzielen!

Richte als Webmaster oder SEO-Experte das Caching auf Webseiten ein und erziele weitreichende Vorteile in der Suchmaschinenoptimierung! Mithilfe von Plug-ins für WordPress und andere Content-Management-Systeme wird das Caching auch für Laien einfach umsetzbar.

 

Falls du technische Grundlagenkenntnisse hast, brauchst du nicht mal Plug-ins und nutzt ein paar einfache Befehle im Header deiner Seiten, um das Browser-Caching zu individualisieren und deinen Website-Besuchern ein gutes Nutzererlebnis zu bieten.

 

FAQ: Fragen und Antworten zum Thema „Browser-Caching“

In diesem letzten Abschnitt unseres Blogbeitrags haben wir einige der häufigsten Fragen von Usern zusammengetragen. Falls auch du eine Frage hast, geben wir dir als Experten für Suchmaschinenoptimierung gern eine adäquate Antwort. Nehme Kontakt zu uns auf und wir melden uns zurück!

 

Wie können Website-Besucher das Caching beeinflussen?

Internetnutzer können das Caching auf vielfältige Weise beeinflussen. So können sie beispielsweise unter den Browser-Einstellungen das Caching komplett deaktivieren. Dies würde dazu führen, dass unabhängig von den Anweisungen der Webmaster keine einzige Ressource oder Datei im Browser der Nutzer gespeichert würde.

 

Ferner können Website-Besucher ein Höchstalter für Ressourcen festlegen oder für eine einzelne Webseite Caching-Regeln definieren, die von den Caching-Regeln für den Rest der Website abweichen. Außerdem besteht immer die Möglichkeit zur Leerung des Caches.

 

Wie kann man den Browser-Cache löschen?

Dieser Prozess variiert mit dem jeweiligen Browser.

 

Bei Google Chrome löschen Website-Besucher den Cache, indem sie diesen zunächst mit der Tastenkombination „Strg + Shift + Entf“ aufrufen. Daraufhin können sie die Bilder und sonstigen Objekte im Cache markieren und deren Löschung veranlassen.

 

Mit derselben Tastenkombination wie in Google Chrome können User auch den Cache im Internet Explorer leeren. Nach Verwendung der Tastenkombination öffnet sich ein Fenster mit der Info „Browserdaten löschen“. Durch die Auswahl der Option „Zwischengespeicherte Daten und Dateien“ und den Klick auf „Löschen“ wird der Browser-Cache geleert.

 

Beim nächsten Besuch einer zuvor bereits besuchten Website werden nach der Leerung des Caches nicht mehr die Dateien aus dem Cache genutzt. Stattdessen fragt der Browser beim Server die aktuelle Version einer Website an.

 

Wodurch unterscheiden sich das Browser-Caching und das Server-Caching?

Während beim Browser-Caching Ressourcen auf der Festplatte der Website-Besucher gespeichert werden, werden diese beim Server-Caching auf dem Server des Webmasters gespeichert. Somit trägt auch das Server-Caching zu einer höheren Seitenladegeschwindigkeit bei.

 

Die Unterschiede zwischen Browser- und Server-Caching bestehen somit in den Ebenen der Datenverwaltung, denn es werden verschiedene Arten von Daten an verschiedenen Orten gespeichert.