Page Speed & Performance

Core Web Vitals - Die wichtigsten Performance-Metriken

Die Core Web Vitals sind die drei wichtigsten Performance-Metriken, die Google für das Ranking verwendet:

1. Largest Contentful Paint (LCP)

LCP misst die Zeit, bis das größte sichtbare Element einer Seite geladen ist. Der Wert sollte unter 2,5 Sekunden liegen.

2. First Input Delay (FID)

FID misst die Zeit zwischen der ersten Benutzerinteraktion und der Browser-Antwort. Der Wert sollte unter 100 Millisekunden liegen.

3. Cumulative Layout Shift (CLS)

CLS misst die visuelle Stabilität einer Seite. Der Wert sollte unter 0,1 liegen.

4. Interaction to Next Paint (INP)

INP ist der neue Core Web Vital, der FID ersetzt. Er misst die Reaktionszeit auf Benutzerinteraktionen und sollte unter 200 Millisekunden liegen.

Performance-Metriken im Detail

Lab Data vs. Field Data

Weitere wichtige Performance-Metriken

• First Contentful Paint (FCP): Zeit bis zum ersten sichtbaren Inhalt
• Time to Interactive (TTI): Zeit bis die Seite vollständig interaktiv ist
• Speed Index: Geschwindigkeit der sichtbaren Inhalte
• Total Blocking Time (TBT): Zeit, in der der Hauptthread blockiert ist

Performance-Optimierungstechniken

1. Bildoptimierung

Moderne Bildformate:

• WebP: 25-35% kleinere Dateien als JPEG
• AVIF: 50% kleinere Dateien als JPEG
• SVG: Für Icons und einfache Grafiken

2. Code-Minimierung

3. Caching-Strategien

Browser-Caching:

• Statische Assets: 1 Jahr
• HTML-Seiten: 1 Stunde
• API-Responses: 5 Minuten

Server-Side Caching:

• Redis für dynamische Inhalte
• Memcached für Session-Daten
• CDN für statische Assets

4. Critical CSS

Critical CSS enthält die Styles, die für das Above-the-Fold-Rendering benötigt werden. Dies reduziert die Render-Blocking-Resources.

5. Resource Hints

• Preload: Wichtige Ressourcen vorab laden
• Prefetch: Ressourcen für nächste Seite laden
• Preconnect: DNS-Lookup und Verbindung vorbereiten
• Dns-prefetch: DNS-Auflösung beschleunigen

HTTP/2 und HTTP/3

HTTP/2 Vorteile

• Multiplexing: Mehrere Requests über eine Verbindung
• Server Push: Proaktives Senden von Ressourcen
• Header-Komprimierung: Reduzierte Overhead
• Binary Protocol: Effizientere Verarbeitung

HTTP/3 Vorteile

• QUIC-Protokoll: Schnellere Verbindungsaufbau
• Multiplexing ohne Head-of-Line-Blocking
• Bessere Performance bei Paketverlusten
• Integrierte Verschlüsselung

Performance-Monitoring und Tools

Google PageSpeed Insights

Kostenloses Tool von Google für Performance-Analysen mit Lab- und Field-Daten.

Google Lighthouse

Open-Source-Tool für umfassende Website-Audits mit Performance-Bewertungen.

WebPageTest

Detaillierte Performance-Analysen mit verschiedenen Standorten und Geräten.

Chrome DevTools

Integrierte Browser-Tools für Performance-Debugging und -Optimierung.

Mobile Performance

Mobile Performance ist besonders wichtig, da Google Mobile-First-Indexing verwendet und mobile Geräte oft langsamere Verbindungen haben.

Mobile-spezifische Optimierungen

• Touch-optimierte Elemente
• Reduzierte Datenübertragung
• Progressive Web App (PWA) Features
• AMP (Accelerated Mobile Pages)

Performance-Budget

Ein Performance-Budget definiert Limits für verschiedene Ressourcen, um die gewünschte Performance zu erreichen.

Häufige Performance-Probleme

1. Render-Blocking Resources

CSS und JavaScript, die das Rendering blockieren, sollten optimiert oder asynchron geladen werden.

2. Unoptimierte Bilder

Große Bilddateien ohne Komprimierung oder moderne Formate verlangsamen die Ladezeit erheblich.

3. Zu viele HTTP-Requests

Jeder Request kostet Zeit. Kombinieren Sie Ressourcen und nutzen Sie Spriting-Techniken.

4. Fehlende Caching-Headers

Ohne Caching werden Ressourcen bei jedem Besuch neu geladen.

5. Third-Party-Scripts

Externe Scripts können die Performance erheblich beeinträchtigen.

Performance-Testing-Strategien

1. Kontinuierliches Monitoring

Implementieren Sie kontinuierliches Performance-Monitoring mit Tools wie Google Analytics oder Real User Monitoring.

2. Automatisierte Tests

Integrieren Sie Performance-Tests in Ihren CI/CD-Prozess mit Tools wie Lighthouse CI.

3. A/B-Testing

Testen Sie Performance-Optimierungen mit A/B-Tests, um den Einfluss auf Rankings zu messen.

4. Regelmäßige Audits

Führen Sie monatliche Performance-Audits durch, um Verschlechterungen frühzeitig zu erkennen.

Zukunft der Performance

Core Web Vitals Evolution

Google erweitert kontinuierlich die Core Web Vitals und passt die Schwellenwerte an.

Neue Performance-Metriken

• Interaction to Next Paint (INP) ersetzt FID
• Erweiterte Mobile-Metriken
• Privacy-fokussierte Performance-Messungen

KI-gestützte Optimierung

Machine Learning wird zunehmend für automatische Performance-Optimierungen eingesetzt.