HTTP Caching 101: Wissenswertes

Was ist HTTP-Caching

HTTP-Caching ist eine Technologie, die die Web-Performance verbessert, indem sie die Serverlast reduziert, die Antwortzeiten für Clients beschleunigt und Netzwerkbandbreite spart. Es gibt zwei Arten von HTTP-Caching: erzwungenes Caching und verhandeltes Caching.

Erzwingendes Caching

Erzwingendes Caching ermöglicht es dem Client, lokal zwischengespeicherte Ressourcen direkt innerhalb eines bestimmten Zeitraums zu verwenden, ohne eine Anfrage an den Server zu senden. Erzwingendes Caching wird durch Antwortheader gesteuert, die vom Server angegeben werden, hauptsächlich durch zwei Felder: Cache-Control und Expires.

Cache-Control

Cache-Control ist ein Allzweck-Header, der die maximale Gültigkeitsdauer (max-age), ob der Cache gemeinsam genutzt werden kann (public oder private) und ob Änderungen zulässig sind (no-cache oder no-store) angibt.

Beispiel:

Cache-Control: max-age=3600

Das Obige gibt an, dass die Ressource für 3600 Sekunden gültig ist und zwischengespeichert werden kann.

Expires

Expires ist ein veraltetes Feld, das die absolute Ablaufzeit für den Cache angibt.

Beispiel:

Expires: Wed, 23 Aug 2024 03:36:26 GMT

Dies bedeutet, dass die Ressource am 23. August 2024 um 3:36:26 Uhr abläuft. Wenn sowohl Cache-Control als auch Expires vorhanden sind, hat Cache-Control Vorrang.

Verhandeltes Caching

Verhandeltes Caching erfordert, dass der Client bei jeder Anfrage beim Server überprüft, ob die Ressource aktualisiert wurde. Wenn sie nicht aktualisiert wurde, antwortet der Server mit einem Statuscode 304 und einem leeren Antworttext, sodass der Client den lokalen Cache weiterhin verwenden kann. Wenn sie aktualisiert wurde, gibt der Server einen Statuscode 200 und die neue Ressource zurück, wodurch der lokale Cache ersetzt wird. Verhandeltes Caching beinhaltet Header sowohl vom Server als auch vom Client, hauptsächlich Last-Modified/If-Modified-Since und ETag/If-None-Match.

Last-Modified/If-Modified-Since

Last-Modified ist ein serverseitiges Feld, das die letzte Änderungszeit der Ressource angibt. Beispiel:

Last-Modified: Tue, 22 Aug 2024 02:36:26 GMT

Dies bedeutet, dass die Ressource zuletzt am 22. August 2024 um 2:36:26 Uhr geändert wurde.

If-Modified-Since ist ein clientseitiges Feld, das die letzte Abrufzeit der Ressource angibt. Beispiel:

If-Modified-Since: Tue, 22 Aug 2024 02:36:26 GMT

Dies bedeutet, dass der Client die Ressource am 22. August 2024 um 2:36:26 Uhr abgerufen hat. Wenn die beiden Zeitstempel gleich sind oder Last-Modified früher liegt, wurde die Ressource nicht aktualisiert. Wenn Last-Modified später liegt, wurde die Ressource aktualisiert.

ETag/If-None-Match

ETag ist ein serverseitiges Feld, das den eindeutigen Bezeichner einer Ressource darstellt. Beispiel:

ETag: '5d3a9f6d-1f86'

Dies gibt an, dass der Bezeichner der Ressource "5d3a9f6d-1f86" ist.

If-None-Match ist ein clientseitiges Feld, das den erwarteten Bezeichner einer Ressource angibt. Beispiel:

If-None-Match: '5d3a9f6d-1f86'

Dies gibt an, dass der Client erwartet, dass der Ressourcenbezeichner "5d3a9f6d-1f86" ist. Wenn die beiden Werte übereinstimmen, wurde die Ressource nicht aktualisiert. Wenn sie sich unterscheiden, wurde die Ressource aktualisiert.

HTTP-Caching Best Practices

Die Kombination von verhandeltem Caching und erzwungenem Caching kann unnötige Netzwerkanfragen effektiv reduzieren und gleichzeitig sicherstellen, dass Benutzer immer die neuesten Inhalte haben.

Allgemeine Vorgehensweise:

Erzwingendes Caching: Legen Sie für statische Ressourcen (z. B. CSS, JS, Bilder) eine lange Cache-Dauer fest. Dadurch können Browser Ressourcen direkt aus dem lokalen Speicher abrufen, ohne den Server zu kontaktieren.

Verhandeltes Caching: Verwenden Sie für Ressourcen, die sich ändern können, verhandeltes Caching. Browser senden Anfragen, um zu prüfen, ob sich die Ressource geändert hat. Wenn nicht, antwortet der Server mit einer 304 Not Modified-Antwort, sodass der Browser den lokalen Cache verwenden kann. Wenn sich die Ressource geändert hat, antwortet der Server mit einer 200 OK-Antwort und der aktualisierten Ressource.

Beispielimplementierung:

Angenommen, wir verwenden Express.js als Backend-Framework:

const express = require('express');
const app = express();

// Erzwingendes Caching: Cache für statische Ressourcen festlegen
app.use(
  '/static',
  express.static('public', {
    maxAge: '1y', // Cache-Dauer beträgt ein Jahr
  })
);

// Verhandeltes Caching: Verwendung von ETag und Last-Modified
app.get('/resource', (req, res) => {
  const content = '...'; // Ressourceninhalt abrufen
  const etag = generateETag(content); // ETag generieren

  // Den If-None-Match-Header prüfen
  if (req.headers['if-none-match'] === etag) {
    res.status(304).end(); // Ressource unverändert, 304 zurückgeben
  } else {
    res.setHeader('ETag', etag);
    res.send(content); // Ressource geändert, neuen Inhalt zurückgeben
  }
});

function generateETag(content) {
  return require('crypto').createHash('md5').update(content).digest('hex');
}

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

Wichtige Überlegungen

Versionskontrolle: Um die Effektivität des erzwungenen Cachings zu maximieren, fügen Sie Versionsinformationen in Ressourcen-URLs ein, z. B. /static/js/main.2024082301.js. Wenn Ressourcen aktualisiert werden, ändern Sie die Versionsnummer, um sicherzustellen, dass Benutzer immer die neueste Version erhalten.
Kosten des verhandelten Cachings: Während das verhandelte Caching unnötige Datenübertragungen reduziert, erfordert es dennoch einen Netzwerk-Roundtrip. Für Ressourcen, die sich selten ändern, ist erzwungenes Caching möglicherweise effizienter.

Wir sind Leapcell, Ihre erste Wahl für das Hosten von Backend-Projekten

Leapcell ist die Serverless-Plattform der nächsten Generation für Webhosting, asynchrone Aufgaben und Redis:

Multi-Language Support

Entwickeln Sie mit Node.js, Python, Go oder Rust.

Unbegrenzte Projekte kostenlos bereitstellen

Zahlen Sie nur für die Nutzung – keine Anfragen, keine Gebühren.

Unschlagbare Kosteneffizienz

Pay-as-you-go ohne Leerlaufgebühren.
Beispiel: 25 $ unterstützen 6,94 Mio. Anfragen bei einer durchschnittlichen Antwortzeit von 60 ms.

Optimierte Entwicklererfahrung

Intuitive Benutzeroberfläche für mühelose Einrichtung.
Vollautomatische CI/CD-Pipelines und GitOps-Integration.
Echtzeitmetriken und -protokollierung für umsetzbare Erkenntnisse.

Mühelose Skalierbarkeit und hohe Leistung

Auto-Skalierung zur einfachen Bewältigung hoher Parallelität.
Kein betrieblicher Overhead – konzentrieren Sie sich einfach auf den Aufbau.

Erfahren Sie mehr in der Dokumentation!

Folgen Sie uns auf X: @LeapcellHQ