Gute Web-Performance macht Seiten angenehmer bedienbar und kann die Sichtbarkeit in der Suche unterstützen. Hier erfahren Sie, welche Messwerte zählen und welche Maßnahmen in der Praxis helfen.
1. Warum Performance wichtig ist
- Suchmaschinenoptimierung (SEO): Seitenerfahrung ist ein Signal unter mehreren
- Geschäftsziele: Kürzere Wartezeiten verringern Reibung auf dem Weg zur Anfrage
- Mobile Nutzung: Schlanke Seiten funktionieren auch auf langsameren Geräten und Verbindungen
- Barrierefreiheit: Stabile, reaktionsschnelle Oberflächen erleichtern die Bedienung
- Nutzererfahrung: Inhalte werden schneller sichtbar und Interaktionen reagieren verlässlich
2. Google Core Web Vitals
LCP – Largest Contentful Paint
Was:
Zeit, bis das größte sichtbare Element geladen ist
Ziel:
unter 2,5 Sekunden
Probleme:
Langsame Server, große Bilder, Font-Laden
INP – Interaction to Next Paint
Was:
Reaktionsfähigkeit bei Interaktionen während des gesamten Seitenbesuchs
Ziel:
höchstens 200 Millisekunden
Probleme:
zu viel JavaScript, lange Aufgaben im Hauptthread
CLS – Cumulative Layout Shift
Was:
Unerwartete Layout-Verschiebungen während des Ladens
Ziel:
unter 0,1
Probleme:
Bilder ohne Größe, dynamische Inhalte
3. Bildoptimierung
Moderne Bildformate
- WebP: gute Kompression und breite Browser-Unterstützung
- AVIF: häufig kleinere Dateien bei vergleichbarer Bildqualität
- Fallback: alternatives Format nur dort, wo die Zielbrowser es benötigen
Responsive Images
- Unterschiedliche Größen für verschiedene Geräte
- srcset-Attribut nutzen
- sizes-Attribut für Viewport-Größen
Lazy Loading
- loading="lazy" Attribut für moderne Browser
- Bilder laden nur, wenn sichtbar
- Erste Seite lädt schneller
4. CSS & JavaScript Optimierung
CSS Minifizierung
- Entwicklung: 45 KB
- Production (minified): 2 KB
- Einsparung: 95%
Critical CSS Inline
- Kritisches CSS direkt im head-Tag
- Rest der CSS async laden
- Schnellere First Contentful Paint
JavaScript Deferring
- defer-Attribut für App-Scripts
- async für Analytics
- Blockiert HTML-Parsing nicht
5. HTTP-Caching
Cache-Strategie
- 1 Jahr für Assets: Bilder, CSS, JS (mit Versionierung)
- 1 Woche für HTML: Mit Revalidierung
- Keine Cache für APIs: Dynamische Daten
.htaccess Konfiguration
- Expires-Header setzen
- Cache-Control Header
- ETag und Last-Modified
6. Kompression
GZIP Kompression
- Unkomprimiert: 500 KB
- GZIP: 100 KB (-80%)
- Brotli: 80 KB (-84%)
HTML-Minifizierung
- Whitespace entfernt
- HTML-Kommentare gelöscht
- Redundante Attribute entfernt
7. Content Delivery Network (CDN)
Ein CDN verteilt Inhalte auf Server weltweit. Nutzer laden von dem Server, der ihnen am nächsten ist.
Mögliche Wirkung
- kürzere Übertragungswege für ein internationales Publikum
- Entlastung des Ursprungsservers bei hohem Datenverkehr
- einheitliche Auslieferung statischer Dateien an mehreren Standorten
8. Performance-Checkliste
- Bilder in WebP/AVIF optimiert
- Responsive Images mit srcset
- Lazy Loading für Bilder
- CSS minifiziert
- JavaScript minifiziert und defer/async
- Critical CSS inline
- GZIP Kompression aktiviert
- HTTP-Caching konfiguriert
- Fonts lokal gehostet
- Lighthouse Score größer 90
- Core Web Vitals: Green
- CDN für Assets erwägen
9. Tools zur Messung
Browser-Tools:
- Chrome DevTools: F12 → Performance, Lighthouse
- Lighthouse CLI: Kommandozeilen-Tool
Online-Tools:
- Google PageSpeed Insights: pagespeed.web.dev/
- WebPageTest: webpagetest.org/
- GTmetrix: gtmetrix.com/
10. Quick Wins – Sofort umsetzbar
- Bilder komprimieren: TinyPNG/TinyJPG
- CSS/JS minifizieren: Build-Tool konfigurieren
- Unused CSS entfernen: PurgeCSS nutzen
- Fonts optimieren: Nur nötige Fonts laden
- CDN nutzen: Cloudflare kostenlos
- HTTP/2 aktivieren: Meist automatisch per HTTPS
- Monitoring: Performance regelmäßig prüfen
