WordPress Pagespeed optimieren: Der komplette Guide

Ein guter PageSpeed Score bedeutet schnellere Ladezeiten, bessere Nutzererfahrung und bessere Google-Rankings. Dieser Guide zeigt alle Maßnahmen, um WordPress für maximale Geschwindigkeit zu optimieren.

Was ist PageSpeed und warum ist es wichtig?

Google PageSpeed Score

Google bewertet Websites von 0-100:

Warum PageSpeed wichtig ist

1. Nutzererfahrung – Schnelle Seiten = zufriedene Besucher
2. Conversion – Jede Sekunde Ladezeit kostet Umsatz
3. SEO – Core Web Vitals sind Ranking-Faktor
4. Absprungrate – Langsame Seiten werden verlassen

Core Web Vitals verstehen

Google misst drei Hauptmetriken:

LCP – Largest Contentful Paint

Was: Wie lange dauert es, bis der größte sichtbare Inhalt geladen ist?

Typische Ursachen für schlechten LCP:

• Langsamer Server (TTFB)
• Render-blockierende Ressourcen
• Große, nicht optimierte Bilder
• Lazy Loading für Above-the-fold-Bilder

INP – Interaction to Next Paint

Was: Wie schnell reagiert die Seite auf Klicks/Tippen?

Typische Ursachen für schlechten INP:

• Zu viel JavaScript
• Lange JavaScript-Aufgaben
• Schwere Event-Handler

CLS – Cumulative Layout Shift

Was: Wie viel verschiebt sich der Inhalt beim Laden?

Typische Ursachen für schlechten CLS:

• Bilder ohne Größenangaben
• Spät ladende Schriften
• Dynamisch eingefügte Inhalte
• Werbebanner

Schritt-für-Schritt Optimierung

Phase 1: Basis-Optimierung

1. Caching aktivieren

Plugin-Empfehlung: WP Rocket

Einstellungen:

• ✅ Seiten-Cache aktivieren
• ✅ Browser-Caching aktivieren
• ✅ Cache-Vorladung aktivieren

Oder kostenlos: LiteSpeed Cache (bei LiteSpeed-Servern)

2. Bilder optimieren

Plugin: ShortPixel oder Imagify

Einstellungen:

• Komprimierung: Lossy (beste Ersparnis)
• WebP aktivieren
• Lazy Loading (native oder per Plugin)
• Bilder vor Upload verkleinern (max. 1920px)

3. Minifizierung aktivieren

CSS und JavaScript verkleinern:

WP Rocket:

• ✅ CSS-Dateien minifizieren
• ✅ JavaScript-Dateien minifizieren
• ✅ CSS-Dateien kombinieren
• ⚠️ JS kombinieren (vorsichtig, kann Probleme machen)

Phase 2: Render-Blocking beseitigen

Kritisches CSS generieren

Das CSS für den sichtbaren Bereich inline laden:

WP Rocket (Premium):

• ✅ Kritisches CSS generieren
• ✅ CSS-Laden optimieren

JavaScript verzögern

WP Rocket:

• ✅ JavaScript verzögert laden (defer)
• ✅ JavaScript-Ausführung verzögern

Ausnahmen für kritische Skripte konfigurieren!

Phase 3: Server-Optimierung

TTFB verbessern

• Besseres Hosting (SSD, PHP 8.x)
• Objekt-Cache (Redis/Memcached)
• Datenbank optimieren

GZIP/Brotli aktivieren

Meist automatisch beim Hosting. Prüfen:

curl -H "Accept-Encoding: gzip" -I https://deine-seite.de

Sollte zeigen: Content-Encoding: gzip

Phase 4: Fonts optimieren

Google Fonts lokal einbinden

Plugin: OMGF (Optimize My Google Fonts)

Oder manuell:

1. Fonts herunterladen
2. In Theme-Ordner hochladen
3. Lokal einbinden

Vorteile:

• Kein externer Request
• DSGVO-konform
• Schneller

Font-Display optimieren

@font-face {
    font-family: 'Open Sans';
    src: url('open-sans.woff2') format('woff2');
    font-display: swap;  /* Text sofort sichtbar */
}

Phase 5: Lazy Loading optimieren

Above-the-fold ausschließen

Das Hero-Bild sollte NICHT lazy loaded werden!

WP Rocket:

• Lazy Loading → "Ausgeschlossene Bilder"
• CSS-Klassen oder Dateinamen eintragen

iframes lazy loaden

Videos, Maps etc. erst bei Bedarf laden:

• ✅ iframe Lazy Loading aktivieren
• YouTube-Thumbnail statt eingebettetem Player

Erweiterte Optimierungen

CDN einrichten

Cloudflare (kostenlos):

1. Account erstellen
2. Website hinzufügen
3. DNS umstellen
4. Caching konfigurieren

Vorteile:

• Schnellere Auslieferung weltweit
• DDoS-Schutz
• Zusätzliche Optimierungen

Preloading nutzen

Wichtige Ressourcen vorladen:

<link rel="preload" href="critical.css" as="style">
<link rel="preload" href="hero.webp" as="image">
<link rel="preconnect" href="https://fonts.googleapis.com">

WP Rocket: Automatisches Preload für kritische Ressourcen

Datenbank optimieren

Plugin: WP-Optimize

Regelmäßig bereinigen:

• Alte Revisionen löschen
• Transients bereinigen
• Spam-Kommentare löschen
• Verwaiste Daten entfernen

Plugins reduzieren

Jedes Plugin kostet Performance:

1. Plugins → Liste durchgehen
2. Ungenutzte deaktivieren und löschen
3. Alternativen für ressourcenhungrige Plugins
4. Ziel: < 20 aktive Plugins

PageSpeed nach Seitentyp

Startseite

Fokus: LCP und TTFB

• Hero-Bild optimieren und nicht lazy loaden
• Kritisches CSS inline
• Above-the-fold-Content priorisieren

Blog-Artikel

Fokus: CLS und Bilder

• Bilder mit width/height
• Lazy Loading für alle außer erstem Bild
• Weniger Werbung/eingebettete Inhalte

Shop-Seiten

Fokus: INP und Interaktivität

• JavaScript optimieren
• Produktbilder vorbereiten
• Checkout-Seiten nicht zu stark cachen

Typische Probleme und Lösungen

"Eliminate render-blocking resources"

Lösung:

• CSS/JS minifizieren und kombinieren
• Kritisches CSS inline
• JavaScript defer/async

"Serve images in next-gen formats"

Lösung:

• WebP aktivieren (ShortPixel, Imagify)
• AVIF als Alternative

"Properly size images"

Lösung:

• Bilder vor Upload verkleinern
• Responsive Images nutzen (WordPress macht das automatisch)

"Reduce unused CSS/JavaScript"

Lösung:

• Ungenutzte Plugins entfernen
• Asset CleanUp Plugin nutzen
• Theme-Features deaktivieren

"Avoid large layout shifts"

Lösung:

• Bilder mit width/height
• Schriften vorladen oder fallback
• Platzhalter für dynamische Inhalte

Performance-Monitoring

Tools zum Messen

Regelmäßig prüfen

• Nach jedem größeren Update
• Monatlicher Check
• Bei Traffic-Einbrüchen

Checkliste: PageSpeed-Optimierung

Basis (muss sein)

• [ ] Caching-Plugin installiert und konfiguriert
• [ ] Bilder optimiert (Komprimierung + WebP)
• [ ] Lazy Loading aktiv
• [ ] Datenbank optimiert

Fortgeschritten

• [ ] CSS/JS minifiziert
• [ ] Render-blocking Resources eliminiert
• [ ] Kritisches CSS inline
• [ ] Fonts lokal eingebunden
• [ ] CDN eingerichtet

Profi

• [ ] JavaScript verzögert
• [ ] Preloading konfiguriert
• [ ] Unused CSS entfernt
• [ ] Objekt-Cache (Redis)
• [ ] HTTP/2 oder HTTP/3

Zusammenfassung

WordPress Pagespeed optimieren:

1. Caching – Größter Einzeleffekt
2. Bilder – Optimieren + WebP + Lazy Loading
3. Render-Blocking – CSS/JS optimieren
4. Fonts – Lokal einbinden
5. Plugins – Reduzieren auf das Nötige
6. Hosting – Gute Basis nötig

Ziele:

• PageSpeed Score > 80 (mobil)
• LCP < 2,5s
• CLS < 0,1
• INP < 200ms

Weiterführende Artikel

• WordPress zu langsam: Ursachen & Lösungen
• WordPress Bilder optimieren
• WordPress Cache leeren: Alle Methoden

PageSpeed-Optimierung zu kompliziert?

Bei unserer WordPress Wartung optimieren wir auch die Performance deiner Website – für schnelle Ladezeiten und gute Rankings.