Caching-Strategien für Webentwicklung

Richtiges Caching kann Ihre Website um ein Vielfaches beschleunigen. Dieser Guide erklärt die verschiedenen Caching-Ebenen und wie Sie sie optimal einsetzen.

Die Caching-Pyramide

Browser-Caching

Cache-Control Header

# Statische Assets (1 Jahr)
Cache-Control: public, max-age=31536000, immutable

# API-Responses (keine Cache)
Cache-Control: no-store

# Private Daten (nur Browser, nicht CDN)
Cache-Control: private, max-age=3600

# Revalidierung erzwingen
Cache-Control: no-cache

Cache-Control Direktiven

ETag und Last-Modified

# Server sendet
ETag: "abc123"
Last-Modified: Wed, 15 Nov 2024 12:00:00 GMT

# Browser fragt nach
If-None-Match: "abc123"
If-Modified-Since: Wed, 15 Nov 2024 12:00:00 GMT

# Server antwortet 304 Not Modified wenn unverändert

Nginx Caching-Konfiguration

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

# HTML-Seiten
location ~* \.html$ {
    expires 1h;
    add_header Cache-Control "public, must-revalidate";
}

# API - kein Cache
location /api/ {
    add_header Cache-Control "no-store";
    proxy_pass http://backend;
}

Nginx als Reverse Proxy Cache

# Cache-Zone definieren
proxy_cache_path /var/cache/nginx levels=1:2 keys_zone=my_cache:10m
                 max_size=1g inactive=60m use_temp_path=off;

server {
    location / {
        proxy_cache my_cache;
        proxy_cache_valid 200 60m;
        proxy_cache_valid 404 1m;
        proxy_cache_use_stale error timeout updating;
        proxy_cache_background_update on;

        add_header X-Cache-Status $upstream_cache_status;

        proxy_pass http://backend;
    }
}

CDN-Caching

Cloudflare Cache-Regeln

• Cache Everything: Alle Inhalte cachen
• Bypass Cache: Für Admin-Bereiche, APIs
• Edge TTL: Wie lange CDN cached
• Browser TTL: Cache-Control für Browser

Cache-Busting für Assets

<!-- Versionierung im Dateinamen -->
<link rel="stylesheet" href="/css/style.abc123.css">
<script src="/js/app.def456.js"></script>

<!-- Oder mit Query-String (weniger empfohlen) -->
<link rel="stylesheet" href="/css/style.css?v=1.2.3">

Application-Level Caching

Redis für PHP

<?php
$redis = new Redis();
$redis->connect('127.0.0.1', 6379);

$cacheKey = 'user:' . $userId;
$userData = $redis->get($cacheKey);

if ($userData === false) {
    // Aus Datenbank laden
    $userData = $db->query("SELECT * FROM users WHERE id = ?", [$userId]);

    // Im Cache speichern (1 Stunde)
    $redis->setex($cacheKey, 3600, json_encode($userData));
} else {
    $userData = json_decode($userData, true);
}

Node.js mit node-cache

const NodeCache = require('node-cache');
const cache = new NodeCache({ stdTTL: 3600 });

async function getUser(userId) {
  const cached = cache.get(`user:${userId}`);
  if (cached) return cached;

  const user = await db.query('SELECT * FROM users WHERE id = ?', [userId]);
  cache.set(`user:${userId}`, user);
  return user;
}

Caching-Strategien

Cache-Aside (Lazy Loading)

1. Prüfe Cache
2. Wenn Miss → Lade aus DB → Speichere in Cache
3. Gib Daten zurück

Write-Through

1. Schreibe in Cache
2. Cache schreibt automatisch in DB
3. Immer synchron

Write-Behind

1. Schreibe in Cache
2. Cache schreibt asynchron in DB
3. Schneller, aber Risiko bei Ausfall

Was sollte gecacht werden?

Weitere Informationen

• ⚡ Website Ladezeit optimieren
• 🔧 Redis Cache einrichten
• 🌐 Cloudflare einrichten
• ⚡ Varnish Cache