PageSpeed & Performance optimieren: Core Web Vitals

Die Ladegeschwindigkeit (PageSpeed) einer Website ist ein entscheidender Faktor für den Erfolg im Web. Sie beeinflusst massgeblich die Conversion Rate, die Nutzererfahrung und ist ein offizieller Google-Rankingfaktor. Eine Verzögerung von nur einer Sekunde kann die Absprungrate Ihrer Besucher dramatisch erhöhen.

Core Web Vitals: Die Metriken von Google

Google misst die Nutzererfahrung anhand von drei zentralen Metriken, den Core Web Vitals:

graph LR
    subgraph Core Web Vitals
        LCP[LCP: Largest Contentful Paint<br/>Ladezeit Hauptinhalt<br/>Ziel: &lt; 2.5s]
        INP[INP: Interaction to Next Paint<br/>Interaktivität / Reaktionszeit<br/>Ziel: &lt; 200ms]
        CLS[CLS: Cumulative Layout Shift<br/>Visuelle Stabilität<br/>Ziel: &lt; 0.1]
    end

1. Largest Contentful Paint (LCP)

Misst die reine Ladeperformance.

• Häufige Ursachen für schlechten LCP: Langsame Server-Antwortzeiten (TTFB), blockierendes JavaScript und CSS, langsame Bild-Ladezeiten.

2. Interaction to Next Paint (INP)

Misst die Reaktionsgeschwindigkeit der Seite auf Benutzerinteraktionen (z. B. Klicks auf Buttons oder Menüs). INP hat im März 2024 die alte Metrik FID (First Input Delay) abgelöst.

• Häufige Ursachen für schlechten INP: Überlasteter Main Thread durch exzessive JavaScript-Ausführung.

3. Cumulative Layout Shift (CLS)

Misst die visuelle Stabilität. Wenn Elemente während des Ladevorgangs hin- und herspringen, stört das den Nutzer und führt zu Fehlklicks.

• Häufige Ursachen für schlechten CLS: Fehlende Dimensionsangaben (width/height) bei Bildern, dynamisch eingefügte Werbebanner, verzögerter Webfont-Wechsel.

---

Technische Hebel zur Performance-Optimierung

1. Bilder-Optimierung

Bilder machen oft den grössten Teil des Datenvolumens aus.

• Moderne Formate: Nutzen Sie WebP oder AVIF statt JPEG oder PNG.
• Responsive Images: Liefern Sie über das <picture>-Element bzw. srcset nur Bilder in der physisch benötigten Auflösung aus.
• Lazy Loading: Fügen Sie allen Bildern unterhalb des sichtbaren Bereichs (Fold) das Attribut loading="lazy" hinzu.

2. JavaScript und CSS reduzieren

• Minification: Komprimieren Sie Code durch Entfernung von Leerzeichen und Kommentaren.
• Critical CSS: Laden Sie das für den sichtbaren Bereich (Above the Fold) benötigte CSS inline direkt im HTML-Dokument (<style> in head) und laden Sie das restliche CSS asynchron nach.
• Unnötige Frameworks vermeiden: Statisch generierte Frameworks wie Astro rendern HTML serverseitig und senden standardmässig null JavaScript an den Browser (Astro Islands).

3. Caching & CDNs

• Aktivieren Sie serverseitiges Caching und nutzen Sie ein Content Delivery Network (CDN), um statische Inhalte geografisch nah am Nutzer zu spiegeln.

---

Die drei Core Web Vitals im direkten Vergleich

Eine Seite gilt erst dann als schnell, wenn alle drei Kernmetriken im grünen Bereich liegen. Die folgende Tabelle fasst Schwellenwerte und typische Ursachen zusammen:

Metrik	Misst	Gut	Schlecht	Häufigste Ursache
LCP	Ladezeit Hauptinhalt	≤ 2,5 s	> 4,0 s	grosse Bilder, hoher TTFB
INP	Reaktion auf Eingaben	≤ 200 ms	> 500 ms	überlasteter Main-Thread
CLS	visuelle Stabilität	≤ 0,1	> 0,25	Bilder ohne Grössenangabe

Welche Metrik Sie zuerst angehen, ergibt sich aus den Core-Web-Vitals-Felddaten Ihrer Domain. Ein perfekter LCP nützt wenig, wenn das Layout während des Ladens springt – die schwächste der drei Metriken bestimmt den Gesamteindruck.

---

Messen vor Optimieren: Lab- und Felddaten

Bevor Sie Massnahmen umsetzen, sollten Sie sauber messen. Google Lighthouse liefert reproduzierbare Labordaten zum Debuggen, PageSpeed Insights kombiniert sie mit echten Felddaten. Erst der Abgleich beider Quellen zeigt, ob ein guter Laborwert auch bei echten Nutzern ankommt. Die Performance-Checkliste führt anschliessend Schritt für Schritt durch die wirksamsten Optimierungen.

---

PageSpeed Checkliste für Entwickler

• Bilder liegen im WebP- oder AVIF-Format vor (siehe Bilder optimieren).
• Alle Bilder haben explizite width und height Attribute im HTML (Schutz vor CLS).
• Webfonts werden selbst gehostet und liegen als .woff2 vor (siehe Schriftarten optimieren).
• CSS und JS sind minifiziert und optimiert (siehe CSS optimieren und JavaScript reduzieren).
• Caching-Header (Cache-Control) sind gesetzt (siehe Caching).
• Detaillierte Prüfung erfolgt (siehe Performance Checkliste).

---

Alle PageSpeed-Leitfäden im Überblick

Hier finden Sie unsere detaillierten Fachartikel zur Ladezeit- und Performance-Optimierung:

• Messwerte & Core Web Vitals: Core Web Vitals | LCP | INP | CLS
• Ressourcen-Optimierung: Bilder optimieren | Schriftarten (Fonts) | CSS optimieren | JavaScript reduzieren
• Systeme & Caching: Caching | TTFB | CDN | Performance Checkliste
• Diagnose-Werkzeuge: Google Lighthouse | PageSpeed Insights

[!TIP] Möchten Sie Ihre Ladezeit und die Core Web Vitals Ihrer Website im Detail messen und konkrete Empfehlungen erhalten? Starten Sie jetzt einen Live-Test mit dem PageSpeed Check auf balou.tools.

---