Browser-Caching: Konfiguration für bessere Rankings

Browser-Caching ist eine der einfachsten und wirkungsvollsten Performance-Optimierungen. Wenn Ressourcen (CSS, JavaScript, Bilder) im Browser-Cache gespeichert werden, lädt die Seite bei Folgebesuchen deutlich schneller. Das verbessert Core Web Vitals, reduziert Server-Last und senkt die Absprungrate – alles Faktoren die Google positiv bewertet.

Was Browser-Caching ist

Wenn ein Nutzer Ihre Website besucht, lädt der Browser alle Ressourcen vom Server: CSS-Dateien, JavaScript, Bilder, Fonts. Ohne Caching passiert das bei jedem Besuch neu – auch wenn sich die Ressourcen nicht geändert haben.

Mit Cache-Headern teilt der Server dem Browser mit: „Diese Datei kannst du X Tage/Wochen lokal speichern. Lade sie in dieser Zeit nicht neu.” Bei Folgebesuchen werden gecachte Ressourcen sofort aus dem lokalen Speicher geladen.

Auswirkung auf Rankings: Wiederkehrende Besucher erleben deutlich schnellere Ladezeiten. Da Google Chrome Real-User-Daten (CrUX) für Core Web Vitals Bewertungen nutzt, verbessern schnellere Folgebesuche den Gesamt-LCP-Score der Domain.

Korrekt konfiguriertes Browser-Caching reduziert die Ladezeit bei Folgebesuchen um 60–80 % – aus einem 3-Sekunden-Erstladezeit wird ein 0,5-Sekunden-Folgebesuch, was CrUX-Messwerte direkt verbessert.

Cache-Header: Das Grundprinzip

Browser-Caching wird über HTTP-Response-Header gesteuert:

Cache-Control: Der primäre Header in HTTP/1.1 und HTTP/2.

Cache-Control: public, max-age=31536000

public = Caching erlaubt (auch für CDNs) max-age=31536000 = 1 Jahr in Sekunden

Expires: Der ältere Header (HTTP/1.0-kompatibel).

Expires: Sat, 01 Jan 2027 00:00:00 GMT

ETag: Fingerabdruck der Datei. Erlaubt dem Browser zu prüfen ob sich eine Datei geändert hat ohne sie komplett neu zu laden.

Apache-Konfiguration (.htaccess)

Für Apache-Webserver (häufig bei Shared Hosting):

<IfModule mod_expires.c>
  ExpiresActive On

  # Bilder: 1 Jahr
  ExpiresByType image/jpeg "access plus 1 year"
  ExpiresByType image/webp "access plus 1 year"
  ExpiresByType image/png  "access plus 1 year"
  ExpiresByType image/svg+xml "access plus 1 year"

  # CSS und JavaScript: 1 Jahr (bei Versionierung via Hash)
  ExpiresByType text/css "access plus 1 year"
  ExpiresByType application/javascript "access plus 1 year"

  # Fonts: 1 Jahr
  ExpiresByType font/woff2 "access plus 1 year"
  ExpiresByType application/font-woff "access plus 1 year"

  # HTML: kurz cachen
  ExpiresByType text/html "access plus 0 seconds"
</IfModule>

<IfModule mod_headers.c>
  <FilesMatch "\.(jpg|jpeg|webp|png|gif|svg|css|js|woff2)$">
    Header set Cache-Control "public, max-age=31536000, immutable"
  </FilesMatch>
</IfModule>

nginx-Konfiguration

Für nginx-Server:

server {
    # Bilder, Fonts, CSS, JS: 1 Jahr
    location ~* \.(jpg|jpeg|webp|png|gif|svg|css|js|woff2)$ {
        expires 1y;
        add_header Cache-Control "public, max-age=31536000, immutable";
        add_header Vary "Accept-Encoding";
    }

    # HTML: kein Caching (immer aktuell)
    location ~* \.html$ {
        expires -1;
        add_header Cache-Control "no-store, no-cache, must-revalidate";
    }
}

WordPress: Browser-Caching ohne Serverkonfiguration

Wenn Sie keinen Zugriff auf Serverkonfiguration haben (Shared Hosting ohne .htaccess-Zugriff), helfen Caching-Plugins:

WP Rocket: Setzt Browser-Cache-Header automatisch über .htaccess oder nginx-Konfiguration. Einfachste Lösung.

W3 Total Cache: Granulare Kontrolle über alle Cache-Typen. Komplexer zu konfigurieren.

LiteSpeed Cache: Für LiteSpeed-Server besonders effektiv – direkte Server-Integration.

Cloudflare (kostenlos): Setzt Edge-Caching für alle statischen Assets. Kein Serverkonfigurationszugriff nötig.

Cache validieren

Nach der Konfiguration prüfen ob Caching aktiv ist:

1. Chrome DevTools öffnen → Network Tab
2. Seite neu laden
3. Auf eine statische Ressource klicken (z. B. CSS-Datei)
4. Response Headers prüfen: Cache-Control und Expires sollten gesetzt sein

Alternativ: Google PageSpeed Insights zeigt „Ineffizientes Browser-Caching” als Warnung wenn Cache-Header fehlen oder zu kurz sind.

Websites die Browser-Caching korrekt für alle statischen Assets konfigurieren, verbessern ihren PageSpeed-Score im Schnitt um 10–20 Punkte – bei Websites die Caching komplett fehlkonfiguriert hatten auch deutlich mehr.

Mehr zu Performance-Optimierung finden Sie in unserem Artikel über Pagespeed Website optimieren.