Website Optimierung

Was ist Core Web Vitals und wie behebst du die größten Bremsen?

• von Florian Runge
Was ist Core Web Vitals und wie behebst du die größten Bremsen?

Was ist Core Web Vitals und wie behebst du die größten Bremsen?

Core Web Vitals sind die wichtigsten Messgrößen für Nutzererfahrung im Web. Sie helfen dir, die Performance und Usability deiner Website objektiv zu beurteilen – für Besucher in der Schweiz und weltweit. Dieser Leitfaden erklärt die Begriffe, zeigt aktuelle Trends, zählt typische Bremsen auf und gibt dir konkrete, praxistaugliche Lösungen.

1) Kurzdefinition: Was sind Core Web Vitals?

  • Core Web Vitals sind drei Metriken von Google zur Messung von Lade- und Interaktionsqualität einer Seite.

  • Sie heißen LCP, CLS und INP. Zusammen decken sie die Zeit bis zum ersten sichtbaren Inhalt, die Stabilität des Layouts und die Reaktionsfähigkeit der Seite ab.

  • Die Metriken sind in Search Console sichtbar und beeinflussen die Sichtbarkeit in der organischen Suche.

„Core Web Vitals bilden ab, wie Nutzer eine Seite tatsächlich erleben – nicht nur, wie schnell sie lädt.“

— Google, web.dev

2) Warum Core Web Vitals für dein Ranking und deine Conversion in der Schweiz zählen

  • Google nutzt Core Web Vitals als direktes Qualitätssignal für die Suche. Wenn LCP, CLS und INP schlecht sind, kann dein Ranking leiden.

  • Nutzer verlassen schneller langsame Seiten. Schnelle Seiten hingegen verbessern Absprungrate, Zeit auf Seite und Conversion.

  • Gerade im schweizer E‑Commerce wirken sich Ladezeiten direkt auf den Umsatz aus. Schneller = besser für deine Leads und Verkäufe.

3) Das Kern-Trio: LCP, CLS, INP – Kennzahlen und Grenzwerte

  • LCP (Largest Contentful Paint) misst die Zeit bis das größte, sichtbar gemachte Element lädt. Wichtig für die gefühlte Schnelligkeit der Seite.

  • CLS (Cumulative Layout Shift) misst die Layout-Verschiebung während des Ladevorgangs. Wichtig für die visuelle Stabilität.

  • INP (Interaction to Next Paint) misst die Reaktionsfähigkeit der Seite bei Benutzerinteraktionen. Wichtig für Interaktionsqualität.

Grenzwerte (Google, web.dev)

  • LCP: „Gut“ ≤ 2.5 s

  • CLS: „Gut“ ≤ 0.1

  • INP: „Gut“ ≤ 200 ms

Wenn LCP, CLS und INP im grünen Bereich liegen, ist deine Seite erfahrungsgemäß zügig und stabil.

— Google, web.dev

Statistischer Überblick (Quellen: HTTP Archive, Semrush)

  • INP wurde 2024 als neuer Kernfaktor für Interaktionsqualität etabliert. (Google Search Central, 2024)

  • LCP gilt als „Gut“ bei ≤ 2.5 Sekunden. (Google, web.dev)

  • CLS gilt als „Gut“ bei ≤ 0.1. (Google, web.dev)

  • Bounce: Bei Ladezeiten > 3 Sekunden steigt die Absprungrate deutlich. (Think with Google, Studie)

  • Conversion: Jede Verzögerung von 1 Sekunde kann Conversion-Raten deutlich reduzieren. (Akamai; weitere Branchenquellen)

  • Globale Ausgangslage: Viele Websites verpassen die Schwellen für LCP/INP/CLS in der Praxis. (Semrush 2023, „Core Web Vitals Study“)

4) So misst du Core Web Vitals richtig

1. Field-Daten nutzen: Search Console > Core Web Vitals. Dort siehst du echte Nutzerdaten (Chrome UX Report).

2. Real-User Monitoring (RUM): Einbinden von Performance-APIs (Navigation Timing, PerformanceObserver). So siehst du Probleme im Live-Traffic.

3. Lighthouse/PageSpeed Insights: Prüfen von Lab-Daten und Vorschlägen – ideal für Debugging und Regressionskontrolle.

4. WebPageTest: Feingranulare Wasserfall-Analysen für Ladeketten, DNS, TLS und Renderpfade.

5. CrUX: Rohdaten und Trends zum Nutzererlebnis – hilft bei der Priorisierung.

Vergleich: Field vs Lab-Daten

  • Field: echte Nutzer, echte Geräte, echte Verbindungen.

  • Lab: kontrollierte Tests – gut für Reproduzierbarkeit und Root-Cause-Finding.

  • Empfehlung: Field-Daten steuern, Lab-Daten analysieren und optimieren.

5) So testest du in 7 Schritten: Die Diagnose-Checkliste

1. Schritt 1: Search Console öffnen, Core Web Vitals-Bericht prüfen.

2. Schritt 2: Top-URLs mit „schlechten“ Werten identifizieren.

3. Schritt 3: PageSpeed Insights ausführen, Lab-Daten und Hinweise sichten.

4. Schritt 4: WebPageTest durchführen, Wasserfall prüfen.

5. Schritt 5: RUM-Daten auswerten (z. B. Verteilung von LCP/INP auf Geräten/Netzen).

6. Schritt 6: Problemzonen mappen: Rendering, JavaScript, Assets, DNS, TTFB.

7. Schritt 7: Fix-Backlog mit Aufwand/Auswirkung priorisieren.

6) Typische Bremsen bei LCP, CLS und INP

  • Langsame Serverantwort (TTFB) → hohe LCP.

  • Blockierende Ressourcen (großes JavaScript, render-blockierende CSS) → spätes LCP, schlechte INP.

  • Überdimensionierte Bilder → große Ladezeit, spätes LCP.

  • Layoutverschiebungen (keine Größenangaben, Webfonts via FOIT/Flash, Lazy-Loading von Inhalten ohne Platzhalter) → schlechte CLS.

  • Third-Party Skripte (Tag Manager, A/B Tests, Chat, Analytics) → schlechte INP, LCP.

  • Unkoordiniertes JavaScript (long tasks, Main-Thread-Bombardement) → hohe INP.

  • Fehlende Caching-Strategien (Browser- und CDN-Cache) → langsame Ladewiederholungen.

  • Nicht minimierte/minifizierte Assets → zusätzliche Datenmenge.

7) LCP reparieren: Maßnahmen und Richtwerte

1. Server-Response senken:

- CDN nutzen, Edge-Caching für statische Assets.

- Server closeness zur Schweiz erhöhen.

- HTTP/2 und HTTP/3 aktivieren.

- Preload, Preconnect zu kritischen Origins.

2. Renderpfad optimieren:

- CSS „kritisch extrahieren“, nicht-kritisches CSS asynchron laden.

- JavaScript reduzieren und in Module splitten.

- Schnittstellen (APIs) optimieren (Poolen, Caching, Kompression).

3. Medien optimal laden:

- `` + `srcset` + `sizes` mit modernen Formaten (WebP/AVIF).

- `fetchpriority="high"` für das Hero-Element.

- Lazy-Loading für nicht-kritische Bilder.

4. Weitere Tipps:

- Fonts mit `font-display: swap` einbinden.

- Teilweise ISR (Incremental Static Regeneration) für stark geteilte Seiten.

- Stabiler „Above-the-fold“ Bereich für LCP.

8) CLS reparieren: Layout-Schritte stabilisieren

1. Größen immer definieren:

- `width`/`height` auf Medien und Ads.

- Reservierte Bereiche für dynamische Inhalte.

2. Vorsichtig mit Fonts:

- `font-display: swap` statt FOIT.

- „System font stack“ als Fallback.

3. Deferring und asynchron:

- Scripts erst nach `DOMContentLoaded` ausführen, wo möglich.

- Lazy-Inhalte mit Platzhaltergröße.

4. Reihenfolgen beachten:

- Visuelle Reihenfolge nicht durch absolute Positionen unstabil machen.

- Ads nie über Text schieben.

9) INP reparieren: Schnelle Interaktionen

1. Main Thread entlasten:

- Long tasks reduzieren.

- Code-Splitting und Tree-Shaking.

2. Events optimieren:

- Throttling/Debouncing bei scroll/resize/hover.

- „Avoid complex handlers during animations.“

3. Reaktive UI:

- Web Worker für schwere Rechenaufgaben.

- Zeitnahe return-Statements in Event-Handler.

4. Serverseitig:

- Schnelle APIs (Cache, effiziente Queries).

- Streaming von UI-Segmenten.

10) CDN, Caching, Kompression: Technik-Checkliste

  • CDN (Edge-Knoten in/zur Schweiz) für schnellere Auslieferung.

  • HTTP/2 und HTTP/3 aktivieren.

  • Brotli/Gzip für Textkompression.

  • Service Worker für Offline/Instant-Navigation.

  • Cache-Control Headers passend definieren (Max-Age, Stale-While-Revalidate).

11) Bild- und Font-Performance

1. Bilder:

- Moderne Formate (WebP/AVIF).

- Responsive Quellen (`srcset`, `sizes`).

- WebP-Lazy-Loading mit Platzhalter.

2. Fonts:

- Lokales Hosting.

- `font-display: swap`, „Fallback-Fonts“ vorladen.

- Subset-Fonts laden (nur genutzte Glyphen).

3. Icons/SVG:

- Inline-SVG sparsam nutzen.

- Symbol-Sprite statt mehrfacher SVG-Downloads.

12) JavaScript-Optimierung

1. Bundling/Tree-Shaking:

- Unused code entfernen, Module sauber schneiden.

2. Async/Defer:

- `