Mithilfe von HTTP-Caching können Sie die Seitenladezeit bei wiederholten Besuchen verkürzen.
Wenn ein Browser eine Ressource anfordert, kann der Server, der die Ressource bereitstellt, dem Browser mitteilen, wie lange er die Ressource vorübergehend speichern oder im Cache speichern soll. Bei jeder nachfolgenden Anfrage für diese Ressource verwendet der Browser seine lokale Kopie, anstatt sie aus dem Netzwerk abzurufen.
Gründe für den Fehler bei der Lighthouse-Überprüfung der Cache-Richtlinie
Lighthouse kennzeichnet alle statischen Ressourcen, die nicht im Cache gespeichert sind:
Lighthouse betrachtet eine Ressource als im Cache speicherbar, wenn alle folgenden Bedingungen erfüllt sind:
- Die Ressource ist eine Schriftart, ein Bild, eine Mediendatei, ein Skript oder ein Stylesheet.
- Die Ressource hat den HTTP-Statuscode
200
,203
oder206
. - Für die Ressource gibt es keine explizite Richtlinie, die das Caching untersagt.
Wenn eine Seite die Prüfung nicht besteht, listet Lighthouse die Ergebnisse in einer Tabelle mit drei Spalten auf:
URL | Der Speicherort der cachbaren Ressource |
Cache-TTL | Die aktuelle Cachedauer der Ressource |
Größe der Übertragung | Eine Schätzung der Daten, die Ihre Nutzer speichern würden, wenn die markierte Ressource im Cache gespeichert worden wäre |
Statische Ressourcen mit HTTP-Caching im Cache speichern
Konfigurieren Sie Ihren Server so, dass er den HTTP-Antwortheader Cache-Control
zurückgibt:
Cache-Control: max-age=31536000
Die Anweisung max-age
teilt dem Browser mit, wie lange die Ressource in Sekunden im Cache gespeichert werden soll.
In diesem Beispiel wird die Dauer auf 31536000
festgelegt, was einem Jahr entspricht: 60 Sekunden × 60 Minuten × 24 Stunden × 365 Tage = 3.153.6.000 Sekunden.
Sie sollten unveränderliche statische Assets lange Zeit im Cache speichern, z. B. ein Jahr oder länger.
Verwenden Sie no-cache
, wenn sich die Ressource ändert und Aktualität wichtig ist, Sie aber trotzdem einige der Geschwindigkeitsvorteile des Cachings nutzen möchten.
Der Browser speichert eine Ressource, die auf no-cache
festgelegt ist, weiterhin im Cache, prüft aber zuerst beim Server, ob die Ressource noch aktuell ist.
Eine längere Cache-Dauer ist nicht immer besser. Letztendlich müssen Sie selbst entscheiden, welche Cache-Dauer für Ihre Ressourcen optimal ist.
Es gibt viele Anweisungen, um anzupassen, wie der Browser verschiedene Ressourcen im Cache speichert. Weitere Informationen zum Caching von Ressourcen finden Sie im Leitfaden Der HTTP-Cache: Ihre erste Verteidigungslinie und im Codelab HTTP-Caching-Verhalten konfigurieren.
Gecachte Antworten in den Chrome-Entwicklertools prüfen
Wenn Sie sehen möchten, welche Ressourcen der Browser aus seinem Cache abruft, öffnen Sie in den Chrome-Entwicklertools den Tab Netzwerk:
- Drücken Sie
Control+Shift+J
(oderCommand+Option+J
auf einem Mac), um die Entwicklertools zu öffnen. - Klicken Sie auf den Tab Netzwerk.
Anhand der Spalte Größe in den Chrome-Entwicklertools können Sie prüfen, ob eine Ressource im Cache gespeichert wurde:
Chrome stellt die am häufigsten angeforderten Ressourcen aus dem Arbeitsspeicher-Cache bereit. Dies ist sehr schnell, wird jedoch beim Schließen des Browsers gelöscht.
Prüfen Sie die HTTP-Header-Daten, um sicherzustellen, dass der Cache-Control
-Header einer Ressource wie erwartet festgelegt ist:
- Klicken Sie in der Tabelle „Anfragen“ in der Spalte Name auf die URL der Anfrage.
- Klicken Sie auf den Tab Header.
Stackspezifische Anleitung
Drupal
Legen Sie die Maximale Lebensdauer für Browser- und Proxy-Cache auf der Seite Verwaltung > Konfiguration > Entwicklung fest. Weitere Informationen zum Drupal-Cache und zur Leistungsoptimierung
Joomla
Siehe Cache.
WordPress
Siehe Browser-Caching.