Diese Seite wurde von der Cloud Translation API übersetzt.

Statische Inhalte mit einer effizienten Cache-Richtlinie bereitstellen

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:

Screenshot der Lighthouse-Prüfung „Statische Assets mit einer effizienten Cache-Richtlinie bereitstellen“

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 oder 206.
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 (oder Command+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:

Die Spalte „Größe“.

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.

Cache-Control-Header über den Tab „Header“ prüfen — Sehen Sie sich den `Cache-Control`-Header auf dem Tab **Headers** an.

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