Website-Performance optimieren: 8 Tipps für schnellere Ladezeiten

53 % aller mobilen Nutzer verlassen eine Seite, wenn sie länger als 3 Sekunden lädt. Google berücksichtigt Ladezeiten im Ranking. Jede Millisekunde zählt — nicht nur für UX, sondern auch für SEO und Conversion. Hier sind 8 Maßnahmen, die wirklich etwas bringen.

1. Bilder optimieren — der größte Hebel

Bilder machen im Durchschnitt 50–70 % des Seitengewichts aus. Hier liegt das größte Optimierungspotenzial:

• WebP oder AVIF verwenden: 25–50 % kleiner als JPEG bei gleicher Qualität
• Richtige Dimensionen: Lade kein 4000px-Bild, wenn nur 800px angezeigt werden
• Lazy Loading: Bilder erst laden, wenn sie im Viewport erscheinen

<!-- Lazy Loading — nativ im Browser -->
<img src="bild.webp" loading="lazy" width="800" height="600" alt="Beschreibung">

<!-- Responsive Images mit srcset -->
<img srcset="bild-400.webp 400w, bild-800.webp 800w"
     sizes="(max-width: 600px) 400px, 800px"
     src="bild-800.webp" alt="Beschreibung">

2. Browser-Caching konfigurieren

Statische Dateien (CSS, JS, Bilder, Fonts) ändern sich selten. Sage dem Browser, dass er sie cachen soll:

# .htaccess — Cache-Header für statische Dateien
<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresByType image/webp "access plus 1 year"
    ExpiresByType image/jpeg "access plus 1 year"
    ExpiresByType image/png "access plus 1 year"
    ExpiresByType text/css "access plus 1 month"
    ExpiresByType application/javascript "access plus 1 month"
    ExpiresByType font/woff2 "access plus 1 year"
</IfModule>

3. GZIP/Brotli-Komprimierung aktivieren

Textbasierte Dateien (HTML, CSS, JS, SVG, JSON) lassen sich mit Komprimierung um 60–80 % verkleinern:

# .htaccess — Brotli bevorzugen, GZIP als Fallback
<IfModule mod_brotli.c>
    AddOutputFilterByType BROTLI_COMPRESS text/html text/css application/javascript
</IfModule>
<IfModule mod_deflate.c>
    AddOutputFilterByType DEFLATE text/html text/css application/javascript
</IfModule>

4. CSS und JavaScript minimieren

Entferne Leerzeichen, Kommentare und unnötige Zeichen aus deinen Dateien. Tools dafür:

• CSS: cssnano, PurgeCSS (entfernt ungenutztes CSS)
• JavaScript: Terser, esbuild
• WordPress: Autoptimize Plugin (One-Click-Lösung)

Noch wichtiger als Minifizierung: Lade nur, was du brauchst. Viele WordPress-Themes laden 500 KB CSS für Features, die du nicht nutzt.

5. Critical CSS inlinen

Der Browser muss erst alle CSS-Dateien laden, bevor er die Seite rendern kann (Render-Blocking). Die Lösung: CSS, das für den sichtbaren Bereich nötig ist, direkt im HTML einbetten und den Rest async nachladen:

<head>
    <!-- Critical CSS inline -->
    <style>
        body { font-family: sans-serif; margin: 0; }
        .header { background: #1a1a2e; padding: 1rem; }
        /* ... nur Above-the-Fold Styles */
    </style>
    <!-- Rest-CSS async laden -->
    <link rel="preload" href="style.css" as="style" 
          onload="this.onload=null;this.rel='stylesheet'">
</head>

6. Fonts optimieren

Web-Fonts können die Darstellung um mehrere Sekunden verzögern. So optimierst du sie:

• font-display: swap — Text sofort mit Fallback-Font anzeigen
• Subset laden: Nur die Zeichensätze, die du brauchst (latin statt latin-extended + cyrillic)
• Preconnect: DNS-Lookup zu Google Fonts frühzeitig starten
• Self-Hosting: Fonts lokal hosten statt von Google — spart einen DNS-Lookup und ist DSGVO-konform

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

@font-face {
    font-family: 'Inter';
    src: url('/fonts/inter.woff2') format('woff2');
    font-display: swap;
}

7. Server-seitiges Caching

Wenn deine Seite bei jedem Aufruf PHP-Code ausführt und Datenbankabfragen macht, wird sie nie wirklich schnell. Server-seitiges Caching speichert das fertige HTML:

• OPcache: Kompiliertes PHP zwischenspeichern (sollte immer aktiv sein)
• Page Caching: Fertiges HTML auf Disk oder im RAM cachen
• Object Caching: Datenbankabfragen cachen (Redis, Memcached)
• WordPress: WP Super Cache oder W3 Total Cache

8. Core Web Vitals messen und optimieren

Google bewertet drei Metriken besonders:

• LCP (Largest Contentful Paint): Wann ist das größte Element sichtbar? Ziel: unter 2,5 Sekunden
• FID / INP (Interaction to Next Paint): Wie schnell reagiert die Seite auf Klicks? Ziel: unter 200 ms
• CLS (Cumulative Layout Shift): Springt der Inhalt beim Laden? Ziel: unter 0,1

Miss deine Werte mit Google PageSpeed Insights oder web.dev/measure und arbeite gezielt die Schwachstellen ab.

Fazit

Die größten Hebel sind Bildoptimierung, Caching und Komprimierung. Mit diesen drei Maßnahmen allein erreichst du oft eine Verbesserung von 50–70 %. Starte mit einem PageSpeed-Test, identifiziere die größten Bremsen und arbeite dich durch diese Liste.