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:
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,203oder206. - 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).
<ph type="x-smartling-placeholder">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.
Joomla
Siehe Cache.
WordPress
Siehe Browser-Caching.