53% der Nutzer verlassen Seiten, die länger als 3 Sekunden laden

Das ist keine Übertreibung – das sind Google-Daten. Und es wird schlimmer: Bei 5 Sekunden Ladezeit steigt die Absprungrate auf 90%.

Deine Website kann noch so schön sein. Wenn sie langsam lädt, sehen die meisten Besucher sie nie.

Was bedeutet PageSpeed eigentlich?

Google PageSpeed Insights bewertet deine Website auf einer Skala von 0-100. Die Bewertung basiert auf echten Nutzerdaten und simulierten Tests.

Die Bewertungsstufen:

• 0-49 (Rot): Schlecht – dringender Handlungsbedarf
• 50-89 (Orange): Verbesserungswürdig – Optimierungspotenzial
• 90-100 (Grün): Gut – weiter so

Wichtig: Mobile und Desktop werden getrennt bewertet. Mobile ist kritischer, weil die Mehrheit mobil surft und die Bedingungen (langsameres Netz, schwächere Hardware) härter sind.

Warum Performance so wichtig ist

1. Conversion Rate

Amazon hat berechnet: Jede 100 Millisekunden längere Ladezeit kosten 1% Umsatz. Bei ihrem Volumen sind das Milliarden.

Für kleinere Unternehmen gilt das Prinzip genauso:

2. Google Rankings

Seit 2021 sind Core Web Vitals ein offizieller Ranking-Faktor. Google bevorzugt schnelle Seiten – und bestraft langsame.

Bei gleicher Inhaltsqualität gewinnt die schnellere Website.

3. User Experience

Schnelle Seiten fühlen sich professionell an. Langsame Seiten frustrieren. Dieser erste Eindruck überträgt sich auf die Wahrnehmung deines gesamten Unternehmens.

4. Kosten

Langsame Seiten = mehr Server-Last = höhere Hosting-Kosten. Optimierte Seiten brauchen weniger Ressourcen.

Die häufigsten Performance-Killer

1. Unoptimierte Bilder

Das Problem: Ein Bild direkt aus der Kamera hat oft 5-10 MB. Für eine Website braucht es maximal 200 KB.

Die Lösung:

• Bilder vor dem Upload komprimieren
• Richtige Formate verwenden (WebP statt PNG/JPG)
• Responsive Bilder (unterschiedliche Größen für unterschiedliche Geräte)
• Lazy Loading (Bilder erst laden, wenn sie sichtbar werden)

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

2. Zu viel JavaScript

Das Problem: Jedes Script muss geladen, geparst und ausgeführt werden. Das blockiert das Rendering.

Die Lösung:

• Unnötige Plugins entfernen
• Scripts am Ende der Seite oder mit defer laden
• Kritisches JS inline, Rest lazy-loaden
• Moderne Frameworks vermeiden wenn nicht nötig

3. Fehlende Komprimierung

Das Problem: Unkomprimierte Textdateien (HTML, CSS, JS) sind 3-5x größer als nötig.

Die Lösung:

# .htaccess
<IfModule mod_deflate.c>
  AddOutputFilterByType DEFLATE text/html text/css application/javascript
</IfModule>

4. Kein Browser-Caching

Das Problem: Bei jedem Seitenaufruf werden alle Dateien neu geladen.

Die Lösung:

# .htaccess
<IfModule mod_expires.c>
  ExpiresActive On
  ExpiresByType image/webp "access plus 1 year"
  ExpiresByType text/css "access plus 1 month"
  ExpiresByType application/javascript "access plus 1 month"
</IfModule>

5. Langsamer Server / Hosting

Das Problem: Billiges Shared Hosting mit überlasteten Servern.

Die Lösung:

• Qualitäts-Hosting wählen (nicht das günstigste)
• Server in der Nähe der Zielgruppe
• CDN für statische Inhalte

Der Weg zu PageSpeed 100

Schritt 1: Ist-Analyse

1. PageSpeed Insights öffnen
2. URL eingeben
3. Mobile UND Desktop testen
4. Ergebnisse speichern

Schritt 2: Quick Wins zuerst

Die Maßnahmen mit dem größten Effekt:

1. Bilder optimieren – oft 50%+ Verbesserung
2. Gzip/Brotli aktivieren – 70% kleinere Dateien
3. Unused CSS/JS entfernen – Bootstrap-Default lädt 200 KB ungenutzt
4. Above-the-fold optimieren – kritisches CSS inline

Schritt 3: Core Web Vitals optimieren

LCP (Largest Contentful Paint): Wann ist der Hauptinhalt sichtbar?

• Bilder optimieren
• Server Response Time verbessern
• Render-blockierende Ressourcen eliminieren

FID/INP (Interaktivität): Wie schnell reagiert die Seite?

• JavaScript minimieren
• Long Tasks aufbrechen
• Web Workers für schwere Berechnungen

CLS (Cumulative Layout Shift): Springt der Inhalt?

• Dimensionen für Bilder/Videos definieren
• Fonts vorher laden
• Keine dynamisch eingefügten Inhalte über sichtbarem Content

Schritt 4: Messen, Optimieren, Wiederholen

Performance ist kein einmaliges Projekt. Nach jeder größeren Änderung:

1. Erneut testen
2. Neue Probleme identifizieren
3. Optimieren
4. Dokumentieren

Tools für die Performance-Optimierung

Real-World Beispiel

Vorher: Typische WordPress-Seite mit Premium-Theme

• PageSpeed Mobile: 34
• Ladezeit: 6,2 Sekunden
• Größe: 4,8 MB

Nachher: Nach Optimierung

• PageSpeed Mobile: 98
• Ladezeit: 1,1 Sekunden
• Größe: 380 KB

Maßnahmen:

1. Unnötige Plugins deaktiviert (-15 Scripts)
2. Bilder in WebP konvertiert und komprimiert
3. Lazy Loading aktiviert
4. CSS/JS minimiert und combined
5. Browser-Caching konfiguriert
6. Hosting gewechselt

Ergebnis: 4x mehr organischer Traffic nach 3 Monaten.

Fazit

PageSpeed 100 ist kein Selbstzweck – es ist der Unterschied zwischen einer Website, die Kunden bringt, und einer, die sie vergrault.

Die gute Nachricht: Die meisten Performance-Probleme sind lösbar. Oft reichen ein paar Stunden Arbeit für dramatische Verbesserungen.

Deine Website lädt langsam? Jeder Tag, den du wartest, kostet dich Kunden.