Warum Performance ein Feature ist, kein Nachgedanke
Eine Sekunde Verzoegerung bei der Seitenladezeit reduziert die Conversions durchschnittlich um 7%. Google verwendet Performance-Metriken als Ranking-Signale. Nutzer haben kuerzere Aufmerksamkeitsspannen als je zuvor. Und Mobilfunkverbindungen sind in vielen Teilen der Welt immer noch langsam und unzuverlaessig.
Performance-Optimierung geht nicht darum, einen perfekten Lighthouse-Score zu jagen. Es geht darum, Ihre Website fuer echte Menschen auf echten Geraeten und echten Netzwerken nutzbar und reaktionsschnell zu machen.
Bildoptimierung: Der groesste Gewinn
Bilder machen typischerweise 50-70% des Gesamtgewichts einer Seite aus. Die Optimierung von Bildern ist fast immer die einzelne Performance-Verbesserung mit dem groessten Einfluss.
Moderne Formate: WebP und AVIF
| Format | Kompression vs. JPEG | Browser-Unterstuetzung | Geeignet fuer |
|---|---|---|---|
| WebP | 25-35% kleiner | 97%+ (alle modernen Browser) | Allgemeine Nutzung, Fotos, Grafiken |
| AVIF | 40-50% kleiner | 92%+ (Chrome, Firefox, Safari 16.4+) | Fotos, hochqualitative Bilder |
| SVG | N/A (Vektor) | 100% | Icons, Logos, Illustrationen |
Responsive Bilder
Ein 2400px breites Hero-Bild an ein Telefon mit 375px Viewport zu senden, verschwendet Bandbreite. Verwenden Sie die Attribute srcset und sizes, damit der Browser die richtige Bildgroesse waehlen kann.
Lazy Loading
Bilder unterhalb des sichtbaren Bereichs muessen nicht sofort geladen werden. Natives Lazy Loading wird von allen modernen Browsern unterstuetzt. Kein Lazy Loading fuer Above-the-Fold-Bilder.
Bildkomprimierung
- JPEG/WebP-Qualitaet 75-85 ist fuer menschliche Augen meist nicht von 100% zu unterscheiden.
- AVIF-Qualitaet 60-70 erreicht vergleichbare visuelle Qualitaet wie JPEG bei 85.
- Metadaten immer entfernen.
- Vor dem Komprimieren skalieren.
CSS- und JavaScript-Optimierung
Minifizierung
Minifizierung entfernt Leerzeichen, Kommentare und benennt Variablen um. Wenn Sie ein modernes Build-Tool verwenden (Vite, webpack, Rollup), ist Minifizierung fuer Produktions-Builds standardmaessig aktiviert.
Bundling und Code Splitting
Routen-basiertes Code Splitting ist der optimale Ansatz fuer die meisten Anwendungen: Jede Seite laedt ihren eigenen Chunk plus einen gemeinsamen Chunk mit geteiltem Code.
Kritisches CSS
CSS ist standardmaessig render-blockierend. Die Technik des kritischen CSS besteht darin, das fuer den Above-the-Fold-Inhalt benoetigte CSS direkt im <head> einzubetten und den Rest asynchron zu laden.
Font-Loading-Strategien
Web Fonts sind ein haeufiger Performance-Engpass. Eine typische Font-Datei ist 20-50KB pro Gewicht/Stil-Kombination.
Font-Optimierungstechniken
- Nur WOFF2 verwenden. 97%+ Browser-Unterstuetzung und 30% kleiner als WOFF.
- Fonts subsetten. Wenn Sie nur lateinische Zeichen verwenden, liefern Sie keine CJK-Glyphen aus.
- Kritische Fonts vorladen.
- Fonts selbst hosten. Eliminiert den DNS-Lookup zu einem Drittanbieter.
- System-Fonts in Betracht ziehen.
Server-Antwortzeit
Alle Frontend-Optimierung der Welt hilft nicht, wenn der Server zwei Sekunden braucht, um das HTML zu generieren. Der TTFB sollte unter 200ms liegen.
Loesungen
- CDN verwenden. Mehr ueber CDN-Vorteile in unserem Artikel ueber CDN-Vorteile und Sicherheit.
- Seiten-Caching implementieren.
- Statische Generierung in Betracht ziehen.
- Datenbank-Queries optimieren.
Caching-Strategien
Browser-Caching
Fuer statische Assets mit Content-Hash-Dateinamen: Cache-Control: public, max-age=31536000, immutable
Fuer HTML-Seiten: Cache-Control: public, max-age=0, must-revalidate
CDN-Caching
- Aggressives Caching fuer statische Assets.
- HTML-Caching mit kurzen TTLs oder stale-while-revalidate.
- Cache-Bereinigung beim Deployment.
Service-Worker-Caching
- Cache First - Fuer statische Assets.
- Network First - Fuer API-Aufrufe und dynamische Inhalte.
- Stale While Revalidate - Die beste Balance zwischen Geschwindigkeit und Aktualitaet.
Drittanbieter-Skripte: Die Performance-Steuer
Wir haben Websites auditiert, bei denen Drittanbieter-Skripte 60%+ der gesamten JavaScript-Ausfuehrungszeit und 300-500ms zusaetzliche Ladezeit ausmachten.
Gegenmassnahmen
- Jedes Drittanbieter-Skript ueberpruefen.
- Nicht-kritische Skripte verzoegern.
- Selbst hosten wo moeglich.
- Facades fuer Embeds verwenden.
Messen und Ueberwachen
Core Web Vitals
Fuer eine tiefgehende Analyse lesen Sie unseren Artikel ueber Core Web Vitals und SEO-Auswirkungen.
| Metrik | Was sie misst | Gut | Verbesserungsbedarf | Schlecht |
|---|---|---|---|---|
| LCP | Ladegeschwindigkeit | ≤ 2.5s | ≤ 4.0s | > 4.0s |
| INP | Reaktionsfaehigkeit | ≤ 200ms | ≤ 500ms | > 500ms |
| CLS | Visuelle Stabilitaet | ≤ 0.1 | ≤ 0.25 | > 0.25 |
Checkliste fuer Performance-Optimierung
- Bilder optimieren. In WebP/AVIF konvertieren, responsive Bilder, Lazy Loading.
- Komprimierung aktivieren. Brotli (bevorzugt) oder gzip.
- Korrektes Caching einrichten.
- CDN verwenden.
- Render-blockierende Ressourcen minimieren.
- Drittanbieter-Skripte reduzieren.
- Minifizieren und bundlen.
- Fonts optimieren.
- Server-Antwortzeit verbessern.
- Ueberwachung einrichten.
Fazit
Website-Performance ist keine einmalige Aufgabe. Sie erfordert fortlaufende Aufmerksamkeit. Beginnen Sie mit Bildern und Caching: Diese beiden Bereiche allein koennen die Ladezeit fuer viele Websites halbieren.
Wenn Sie Hilfe bei der Optimierung der Performance Ihrer Website benoetigen, kontaktieren Sie unser Team in Lugano. Wir helfen Unternehmen in der ganzen Schweiz, schnelle und sichere Websites zu erstellen.
Wollen Sie wissen, ob Ihre Website sicher ist?
Fordern Sie ein kostenloses Sicherheitsaudit an. In 48 Stunden erhalten Sie einen vollständigen Bericht.
Kostenloses Audit Anfordern