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?

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:

- <img> + 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:

- <script async> oder <script defer> nutzen.

- Kritische Pfade entlasten.

3. Third-Party:

- Tag Manager mit Kriterien (Consent, Prioritäten).

- „Sequenziell statt parallel“ bei heavy Scripts.

4. Monitoring:

- Long Task Tracking im RUM.

- Bundlegröße pro Feature monitoren.

13) Server, DNS, TTFB

  • DNS mit sehr geringer Latenz (Edge-Knoten nahe der Schweiz).
  • TTFB unter 200 ms anvisieren (realistisch, je nach Backend).
  • Caching (Edge, Browser, Server).
  • HTTP/3, 0-RTT Connection Reuse, Preconnect.

14) Third-Party-Code im Griff

  • Consent-first laden (GTM nur bei Einwilligung).
  • „Toleranz der dritten Partei“: Wenn INP/LFC stark leiden, Last-Skript.

15) Schweiz-spezifische Hinweise

  • Rechtslage: DSGVO und ePrivacy beachten. Consent früh, Third-Party erst nach Zustimmung.
  • Zahlung und Trust: Schnelle Ladezeiten wirken vertrauensbildend für Schweizer Käufer.
  • Mehrsprachigkeit: DE/FR/IT/EN – durch „rel=alternate“ korrekt angeben, ggf. Hreflang.
  • Reaktionsfähigkeit: INP besonders wichtig für Mobile Nutzer in ländlicheren Gebieten.

16) Monitoring & Governance

1. KPIs:

- LCP, CLS, INP in %, „Good“-Anteil.

- Segmentiert nach Gerät/Netz/Region (Schweiz).

2. Alerting:

- Threshold-Alerts (z. B. INP > 200 ms).

- Regression-Alarm bei neuer Release.

3. Prozesse:

- „Performance Budgets“ pro Seite/Feature.

- CI/CD Checks (Build-Qualität).

- Quartalsweise Review mit Stakeholdern.

17) Quick Wins: 10 einfache Maßnahmen

1. LCP-Bild mit fetchpriority="high" priorisieren.

2. Kritische CSS inline, Rest asynchron.

3. WebP/AVIF statt JPG/PNG.

4. font-display: swap.

5. Lazy-Loading mit Größenangaben.

6. Unnötige JS deaktivieren (GTM-Ausnahmen).

7. CDN aktivieren (Edge nahe Schweiz).

8. Kompression (Brotli) aktivieren.

9. Browser-Caching (Cache-Control) sauber setzen.

10. INP-Event-Handler entlasten (Throttle/Debounce).

18) Praxisbeispiele: Vorher/Nachher (Konzept-Showcase)

1. E‑Commerce Landingpage:

- Hero-Bild jetzt WebP, fetchpriority="high".

- LCP von ~3.0 s auf ~1.9 s reduziert (Lab).

2. Corporate Blog-Artikel:

- Fonts auf „swap“, Bild-Subsetting.

- CLS von 0.22 auf 0.05 verbessert.

3. SaaS Dashboard:

- Event-Handler optimiert, Code-Splitting.

- INP von 450 ms auf 160 ms verbessert.

19) Interne Verlinkung – Vorschläge (Sitemap-konform)

  • https://www.website-optimieren.ch/website-latenz-optimieren

→ Mehr Tipps zu Ladezeit-Optimierung und Edge-Strategien für die Schweiz.

  • https://www.website-optimieren.ch/performance-werkzeuge

→ Tools für Messung und Monitoring (RUM, Lighthouse, WebPageTest).

  • https://www.website-optimieren.ch/webseiten-schneller-machen

→ Systematischer Leitfaden mit technischen und inhaltlichen Maßnahmen.

  • https://www.website-optimieren.ch/core-web-vitals-b-monitoring

→ Schritt-für-Schritt Setup von Monitoring und Alerts.

  • https://www.website-optimieren.ch/image-cdn

→ Bild-Optimierung, moderne Formate und CDN-Nutzung.

Alle Quellen prüfen, relevante Seite wählen und organisch im Text verlinken.

20) FAQ – Häufige Fragen direkt beantwortet

  • Sind Core Web Vitals ein Rankingfaktor?

Ja. Sie beeinflussen die Sichtbarkeit, da sie Nutzerqualität messen. INP, LCP und CLS sind die Kernmetriken.

  • Was ist „INP“?

INP misst die Interaktionsreaktionsfähigkeit einer Seite über alle Interaktionen hinweg. Ein guter INP-Wert liegt unter 200 ms.

  • Wie oft sollte ich LCP/CLS/INP prüfen?

Wöchentlich per RUM/Dashboard und quartalsweise per Search Console; nach Releases auf jeden Fall prüfen.

  • Welcher TTFB-Zielwert ist realistisch?

Unter 200 ms ist ein guter Zielwert, abhängig von Backend, Standort und Traffic. Edge/CDN hilft in der Schweiz.

  • Schadet Lazy-Loading der CLS?

Nur, wenn keine Platzhaltergrößen definiert werden. Mit width/height und stabilen Reserves dominiert CLS typischerweise der Score.

  • Beeinflussen Third-Party Scripts die Core Web Vitals?

Ja. Sie belasten INP und LCP. Mit Consent-First und Deferred-Loading wird der Einfluss minimiert.

  • Was ist ein „Performance Budget“?

Ein Größenlimit für Assets (z. B. < 170 KB initial JS) und Zielwerte (z. B. LCP < 2.5 s). Es verhindert Regressionen.

21) Zusammenfassung: Die größten Bremsen beheben, Messungen im Griff

  • Core Web Vitals (LCP, CLS, INP) sind deine Hebel für bessere Nutzererfahrung und Sichtbarkeit.
  • Diagnose steht an erster Stelle: Search Console, RUM, Lighthouse und WebPageTest.
  • Fixes auf LCP/CLS/INP priorisieren: Renderpfad, Ressourcen, Layout-Stabilität, Interaktionslast.
  • Schweiz-Fokus: Edge-Nähe, DSGVO, mehrsprachige Sites – diese Faktoren einbeziehen.
  • Monitoring und „Performance Budgets“ sichern nachhaltig deine Ergebnisse.

Setze zuerst Quick Wins, dann tiefergehende Optimierungen um. So bringst du deine Website schnell in die „Grünzone“ – für Besucher in der Schweiz und überall sonst.

— web.dev (Konzept)

---