Wie funktioniert der Browser-Cache?

Der Browser-Cache ist ein Mechanismus, der von Browsern verwendet wird, um Webseitenressourcen lokal zu speichern. Dies führt zu Leistungssteigerungen, minimiert den Bandbreitenverbrauch und schafft insgesamt ein schnelleres Erlebnis. In diesem Artikel erklären wir, wie Browser-Caching funktioniert und wie Sie es auf Ihrer Website implementieren.

Was ist der Browser-Cache?

Der Cache ist eine Software- oder Hardwarekomponente, die zum vorübergehenden Speichern von Werten für einen schnelleren zukünftigen Zugriff verwendet wird. Der Browser -Cache ist eine kleine Datenbank mit Dateien, die heruntergeladene Webseitenressourcen wie Bilder, Videos, CSS, Javascript usw. enthält. Die Grundidee dahinter ist folgende:

Der Browser fordert einige Inhalte vom Webserver an. Wenn sich der Inhalt nicht im Browser-Cache befindet, wird er direkt vom Webserver abgerufen. Wenn der Inhalt zuvor zwischengespeichert wurde, umgeht der Browser den Server und lädt den Inhalt direkt aus seinem Cache.

Inhalt wird als veraltet angesehen, je nachdem, ob der zwischengespeicherte Inhalt abgelaufen ist oder nicht. Frisch hingegen bedeutet, dass der Inhalt sein Ablaufdatum noch nicht überschritten hat und direkt aus dem Browser-Cache bereitgestellt werden kann, ohne den Server einzubeziehen.

Der Begriff Validierung bezieht sich auf Inhalte, die gegen die neueste Version, die der Server besitzt, geprüft werden müssen. Kurz gesagt, um festzustellen, ob der Inhalt veraltet ist oder nicht. Eine Invalidierung erfolgt, wenn der Inhalt vor Ablauf des Ablaufdatums aus dem Cache entfernt wurde. Dies kann vom Server erzwungen werden, wenn sich der Inhalt geändert hat und der Browser die neueste Version haben muss, um keine Probleme zu verursachen.

Browser-Caching kann von Webentwicklern und Administratoren durch die Verwendung spezifischer HTTP-Header genutzt werden. Diese Header weisen den Webbrowser an, wann eine Ressource zwischengespeichert werden soll, wann nicht und wie lange. Die Verwendung von HTTP-Cache-bezogenen Headern kann oft frustrierend sein, da es in den verschiedenen Reinkarnationen des HTTP-Protokolls eine ziemliche Überschneidung mit Headern gibt. Fügen Sie der Mischung Dinge wie den einen oder anderen Web-Proxy dazwischen, alte Browser, widersprüchliche Caching-Richtlinien und Implementierungen (z. B. verschiedene WordPress-Plugins) hinzu, und es kann schnell zu Kopfschmerzen führen.

Browser-Caching-Header

Der Satz von Regeln, die definieren, was zwischengespeichert werden kann oder nicht und für wie lange, wird als Caching-Richtlinie bezeichnet. Dies wird vom Websitebesitzer durch die Verwendung von Caching-Response-Headern implementiert. Obwohl dies auf viele verschiedene Arten erreicht werden kann, sollten Sie sich am Anfang wahrscheinlich nur mit der Cache-Steuerung befassen.

Cache-Steuerung

Der Cache-Control-Header wurde in HTTP/1.1 eingeführt und gilt als die modernste Implementierung, die es gibt. Es gibt verschiedene Werte, die Sie verwenden können, je nachdem, wie sich Browser verhalten sollen. Dadurch ist es sehr vielseitig. Nachfolgend finden Sie eine Liste der Cache-Control-Anweisungen:

• Kein Cache
  Weist Ihren Webbrowser an, nicht sofort auf den Cache zu verweisen, sondern den Inhalt gegen den Server zu validieren. Wenn es frisch ist, kann es aus dem Cache serviert werden.
• Kein Laden
  Weist den Browser an, den Inhalt in keiner Weise zwischenzuspeichern. Es wird hauptsächlich verwendet, wenn es um sensible Daten geht oder sich häufig ändernde Daten.
• Öffentlichkeit
  Markiert den Inhalt als öffentlich, was bedeutet, dass er vom Browser und allen zwischengeschalteten Parteien (z. B. Proxys usw.) zwischengespeichert werden kann.
• Privatgelände
  Wird verwendet, um den Inhalt als privat zu markieren, was bedeutet, dass er nur vom Browser und nicht von zwischengeschalteten Proxys und dergleichen zwischengespeichert werden kann. Dabei handelt es sich in der Regel um nutzerbezogene Daten.
• Max-Alter
  Max-age stellt die maximale Zeit in Sekunden dar, die ein Inhalt im Browser-Cache verbleiben kann, bevor der Client ihn erneut validieren muss. Im Gegensatz zum Expires-Header, den wir gleich besuchen werden, definiert max-age einen relativen Wert in Sekunden ab dem Zeitpunkt, zu dem der Inhalt zwischengespeichert wurde, und kein absolutes Ablaufdatum.
• S-max
  Dies ist ähnlich wie max-age, wird aber nur für zwischengeschaltete Caches verwendet.
• Muss erneut validiert werden
  Zwingt den Browser, den Inhalt jedes Mal neu zu validieren, wenn er ihn benötigt, anstatt ihn nur direkt aus dem Browser-Cache bereitzustellen.
  Dies ist praktisch, falls eine Netzwerkunterbrechung auftritt.
• Proxy-erneut validieren
  Ähnlich wie must-revalidate, gilt aber nur für zwischengeschaltete Caches.
• keine Transformation
  Weist den Browser an, den vom Server empfangenen Inhalt in keiner Weise zu transformieren (normalerweise Komprimierung usw.).

Tag

Der Etag-Antwortheader wird verwendet, um eine bestimmte Ressource zu identifizieren. Jedes Mal, wenn sich eine bestimmte Ressource ändert, wird ein neuer Etag generiert. Auf diese Weise wird Bandbreite gespart, da der Webserver keine vollständige Antwort geben muss, wenn sich der Etag nicht geändert hat. Folglich ist der Etag-Header standardmäßig auf Nginx und Apache aktiviert, und Etag-Werte werden automatisch generiert, sodass Sie nichts angeben müssen.

Hosten Sie Ihre Website mit Pressidium

60- TÄGIGE GELD-ZURÜCK-GARANTIE

SEHEN SIE UNSERE PLÄNE

Läuft ab

Dies wurde in HTTP/1.0 eingeführt und definiert ein bestimmtes Datum in der Zukunft, an dem der Inhalt als veraltet betrachtet wird. Es ist praktisch ein „Mindesthaltbarkeitsdatum“ für Inhalte. Beispiel: Läuft ab: Do, 25. Mai 2017 12:30:00 GMT

Pragma

Dies ist ein etwas veralteter HTTP/1.0-Header, der hauptsächlich aus Gründen der Abwärtskompatibilität verwendet wird. Durch das Einfügen von Pragma: no-cache verhält sich Ihr Browser ähnlich wie Cache-Control: no-cache .

So implementieren Sie eine Caching-Richtlinie auf Ihrer Website

Es gibt zwei Möglichkeiten, eine Caching-Richtlinie auf Ihrer Website zu implementieren. Die erste besteht darin, die Caching-Antwortheader in der Webserverkonfiguration zu definieren. Die zweite besteht darin, dies direkt in PHP zu tun. Nachfolgend finden Sie Beispiele für die beiden beliebtesten Webserver, Apache2 und Nginx:

Apache2

<filesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
Header set Cache-Control "max-age=84600, public"
</filesMatch>

Nginx

location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
expires 365d;
add_header Cache-Control "public" ;
}

Wie Sie sehen können, ist es ziemlich einfach. Im ersten Beispiel verwenden wir die FileMatch-Direktive von Apache2, um einen Abgleich mit einem bestimmten Satz von Dateitypen (.ico, .pdf usw.) vorzunehmen und sie mit einem maximalen Alter von 84600 Sekunden öffentlich zu machen. Im zweiten gleichen wir wieder bestimmte Dateitypen ab, indem wir die Standortdirektive von nginx verwenden, und geben ein maximales Alter von 365 Tagen an. Wir definieren sie auch als „öffentlich“, indem wir die Kopfzeile hinzufügen-Klausel verwenden.

PHP

Wenn Sie Response-Header direkt zu Ihrem Code hinzufügen möchten, verwenden Sie einfach den Header-Befehl von PHP.

<?php
header("Cache-Control: no-cache");
header("Expires: Sat, 26 Jul 1997 05:00:00 GMT");
header("Cache-Control: max-age= 604800");
?>

So testen Sie, ob es funktioniert

Sie können ganz einfach testen, ob Ihre Browser-Caching-Regeln angezeigt werden, indem Sie beispielsweise die Firefox-Webkonsole oder die Entwicklertools von Chrome verwenden:

1. Klicken Sie oben rechts auf das Hamburger-Symbol.
2. Wählen Sie Weitere Tools > Entwicklertools aus
3. Geben Sie Ihre URL in die Adressleiste ein und drücken Sie die Eingabetaste.

Sie sollten eine Liste mit Anfragen sehen, während Ihre URL geladen wird. Wählen Sie eine Ressource aus, indem Sie darauf klicken. Überprüfen Sie die Antwortkopfzeilen auf der rechten Seite und insbesondere den Statuscode. Es gibt den 200-HTTP-Code aus, gibt aber in Klammern an, dass er aus dem Speichercache stammt.

Das bedeutet, dass die Ressource automatisch aus dem lokalen Cache-Speicher geladen wurde, anstatt sie vom Server anzufordern.

In Fällen, in denen Sie eine „must-revalidate“-Klausel in Ihrem Cache-Control-Header haben, lautet der Statuscode 304 (nicht geändert). Dies bedeutet, dass Ihr Browser die Ressource gegenüber dem Server erneut validiert hat und der Server geantwortet hat, dass sich der Inhalt nicht geändert hat, sodass er aus dem Cache des Browsers bereitgestellt werden kann.

Deaktivieren Sie den Cache, indem Sie das Kontrollkästchen Cache deaktivieren aktivieren und auf Neu laden klicken.

In diesem Fall sehen Sie, dass der Statuscode 200 ist, ohne dass darauf hingewiesen wird, dass der Cache verwendet wurde. Der Browser forderte die Ressource vom Webserver an, und der Webserver antwortete, indem er eine neue Kopie zurücklieferte.

Fazit

Browser-Caching und Caching-Richtlinien können ziemlich kompliziert werden. Aber das Experimentieren mit Cache-Control zu beginnen, wie wir gezeigt haben, ist einfach. Meistens reicht die Implementierung einer „allgemeinen“ Caching-Richtlinie für statische Assets aus, um die Leistung Ihrer Website zu verbessern. Es fügt jedoch zu so vielen anderen Dingen eine zusätzliche Ebene von „Sorgen“ hinzu, und wir glauben, dass dies nicht so sein sollte. Folgen Sie uns in unserem nächsten Beitrag, in dem wir zeigen, wie wir das Browser-Caching in Pressidium implementieren, wodurch all diese Sorgen verschwinden.