Nginx-Caching für statische Assets: Schnellere Websites

Warum Caching statischer Assets wichtig ist

Jedes Mal, wenn ein Nutzer Ihre Website besucht, fordert sein Browser Dutzende statischer Assets an: CSS-Dateien, JavaScript, Bilder, Schriftarten und mehr. Ohne ordnungsgemäßes Caching trifft jede Anfrage Ihren Server, was die Ladezeiten und den Bandbreitenverbrauch erhöht. Nginx, ein Hochleistungs-Webserver, kann dies drastisch verbessern, indem er Browser anweist, diese Assets lokal zu cachen, und sie serverseitig zwischenspeichert.

In dieser Anleitung erfahren Sie, wie Sie Nginx konfigurieren, um statische Assets effektiv zu cachen, wodurch Latenz und Serverlast reduziert werden.

Browser-Caching vs. serverseitiges Caching verstehen

Es gibt zwei Hauptarten von Caching, die hier relevant sind:

• Browser-Caching: Der Browser speichert Assets lokal basierend auf HTTP-Headern wie Cache-Control und Expires. Bei späteren Besuchen werden Assets von der Festplatte geladen, wodurch Netzwerkanfragen vermieden werden.
• Serverseitiges Caching: Nginx speichert Antworten im Arbeitsspeicher oder auf der Festplatte und liefert sie bei wiederholten Anfragen direkt aus, wodurch die Backend-Last reduziert wird.

Beide sind entscheidend für die Performance. Wir behandeln beide.

Schritt 1: Browser-Caching mit Expires-Headern konfigurieren

Der einfachste Weg, Browser-Caching zu aktivieren, ist das Hinzufügen von expires-Direktiven zu Ihrer Nginx-Konfiguration. Dadurch werden die Header Expires und Cache-Control gesetzt.

Öffnen Sie die Konfigurationsdatei Ihrer Website (z. B. /etc/nginx/sites-available/example.com) und fügen Sie einen Location-Block für statische Assets hinzu:

location ~* \.(css|js|jpg|jpeg|png|gif|ico|svg|woff|woff2|ttf|eot)$ {
    expires 1y;
    add_header Cache-Control "public, immutable";
}

Dies weist den Browser an, diese Dateien für ein Jahr zu cachen. Die immutable-Direktive zeigt an, dass sich die Datei nie ändern wird, sodass der Browser beim Neuladen nicht einmal eine erneute Validierung durchführt.

Best Practice: Verwenden Sie versionierte Dateinamen (z. B. style.abc123.css), damit Sie Assets aktualisieren können, ohne das Caching zu beeinträchtigen. Wenn sich die Datei ändert, ändert sich der Dateiname und der Browser ruft die neue Version ab.

Schritt 2: Serverseitiges Caching mit Proxy-Cache aktivieren

Wenn Sie einen Anwendungsserver (wie Node.js, Python oder PHP) hinter Nginx betreiben, können Sie statische Antworten in Nginx cachen, um Backend-Anfragen zu reduzieren.

Definieren Sie zunächst einen Cache-Pfad im http-Block von nginx.conf:

proxy_cache_path /var/cache/nginx levels=1:2 keys_zone=static_cache:10m max_size=1g inactive=60m use_temp_path=off;

Verwenden Sie ihn dann in Ihrem Server-Block:

location ~* \.(css|js|jpg|jpeg|png|gif|ico|svg)$ {
    proxy_cache static_cache;
    proxy_cache_valid 200 302 1y;
    proxy_cache_valid 404 1m;
    proxy_cache_use_stale error timeout updating http_500 http_502 http_503 http_504;
    proxy_cache_lock on;
    add_header X-Cache-Status $upstream_cache_status;
    proxy_pass http://backend;
}

Dies speichert erfolgreiche Antworten für ein Jahr und liefert veraltete Inhalte, wenn das Backend nicht erreichbar ist. Der X-Cache-Status-Header hilft beim Debuggen (HIT, MISS usw.).

Schritt 3: Optimieren mit Komprimierung und HTTP/2

Caching reduziert Anfragen, aber Sie können Übertragungen weiter beschleunigen, indem Sie gzip-Komprimierung und HTTP/2 aktivieren.

Aktivieren Sie gzip in nginx.conf:

gzip on;
gzip_types text/css application/javascript image/svg+xml;
gzip_min_length 1000;

HTTP/2 multiplexiert Anfragen und wird aktiviert, indem Sie http2 zu Ihrer listen-Direktive hinzufügen:

listen 443 ssl http2;

Hinweis: HTTP/2 erfordert HTTPS. Wenn Sie TLS noch nicht eingerichtet haben, lesen Sie unseren Leitfaden dazu, wie HTTPS und TLS wirklich funktionieren.

Vergleich: Cache-Control-Direktiven

Schritt 4: Testen und Überprüfen

Nachdem Sie Änderungen vorgenommen haben, laden Sie Nginx neu: sudo nginx -s reload. Testen Sie dann mit curl:

curl -I https://example.com/style.css

Achten Sie auf die Header Cache-Control und Expires. Sie können auch die Browser-DevTools (Netzwerk-Tab) verwenden, um zu sehen, ob Assets aus dem Cache geliefert werden (Status 200 oder 304).

Überwachen Sie für den serverseitigen Cache den X-Cache-Status-Header.

Häufige Fallstricke und Best Practices

• HTML nicht cachen: HTML sollte dynamisch sein oder kurze Cache-Zeiten haben, um Aktualisierungen widerzuspiegeln.
• Versionierung verwenden: Hängen Sie Hashes an Dateinamen an, um den Cache bei Inhaltsänderungen zu umgehen.
• Angemessene max-age festlegen: Ein Jahr ist sicher für versionierte Assets.
• Cache-Größe überwachen: Serverseitige Caches können wachsen; legen Sie max_size und inactive fest.
• CDN in Betracht ziehen: Für ein globales Publikum kann ein CDN Assets näher an den Nutzern cachen.

FAQ

Woher weiß ich, ob meine Assets gecacht werden?

Überprüfen Sie die Antwort-Header mit curl -I oder den Browser-DevTools. Achten Sie auf Cache-Control: public, max-age=31536000 und Expires-Header. In den DevTools zeigt die Spalte „Größe“ „(aus dem Festplattencache)“ für gecachte Assets an.

Was ist der Unterschied zwischen expires und Cache-Control?

expires legt ein absolutes Datum fest, während Cache-Control relative Sekunden verwendet. Cache-Control hat in modernen Browsern Vorrang. Die expires-Direktive von Nginx setzt beide aus Kompatibilitätsgründen.

Kann ich dynamische Inhalte cachen?

Ja, aber mit Vorsicht. Verwenden Sie proxy_cache mit kurzen TTLs und ziehen Sie Cache-Schlüssel basierend auf Cookies oder Headern in Betracht. Für nutzerspezifische Inhalte verwenden Sie private oder vermeiden Sie das Caching.

Beschleunigen Sie Ihren Workflow mit TryQuickToolBox

Während Sie die Performance Ihrer Website optimieren, müssen Sie möglicherweise Bilder oder PDFs komprimieren. Probieren Sie unseren Bildkompressor, um Bildgrößen ohne Qualitätsverlust zu reduzieren und Ihre Nginx-Caching-Strategie zu ergänzen.