Core Web Vitals optimieren: Der ultimative Performance-Guide

Performance ist kein Nice-to-have

Seit 2021 sind die Core Web Vitals ein offizieller Ranking-Faktor bei Google. Doch für viele Website-Betreiber bleiben LCP, INP und CLS abstrakte Abkürzungen. Dieser Guide erklärt alle drei Metriken verständlich, zeigt konkrete Optimierungsstrategien und liefert die Tools, die Sie brauchen.

Die Auswirkungen schlechter Performance sind messbar: Laut Google verlassen 53 % der mobilen Nutzer eine Website, die länger als 3 Sekunden lädt. Jede Sekunde zusätzliche Ladezeit kann die Conversion-Rate um 7 % senken (Portent-Studie).

Die drei Core Web Vitals im Detail

LCP — Largest Contentful Paint

Was es misst: Die Zeit, bis das größte sichtbare Element im Viewport vollständig gerendert ist. Das kann ein Bild, ein Video-Poster, ein großer Textblock oder ein Hintergrundbild sein.

Zielwerte:

• Gut: unter 2,5 Sekunden
• Verbesserungsbedürftig: 2,5 bis 4,0 Sekunden
• Schlecht: über 4,0 Sekunden

Häufige Ursachen für schlechtes LCP:

• Große, nicht optimierte Bilder (häufigste Ursache)
• Langsame Server-Antwortzeit (TTFB)
• Render-blockierendes JavaScript und CSS
• Client-Side Rendering ohne Server-Side-Rendering
• Fehlende Priorisierung des LCP-Elements

INP — Interaction to Next Paint

Was es misst: Die Reaktionsfähigkeit einer Website auf Nutzer-Interaktionen. INP hat im März 2024 den First Input Delay (FID) als Core Web Vital abgelöst und misst die gesamte Dauer einer Interaktion — vom Klick bis zur visuellen Aktualisierung.

Zielwerte:

• Gut: unter 200 Millisekunden
• Verbesserungsbedürftig: 200 bis 500 Millisekunden
• Schlecht: über 500 Millisekunden

Häufige Ursachen für schlechtes INP:

• Schwere JavaScript-Bundles, die den Main Thread blockieren
• Langlaufende Event-Handler
• Übermäßiger DOM-Umfang (mehr als 1.500 Elemente)
• Layout-Neuberechnungen bei Interaktionen
• Third-Party-Scripts (Analytics, Chat-Widgets, Ads)

CLS — Cumulative Layout Shift

Was es misst: Die visuelle Stabilität einer Seite. CLS erfasst, wie stark sich Layout-Elemente nach dem Laden verschieben — zum Beispiel wenn ein Bild nachgeladen wird und den Text nach unten drückt.

Zielwerte:

• Gut: unter 0,1
• Verbesserungsbedürftig: 0,1 bis 0,25
• Schlecht: über 0,25

Häufige Ursachen für schlechtes CLS:

• Bilder und Videos ohne definierte Dimensionen (width/height)
• Nachgeladene Werbebanner oder Embeds
• Webfonts, die ein Flash of Unstyled Text (FOUT) verursachen
• Dynamisch eingefügte Inhalte oberhalb des aktuellen Viewports
• Cookie-Banner, die das Layout verschieben

Konkrete Optimierungsstrategien

LCP optimieren

• Bilder optimieren: WebP oder AVIF verwenden, Bilder in der richtigen Größe ausliefern, srcset und sizes nutzen
• Preload für LCP-Element: Das LCP-Bild mit <link rel="preload"> vorladen, damit der Browser es sofort herunterlädt
• Server-Antwortzeit reduzieren: CDN einsetzen, Server-Side Caching aktivieren, Edge-Rendering nutzen
• Render-Blocking eliminieren: CSS inlinen (critical CSS) oder mit media-Attributen laden, JavaScript defer oder async verwenden
• fetchpriority="high": Dem LCP-Bild die höchste Priorität geben

INP optimieren

• JavaScript-Bundles splitten: Code-Splitting und Dynamic Imports nutzen, nur das laden, was gebraucht wird
• Long Tasks aufbrechen: Langlaufende Aufgaben in kleinere Chunks aufteilen (requestIdleCallback, scheduler.yield)
• Event-Handler optimieren: Debouncing und Throttling für häufige Events (Scroll, Resize, Input)
• Third-Party-Scripts verzögern: Analytics und Chat-Widgets erst nach dem Laden der Seite initialisieren
• DOM-Größe reduzieren: Virtuelle Listen für große Datensätze, unnötige DOM-Elemente entfernen

CLS optimieren

• Explizite Dimensionen: Allen Bildern, Videos und Iframes width und height Attribute geben
• Platzhalter für dynamische Inhalte: Skeleton-Screens oder feste Container-Größen für nachgeladene Inhalte
• Font-Display: Webfonts mit font-display: swap oder font-display: optional laden, Fallback-Fonts mit ähnlichen Metriken wählen
• Transform statt Layout: Animationen mit transform und opacity statt width, height oder margin
• Cookie-Banner: Als Overlay implementieren, nicht als eingefügtes Element

Tools zur Messung und Analyse

Die richtigen Tools sind entscheidend für eine erfolgreiche Optimierung:

• Google PageSpeed Insights — Lab- und Felddaten für jede URL, mit konkreten Verbesserungsvorschlägen
• Google Search Console — Core Web Vitals Report für die gesamte Website (Felddaten)
• Chrome DevTools (Lighthouse) — detaillierte Analyse im Browser mit Wasserfall-Diagramm
• Web Vitals Extension — Echtzeit-Anzeige der Core Web Vitals während des Browsens
• WebPageTest — fortgeschrittene Tests mit Filmstrip-Ansicht und Waterfall-Analyse
• CrUX Dashboard — Chrome User Experience Report mit historischen Felddaten

Wichtig: Unterscheiden Sie zwischen Lab-Daten (synthetische Tests unter kontrollierten Bedingungen) und Felddaten (echte Nutzererfahrungen). Google nutzt Felddaten für das Ranking. Lab-Daten sind hilfreich für die Diagnose, aber nicht direkt ranking-relevant.

Auswirkung auf Rankings

Core Web Vitals sind ein Ranking-Signal, aber nicht das einzige. Google selbst sagt, dass Relevanz und Content-Qualität wichtiger sind. Dennoch zeigen Studien klare Vorteile:

• Websites mit guten Core Web Vitals haben eine 24 % niedrigere Absprungrate (Google-Studie)
• Eine Verbesserung des LCP um 1 Sekunde kann die Conversion-Rate um bis zu 27 % steigern (Vodafone-Fallstudie)
• Bei gleicher Inhaltsqualität rankt die schnellere Website höher — Core Web Vitals sind der Tie-Breaker

Next.js und Performance

Modernes Web-Development mit Frameworks wie Next.js bietet von Haus aus viele Performance-Vorteile:

• Automatisches Image Optimization — Next.js Image-Komponente mit lazy loading, Größenanpassung und WebP-Konvertierung
• Server-Side Rendering (SSR) und Static Site Generation (SSG) — schnellere TTFB und besseres LCP
• Automatisches Code-Splitting — nur der Code wird geladen, der auf der aktuellen Seite benötigt wird
• Font Optimization — automatisches Laden und Optimieren von Google Fonts ohne Layout Shift
• Edge Runtime — Auslieferung von der nächstgelegenen Edge-Location für minimale Latenz

Checkliste: Core Web Vitals Optimierung

• Alle Bilder im WebP/AVIF-Format mit expliziten Dimensionen
• LCP-Element mit preload und fetchpriority="high" versehen
• Critical CSS inline, Rest asynchron laden
• JavaScript defer/async, Code-Splitting aktiv
• Webfonts mit font-display: swap und Fallback-Metriken
• Third-Party-Scripts verzögert laden
• CDN mit Edge-Caching aktiviert
• Cookie-Banner als Overlay ohne Layout Shift
• Monatliche Überprüfung der Felddaten in der Search Console

Performance-Optimierung vom Profi

Ihre Website ist langsam und Sie wissen nicht, wo Sie anfangen sollen? Wir analysieren Ihre Core Web Vitals, identifizieren die größten Bottlenecks und setzen konkrete Optimierungen um — messbar und nachvollziehbar.

Kostenlose Performance-Analyse anfragen