Website-Ladezeit verbessern: 25 Techniken für schnelle Seiten

Die Geschwindigkeit Ihrer Website ist nicht nur eine Frage des Komforts, sondern eine Frage des Überlebens. Google-Studien zeigen, dass 53 % der mobilen Nutzer Seiten verlassen, die länger als 3 Sekunden laden. Amazon hat berechnet, dass jede Verzögerung von 100 ms 1 % des Umsatzes kostet. Für ein Unternehmen mit 1 Mio. $ Jahresumsatz sind das 10.000 $ Verlust pro 100 Millisekunden Langsamkeit.

Die Optimierung der Website-Geschwindigkeit ist vom nützlichen Extra zur geschäftskritischen Notwendigkeit geworden. Sie wirkt sich direkt auf Umsatz, Suchrankings, Nutzererfahrung und Ihre Wettbewerbsposition aus.

In diesem ausführlichen Ratgeber mit rund 6.000 Wörtern lernen Sie 25 praxisnahe, durch Daten gestützte Techniken zur Geschwindigkeitsoptimierung kennen. Sie erfahren, welche Core Web Vitals Google für Ihr Ranking heranzieht, lernen die wichtigsten Test-Tools kennen und erhalten einen vollständigen Fahrplan, um aus einer langsamen Website eine leistungsstarke Conversion-Maschine zu machen.

Ob Unternehmer, Marketer, Entwickler oder Website-Verantwortlicher: Dieser Ratgeber liefert alles, was Sie brauchen, um die Performance Ihrer Website deutlich zu verbessern.

Beginnen wir damit, warum Geschwindigkeit so entscheidend ist.

Warum Geschwindigkeitsoptimierung wichtig ist: der geschäftliche Nutzen

1. Nutzererfahrung und Engagement

Moderne Internetnutzer haben keine Geduld mit langsamen Websites. Untersuchungen von Google und verschiedene UX-Studien zeigen:

• 3-Sekunden-Schwelle: 53 % der mobilen Nutzer verlassen Seiten, die länger als 3 Sekunden laden
• Erster Eindruck: Nutzer bilden sich innerhalb von 50 Millisekunden eine Meinung über Ihre Seite
• Zusammenhang mit der Absprungrate: Jede Sekunde Verzögerung erhöht die Absprungrate um 7 %
• Einbruch beim Engagement: Langsame Seiten haben 70 % niedrigere Engagement-Raten
• Wiederkehrende Besuche: 79 % der mit der Seitenperformance unzufriedenen Nutzer kehren nicht zurück

Auswirkung in der Praxis: Als Pinterest die wahrgenommene Ladezeit um 40 % senkte, stieg der SEO-Traffic um 15 % und die Zahl der Anmeldungen ebenfalls um 15 %.

2. Suchmaschinenrankings (SEO)

Google nutzt die Seitengeschwindigkeit offiziell als Rankingfaktor, für Desktop-Suchen seit 2010 und für mobile Suchen seit 2018. Mit der Einführung der Core Web Vitals im Jahr 2021 wurde Geschwindigkeit noch wichtiger.

Daten zur SEO-Wirkung:

• Websites, die in 1 Sekunde laden, haben dreimal höhere Conversion-Raten als Seiten mit 5 Sekunden Ladezeit
• Googles Mobile-First-Indexierung bevorzugt schnelle, mobiloptimierte Seiten
• Die Core Web Vitals sind Teil der Page-Experience-Signale, die das Ranking beeinflussen
• Langsame Seiten verzeichnen 10 bis 30 % weniger organischen Traffic

Die Realität des Algorithmus: Google betont zwar, Geschwindigkeit sei nur einer von Hunderten Rankingfaktoren, doch langsame Seiten landen unabhängig von der Inhaltsqualität selten auf Seite 1.

3. Conversion-Raten und Umsatz

Geschwindigkeit hängt direkt mit dem Umsatz zusammen. Branchendaten zeigen:

• Walmart: Jede Sekunde Verbesserung = 2 % mehr Conversions
• Amazon: 100 ms Verzögerung = 1 % weniger Umsatz
• Mobify: 100 ms weniger Ladezeit = 1,11 % mehr sitzungsbasierte Conversions
• AutoAnything: Eine halbierte Ladezeit verdoppelte die Conversion-Raten

Realität im E-Commerce: Eine Sekunde Verzögerung kann einen Shop mit 100.000 $ Tagesumsatz im Jahr 2,5 Mio. $ entgangenen Umsatz kosten.

4. Mobile Performance

Da Mobilgeräte über 60 % des Web-Traffics erzeugen, gilt:

• Mobile Nutzer brechen Aufgaben fünfmal häufiger ab, wenn Seiten nicht optimiert sind
• 3G-Verbindungen (weltweit weiterhin verbreitet) machen Geschwindigkeit entscheidend
• Mobile Nutzer erledigen mehreres gleichzeitig und haben noch weniger Geduld
• Googles Mobile-First-Indexierung macht die mobile Performance zur Hauptsache

5. Markenwahrnehmung und Vertrauen

Langsame Websites schaden der Glaubwürdigkeit Ihrer Marke:

• 70 % der Verbraucher geben an, dass die Seitengeschwindigkeit ihre Kaufbereitschaft beeinflusst
• Langsame Seiten gelten als weniger vertrauenswürdig und weniger professionell
• Geschwindigkeit spiegelt Kompetenz und Liebe zum Detail wider
• Ein erster Eindruck lässt sich nur schwer korrigieren

Nachdem Sie nun wissen, was auf dem Spiel steht, geht es weiter mit Techniken der Suchmaschinenoptimierung.

Core Web Vitals verstehen: Googles Geschwindigkeitskennzahlen

Bevor Sie optimieren, müssen Sie verstehen, was Google misst. Die Core Web Vitals sind drei konkrete Kennzahlen, die die Nutzererfahrung quantifizieren:

1. Largest Contentful Paint (LCP)

Was gemessen wird: Die Ladeleistung, genauer: wie lange es dauert, bis das größte sichtbare Inhaltselement geladen ist.

Zielwert: Unter 2,5 Sekunden (gut), 2,5 bis 4 Sekunden (verbesserungswürdig), über 4 Sekunden (schlecht)

Was als „größter Inhalt“ zählt:

• Bilder
• Vorschaubilder von Videos
• Per CSS geladene Hintergrundbilder
• Textelemente auf Blockebene

Häufige LCP-Probleme:

• Langsame Serverantwortzeiten
• Render-blockierendes JavaScript und CSS
• Lange Ladezeiten von Ressourcen (große Bilder)
• Verzögerungen durch clientseitiges Rendering

So verbessern Sie den LCP:

• Bilder optimieren und komprimieren
• Moderne Bildformate nutzen (WebP, AVIF)
• Lazy Loading für Bilder unterhalb des sichtbaren Bereichs einsetzen
• Auf schnellere Server umsteigen
• Content Delivery Networks (CDNs) nutzen
• Kritische Ressourcen vorladen
• Nicht kritisches CSS/JavaScript minimieren und verzögert laden

2. Interaction to Next Paint (INP) – ersetzt den First Input Delay

Was gemessen wird: Die Interaktivität, also wie schnell Seiten auf Nutzerinteraktionen (Klicks, Taps, Tastatureingaben) reagieren.

Zielwert: Unter 200 Millisekunden (gut), 200 bis 500 ms (verbesserungswürdig), über 500 ms (schlecht)

Hinweis: Der INP hat im März 2024 den First Input Delay (FID) als umfassendere Interaktivitätskennzahl abgelöst.

Häufige INP-Probleme:

• Aufwendige JavaScript-Ausführung
• Lange Aufgaben, die den Main Thread blockieren
• Zu viele Skripte von Drittanbietern
• Nicht optimierte Event-Handler

So verbessern Sie den INP:

• Lange JavaScript-Aufgaben aufteilen
• Nicht kritisches JavaScript verzögert laden
• Web Worker für aufwendige Berechnungen nutzen
• Skripte von Drittanbietern optimieren
• Die JavaScript-Ausführungszeit verkürzen
• Code Splitting einsetzen
• Lazy Loading für interaktive Elemente umsetzen

3. Cumulative Layout Shift (CLS)

Was gemessen wird: Die visuelle Stabilität, also wie stark sich sichtbare Inhalte beim Laden der Seite unerwartet verschieben.

Zielwert: Unter 0,1 (gut), 0,1 bis 0,25 (verbesserungswürdig), über 0,25 (schlecht)

Häufige CLS-Ursachen:

• Bilder ohne Abmessungen
• Anzeigen, Einbettungen oder iframes ohne reservierten Platz
• Webfonts, die Layoutverschiebungen verursachen (FOIT/FOUT)
• Dynamisch eingefügte Inhalte
• Aktionen, die auf eine Netzwerkantwort warten

So verbessern Sie den CLS:

• Bei Bildern und Videos immer Breiten- und Höhenattribute angeben
• Platz für Anzeigen und Einbettungen reservieren
• font-display: swap für Webfonts verwenden
• Keine Inhalte oberhalb bereits vorhandener Inhalte einfügen
• CSS-Boxen mit festem Seitenverhältnis nutzen
• Schriften vorladen
• Transform-Animationen statt layoutverschiebender Eigenschaften verwenden

So prüfen Sie Ihre Core Web Vitals:

• Google Search Console (Bericht zu den Core Web Vitals)
• PageSpeed Insights
• Chrome DevTools (Lighthouse)
• Chrome UX Report (CrUX)
• Web-Vitals-Erweiterung

Website-Geschwindigkeit testen: die wichtigsten Tools

Bevor Sie optimieren, ermitteln Sie mit diesen Tools Ihre Ausgangswerte:

1. Google PageSpeed Insights (kostenlos, unverzichtbar)

Was es leistet:

• Analysiert die Mobil- und Desktop-Performance
• Liefert Labordaten (simuliert) und Felddaten (echte Nutzerdaten)
• Misst die Core Web Vitals
• Gibt konkrete Optimierungsempfehlungen
• Zeigt einen Performance-Wert (0 bis 100)

So gehen Sie vor:

1. Rufen Sie https://pagespeed.web.dev/ auf
2. Geben Sie Ihre URL ein
3. Prüfen Sie den Performance-Wert
4. Sehen Sie sich die Core Web Vitals an (LCP, INP, CLS)
5. Lesen Sie den Abschnitt „Opportunities“ (Verbesserungsmöglichkeiten)
6. Prüfen Sie die Diagnose für weitere Erkenntnisse

Zielwerte:

• 90 bis 100: Ausgezeichnet (grün)
• 50 bis 89: Verbesserungswürdig (orange)
• 0 bis 49: Schlecht (rot)

2. GTmetrix (kostenlos und kostenpflichtig, umfassend)

Was es leistet:

• Basiert auf Lighthouse (wie bei Google)
• Liefert detaillierte Wasserfalldiagramme
• Testet von mehreren Standorten weltweit
• Überwacht die Performance im Zeitverlauf
• Bietet eine Videowiedergabe des Ladevorgangs

Wichtige Kennzahlen:

• GTmetrix-Note (A bis F)
• Performance-Wert
• Struktur-Wert
• Vollständige Ladezeit
• Gesamtgröße der Seite
• Anzahl der Anfragen

So gehen Sie vor:

1. Rufen Sie https://gtmetrix.com/ auf
2. Geben Sie die URL ein und wählen Sie den Teststandort
3. Prüfen Sie die Performance-Noten
4. Analysieren Sie das Wasserfalldiagramm
5. Sehen Sie sich den Abschnitt „Top Issues“ an
6. Schauen Sie sich das Ladevideo der Seite an

Vorteil gegenüber PageSpeed: GTmetrix zeigt die exakten Dateigrößen und Ladezeiten jeder Ressource, sodass sich konkrete Engpässe leichter finden lassen.

3. Pingdom Website Speed Test (kostenlos)

Was es leistet:

• Einfache, benutzerfreundliche Oberfläche
• Testet von mehreren Standorten weltweit
• Liefert eine Performance-Note
• Zeigt Ladezeit und Seitengröße
• Stellt eine Analyse der Dateianfragen dar

Am besten geeignet für: Schnelle Checks und kundenfreundliche Berichte mit leicht verständlichen Visualisierungen.

4. WebPageTest (kostenlos, für Fortgeschrittene)

Was es leistet:

• Die detaillierteste verfügbare Testmöglichkeit
• Filmstrip-Ansicht des Ladevorgangs
• Mehrere Testläufe für konsistente Ergebnisse
• Erweiterte Kennzahlen (TTFB, Speed Index usw.)
• Simulation gedrosselter Verbindungen

Am besten geeignet für: Entwickler, die tiefgehende technische Analysen benötigen und Engpässe präzise ermitteln wollen.

5. Chrome DevTools (integriert, kostenlos)

Was es leistet:

• Performance-Überwachung in Echtzeit
• Analyse der Netzwerkaktivität
• Coverage-Tool (findet ungenutztes CSS/JS)
• Performance-Profiler
• Lighthouse-Integration

So gehen Sie vor:

1. Öffnen Sie die Chrome DevTools (F12)
2. Wechseln Sie zum Tab „Lighthouse“
3. Wählen Sie Kategorien und Gerät aus
4. Erstellen Sie den Bericht
5. Prüfen Sie den Tab „Performance“ für die Zeitleistenanalyse

Best Practices für Tests:

Mehrere Seiten testen (Startseite, Produktseiten, Blogbeiträge)
Von verschiedenen Standorten testen (Nutzer können weltweit verteilt sein)
Mobil und Desktop testen
Mehrere Tests durchführen (Ergebnisse für Konsistenz mitteln)
Zu verschiedenen Zeiten testen (die Serverlast schwankt)
Den Cache zwischen Tests leeren für genaue Ergebnisse
Ausgangswerte dokumentieren, bevor Sie optimieren

25 bewährte Techniken zur Geschwindigkeitsoptimierung

Jetzt geht es an umsetzbare Optimierungsstrategien, nach Wirkung geordnet.

Höchste Priorität: Setzen Sie diese Maßnahmen zuerst um

1. Bilder optimieren und komprimieren

Das Problem: Bilder machen typischerweise 50 bis 70 % des gesamten Seitengewichts aus. Ein einziges unoptimiertes Foto kann Ihre ganze Seite ausbremsen.

Die Lösung:

Das richtige Format wählen:

• WebP: 25 bis 35 % kleiner als JPEG bei gleicher Qualität (am besten für die meisten Fotos)
• AVIF: 20 % kleiner als WebP (neuestes Format, zunehmende Unterstützung)
• JPEG: Klassisches Format für Fotos
• PNG: Für Grafiken, die Transparenz benötigen
• SVG: Für Logos, Icons und einfache Grafiken (beliebig skalierbar)

Tools zur Komprimierung:

• TinyPNG/TinyJPG: Kostenlose Online-Komprimierung (70 bis 80 % Größenreduktion)
• ImageOptim: Mac-Desktop-App für Stapelkomprimierung
• Squoosh: Webbasierter Bildoptimierer von Google
• ShortPixel: WordPress-Plugin mit API
• Compress JPEG: Automatisierter Komprimierungsdienst

Best Practices:

• Pro Bild unter 100 KB anstreben (Vorschaubilder unter 20 KB)
• Responsive Bilder mit dem Attribut srcset verwenden
• Für verschiedene Geräte unterschiedliche Größen ausliefern
• Nie Bilder hochladen, die größer sind als die Anzeigegröße
• Vor dem Hochladen komprimieren

Reale Wirkung: Wenn Sie die durchschnittliche Bildgröße von 2 MB auf 200 KB senken, kann sich die Ladezeit um 3 bis 5 Sekunden verbessern.

2. Lazy Loading einsetzen

Was es leistet: Bilder und Videos unterhalb des sichtbaren Bereichs werden erst geladen, wenn Nutzer in ihre Nähe scrollen.

So setzen Sie es um:

Natives Lazy Loading (HTML):

<img src="image.jpg" loading="lazy" alt="Description">

JavaScript-Bibliotheken:

• LazySizes: Am beliebtesten, funktionsreich
• Lozad.js: Leichtgewichtig (unter 1 KB)
• Vanilla LazyLoad: Ohne Abhängigkeiten

Was Sie per Lazy Loading laden sollten:

• Bilder unterhalb des sichtbaren Bereichs
• Videos
• iframes (Einbettungen, Karten)
• Hintergrundbilder (mit CSS-Tricks)

Was Sie NICHT per Lazy Loading laden sollten:

• Hero-Bilder im sichtbaren Bereich
• Logo und Navigationselemente
• Kritische UI-Komponenten

Wirkung: Kann das anfängliche Laden bei bildlastigen Seiten um 50 bis 70 % reduzieren.

3. Schnelles, zuverlässiges Hosting wählen

Das Problem: Günstiges Shared Hosting teilt Serverressourcen mit Hunderten anderen Websites, was zu Verlangsamungen führt.

Hosting-Arten nach Geschwindigkeit geordnet:

1. Managed WordPress Hosting (am schnellsten für WordPress):

• WP Engine, Kinsta, Flywheel
• Speziell für WordPress optimiert
• Integriertes Caching und CDN
• Kosten: 30 bis 100 $ pro Monat

2. Cloud-Hosting (skalierbar):

• AWS, Google Cloud, DigitalOcean
• Ressourcen skalieren automatisch
• Erfordert technisches Wissen
• Kosten: 10 bis 500 $ und mehr pro Monat

3. VPS-Hosting (gute Performance):

• SiteGround, A2 Hosting, Liquid Web
• Dedizierte Ressourcen
• Mehr Kontrolle als bei Shared Hosting
• Kosten: 20 bis 80 $ pro Monat

4. Shared Hosting (Budget-Option):

• Bluehost, HostGator, GoDaddy
• Begrenzte Ressourcen
• Die Performance schwankt
• Kosten: 3 bis 15 $ pro Monat

Wichtige Hosting-Merkmale für Geschwindigkeit:

• SSD-Speicher (nicht HDD)
• Unterstützung für HTTP/2 oder HTTP/3
• PHP 8.0+ (für WordPress)
• Caching auf Serverebene
• CDN-Integration
• Niedrige Serverantwortzeit (<200 ms)

Reale Wirkung: Der Wechsel von günstigem Shared Hosting zu hochwertigem Managed Hosting kann die TTFB (Time to First Byte) von 800 ms auf 200 ms senken, also um 75 %.

4. Browser-Caching aktivieren

Was es leistet: Browser speichern statische Dateien lokal, sodass wiederkehrende Besucher Seiten sofort laden.

So setzen Sie es um:

Für Apache-Server (.htaccess):

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType text/javascript "access plus 1 month"
ExpiresByType application/javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresDefault "access plus 2 days"
</IfModule>

Für WordPress (Plugins):

• W3 Total Cache: Umfassende Caching-Lösung
• WP Super Cache: Einfacher, benutzerfreundlich
• LiteSpeed Cache: Am besten für LiteSpeed-Server
• WP Rocket: Premium, einfachste Einrichtung

Caching-Ebenen:

• Browser-Caching: Speichert Dateien im Browser des Nutzers
• Seiten-Caching: Speichert ganze HTML-Seiten
• Objekt-Caching: Speichert Datenbankabfragen im Cache
• CDN-Caching: Speichert Dateien auf globalen Servern

Wirkung: Wiederkehrende Besucher erleben 50 bis 80 % schnellere Ladezeiten.

5. CSS, JavaScript und HTML minimieren

Was Minifizierung bewirkt: Überflüssige Zeichen (Leerzeichen, Zeilenumbrüche, Kommentare) werden aus dem Code entfernt, ohne die Funktion zu verändern.

Vor der Minifizierung:

/* Main Stylesheet */
body {
font-family: Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
color: #333333;
}

Nach der Minifizierung:

body{font-family:Arial,sans-serif;font-size:16px;line-height:1.5;color:#333}

Tools zur Minifizierung:

Online-Tools:

• CSS Minifier: https://cssminifier.com/
• JavaScript Minifier: https://javascript-minifier.com/
• HTML Minifier: https://www.willpeavy.com/tools/minifier/

Build-Tools:

• Webpack: Modul-Bundler mit Minifizierung
• Gulp: Task-Runner für automatisierte Minifizierung
• Grunt: JavaScript-Task-Runner

WordPress-Plugins:

• Autoptimize: Minifiziert und kombiniert Dateien
• Fast Velocity Minify: Erweiterte Optimierung
• WP Rocket: Minifizierung per Klick

Wirkung: Verringert Dateigrößen um 20 bis 40 % und verbessert die Ladezeit um 0,5 bis 1,5 Sekunden.

6. Ein Content Delivery Network (CDN) nutzen

Was es leistet: Die statischen Dateien Ihrer Website werden auf Server weltweit verteilt, und Inhalte kommen vom Standort, der jedem Nutzer am nächsten liegt.

So funktionieren CDNs:

1. Ein Nutzer in Tokio ruft Ihre Seite auf
2. Das CDN liefert die Dateien vom Server in Tokio aus (nicht von Ihrem Ursprungsserver in New York)
3. Die Seite lädt dank der Nähe 70 % schneller

Führende CDN-Anbieter:

Kostenlos/günstig:

• Cloudflare: Kostenloser Tarif verfügbar, hervorragende Performance
• BunnyCDN: Günstig und schnell (1 $/TB)
• Fastly: Kostenlose Stufe für kleine Websites

Premium:

• Amazon CloudFront: AWS-Integration
• StackPath: Erweiterte Sicherheitsfunktionen
• KeyCDN: Auf Performance ausgerichtet

Vorteile über die Geschwindigkeit hinaus:

• DDoS-Schutz
• SSL-Zertifikate
• Bot-Abwehr
• Traffic-Analysen
• Geringere Last auf dem Ursprungsserver

Einrichtung:

1. Für den CDN-Dienst registrieren
2. Ihre Website hinzufügen
3. DNS-Einträge (Nameserver) aktualisieren
4. Caching-Regeln konfigurieren
5. Weltweit testen

Wirkung: Internationale Nutzer erleben 40 bis 70 % schnellere Ladezeiten.

Hohe Priorität: Nach den kritischen Punkten umsetzen

7. Serverantwortzeit (TTFB) verkürzen

Was die TTFB ist: Die Time to First Byte, also wie lange es dauert, bis Ihr Server das erste Datenbyte sendet.

Zielwert: Unter 200 ms (gut), 200 bis 500 ms (ordentlich), über 500 ms (schlecht)

Ursachen einer langsamen TTFB:

• Langsames Hosting
• Ineffiziente Datenbankabfragen
• Kein Caching auf Serverebene
• Nicht optimiertes CMS
• Ressourcenhungrige Plugins/Erweiterungen
• Schlechte Serverkonfiguration

Lösungen:

• Hosting-Tarif oder -Anbieter wechseln
• OPcache aktivieren (PHP-Opcode-Caching)
• Die Datenbank optimieren (bereinigen, Tabellen indexieren)
• Redis oder Memcached nutzen (Objekt-Caching)
• WordPress-Plugins minimieren
• Schlanke Themes verwenden
• Gzip-Kompression aktivieren

Speziell für WordPress:

• Beitragsrevisionen begrenzen
• Die Datenbank regelmäßig bereinigen
• Pingbacks/Trackbacks deaktivieren
• Ungenutzte Themes/Plugins entfernen
• Plugins zur Abfrageüberwachung nutzen (Query Monitor)

8. Render-blockierende Ressourcen beseitigen

Das Problem: CSS- und JavaScript-Dateien verhindern, dass Seiteninhalte angezeigt werden, bis sie vollständig geladen sind.

Lösungen:

Für CSS:

• Kritisches CSS inline einbinden (Styles für den sichtbaren Bereich)
• Nicht kritisches CSS mit Media Queries verzögert laden
• Nicht wesentliche Styles asynchron laden
• Die CSS-Dateigröße durch Minifizierung reduzieren

Für JavaScript:

• Das Attribut defer zu Script-Tags hinzufügen
• async für unabhängige Skripte nutzen
• Skripte in den Footer verschieben (vor dem schließenden Body-Tag)
• Skripte von Drittanbietern zuletzt laden

Beispiel:

<!-- Render-blocking (bad) -->
<script src="script.js"></script>
<!-- Deferred loading (good) -->
<script src="script.js" defer></script>
<!-- Async loading (for independent scripts) -->
<script src="analytics.js" async></script>

Tools zur Erkennung:

• PageSpeed Insights (Render-blockierende Ressourcen beseitigen)
• Tab „Coverage“ in den Chrome DevTools
• Wasserfalldiagramm von GTmetrix

9. Webfonts optimieren

Das Problem: Eigene Schriften können 100 bis 500 KB hinzufügen und FOUT (Flash of Unstyled Text) oder FOIT (Flash of Invisible Text) verursachen.

Optimierungsstrategien:

1. Schriftvarianten begrenzen:

• Nur die wirklich benötigten Schriftschnitte nutzen (z. B. Regular und Bold)
• Unnötige Stile entfernen (Kursiv, falls ungenutzt)
• Höchstens 2 bis 3 Schriftfamilien verwenden

2. Systemschriften verwenden:

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

(Wird sofort dargestellt, kein Download nötig)

3. Google Fonts optimieren:

• Den Parameter &display=swap verwenden
• Nur notwendige Zeichensätze laden
• Vorab eine Verbindung zu den Schriftquellen aufbauen (Preconnect)

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

4. Schriften selbst hosten:

• Vermeidet Anfragen an Drittanbieter
• Verkürzt die DNS-Abfragezeit
• Das WOFF2-Format nutzen (beste Kompression)

5. Die Eigenschaft font-display:

@font-face {
font-family: 'CustomFont';
src: url('font.woff2') format('woff2');
font-display: swap; /* Shows fallback immediately, swaps when ready */
}

10. HTTP-Anfragen reduzieren

Das Problem: Jede Datei (Bild, Skript, Stylesheet) erfordert eine eigene HTTP-Anfrage. Mehr Anfragen bedeuten langsameres Laden.

Strategien:

Dateien kombinieren:

• Mehrere CSS-Dateien zu einer zusammenführen
• JavaScript-Dateien kombinieren
• CSS-Sprites für mehrere Bilder nutzen
• Icon-Fonts erstellen oder SVG-Sprites verwenden

Unnötige Elemente entfernen:

• Plugins/Erweiterungen prüfen (ungenutzte entfernen)
• Nicht genutzte Skripte für Social Sharing löschen
• Überflüssige Tracking-Codes entfernen
• Doppelte Bibliotheken eliminieren

Inline-Ressourcen nutzen:

• Kleines CSS inline einbinden (unter 14 KB)
• Kleine Bilder als Data-URIs kodieren
• Kritische SVGs inline einbinden

Speziell für WordPress:

• Plugin-Organizer nutzen (Asset CleanUp)
• Emoji-Skripte deaktivieren (falls ungenutzt)
• Query-Strings bei statischen Ressourcen entfernen

Wirkung: Die Reduzierung von 100 auf 50 Anfragen kann die Ladezeit um 1 bis 2 Sekunden verbessern.

Mittlere Priorität: Für fortgeschrittene Optimierung umsetzen

11. Gzip-/Brotli-Kompression aktivieren

Was es leistet: Dateien werden vor dem Senden an Browser komprimiert, was die Übertragungsgröße um 70 bis 90 % verringert.

Gzip vs. Brotli:

• Gzip: Universelle Unterstützung, 70 % Kompression
• Brotli: Moderne Browser, 80 % Kompression (besser)

So aktivieren Sie es (Apache .htaccess):

<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/javascript application/javascript application/json
</IfModule>

Prüfen, ob aktiviert:

• Den Kompressionstest von GiftOfSpeed.com nutzen
• In den Response-Headern nach „content-encoding: gzip“ suchen

Wirkung: Verringert die Übertragungsgrößen um 70 bis 90 % (CSS: 500 KB → 100 KB).

12. Datenbank optimieren

Typische Probleme der WordPress-Datenbank:

• Beitragsrevisionen (können sich zu Tausenden ansammeln)
• Transients (temporäre Optionen)
• Spam-Kommentare
• Verwaiste Metadaten
• Ungenutzte Tabellen gelöschter Plugins

Tools zur Optimierung:

Plugins:

• WP-Optimize: Automatische Datenbankbereinigung
• Advanced Database Cleaner: Gründliche Bereinigung
• WP Sweep: Manuelle Kontrolle über die Bereinigung

Manuelle Optimierung:

-- Limit post revisions (wp-config.php)
define('WP_POST_REVISIONS', 3);
-- Disable revisions entirely
define('WP_POST_REVISIONS', false);

Best Practices:

• Eine monatliche Datenbankoptimierung einplanen
• Beitragsrevisionen auf 3 bis 5 begrenzen
• Spam-Kommentare automatisch löschen
• Transients regelmäßig entfernen
• Die Datenbank vor größeren Bereinigungen exportieren

13. Weiterleitungen reduzieren

Das Problem: Jede Weiterleitung fügt eine Round Trip Time (RTT) hinzu, in der Regel 200 bis 500 ms Verzögerung.

Typische Weiterleitungsszenarien:

• http:// → https:// (notwendig, erhöht aber die Latenz)
• www → non-www oder umgekehrt
• Alte URLs → neue URLs
• Mobile Weiterleitungen
• Verkettete Weiterleitungen (A → B → C)

Lösungen:

• Direkte Links in der Navigation verwenden
• Interne Links nach Migrationen aktualisieren
• Weiterleitungsketten vermeiden
• Weiterleitungen auf Serverebene umsetzen (schneller als per Plugin)
• Unnötige Weiterleitungen entfernen

Weiterleitungen prüfen:

• Redirect-Checker-Tools nutzen
• Den Netzwerk-Tab der Chrome DevTools prüfen
• GTmetrix zeigt alle Weiterleitungen an

Wirkung: Das Eliminieren von 3 Weiterleitungen kann 600 bis 1.500 ms sparen.

14. Preloading und Prefetching einsetzen

Preload: Weist den Browser an, kritische Ressourcen sofort herunterzuladen.

<link rel="preload" href="critical.css" as="style">
<link rel="preload" href="hero-image.jpg" as="image">
<link rel="preload" href="font.woff2" as="font" crossorigin>

Prefetch: Lädt Ressourcen herunter, die voraussichtlich bei der nächsten Navigation gebraucht werden.

<link rel="prefetch" href="next-page.html">

DNS-Prefetch: Löst Domainnamen im Voraus auf.

<link rel="dns-prefetch" href="//cdn.example.com">

Preconnect: Baut frühzeitig Verbindungen zu Drittanbieter-Domains auf.

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

Wann Sie es einsetzen:

• Kritische Ressourcen im sichtbaren Bereich vorladen (Preload)
• Wahrscheinliche Ziele der nächsten Navigation vorab laden (Prefetch)
• Verbindungen zu wesentlichen Drittanbieter-Domains vorab aufbauen (Preconnect)
• DNS-Prefetch für Analytics/Werbung nutzen

15. Skripte von Drittanbietern optimieren

Das Problem: Laut HTTP-Archive-Daten sind Skripte von Drittanbietern (Analytics, Werbung, Chat-Widgets) die Ursache Nummer 1 für langsame Websites.

Häufige Verursacher:

• Google Analytics/Tag Manager
• Facebook Pixel
• Social-Media-Widgets
• Live-Chat-Skripte
• Werbenetzwerke
• Heatmap-Tools

Optimierungsstrategien:

1. Asynchron/verzögert laden (Async/Defer):

<script async src="analytics.js"></script>

2. Nicht wesentliche Skripte per Lazy Loading laden:

• Chat-Widgets nach 5 Sekunden laden
• Werbung erst laden, wenn die Seite interaktiv ist
• Social-Widgets beim Scrollen laden

3. Facade Loading nutzen:

• Vorschaubilder statt eingebetteter Videos anzeigen
• Die eigentliche Einbettung erst beim Klick laden

4. Wenn möglich selbst hosten:

• Google Analytics lokal hosten
• Schriften selbst hosten
• Reduziert Anfragen an Drittanbieter

5. Regelmäßig prüfen:

• Kontrollieren, was jedes Skript tut
• Ungenutzte Tracking-Codes entfernen
• Wo möglich zusammenfassen

Wirkung: Die Optimierung von Drittanbieter-Skripten kann die Ladezeit um 2 bis 5 Sekunden verbessern.

16. Moderne Bildformate verwenden

Vorteile von WebP:

• 25 bis 35 % kleiner als JPEG
• Unterstützt Transparenz (wie PNG)
• Von über 95 % der Browser unterstützt

Vorteile von AVIF:

• 20 % kleiner als WebP
• Überlegene Kompression
• Wachsende Browserunterstützung (85 % und mehr)

Umsetzung mit Fallbacks:

<picture>
<source srcset="image.avif" type="image/avif">
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="Fallback">
</picture>

Tools zur Konvertierung:

• Squoosh: Online-Konverter
• ImageMagick: Kommandozeilen-Tool
• Sharp: Bildverarbeitung für Node.js
• WebP Express: WordPress-Plugin

17. HTTP/2 oder HTTP/3 einsetzen

Vorteile:

• Multiplexing (mehrere Dateien gleichzeitig)
• Header-Kompression
• Server-Push-Funktionen
• Schneller als HTTP/1.1

So aktivieren Sie es:

• Die meisten modernen Hosting-Anbieter unterstützen HTTP/2 automatisch
• Erfordert ein SSL-Zertifikat
• Unterstützung prüfen: https://tools.keycdn.com/http2-test

HTTP/3 (QUIC):

• Protokoll der nächsten Generation
• Noch schneller als HTTP/2
• Zunehmende Verbreitung
• Erfordert kompatibles Hosting

18. Für mobile Performance optimieren

Mobilspezifische Optimierungen:

1. Responsive Bilder:

<img src="small.jpg"
srcset="small.jpg 400w, medium.jpg 800w, large.jpg 1200w"
sizes="(max-width: 600px) 400px, (max-width: 1000px) 800px, 1200px"
alt="Responsive image">

2. Accelerated Mobile Pages (AMP):

• Abgespecktes HTML für sofortiges Laden
• Wird von Google zwischengespeichert
• Am besten für Content-Websites

3. Mobile-First-Design:

• Für Mobilgeräte gestalten, für den Desktop erweitern
• Kritische Inhalte priorisieren
• Pop-ups minimieren

4. Touch-Optimierung:

• Größere Tap-Ziele (mindestens 48 x 48 px)
• Funktionen vermeiden, die auf Hover angewiesen sind
• Formulareingaben für Mobilgeräte optimieren

5. Mobilspezifische Anfragen reduzieren:

• Bilder entfernen, die nur für den Desktop gedacht sind
• Unnötige Funktionen deaktivieren
• Die mobile Navigation vereinfachen

19. Core Web Vitals überwachen und verbessern

Tools für die laufende Überwachung:

Kostenlos:

• Google Search Console (echte Nutzerdaten)
• PageSpeed Insights
• Web-Vitals-Chrome-Erweiterung

Kostenpflichtig:

• SpeedCurve (Performance-Monitoring)
• Calibre (automatisierte Tests)
• WebPageTest (geplante Tests)

Wichtige Praktiken zur Überwachung:

• Automatisierte wöchentliche Tests einrichten
• Nach größeren Updates überwachen
• Die Performance der Wettbewerber verfolgen
• Performance-Budgets festlegen
• Bei Verschlechterungen alarmieren

20. Code bereinigen und optimieren

Ungenutztes CSS/JavaScript entfernen:

Tools:

• Tab „Coverage“ in den Chrome DevTools
• PurgeCSS (entfernt ungenutztes CSS)
• UnCSS (erkennt ungenutzte Selektoren)
• Webpack Bundle Analyzer

Best Practices:

• Den Code vierteljährlich prüfen
• Veralteten Code entfernen
• Nach Theme-Wechseln aufräumen
• Reste ungenutzter Plugins löschen
• Eine schlanke Codebasis pflegen

Fortgeschrittene Optimierungstechniken

21. Service Worker für das Caching einsetzen

Was sie leisten: Sie ermöglichen offlinefähige Websites mit fortgeschrittenen Caching-Strategien.

Vorteile:

• Sofortige wiederholte Besuche
• Offline-Funktionalität
• Hintergrundsynchronisierung
• Push-Benachrichtigungen

Umsetzung: Erfordert JavaScript-Kenntnisse und die Einrichtung einer Progressive Web App.

22. Resource Hints nutzen

Priority Hints:

<img src="hero.jpg" fetchpriority="high" alt="Hero">
<script src="analytics.js" fetchpriority="low" defer></script>

Wirkung: Steuert die Priorisierung von Ressourcen im Browser.

23. Videoinhalte optimieren

Strategien:

• Auf YouTube/Vimeo hosten (große Dateien nicht selbst hosten)
• Facade Loading nutzen (Vorschaubild bis zum Klick)
• Video-Einbettungen per Lazy Loading laden
• Videos vor dem Upload komprimieren
• Moderne Codecs verwenden (H.265, AV1)

24. HTTP/2 Push im Browser aktivieren

Was es leistet: Ressourcen werden proaktiv gesendet, bevor der Browser sie anfordert.

Umsetzung: Erfordert eine Serverkonfiguration und eine sorgfältige Auswahl der Ressourcen.

25. Edge Computing einsetzen

Was es ist: Verarbeitung auf CDN-Edge-Servern, die näher bei den Nutzern liegen.

Vorteile:

• Geringere Latenz
• Schnellere dynamische Inhalte
• Personalisierung ohne Performance-Einbußen

Anbieter:

• Cloudflare Workers
• AWS Lambda@Edge
• Fastly Compute@Edge

Checkliste zur Geschwindigkeitsoptimierung

Mit dieser umfassenden Checkliste behalten Sie Ihren Optimierungsfortschritt im Blick:

Fundament (kritisch)

□ Aktuelle Geschwindigkeit testen (PageSpeed, GTmetrix)
□ Ausgangswerte dokumentieren
□ Auf hochwertiges Hosting umsteigen
□ HTTPS aktivieren
□ CDN einrichten

Bilder (kritisch)

□ Alle Bilder komprimieren (unter 100 KB)
□ In WebP/AVIF umwandeln
□ Lazy Loading einführen
□ Responsive Bild-Srcsets ergänzen
□ Bildabmessungen optimieren

Caching (kritisch)

□ Browser-Caching aktivieren
□ Seiten-Caching einrichten
□ Objekt-Caching umsetzen (falls zutreffend)
□ CDN-Caching-Regeln konfigurieren

Code-Optimierung (hohe Priorität)

□ CSS minimieren
□ JavaScript minimieren
□ HTML minimieren
□ Ungenutztes CSS/JS entfernen
□ Nicht kritisches JavaScript verzögert laden
□ Kritisches CSS inline einbinden

Server und Datenbank (hohe Priorität)

□ TTFB optimieren (unter 200 ms)
□ Datenbank bereinigen
□ Beitragsrevisionen begrenzen
□ Spam/Entwürfe entfernen
□ Gzip-/Brotli-Kompression aktivieren

Ressourcen (mittlere Priorität)

□ Webfonts optimieren
□ HTTP-Anfragen reduzieren
□ CSS-/JS-Dateien wo möglich zusammenführen
□ Redundanten Code entfernen

Fortgeschritten (mittlere Priorität)

□ Render-blockierende Ressourcen beseitigen
□ Weiterleitungen reduzieren
□ Preloading einsetzen
□ Skripte von Drittanbietern optimieren
□ HTTP/2 oder HTTP/3 aktivieren

Mobil (hohe Priorität bei mobilem Traffic)

□ Mobile Performance testen
□ Responsive Bilder umsetzen
□ Für Touch optimieren
□ Mobilspezifische Probleme beheben

Monitoring (laufend)

□ Core Web Vitals überwachen
□ Performance wöchentlich verfolgen
□ Performance-Budgets festlegen
□ Geschwindigkeit der Wettbewerber prüfen
□ Nach Updates testen

Häufige Fehler bei der Geschwindigkeitsoptimierung

Optimieren, ohne vorher zu testen (nicht raten, sondern messen)
Zu viele Optimierungs-Plugins nutzen (sie bremsen sich gegenseitig aus)
Die mobile Performance ignorieren
Übermäßig optimieren (nach den Grundlagen sinkt der Ertrag)
Die Hosting-Qualität vergessen
Nach der Optimierung nicht weiter überwachen
Techniken umsetzen, die Sie nicht verstehen
Die Core Web Vitals vernachlässigen
Auf Werte statt auf die echte Nutzererfahrung achten
Nicht in echten Browsern testen

Fazit

Die Optimierung der Website-Geschwindigkeit ist kein einmaliges Projekt, sondern ein dauerhaftes Engagement für Performance, das den Geschäftserfolg direkt beeinflusst. Jede gewonnene Sekunde bedeutet bessere Nutzererfahrung, höhere Suchrankings, eine höhere Conversion-Rate und mehr Umsatz.

Starten Sie mit diesem priorisierten Aktionsplan:

Woche 1: Fundament

• Aktuelle Geschwindigkeit testen und Ausgangswerte dokumentieren
• Alle Bilder komprimieren und optimieren
• Browser-Caching aktivieren
• CDN einrichten

Woche 2: Kritische Korrekturen

• CSS/JavaScript/HTML minimieren
• Lazy Loading einführen
• Probleme bei den Core Web Vitals beheben
• Bei Bedarf das Hosting wechseln

Woche 3: Fortgeschrittene Optimierung

• HTTP-Anfragen reduzieren
• Render-blockierende Ressourcen beseitigen
• Die Datenbank optimieren
• Nicht kritische Skripte verzögert laden

Woche 4: Mobil und Monitoring

• Die mobile Performance optimieren
• Performance-Monitoring einrichten
• Weltweit testen
• Verbesserungen dokumentieren

Denken Sie daran:

• Zuerst die Optimierungen mit der größten Wirkung angehen
• Vor und nach jeder Änderung testen
• Die Core Web Vitals laufend überwachen
• Der mobilen Performance Vorrang geben
• Die Nutzererfahrung nicht für Geschwindigkeitswerte opfern

Ihre Wettbewerber optimieren bereits. Die Frage ist nicht, ob Sie es sich leisten können, Zeit in die Geschwindigkeitsoptimierung zu investieren, sondern ob Sie es sich leisten können, es nicht zu tun.

Fangen Sie noch heute an. Ihre Nutzer, Ihre Suchrankings und Ihr Umsatz werden es Ihnen danken.

Häufige Fragen