Sie haben Ihre Website in PageSpeed Insights geprüft und ein rotes Ergebnis unter 50 bekommen. Der erste Impuls: Panik, Frust, “Das geht nie zu beheben.”
Atmen Sie tief durch. Ich habe Hunderten Websites geholfen, von rotem zu grünem Score zu kommen. Und die gute Nachricht: Viele Probleme sind erstaunlich einfach zu lösen – oft in weniger als 10 Minuten pro Fix.
In diesem Artikel zeige ich Ihnen die 10 häufigsten Performance-Probleme und wie Sie diese Schritt für Schritt beheben. Keine Theorie, keine komplizierte Erklärungen – einfach Dinge, die Sie direkt tun können.
Am Ende dieses Artikels sollten Sie einen Score von mindestens 80 erreichen, oft sogar 90+.
Warum PageSpeed überhaupt wichtig ist
Bevor wir loslegen, kurz die Frage: Warum sollten Sie sich überhaupt kümmern?
Google Rankings
Google verwendet seit 2021 die Core Web Vitals als Ranking-Faktor. Websites mit guten PageSpeed-Werten ranken besser – besonders bei mobilen Suchen. Das ist keine Theorie, sondern Fakt.
Konversionen
Langsame Websites verkaufen weniger. Studien zeigen:
- 1 Sekunde Verzögerung = 7% weniger Conversions
- 40% der Nutzer verlassen eine Website, wenn sie länger als 3 Sekunden lädt
- Jede 100ms Verbesserung steigert die Konversionsrate um 1%
Gute Performance = bessere Konversionen = mehr Umsatz.
Nutzererfahrung
Niemand wartet gerne. Eine schnelle Website fühlt sich professioneller an, ist angenehmer zu nutzen und kommt besser an.
Mobile Performance
Auf Mobilgeräten ist Performance noch wichtiger. Langsame Verbrennen Daten, sind nervig, und Nutzer verlassen die Seite schneller.
Die 3 Core Web Vitals im Detail
PageSpeed Insights misst nicht einen einzigen Score, sondern mehrere Metriken. Die wichtigsten sind die Core Web Vitals:
1. LCP (Largest Contentful Paint) – 2,5 Sekunden oder besser
Was ist das? Die Zeit, bis der größte Inhalt (meist ein Bild oder Textblock) sichtbar ist.
Ziel: Unter 2,5 Sekunden (grün)
2. FID (First Input Delay) – 100 Millisekunden oder besser
Was ist das? Die Zeit, bis die Website auf den ersten Klick/Tap des Nutzers reagiert.
Ziel: Unter 100 ms (grün)
Hinweis: FID wird durch INP (Interaction to Next Paint) abgelöst, aber PageSpeed zeigt noch beide an.
3. CLS (Cumulative Layout Shift) – 0,1 oder besser
Was ist das? Wie stark sich Elemente beim Laden verschieben (das nervige “Klick auf den falschen Button”).
Ziel: Unter 0,1 (grün)
Fix #1: Bilder komprimieren (5 Minuten)
Das Problem: Unkomprimierte oder zu große Bilder sind die häufigste Ursache für schlechte PageSpeed-Werte.
Schritt 1: Problem identifizieren
Öffnen Sie PageSpeed Insights und scrollen Sie zu “Möglichkeiten”. Suchen Sie nach:
- “Bilder effizient codieren”
- “Größen von Bildern nicht korrekt”
Schritt 2: Bilder manuell komprimieren (gratis)
Nutzen Sie Online-Tools wie:
- https://tinypng.com/ – PNG komprimieren
- https://squoosh.app/ – Google-Tool, verschiedene Formate
- https://compressor.io/ – Alles (PNG, JPG, SVG, GIF)
Vorgehen:
- Bild hochladen
- Komprimieren lassen
- Gedankt komprimierte Version herunterladen
- Auf Server hochladen, alte Datei überschreiben
Typische Ersparnis: 60-80% Dateigröße bei kaum sichtbarem Qualitätsverlust.
Schritt 3: Bilder in richtigen Dimensionen bereitstellen
Ein 2000x2000px Bild, das auf Ihrer Website nur 500x500px angezeigt wird, verschwendet Bandbreite.
Lösung:
- In Photoshop/GIMP auf die benötigte Größe skalieren
- Oder mit einem Plugin automatisch skalieren lassen (siehe Fix #2)
Schritt 4: Modernes Format verwenden
WebP ist deutlich kleiner als JPEG oder PNG bei gleicher Qualität.
WordPress-Lösung: Plugin wie WebP Express oder ShortPixel nutzen, das automatisch WebP-Versionen erstellt und diese Browsern anbietet.
WordPress-Nutzer: Fix #2 lesen (Image Optimization Plugin).
Fix #2: Image-Optimization Plugin installieren (WordPress, 5 Minuten)
Wenn Sie WordPress nutzen, machen Sie das automatisch mit einem Plugin.
Empfohlene Plugins
Kostenlose Plugins:
- WebP Express – Erstellt WebP-Versionen, super leichtgewichtig
- Imagify – Kostenlos bis zu 25MB/Monat, sehr einfach
- ShortPixel – Kostenlos bis zu 100 Bilder/Monat
Premium-Plugins:
- Smush Pro – Unbegrenzt, sehr zuverlässig
- WP Rocket – Beinhaltet Image-Optimierung + Caching
- ShortPixel Image Optimizer – Advanced features wie Lazy Load
Installation (am Beispiel WebP Express)
- WordPress-Backend → Plugins → Installieren
- “WebP Express” suchen
- Installieren und aktivieren
- Gehen Sie zu Einstellungen → WebP Express
- “Run Test” klicken
- Wenn alles grün ist: Speichern
Das Plugin macht jetzt automatisch:
- WebP-Versionen aller Bilder erstellen
- Browsern die WebP-Versionen anbieten
- Fallback zu JPG/PNG für alte Browser
Erwartetes Ergebnis: +10-20 Punkte im PageSpeed Score, 30-60% weniger Bandbreite.
Fix #3: Browser Caching aktivieren (5 Minuten)
Das Problem: Jedes Mal, wenn ein Nutzer Ihre Website besucht, werden alle Ressourcen neu geladen – auch wenn sie sich nie ändern.
Browser Caching speichert Dateien (CSS, JS, Bilder) lokal im Browser des Nutzers. Beim nächsten Besuch laden diese dann fast augenblicklich.
WordPress-Lösung
Am besten mit Caching-Plugin:
WP Rocket (Premium, empfohlen)
- Installieren und aktivieren
- Aktivieren Sie “Browser Caching”
- Fertig – WP Rocket konfiguriert alles automatisch
W3 Total Cache (Kostenlos)
- Installieren und aktivieren
- General Settings → Browser Cache
- Alle Checkboxen aktivieren
- Save all settings
WP Super Cache (Kostenlos)
- Installieren und aktivieren
- Einstellungen → Easy
- Caching aktivieren
- Leichtere Option als W3 Total Cache
Nicht-WordPress: .htaccess (Apache Server)
Falls Sie Zugriff auf .htaccess haben, fügen Sie hinzu:
<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"
</IfModule>
Nginx-Server
Fügen Sie zu nginx.conf hinzu:
location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
expires 1y;
add_header Cache-Control "public, immutable";
}
Fix #4: Text-Komprimierung aktivieren (5 Minuten)
Das Problem: HTML, CSS und JavaScript sind unkomprimiert, obwohl Gzip oder Brotli sie um 60-80% verkleinern könnte.
WordPress-Lösung (mit Caching-Plugin)
Die meisten Caching-Plugins aktivieren Gzip automatisch:
WP Rocket: Automatisch aktiviert
W3 Total Cache:
- General Settings → Browser Cache
- “Enable HTTP (gzip) compression” aktivieren
- Speichern
WP Super Cache:
- Advanced → Cache hits to this website for quick access
- “Compress pages so they’re served more quickly to visitors” aktivieren
Nicht-WordPress: .htaccess (Apache)
<IfModule mod_deflate.c>
# Compress HTML, CSS, JavaScript, Text, XML and fonts
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE font/opentype
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml
</IfModule>
Nginx-Server
gzip on;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
Brotli (noch besser als Gzip)
Brotli ist effizienter als Gzip (ca. 15-20% mehr Kompression). Prüfen Sie, ob Ihr Server Brotli unterstützt:
Apache: Modul mod_brotli installieren
Nginx: Modul ngx_brotli installieren
WordPress-Plugin: Brotli Plugin kann Brotli aktivieren, wenn Ihr Server es unterstützt.
Fix #5: JavaScript und CSS minimieren (5 Minuten)
Das Problem: JavaScript- und CSS-Dateien enthalten Leerzeichen, Kommentare, Umbrüche – alles unnötig, das Bandbreite frisst.
WordPress-Lösung
Mit den meisten Caching-Plugins:
WP Rocket:
- Settings → File Optimization
- “Minify CSS” aktivieren
- “Minify JavaScript” aktivieren
- Speichern
W3 Total Cache:
- Minify → General
- Minify aktivieren
- JS und CSS aktivieren
- Speichern
WP Super Cache:
- Advanced → Minify
- JavaScript und CSS aktivieren
Nicht-WordPress: Manuelle Tools
JavaScript:
- https://www.minifier.org/ – Online-JS-Minifier
- https://javascript-minifier.com/
CSS:
- https://cssminifier.com/ – Online-CSS-Minifier
Vorgehen:
- Original-Datei speichern (Backup!)
- Inhalt in das Tool kopieren
- Minifierte Version kopieren
- Original damit überschreiben
Vorsicht: Manchmal bricht Minifizierung den Code. Testen Sie nach dem Minifizieren immer gründlich!
Fix #6: Render-blocking JavaScript entfernen (10 Minuten)
Das Problem: JavaScript-Dateien im <head> blockieren das Rendering. Der Browser muss erst alle JS laden und ausführen, bevor der Nutzer etwas sieht.
Die Lösung: JavaScript asynchron oder verzögert laden
Asynchron (async): Skript lädt im Hintergrund, wird ausgeführt sobald fertig. Nicht geeignet für Skripte, die andere Skripte abhängig sind.
Verzögert (defer): Skript lädt im Hintergrund, wird erst ausgeführt NACHDEM der DOM fertig ist.
WordPress-Lösung
Mit Caching-Plugin:
WP Rocket:
- Settings → File Optimization
- “Load JavaScript deferred” aktivieren
- Speichern
W3 Total Cache:
- Minify → Advanced
- “Non-blocking using defer” aktivieren
Plugin Async JavaScript:
- Installieren und aktivieren
- Einstellungen → Async JavaScript
- “Enable Async JavaScript” aktivieren
- Meistens “defer” ist sicherer als “async”
Nicht-WordPress: Manuell
Ändern Sie <script>-Tags von:
<script src="script.js"></script>
Zu:
<script src="script.js" defer></script>
Oder:
<script src="script.js" async></script>
Wann defer, wann async?
defer: Für die meisten Skripte sicherer, keine Abhängigkeitsproblemeasync: Für Skripte, die nicht abhängig sind, schneller
Fix #7: CSS inline für Above-the-Fold (15 Minuten)
Das Problem: CSS-Dateien blockieren das Rendering. Der Nutzer sieht erst etwas, nachdem ALLE CSS geladen ist.
Die Lösung: Das für den sichtbaren Bereich (above-the-fold) notwendige CSS direkt inline in das HTML einbetten. Den Rest async laden.
Schritt 1: Above-the-Fold CSS extrahieren
Online-Tool:
- Öffnen Sie Ihre Website
- Drücken Sie F12 (DevTools)
- Gehen Sie zum Tab “Sources”
- Öffnen Sie die CSS-Datei
- Kopieren Sie das CSS für die sichtbaren Elemente (Header, Hero, Navigation)
Automatisch:
- https://criticalcss.com/ – Analysiert automatisch, extrahiert critical CSS
Schritt 2: Critical CSS inline einbetten
Fügen Sie das extrahierte CSS in den <head> ein:
<head>
<style>
/* Ihr Critical CSS hier */
body { margin: 0; font-family: sans-serif; }
.hero { background: #333; color: white; padding: 50px 0; }
/* ... weiteres CSS für above-the-fold ... */
</style>
<link rel="stylesheet" href="style.css" media="print" onload="this.media='all'">
</head>
Der link-Tag mit dem Trick lädt das restliche CSS asynchron.
WordPress-Lösung
Plugin CriticalCSS
- Installieren und aktivieren
- Scannt automatisch Critical CSS
- Bettet es inline ein
WP Rocket Premium
- Settings → Advanced Rules
- “Remove unused CSS” (CSS-Optimierung)
- Automatisch extrahiert und inline-bettet
Fix #8: Lazy Loading für Bilder (5 Minuten)
Das Problem: Alle Bilder laden sofort, auch die, die der Nutzer gar nicht sieht (ganz unten auf der Seite).
Die Lösung: Lazy Loading – Bilder laden erst, wenn sie in den sichtbaren Bereich scrollen.
Native Browser Lazy Loading (moderne Browser, empfohlen)
Fügen Sie einfach loading="lazy" zu <img>-Tags hinzu:
<img src="image.jpg" loading="lazy" alt="..." width="800" height="600">
Wichtig: Geben Sie immer width und height an, damit der Browser den Platzhalter vorab korrekt rendern kann (verhindert Layout Shifts).
WordPress-Lösung
Seit WordPress 5.5: Lazy Loading ist automatisch für alle <img>-Tags aktiviert!
Für ältere Versionen:
- a3 Lazy Load – Kostenlos, einfach
- WP Rocket: Integriert
- Lazy Load by WP Rocket – Gratis-Version
Plugin a3 Lazy Load:
- Installieren und aktivieren
- Einstellungen → alles Standard lassen
- Fertig
Plugin Lazy Load by WP Rocket:
- Installieren und aktivieren
- Keine Konfiguration nötig
Nicht-WordPress: JavaScript-Library
Nutzen Sie eine JavaScript-Library wie:
- lazysizes – Sehr populär, lightweight
- Intersection Observer API – Native Browser-API, keine Library nötig
Beispiel mit Intersection Observer:
document.addEventListener("DOMContentLoaded", function() {
var lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));
if ("IntersectionObserver" in window) {
let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
let lazyImage = entry.target;
lazyImage.src = lazyImage.dataset.src;
lazyImage.srcset = lazyImage.dataset.srcset;
lazyImage.classList.remove("lazy");
lazyImageObserver.unobserve(lazyImage);
}
});
});
lazyImages.forEach(function(lazyImage) {
lazyImageObserver.observe(lazyImage);
});
}
});
HTML:
<img class="lazy" data-src="image.jpg" data-srcset="image.jpg 1x, image@2x.jpg 2x" alt="...">
Fix #9: Drittanbieter-Scripte reduzieren (10 Minuten)
Das Problem: Facebook Pixel, Google Analytics, YouTube-Videos, Twitter-Feeds – alle laden externe Scripte, die Performance killen.
Schritt 1: Alle Drittanbieter-Scripte identifizieren
Öffnen Sie PageSpeed Insights → “Drittanbieter-Usage”
Oder DevTools → Network → filtern nach externen Domains.
Schritt 2: Priorisieren: Brauchen Sie das wirklich?
Typische Drittanbieter-Scripte und Alternativen:
| Script | Wirklich nötig? | Alternative |
|---|---|---|
| Google Analytics | Ja, für Tracking | Cookielose Alternative: Plausible, Fathom |
| Google Fonts | Nein, nicht von Google | Lokal hosten (siehe Google Fonts Guide) |
| Facebook Pixel | Ja, für Retargeting | Cookie-Banner nötig (siehe Cookie-Banner Guide) |
| YouTube-Videos | Ja, für Content | YouTube-Privacy-Enhanced: youtube-nocookie.com |
| Google Maps | Vielleicht | OpenStreetMap als Alternative |
| Twitter-Feed | Wahrscheinlich nicht | Statischer Screenshot oder Link |
| Instagram-Feed | Wahrscheinlich nicht | Link statt embed |
| Chat-Widget (Intercom, etc.) | Vielleicht | Verzögert laden oder nur auf bestimmten Seiten |
Schritt 3: Scripte verzögert laden
Laden Sie Drittanbieter-Scripte erst, wenn:
- Der Nutzer eingewilligt hat (Cookie-Banner)
- Die Website vollständig geladen ist
- Der Nutzer interagiert (z.B. Scrollen)
WordPress-Lösung:
- WP Rocket kann Drittanbieter-Scripte verzögert laden
- Cookie-Banner Plugins (Borlabs, Real Cookie Banner) blockieren Scripte bis zur Einwilligung
Nicht-WordPress:
// Erst laden, wenn Nutzer zum Ende der Seite scrollt
document.addEventListener('scroll', function() {
var footer = document.getElementById('footer');
var rect = footer.getBoundingClientRect();
if (rect.top < window.innerHeight) {
loadScript('https://connect.facebook.net/en_US/fbevents.js');
// Remove event listener after loading
document.removeEventListener('scroll', arguments.callee);
}
});
Schritt 4: Self-Hosten statt CDN
Manche Scripte können Sie selbst hosten:
- jQuery (falls Ihre Website es nutzt): Herunterladen und lokal hosten
- Font Awesome: Lokal hosten statt CDN
- Google Fonts: Lokal hosten
Vorteil: Weniger DNS-Lookups, schneller Laden, mehr Kontrolle.
Fix #10: HTTP/2 oder HTTP/3 aktivieren (5-10 Minuten)
Das Problem: HTTP/1.1 kann nicht viele gleichzeitige Anfragen. HTTP/2 und HTTP/3 sind schneller.
Prüfen, ob Sie bereits HTTP/2/3 nutzen
Online-Tool:
- https://tools.keycdn.com/http2-test – Testet HTTP/2
Chrome DevTools:
- F12 → Network
- Spalte “Protocol” hinzufügen (Rechtsklick auf Tab-Header → Spalten aktivieren)
- Seite neu laden
- Sehen Sie “h2” oder “h3” in der Spalte? Dann ist HTTP/2/3 aktiv.
HTTP/2 aktivieren
Apache:
<IfModule http2_module>
Protocols h2 http/1.1
</IfModule>
Nginx:
listen 443 ssl http2;
Cloudflare: HTTP/2/3 ist automatisch aktiviert (wenn Sie Cloudflare nutzen).
cPanel:
- cPanel → Software → Select PHP Version
- HTTP/2 aktivieren (falls verfügbar)
HTTP/3 (QUIC) aktivieren
HTTP/3 ist noch schneller als HTTP/2, besonders bei instabilen Verbindungen (mobil).
Apache (nicht direkt unterstützt): HTTP/3 ist in Apache noch nicht verfügbar (Stand 2026). Nginx oder Cloudflare nutzen.
Nginx:
listen 443 ssl http3;
listen 443 ssl http2;
Cloudflare: HTTP/3 ist in allen Plänen verfügbar. Einfach in Cloudflare-Dashboard aktivieren:
- Network → HTTP/3 with QUIC
- Aktivieren
Zusätzliche Quick-Wins (weniger als 5 Minuten)
Datenbank optimieren (WordPress)
Überlagerte Datenbank verlangsamt Ladezeiten.
Plugin: WP-Optimize
- Installieren und aktivieren
- Database → Run all selected cleanups
- Automatische Optimierung aktivieren
Unused CSS/JS entfernen
Oder CSS-/JS-Dateien, die gar nicht benutzt werden.
WordPress-Plugin: Asset CleanUp
- Installieren und aktivieren
- Scannt auf jeder Seite nicht benutztes CSS/JS
- Kann pro Seite deaktivieren
Vorsicht: Kann Layout/Functionality kaputt machen. Testen Sie nach dem Deaktivieren gründlich!
Server-Upgrade prüfen
Shared Hosting ist oft langsam. Prüfen Sie:
- PHP-Version aktualisieren (mindestens PHP 8.1)
- Server-Geografie: Server in Deutschland oder Österreich, wenn Ihre Nutzer dort sind
- CDN nutzen: Cloudflare kostenlos, beschleunigt weltweit
HTTPS aktivieren (falls nicht vorhanden)
HTTPS ist nicht nur sicherer, sondern auch schneller wegen HTTP/2.
Let’s Encrypt ist kostenlos. Viele Hoster haben One-Click-Installation.
Nach den Fixes: Seite neu testen
Nachdem Sie einige Fixes umgesetzt haben, testen Sie Ihre Seite erneut:
- PageSpeed Insights öffnen
- URL eingeben
- Analysieren
- Score prüfen
Erwartung:
- Nach allen 10 Fixes: 80-100 Score
- Nach 5 Fixes: 60-80 Score
- Nach 2-3 Fixes: 50-70 Score
Wichtig: Testen Sie Desktop und Mobile separat. Mobile ist oft schwieriger und benötigt mehr Optimierung.
Die 10 Fixes auf einen Blick (Zeitaufwand)
| # | Fix | Zeit | Erwarteter Score-Gain |
|---|---|---|---|
| 1 | Bilder komprimieren | 5 Min | +10-15 |
| 2 | Image-Plugin (WP) | 5 Min | +10-20 |
| 3 | Browser Caching | 5 Min | +5-10 |
| 4 | Text-Komprimierung | 5 Min | +5-8 |
| 5 | JS/CSS minimieren | 5 Min | +5-10 |
| 6 | Async JS | 10 Min | +8-12 |
| 7 | Critical CSS | 15 Min | +10-15 |
| 8 | Lazy Loading | 5 Min | +5-10 |
| 9 | Drittanbieter-Scripte | 10 Min | +10-20 |
| 10 | HTTP/2/3 | 5-10 Min | +5-8 |
Gesamtzeit: ca. 1 Stunde für alle 10 Fixes
Erwarteter Score-Gain: +50-80 Punkte (wenn vorher 30, dann 80-110)
Häufige Fehler und wie Sie sie vermeiden
Fehler 1: Minifiziertes JS bricht die Website
Wenn Sie JavaScript manuell minimieren, kann es passieren, dass Code kaputt geht.
Lösung: Immer Backup der Original-Datei. Testen Sie nach der Minifizierung gründlich (Klick durch alle wichtigen Seiten).
Fehler 2: Critical CSS falsch extrahiert → Layout zerstört
Wenn Sie zu wenig CSS extrahieren, sieht die Seite kurz anders aus (Flash of Unstyled Content). Wenn Sie zu viel extrahieren, vergrößern Sie das Inline-CSS zu sehr.
Lösung: Nutzen Sie lieber ein Tool (WP Rocket, CriticalCSS Plugin) als manuell.
Fehler 3: Lazy Loading verursacht Layout Shifts
Wenn Sie width und height nicht angeben, weiß der Browser nicht, wie groß das Platzhalter-Bild sein soll. Das verursacht Layout Shifts (CLS).
Lösung: Geben Sie IMMER width und height bei Lazy Loading an.
Fehler 4: Cache-Fehler nach Optimierung
Manchmal sehen Nutzer nach Optimierungen alte Versionen wegen Cache.
Lösung:
- Browser-Cache leeren (Ctrl+Shift+R)
- Plugin-Cache leeren (WP Rocket: Clear Cache)
- CDN-Cache leeren (Cloudflare: Purge Everything)
Fehler 5: Mobile Score viel schlechter als Desktop
Das ist normal. Mobile hat:
- Langsamere CPU
- Weniger RAM
- Langsamere Netzwerke (oft 4G statt Gigabit)
- Batterie-Einschränkungen
Lösung:
- Besonders auf Bilder achten (Mobile braucht kleinere Bilder)
- Weniger Drittanbieter-Scripte
- Critical CSS noch wichtiger für Mobile
Für WordPress: Das ultimative Performance-Setup
Wenn Sie WordPress nutzen, hier mein empfohlenes Setup:
Hosting
- Empfohlen: Kinsta, WP Engine, Raidboxes (Managed WordPress Hosting)
- Günstig: All-Inkl, Hetzner (aber: mehr Konfiguration nötig)
Plugins (Minimal-Setup)
- Caching: WP Rocket (Premium) oder W3 Total Cache (Kostenlos)
- Image-Optimierung: WebP Express oder ShortPixel
- Lazy Loading: In WP Rocket integriert oder a3 Lazy Load
- Cookie-Banner: Borlabs Cookie (für DSGVO-Compliance)
- Datenschutz: Local Google Fonts für lokales Font-Hosting
Zu vermeiden
- Zu viele Plugins (mehr als 30 sind zu viel)
- Page Builders wie Divi/Elementor in der Standard-Konfiguration (langsam)
- Billige Themes mit eingebauten Overhead
Für Nicht-WordPress: Alternativen
Next.js (React)
Sehr schnell aus der Box mit Server-Side Rendering und Automatic Code Splitting.
Gatsby (React)
Statisch generierte Sites, extrem schnell, perfekt für Blogs/Portfolio-Websites.
Hugo (Statische Sites)
Rasend schnell, kein PHP, keine Datenbank, perfekt für Dokumentationen/Blogs.
Laravel (PHP)
Mit Varnish-Cache und Optimierung schnell für komplexe Web-Apps.
PageSpeed ist nicht alles: Core Web Vitals才是
Ein Score von 100 ist nett, aber die Core Web Vitals sind wichtiger für Nutzererfahrung und Google-Ranking.
Konzentrieren Sie sich auf:
- LCP < 2,5 Sekunden – Größtes Element schnell sichtbar
- INP < 200 ms – Schnelle Reaktion auf Nutzerinteraktion
- CLS < 0,1 – Keine Layout-Shifts
Wenn diese drei grün sind, ist alles andere zweitrangig.
Monitoring: Performance überwachen
Nachdem Sie optimiert haben, überwachen Sie Performance regelmäßig:
PageSpeed Insights
Testen Sie monatlich Desktop und Mobile.
Google Search Console
Unter “Erlebnis mit Web Vitals” sehen Sie, wie Core Web Vitals auf echte Nutzerdaten performen.
Monitoring-Tools
- Google Lighthouse CI – Automatische Tests bei jedem Deploy
- WebPageTest – Detaillierte Wasserfall-Diagramme
- GTmetrix – Alternative zu PageSpeed Insights
Zusammenfassung: Ihr 1-Stunden-Fahrplan
Hier ist ein konkreter Fahrplan, wie Sie in 1 Stunde von Score 30 zu 80+ kommen:
Minute 0-5: Initial-Test
- PageSpeed Insights öffnen, URL testen
- Score notieren, häufigste Probleme identifizieren
Minute 5-10: Bilder komprimieren (Fix #1)
- Tinypng.com oder Squoosh nutzen
- Alle Hauptbilder komprimieren
Minute 10-15: Image-Plugin installieren (Fix #2)
- WebP Express oder ShortPixel installieren
- Konfigurieren und laufen lassen
Minute 15-20: Caching aktivieren (Fix #3)
- WP Rocket oder W3 Total Cache installieren
- Browser Caching aktivieren
Minute 20-25: Text-Komprimierung (Fix #4)
- Gzip aktivieren (im Caching-Plugin oder .htaccess)
Minute 25-30: JS/CSS minimieren (Fix #5)
- Minify im Caching-Plugin aktivieren
Minute 30-40: Async JavaScript (Fix #6)
- Async JavaScript aktivieren oder Plugin installieren
Minute 40-50: Lazy Loading (Fix #8)
- Lazy Loading im Caching-Plugin aktivieren
Minute 50-55: Drittanbieter prüfen (Fix #9)
- Nicht benötigte Widgets entfernen
- Scripte verzögert laden
Minute 55-60: HTTP/2 prüfen (Fix #10)
- HTTP/2-Test
- Falls nötig: Server-Konfiguration ändern
Minute 60: Neu-Test
- Cache leeren
- PageSpeed Insights neu testen
- Score prüfen
Sie brauchen Hilfe bei der Performance-Optimierung?
Sie haben die Fixes ausprobiert, aber der Score ist immer noch unter 50? Keine Sorge, Performance-Optimierung kann komplex sein.
Nutzen Sie unseren kostenlosen Website-Check. Wir analysieren:
- PageSpeed Score (Desktop & Mobile)
- Core Web Vitals
- Ladezeiten
- Spezifische Optimierungsempfehlungen
- Welche Fixes priorisiert werden sollten
Sie bekommen einen konkreten Plan, wie Sie Ihre Website beschleunigen können.
Weitere hilfreiche Artikel:
Starten Sie jetzt Ihre Performance-Optimierung – Ihre Besucher werden es danken!