Diese Seite wurde von der Cloud Translation API übersetzt.

Statische Inhalte mit einer effizienten Cache-Richtlinie bereitstellen

HTTP-Caching kann 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 sie 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.

So schlägt die Prüfung der Lighthouse-Cache-Richtlinie fehl

Leuchtturm kennzeichnet alle statischen Ressourcen, die nicht im Cache gespeichert sind:

Screenshot von Lighthouse: Statische Assets mit einer effizienten Prüfung der Cache-Richtlinie bereitstellen

Lighthouse betrachtet eine Ressource im Cache wenn alle folgenden Bedingungen erfüllt sind:

Bei der Ressource handelt es sich um eine Schriftart, ein Bild, eine Mediendatei, ein Skript oder ein Stylesheet.
Die Ressource hat den HTTP-Statuscode 200, 203 oder 206.
Die Ressource hat keine explizite No-Cache-Richtlinie.

Wenn eine Seite die Prüfung nicht besteht, Lighthouse listet die Ergebnisse in einer Tabelle mit drei Spalten auf:

URL	Der Standort der im Cache speicherbaren Ressource
Cache-TTL	Die aktuelle Cache-Dauer 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

Konfiguriere deinen 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.

Unveränderliche statische Assets sollten Sie lange im Cache speichern, z. B. ein Jahr oder länger.

Verwenden Sie no-cache, wenn es auf Ressourcenänderungen und -aktualität ankommt. Sie möchten aber trotzdem die Geschwindigkeitsvorteile des Cachings nutzen. Eine Ressource, die auf no-cache festgelegt ist, wird im Browser weiterhin im Cache gespeichert. prüft aber zuerst beim Server, ob die Ressource noch aktuell ist.

Eine längere Cache-Dauer ist nicht immer besser. Letztendlich können Sie selbst entscheiden, welche Cache-Dauer für Ihre Ressourcen optimal ist.

Es gibt viele Anweisungen, mit denen Sie die Art und Weise anpassen können, wie der Browser verschiedene Ressourcen im Cache speichert. Weitere Informationen zum Caching von Ressourcen in Der HTTP-Cache: Ihre erste Verteidigungslinie und Codelab zum Konfigurieren des HTTP-Caching-Verhaltens.

So prüfen Sie im Cache gespeicherte Antworten in den Chrome-Entwicklertools

Um zu sehen, welche Ressourcen der Browser aus dem Cache erhält, Öffnen Sie in den Chrome-Entwicklertools den Tab Network (Netzwerk):

[Kommentar]: <> (Die folgende Liste war eine Kurzwahl von web.dev, aber sie wurde nicht aus dem Englischen in eine andere Sprache übersetzt.) 1. Drücken Sie Control+Shift+J (oder Command+Option+J auf einem Mac), um die Entwicklertools zu öffnen. 2. 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, was sehr schnell ist. wird jedoch beim Schließen des Browsers gelöscht.

So überprüfen Sie, ob der Header Cache-Control einer Ressource wie erwartet festgelegt ist: überprüfen Sie die HTTP-Header-Daten:

Klicken Sie in der Tabelle „Anfragen“ in der Spalte Name auf die URL der Anfrage.
Klicken Sie auf den Tab Headers (Header).

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

Stack-spezifische Anleitung

Drupal

Unter Administration > Browser- und Proxy-Cache-Höchstalter können Sie die Einstellung für den Cache festlegen. Konfiguration > Seite Entwicklung. Siehe Drupal-Leistungsressourcen.