Website-Geschwindigkeit optimieren

Praktische Tipps und Techniken, um die Ladezeit deiner Website drastisch zu verbessern. Von Bildoptimierung über Caching bis hin zu CDN und Code-Minifizierung.

Warum ist Website-Geschwindigkeit so wichtig?

Die Ladezeit einer Website beeinflusst direkt die Nutzererfahrung, die Conversion-Rate und das Google-Ranking. Studien zeigen, dass 53% der mobilen Nutzer eine Seite verlassen, wenn sie länger als 3 Sekunden lädt. Jede zusätzliche Sekunde Ladezeit kann die Conversion-Rate um bis zu 7% senken.

Google nutzt die Seitengeschwindigkeit seit 2010 als Rankingfaktor für Desktop und seit 2018 auch für mobile Suchergebnisse. Mit der Einführung der Core Web Vitals im Jahr 2021 wurde die Performance noch stärker gewichtet.

1. Bilder optimieren

Bilder machen oft 50–70% des gesamten Seitengewichts aus. Hier sind die wichtigsten Maßnahmen:

• Moderne Formate nutzen: WebP bietet 25–35% kleinere Dateien als JPEG bei gleicher Qualität. AVIF spart sogar noch mehr, wird aber noch nicht überall unterstützt.
• Responsive Images: Verwende das srcset-Attribut, um verschiedene Bildgrößen für unterschiedliche Bildschirme bereitzustellen.
• Lazy Loading: Lade Bilder erst, wenn sie in den sichtbaren Bereich scrollen. Das native loading="lazy"-Attribut macht das ohne JavaScript möglich.
• Komprimierung: Tools wie Squoosh, TinyPNG oder ImageOptim können Bilder ohne sichtbaren Qualitätsverlust um 40–80% verkleinern.
• Richtige Dimensionen: Lade nie ein 4000px-Bild, wenn es nur in 800px angezeigt wird. Skaliere Bilder serverseitig auf die benötigte Größe.

<img src="foto.webp"
     srcset="foto-400.webp 400w, foto-800.webp 800w, foto-1200.webp 1200w"
     sizes="(max-width: 600px) 400px, (max-width: 1000px) 800px, 1200px"
     loading="lazy"
     alt="Beschreibung des Bildes"
     width="800" height="600">

2. Browser-Caching nutzen

Durch korrektes Caching müssen wiederkehrende Besucher nicht alle Ressourcen erneut herunterladen. Setze Cache-Header für statische Dateien:

• CSS, JS, Schriften: Cache-Control: public, max-age=31536000, immutable — ein Jahr cachen, wenn du Versionierung im Dateinamen nutzt (z.B. style.v3.css).
• HTML-Seiten: Cache-Control: no-cache — immer beim Server nachfragen, ob eine neue Version vorliegt.
• Bilder: Mindestens 30 Tage cachen, besser ein Jahr mit Versionierung.

3. Komprimierung aktivieren

Gzip oder Brotli-Komprimierung reduziert die Übertragungsgröße von Text-Ressourcen um 60–80%. Die meisten Webserver unterstützen dies bereits, es muss nur aktiviert werden.

Brotli bietet 15–20% bessere Komprimierung als Gzip und wird von allen modernen Browsern unterstützt. In der Apache-Konfiguration:

# Apache - Brotli aktivieren
<IfModule mod_brotli.c>
    AddOutputFilterByType BROTLI_COMPRESS text/html text/css
    AddOutputFilterByType BROTLI_COMPRESS application/javascript application/json
    AddOutputFilterByType BROTLI_COMPRESS image/svg+xml
</IfModule>

4. CSS und JavaScript minimieren

Minifizierung entfernt unnötige Leerzeichen, Kommentare und Zeilenumbrüche aus deinem Code. Das reduziert die Dateigröße typischerweise um 10–30%.

• CSS: Nutze Tools wie cssnano, clean-css oder Lightning CSS.
• JavaScript: Terser, esbuild oder SWC sind schnelle und effektive Minifizierer.
• Kritisches CSS inline laden: Extrahiere das CSS, das für den sichtbaren Bereich (Above the Fold) benötigt wird, und lade es direkt im <head> als Inline-CSS.
• Nicht benötigtes CSS entfernen: Tools wie PurgeCSS oder UnCSS finden und entfernen ungenutzte CSS-Regeln.

5. Content Delivery Network (CDN) einsetzen

Ein CDN verteilt deine statischen Inhalte auf Server weltweit, sodass Nutzer die Daten vom nächstgelegenen Standort laden. Das reduziert die Latenz erheblich, besonders für internationale Besucher.

Beliebte CDN-Anbieter sind Cloudflare (kostenloser Tarif verfügbar), Bunny CDN, AWS CloudFront und Fastly. Cloudflare bietet zusätzlich automatische Bildoptimierung, Brotli-Komprimierung und DDoS-Schutz.

6. Render-Blocking Ressourcen vermeiden

JavaScript und CSS im <head> blockieren das Rendering der Seite. So vermeidest du das:

• JavaScript: Verwende defer oder async für Script-Tags. defer ist in den meisten Fällen die bessere Wahl, da es die Ausführungsreihenfolge beibehält.
• CSS: Lade unkritisches CSS asynchron mit dem media="print" onload="this.media='all'"-Pattern.
• Fonts: Nutze font-display: swap und <link rel="preconnect"> für externe Font-Server.

7. Server-Response-Zeit optimieren

Die Time to First Byte (TTFB) sollte unter 200ms liegen. Maßnahmen zur Verbesserung:

• Server-Side Caching: Nutze OPcache für PHP, Redis oder Memcached für Datenbankabfragen.
• Datenbankabfragen optimieren: Indizes setzen, unnötige Queries eliminieren, N+1-Probleme beheben.
• HTTP/2 oder HTTP/3: Moderne Protokolle ermöglichen Multiplexing — mehrere Requests über eine Verbindung.
• Hosting: Ein leistungsstarker Server oder Managed Hosting macht einen großen Unterschied. Shared Hosting ist oft zu langsam.

8. Drittanbieter-Scripts reduzieren

Jedes externe Script (Analytics, Chatbots, Social-Media-Widgets, Werbung) kostet Ladezeit. Prüfe kritisch:

• Wird das Script wirklich benötigt?
• Kann es verzögert geladen werden (z.B. erst nach User-Interaktion)?
• Gibt es eine leichtere Alternative?

Tipp: Lade Tracking-Scripts erst nach der Cookie-Einwilligung. Das verbessert nicht nur die Performance, sondern auch den Datenschutz.

Performance messen und überwachen

Optimierung ist ein fortlaufender Prozess. Nutze diese Tools, um die Geschwindigkeit regelmäßig zu prüfen:

• PageScore: Schneller Überblick über Performance, SEO und Security in einem Audit.
• Chrome DevTools: Der Lighthouse-Tab bietet detaillierte Performance-Analysen.
• WebPageTest: Detaillierter Wasserfall-Diagramm und Filmstreifen-Ansicht.
• Google Search Console: Zeigt Core Web Vitals für echte Nutzer (Field Data).