Caching richtig einrichten: Schnellere Websites durch Browser-Cache & Server-Cache

Wenn deine Website langsam lädt, verlierst du Besucher. Studien zeigen: 53% der Nutzer verlassen eine Seite, wenn sie länger als 3 Sekunden zum Laden braucht. Und seit Google Core Web Vitals als Rankingfaktor eingeführt hat, kostet eine langsame Website nicht nur Besucher, sondern auch Suchmaschinen-Positionen.

Eine der wirkungsvollsten Maßnahmen für mehr Speed ist Caching — und gleichzeitig eine der am häufigsten unterschätzten. Richtig eingerichtet kann Caching die Ladezeit deiner Website um 50–80% reduzieren, ohne dass du dein Hosting wechseln oder teures Code-Refactoring betreiben musst.

In diesem Artikel erkläre ich dir, welche Arten von Caching es gibt, wie sie funktionieren, und wie du sie konkret auf deiner Website einrichtest — egal ob du WordPress, eine statische Website oder einen eigenen Server nutzt.

Was ist Caching und warum ist es so wichtig?

Caching bedeutet vereinfacht: Ergebnisse, die aufwändig zu berechnen oder herunterzuladen sind, werden zwischengespeichert — damit sie beim nächsten Abruf sofort verfügbar sind, ohne den Prozess zu wiederholen.

Stell dir vor, du rufst eine WordPress-Seite auf. Ohne Cache muss der Server bei jedem Aufruf:

1. PHP ausführen
2. Die Datenbank abfragen
3. Das HTML-Dokument zusammenbauen
4. CSS, JavaScript und Bilder an den Browser senden

Mit Cache wird das fertig generierte HTML direkt ausgeliefert — der Server überspringt PHP und Datenbank. Das ist dramatisch schneller.

Für SEO ist Caching aus zwei Gründen wichtig: Erstens verbessert es direkt den LCP (Largest Contentful Paint) und TTFB (Time to First Byte) — beides Core Web Vitals. Zweitens ermöglicht ein schnelles Caching dem Google-Bot, mehr Seiten deiner Website in einem Crawl-Durchgang zu indexieren (besseres Crawl-Budget).

Die 4 wichtigsten Cache-Typen im Überblick

Browser-Cache einrichten: Die Cache-Control-Header

Browser-Caching wird über HTTP-Header gesteuert. Der wichtigste ist Cache-Control. Hier sind die relevantesten Direktiven:

• max-age=31536000 — Ressource 1 Jahr cachen (ideal für versionierte Assets)
• max-age=604800 — 1 Woche cachen
• no-cache — Ressource nicht cachen (aber trotzdem validieren bei Revalidierung)
• no-store — Gar nicht cachen (für sensible Daten)
• immutable — Ressource verändert sich nie, nie revalidieren (ideal für versionierte Bundles)
• stale-while-revalidate=86400 — Veralteten Cache sofort ausliefern, im Hintergrund aktualisieren

Apache (.htaccess) — Caching einrichten

# Browser-Caching in Apache
<IfModule mod_expires.c>
  ExpiresActive On

  # HTML: kurze Cache-Zeit (10 Minuten)
  ExpiresByType text/html "access plus 10 minutes"

  # CSS und JavaScript: 1 Woche
  ExpiresByType text/css "access plus 1 week"
  ExpiresByType application/javascript "access plus 1 week"
  ExpiresByType text/javascript "access plus 1 week"

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

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

Nginx — Caching konfigurieren

# Browser-Caching in Nginx
location ~* \.(css|js)$ {
  expires 7d;
  add_header Cache-Control "public, max-age=604800";
}

location ~* \.(jpg|jpeg|png|gif|webp|svg|ico)$ {
  expires 1y;
  add_header Cache-Control "public, max-age=31536000, immutable";
}

location ~* \.(woff|woff2|ttf|otf|eot)$ {
  expires 1y;
  add_header Cache-Control "public, max-age=31536000, immutable";
}

WordPress-Caching einrichten: Die besten Plugins

Für WordPress gibt es mehrere ausgezeichnete Caching-Plugins. Du brauchst nur eines davon:

Option 1: WP Super Cache (einfachste Lösung)

1. Plugin installieren und aktivieren
2. Einstellungen → WP Super Cache → "Caching An (Empfohlen)" aktivieren
3. "Einfach" Modus auswählen (für die meisten Websites ausreichend)
4. "Cache aktualisieren" klicken

Option 2: LiteSpeed Cache (beste Performance)

Falls dein Hosting LiteSpeed-Server nutzt (z.B. Strato, Hetzner mit LiteSpeed), ist LiteSpeed Cache das leistungsstärkste Plugin. Es nutzt den Server-Cache direkt auf HTTP-Ebene — schneller als PHP-basierte Lösungen.

1. Plugin installieren, "Cache aktivieren"
2. Page Optimize: CSS/JS minifizieren und kombinieren aktivieren
3. Image Lazy Load aktivieren

Option 3: W3 Total Cache (fortgeschritten)

Das komplexeste Plugin mit den meisten Optionen. Nur empfehlenswert, wenn du weißt was du tust — Fehlkonfigurationen können zu Darstellungsproblemen führen. Gut für Websites mit Redis/Memcached-Zugang.

Cloudflare kostenlos nutzen — CDN + Cache in einem

Cloudflare ist eines der besten kostenlosen Tools zur Website-Beschleunigung überhaupt. Der kostenlose Plan bietet:

• CDN mit über 300 Standorten weltweit
• Automatisches Caching statischer Ressourcen
• HTTPS-Zertifikat kostenlos
• DDoS-Schutz
• Automatische Bildoptimierung (Polish)
• Minifizierung von HTML/CSS/JS

Cloudflare einrichten (Schritt für Schritt):

1. Account auf cloudflare.com erstellen (kostenlos)
2. "Website hinzufügen" → deine Domain eingeben
3. Kostenloser Plan wählen
4. Cloudflare scannt deine DNS-Einträge automatisch
5. Nameserver bei deinem Domain-Registrar auf die Cloudflare-Nameserver umstellen
6. Warten (24–48 Stunden DNS-Propagation)
7. Fertig — Cloudflare ist aktiv

Caching-Level einstellen: In Cloudflare → Caching → Konfiguration → "Standard" oder "Aggressive" wählen. Bei statischen Websites: "Alles cachen" über eine Page Rule.

Cache-Header mit den Chrome DevTools prüfen

So prüfst du, ob dein Caching funktioniert:

1. Chrome öffnen → F12 (DevTools)
2. Reiter "Network" wählen
3. Seite neu laden (ohne Cache: Ctrl+Shift+R für harten Reload)
4. Auf eine CSS- oder Bild-Datei klicken
5. Reiter "Headers" → Response Headers prüfen

Du solltest Cache-Control: max-age=... und/oder Expires: ... sehen. Wenn du nach dem zweiten Laden "(from disk cache)" oder "(from memory cache)" in der Size-Spalte siehst — Cache funktioniert.

Cache-Invalidierung: Wenn sich Inhalte ändern

Caching hat einen Nachteil: Wenn du Inhalte aktualisierst, bekommen Besucher noch die alte Version aus dem Cache. Die Lösung heißt Cache-Invalidierung.

• WordPress-Plugins invalidieren den Cache automatisch, wenn du einen Beitrag veröffentlichst oder aktualisierst
• Cloudflare: Im Dashboard unter "Caching → Cache löschen" einzelne URLs oder alle Dateien leeren
• HTML kurz cachen: Setze die Cache-Zeit für HTML-Dokumente auf maximal 10–30 Minuten, dann werden Änderungen schnell sichtbar
• Purge-Hooks: Bei Shopware, TYPO3 oder eigenen CMS gibt es oft automatische Purge-Funktionen bei Content-Änderungen

Was sollte man NICHT cachen?

Nicht alles darf gecacht werden — vor allem nicht:

• Eingeloggte Benutzer-Seiten (jeder Nutzer sieht personalisierten Inhalt)
• Warenkorb und Checkout-Seiten (E-Commerce)
• Admin-Bereiche (WordPress /wp-admin)
• Seiten mit dynamischen Formularen die CSRF-Tokens enthalten
• API-Antworten mit personalisierten Daten

Caching-Plugins erkennen eingeloggte Nutzer automatisch und schalten Cache für diese ab.

Caching und Core Web Vitals: Der direkte Zusammenhang

Richtig eingerichtetes Caching wirkt direkt auf drei Core Web Vitals:

• TTFB (Time to First Byte) — Server-Cache reduziert ihn drastisch, von oft 500–2000ms auf unter 100ms
• LCP (Largest Contentful Paint) — Schnelleres TTFB + gecachte Bilder verbessern LCP direkt
• CLS (Cumulative Layout Shift) — Indirekt: wenn Fonts und CSS schneller laden, gibt es weniger Layout-Verschiebungen

Kombiniere Caching mit optimierten Bildern und gut verwalteten Ladezeiten — das sind die drei stärksten Performance-Hebel für eine typische Website.

Checkliste: Caching auf deiner Website

Fazit: Caching ist die schnellste Rendite im Performance-SEO

Von allen Performance-Maßnahmen hat Caching das beste Aufwand-Nutzen-Verhältnis. Einmal richtig eingerichtet, arbeitet es dauerhaft im Hintergrund und macht deine Website schneller — für jeden Besucher, bei jedem Seitenaufruf.

Der einfachste Einstieg: Browser-Cache über .htaccess aktivieren + Cloudflare kostenlos einrichten. Das dauert weniger als eine Stunde und kann die Ladezeit deiner Website halbieren.

Im nächsten Artikel dieser Performance-Reihe zeigen wir, wie du Render-Blocking-Ressourcen entfernst — also CSS und JavaScript, das den Browser daran hindert, die Seite anzuzeigen, bis es vollständig geladen ist. Zusammen mit Caching ist das der zweite große Performance-Hebel für bessere Core Web Vitals.