Website Optimierung

Wie optimierst du deine Website für Core Web Vitals?

• von Florian Runge
Wie optimierst du deine Website für Core Web Vitals?

Wie optimierst du deine Website für Core Web Vitals?

Core Web Vitals (CWV) sind die wichtigsten Messgrößen für die Nutzererfahrung im Web. Sie zeigen, wie schnell deine Seite lädt, wie stabil sie beim Scrollen bleibt und wie schnell sie auf Interaktionen reagiert. In der Schweiz ist die Erwartung hoch: Nutzer wollen schnelle, stabile und reaktionsfähige Seiten – besonders auf mobilen Geräten. Dieser Leitfaden erklärt dir Schritt für Schritt, wie du deine Website für CWV optimierst, mit klaren Antworten, praktischen Listen, Tabellen und konkreten Anwendungsfällen.

Core Web Vitals: LCP (Largest Contentful Paint), CLS (Cumulative Layout Shift) und INP (Interaction to Next Paint) sind die drei Kernmetriken, die Google für die Nutzererfahrung bewertet. Quelle: Google Search Central.

Was sind Core Web Vitals? (Definition & Überblick)

Kurzantwort: Core Web Vitals messen Ladezeit, Layout-Stabilität und Interaktionsgeschwindigkeit. Sie beeinflussen Ranking, Conversion und Nutzerzufriedenheit.

  • LCP (Largest Contentful Paint): Zeit bis zum größten sichtbaren Inhalt.

  • CLS (Cumulative Layout Shift): Summe unerwarteter Layout-Verschiebungen.

  • INP (Interaction to Next Paint): Reaktionszeit auf Nutzerinteraktionen.

LCP: Largest Contentful Paint

  • Zielwert: ≤ 2,5 Sekunden.

  • Warum wichtig: LCP zeigt, wann der Hauptinhalt sichtbar ist.

  • Typische Probleme: Langsame Serverantwort, große Bilder, blockierende CSS/JS.

CLS: Cumulative Layout Shift

  • Zielwert: ≤ 0,1.

  • Warum wichtig: CLS misst Layout-Stabilität.

  • Typische Probleme: Bilder ohne Größenangaben, späte Ads, Fonts ohne Fallback.

INP: Interaction to Next Paint

  • Zielwert: ≤ 200 Millisekunden.

  • Warum wichtig: INP misst die Interaktionsresponsivität.

  • Typische Probleme: Hauptthread-Blockaden, schwere JS, unnötige Event-Handler.

Warum Core Web Vitals für die Schweiz entscheidend sind

Kurzantwort: Schweizer Nutzer erwarten schnelle, stabile Seiten. CWV verbessern Ranking, Conversion und Vertrauen.

  • Mobile-first: Viele Nutzer surfen unterwegs.

  • E-Commerce: Jede Sekunde zählt für den Warenkorb.

  • Vertrauen: Stabilität wirkt professionell.

Statistiken & Studien

1. Google: Core Web Vitals sind Ranking-Signale für die Nutzererfahrung. Quelle: Google Search Central.

2. Portals: 70% der Top-News-Websites in Europa erfüllen CWV-Schwellenwerte. Quelle: Portals (2024).

3. Google: Seiten mit gutem CWV-Status werden häufiger in Top Stories gezeigt. Quelle: Google Search Central.

4. Google: INP ersetzt FID vollständig ab 2024. Quelle: Google Search Central.

5. Google: LCP-Ziel ≤ 2,5 s, CLS ≤ 0,1, INP ≤ 200 ms. Quelle: Google Search Central.

6. Google: CWV wirken sich auf organisches Ranking aus. Quelle: Google Search Central.

7. Portals: 70% der Top-News-Websites in Europa erfüllen CWV-Schwellenwerte. Quelle: Portals (2024).

Messung: Tools & Datenquellen

Kurzantwort: Nutze PageSpeed Insights, Lighthouse, CrUX, Search Console und Web Vitals Extension.

  • PageSpeed Insights: Lab + Felddaten.

  • Lighthouse: Lokale Audits.

  • CrUX: Felddaten der Nutzer.

  • Search Console: CWV-Berichte.

  • Web Vitals Extension: Live-Messung im Browser.

PageSpeed Insights

  • Eingabe: URL eingeben.

  • Ergebnis: LCP, CLS, INP mit Empfehlungen.

  • Praxis: Messung auf Desktop und Mobile.

CrUX & Search Console

  • CrUX: Felddaten aus Chrome.

  • Search Console: CWV-Berichte für URLs.

  • Praxis: URLs mit „schlechten“ Status priorisieren.

Web Vitals & Lighthouse

  • Web Vitals Extension: Echtzeit-Messung.

  • Lighthouse: Lokale Audits mit Empfehlungen.

  • Praxis: Nach Änderungen erneut prüfen.

Diagnose: Häufige Probleme erkennen

Kurzantwort: Identifiziere langsame LCP-Quellen, Layout-Shifts und blockierende JS.

  • LCP: Große Hero-Bilder, langsame Server.

  • CLS: Fehlende Größenangaben, späte Ads.

  • INP: Schwere JS, lange Tasks.

LCP-Diagnose

  • Largest Contentful Paint: Hero-Bild, großer Textblock.

  • Server-Timing: TTFB prüfen.

  • Bilder: Größe, Format, Kompression.

CLS-Diagnose

  • Layout-Shift: Bilder ohne width/height.

  • Ads/Embeds: Reservierter Platz fehlt.

  • Fonts: Fallback-Fonts definieren.

INP-Diagnose

  • Long Tasks: >50 ms auf dem Hauptthread.

  • Event-Handler: Zu viele Listener.

  • JS-Bundles: Größe und Ausführungszeit.

LCP optimieren: Schritt-für-Schritt

Kurzantwort: Reduziere Serverzeit, optimiere Bilder, minimiere blockierende Ressourcen.

1. Serverzeit reduzieren: CDN, Caching, TTFB verbessern.

2. Bilder optimieren: Moderne Formate, Größe, Kompression.

3. CSS/JS minimieren: Critical CSS, Code-Splitting.

4. Ressourcen priorisieren: preload, fetchpriority.

5. Render-Blocking entfernen: async/defer, Tree-Shaking.

Server & Hosting

  • CDN: Assets nahe am Nutzer ausliefern.

  • Caching: Browser- und Server-Cache aktivieren.

  • HTTP/2/3: Parallelisierung nutzen.

  • TTFB: Datenbankabfragen optimieren.

Bilder & Medien

  • Formate: AVIF, WebP statt JPEG/PNG.

  • Größe: Responsive Bilder (srcset).

  • Kompression: Qualität 70–85 je nach Inhalt.

  • Lazy Loading: Unterhalb des Sichtbereichs.

CSS & JavaScript

  • Critical CSS: Above-the-fold inline.

  • Code-Splitting: Nur notwendiges JS laden.

  • async/defer: Nicht-blockierende Skripte.

  • Tree-Shaking: Ungenutzten Code entfernen.

CLS reduzieren: Layout-Stabilität sichern

Kurzantwort: Reserviere Platz, lade Fonts sicher, vermeide späte Ads.

1. Dimensionen setzen: width/height für Bilder.

2. Ads/Embeds: Platzhalter mit fester Höhe.

3. Fonts: Fallback-Fonts und font-display.

4. Animationen: transform statt top/left.

5. Komponenten: Stabiles Layout bei dynamischen Inhalten.

Dimensionen & Platzhalter

  • Bilder: width/height definieren.

  • Iframes: Container mit fester Höhe.

  • Komponenten: Platz für dynamische Inhalte.

Fonts & Fallbacks

  • font-display: swap oder optional.

  • Fallback-Fonts: Ähnliche Metriken.

  • Preload: Nur kritische Fonts.

Ads & Drittanbieter

  • Container: Feste Größen definieren.

  • Lazy Loading: Nach Sichtbarkeit laden.

  • Audit: Drittanbieter-Skripte prüfen.

INP verbessern: Interaktionen beschleunigen

Kurzantwort: Reduziere Hauptthread-Last, optimiere Event-Handler, nutze Web Workers.

1. Long Tasks: Aufteilen, verzögern.

2. Event-Handler: Debounce/Throttle.

3. Web Workers: Schwere Berechnungen auslagern.

4. JS-Bundles: Klein halten, Code-Splitting.

5. Interaktionen: Schnelle UI-Feedbacks.

Hauptthread entlasten

  • Long Tasks: In kleinere Blöcke teilen.

  • Idle Tasks: requestIdleCallback nutzen.

  • Prioritäten: Kritische UI vor Hintergrund.

Event-Handling

  • Debounce: Eingaben zusammenfassen.

  • Throttle: Scroll-Events begrenzen.

  • Listener: Nur notwendige Events.

Web Workers & Offloading

  • Worker: Berechnungen im Hintergrund.

  • Messaging: Daten effizient übertragen.

  • Use Cases: Suche, Filter, Sortierung.

Technische Optimierungen: HTTP, Caching, CDN

Kurzantwort: Nutze moderne Protokolle, starkes Caching und ein gutes CDN.

  • HTTP/2/3: Multiplexing, Priorisierung.

  • Brotli/Gzip: Kompression aktivieren.

  • Cache-Control: Längere Lebensdauer für statische Assets.

  • CDN: Edge-Standorte nahe der Schweiz.

HTTP/2/3

  • Priorisierung: Wichtige Ressourcen zuerst.

  • Multiplexing: Mehrere Streams parallel.

  • 0-RTT: Schnellere Verbindungen.

Caching-Strategien

  • Browser-Cache: ETag, Cache-Control.

  • Service Worker: Offline-Fähigkeiten.

  • CDN-Cache: Lange TTL für statische Assets.

CDN & Edge

  • Standorte: Frankfurt, Mailand, Paris.

  • Edge Functions: Personalisierung nahe am Nutzer.

  • Bildoptimierung: On-the-fly Resize.

Bild- & Medienoptimierung

Kurzantwort: Wähle moderne Formate, komprimiere sinnvoll und lade bedarfsgerecht.

  • Formate: AVIF/WebP bevorzugen.

  • Größen: Responsive mit srcset.

  • Kompression: Qualität abwägen.

  • Lazy Loading: Für untere Seitenbereiche.

  • Preload: Nur kritische Assets.

Moderne Formate

  • AVIF: Beste Kompression.

  • WebP: Gute Kompatibilität.

  • Fallback: JPEG/PNG als Reserve.

Responsive Bilder

  • srcset: Verschiedene Breiten.

  • sizes: Optimale Auswahl.

  • Art Direction: Unterschiedliche Zuschnitte.

Lazy Loading & Preload

  • Lazy: loading="lazy".

  • Preload: Nur Hero-Bilder.

  • Intersection Observer: Fortgeschrittene Steuerung.

CSS & JavaScript effizient laden

Kurzantwort: Minimiere blockierende Ressourcen und lade nur, was nötig ist.

  • Critical CSS: Inline für Above-the-fold.

  • Code-Splitting: Route- oder Komponentenbasiert.

  • async/defer: Nicht-blockierend laden.

  • Tree-Shaking: Ungenutzten Code entfernen.

  • Priorisierung: fetchpriority für wichtige Assets.

Critical CSS

  • Above-the-fold: Inline einbinden.

  • Rest: Asynchron nachladen.

  • Tools: Automatisierung nutzen.

Code-Splitting

  • Routen: Nur benötigte JS laden.

  • Komponenten: Dynamische Imports.

  • Bundle-Analyse: Webpack Bundle Analyzer.

async/defer

  • async: Sofort ausführen.

  • defer: Nach DOM ready.

  • Reihenfolge: Abhängigkeiten beachten.

Fonts sicher & schnell laden

Kurzantwort: Nutze Fallback-Fonts, font-display und preload gezielt.

  • font-display: swap oder optional.

  • Fallback-Fonts: Ähnliche Metriken.

  • Preload: Nur kritische Fonts.

  • Subset: Nur verwendete Zeichen laden.

font-display

  • swap: Schnell sichtbar, dann echte Schrift.

  • optional: Nutzt Fallback bei langsamer Verbindung.

  • block: Nicht empfohlen für CWV.

Fallback-Fonts

  • Metriken: Ähnliche Breite/Höhe.

  • Systemfonts: Als Reserve.

  • CLS vermeiden: Keine starke Verschiebung.

Preload & Subsetting

  • Preload: Nur wichtigste Fonts.

  • Subset: Latin, Zahlen, Sonderzeichen.

  • Woff2: Kleinste Dateigröße.

Drittanbieter-Skripte steuern

Kurzantwort: Auditieren, verzögern, isolieren und nur notwendige Skripte laden.

  • Audit: Welche Skripte sind nötig?

  • Verzögern: Nach Interaktion laden.

  • Isolieren: Sandbox/iframe.

  • Priorisieren: Kritische Inhalte zuerst.

Audit & Entfernung

  • Liste: Alle Drittanbieter erfassen.

  • Nützlichkeit: Konversion prüfen.

  • Entfernung: Unnötige Skripte löschen.

Verzögerung & Async

  • Nach Interaktion: Button-Klick.

  • Intersection Observer: Sichtbarkeit.

  • async: Nicht blockierend.

Isolation

  • iframe: Sandbox-Modus.

  • CSP: Content Security Policy.

  • Consent: Erst nach Zustimmung.

E-Commerce & INP: Warenkorb & Checkout

Kurzantwort: Reduziere JS-Last, optimiere Formulare und nutze Web Workers.

  • Formulare: Debounce, Validierung lokal.

  • Warenkorb: Schnelle UI-Updates.

  • Checkout: Minimaler JS, klare Fehlermeldungen.

  • Suche: Web Worker für Filter.

Warenkorb-Optimierung

  • State: Lokal speichern.

  • UI: Sofortiges Feedback.

  • Events: Throttle bei Scroll.

Checkout-UX

  • Validierung: Client-seitig.

  • Fehlermeldungen: Klar und schnell.

  • JS: Minimal halten.

Suche & Filter

  • Worker: Berechnungen auslagern.

  • Debounce: Eingaben zusammenfassen.

  • Caching: Ergebnisse zwischenspeichern.

News & Content: LCP & CLS im Fokus

Kurzantwort: Hero-Bilder optimieren, Platz für Ads reservieren, Fonts sicher laden.

  • Hero-Bild: AVIF/WebP, preload.

  • Ads: Feste Container.

  • Fonts: Fallback + font-display.

  • Bilder: Dimensionen setzen.

Hero-Optimierung

  • Größe: Passend zum Viewport.

  • Kompression: Qualität abwägen.

  • Preload: Nur ein Bild.

Ads-Integration

  • Container: Feste Höhe/Breite.

  • Lazy Loading: Sichtbarkeit.

  • CLS: Keine Verschiebung.

Content-Layout

  • Bilder: width/height.

  • Embeds: Platzhalter.

  • Animationen: transform statt top/left.

Monitoring & Reporting

Kurzantwort: Regelmäßige Messung, Dashboards und Alerts für CWV.

  • Dashboards: CrUX, Search Console.

  • Alerts: Schwellenwerte überwachen.

  • Regressionen: Nach Deploys prüfen.

Dashboards

  • CrUX: Felddaten.

  • Search Console: CWV-Berichte.

  • PageSpeed: Lab + Feld.

Alerts & Schwellen

  • LCP: > 2,5 s.

  • CLS: > 0,1.

  • INP: > 200 ms.

Regressionen

  • Vor/Nach: Deploys vergleichen.

  • Rollback: Schnell rückgängig machen.

  • Tests: Canary Releases.

Praxisbeispiele: Konkrete Anwendungsfälle

Kurzantwort: Drei typische Szenarien mit klaren Maßnahmen.

1. E-Commerce-Shop (Schweiz): INP im Checkout verbessern.

2. News-Portal: LCP durch Hero-Bild-Optimierung senken.

3. Dienstleister-Website: CLS durch Ads-Container reduzieren.

E-Commerce-Shop (Schweiz)

  • Problem: INP > 300 ms im Checkout.

  • Maßnahmen: Web Worker für Berechnungen, Debounce bei Formularen, minimaler JS.

  • Ergebnis: INP < 200 ms, höhere Conversion.

News-Portal

  • Problem: LCP 3,2 s durch großes Hero-Bild.

  • Maßnahmen: AVIF, preload, responsive srcset, Critical CSS.

  • Ergebnis: LCP 2,1 s, bessere Sichtbarkeit.

Dienstleister-Website

  • Problem: CLS 0,18 durch Ads.

  • Maßnahmen: Feste Container, Lazy Loading, Fallback-Fonts.

  • Ergebnis: CLS 0,06, stabiles Layout.

FAQ: Häufige Fragen zu Core Web Vitals

  • Sind Core Web Vitals ein Rankingfaktor?

Ja, sie beeinflussen die Nutzererfahrung und damit das Ranking. Quelle: Google Search Central.

  • Welche Zielwerte gelten?

LCP ≤ 2,5 s, CLS ≤ 0,1, INP ≤ 200 ms. Quelle: Google Search Central.

  • Wie oft soll ich messen?

Nach jedem größeren Deploy und monatlich im Monitoring.

  • Welche Tools sind am besten?

PageSpeed Insights, Lighthouse, CrUX, Search Console.

  • Was ist INP?

Interaction to Next Paint misst die Reaktionszeit auf Interaktionen. Quelle: Google Search Central.

  • Wie reduziere ich CLS?

Dimensionen setzen, Ads-Container, Fallback-Fonts, transform-Animationen.

  • Beeinflusst die Schweiz das CWV?

Ja, Nähe zu CDN-Standorten und Nutzerverhalten wirken sich aus.

Fazit: Dein Plan für bessere Core Web Vitals

Kurzantwort: Messen, priorisieren, optimieren, monitoren. Starte mit LCP/CLS/INP-Zielen, behebe die größten Probleme zuerst und halte die Ergebnisse stabil.

  • Prioritäten: LCP/CLS/INP-Ziele definieren.

  • Maßnahmen: Server, Bilder, CSS/JS, Fonts, Drittanbieter.

  • Monitoring: Dashboards und Alerts nutzen.

  • Schweiz: CDN-Standorte und Nutzererwartungen berücksichtigen.

---

Meta-Description: Core Web Vitals für die Schweiz: LCP, CLS, INP optimieren – mit klaren Schritten, Tools und Beispielen. Messen, verbessern, monitoren.

Interne Verlinkung:

  • https://www.website-optimieren.ch/website-speed-optimierung – Website Speed Optimierung

  • https://www.website-optimieren.ch/core-web-vitals – Core Web Vitals

  • https://www.website-optimieren.ch/performance-audit – Performance Audit

  • https://www.website-optimieren.ch/lighthouse – Lighthouse

  • https://www.website-optimieren.ch/web-vitals – Web Vitals

Quellen:

  • Google Search Central: Core Web Vitals – https://developers.google.com/search/docs/fundamentals/core-web-vitals

  • Portals: 70% der Top-News-Websites in Europa erfüllen CWV-Schwellenwerte (2024) – https://portals.ai/news/70-of-top-news-websites-in-europe-meet-core-web-vitals-thresholds

  • Google Search Central: INP ersetzt FID – https://developers.google.com/search/docs/fundamentals/inp

  • Google Search Central: CWV-Zielwerte – https://developers.google.com/search/docs/fundamentals/core-web-vitals

  • Google Search Central: CWV als Ranking-Signal – https://developers.google.com/search/docs/fundamentals/core-web-vitals

  • Portals: 70% der Top-News-Websites in Europa erfüllen CWV-Schwellenwerte (2024) – https://portals.ai/news/70-of-top-news-websites-in-europe-meet-core-web-vitals-thresholds

  • Google Search Central: INP ersetzt FID – https://developers.google.com/search/docs/fundamentals/inp