Seit Google Core Web Vitals als offiziellen Ranking-Faktor eingestuft hat, ist Website-Performance keine rein technische Angelegenheit mehr. Sie entscheidet ueber Sichtbarkeit in der Suche, ueber Absprungraten und letztlich ueber Umsatz. Dieser Leitfaden gibt Ihnen alle Werkzeuge an die Hand, um LCP, CLS und INP systematisch zu verbessern.
Was sind Core Web Vitals?
Core Web Vitals sind drei von Google definierte Metriken, die die Nutzerfreundlichkeit einer Website aus Nutzerperspektive messen. Sie sind seit Mai 2021 offiziell Teil des Google-Ranking-Algorithmus und gewinnen seitdem stetig an Gewicht.
LCP: Largest Contentful Paint
LCP misst, wie lange es dauert, bis das größte sichtbare Element auf einer Seite vollständig geladen ist – typischerweise ein Hero-Bild oder eine große Überschrift. Google empfiehlt einen LCP-Wert von unter 2,5 Sekunden. Alles über 4 Sekunden gilt als schlecht und wird im Ranking abgestraft.
CLS: Cumulative Layout Shift
CLS quantifiziert visuelle Stabilität: Wie stark springen Layout-Elemente während des Ladens? Ein hoher CLS entsteht durch Bilder ohne definierte Dimensionen, spät geladene Schriften oder Werbeanzeigen, die nachträglich in den Content-Fluss eingefügt werden. Ein guter CLS-Wert liegt bei unter 0,1.
INP: Interaction to Next Paint
INP ersetzt seit März 2024 den früheren FID (First Input Delay) und misst die Reaktionsfähigkeit einer Seite auf Nutzerinteraktionen. Ein guter INP-Wert liegt unter 200 Millisekunden. INP erfasst dabei alle Interaktionen einer Sitzung – nicht nur die erste.
Warum Core Web Vitals für Ihr Ranking entscheidend sind
Core Web Vitals sind kein Nice-to-have mehr. Google hat bestätigt, dass sie als Ranking-Faktor in den Page Experience Score einfließen – gemeinsam mit Mobile-Friendliness, HTTPS-Verschlüsselung und der Abwesenheit von aufdringlichen Interstitials. Während der direkte Rankingeinfluss kontrovers diskutiert wird, ist die indirekte Wirkung klar messbar: Seiten mit schlechten Core Web Vitals haben höhere Absprungraten, kürzere Verweildauern und niedrigere Conversion-Rates – alles Faktoren, die Google negativ bewertet.
Konkrete Daten: Google-Studien zeigen, dass Seiten, die alle Core Web Vitals-Schwellenwerte erfüllen, 24 Prozent weniger Nutzer verlieren als Seiten, die keinen einzigen Schwellenwert erfüllen. Für E-Commerce-Seiten bedeutet ein LCP-Verbesserung von 0,1 Sekunden eine durchschnittliche Steigerung der Conversion-Rate um 8 Prozent.
Core Web Vitals messen: Diese Tools empfehlen wir
Die zuverlässigsten Messtools sind: Google Search Console (zeigt Real-User-Daten für Ihre gesamte Website aufgeteilt nach URL-Gruppen), PageSpeed Insights (analysiert eine einzelne URL mit Lab- und Field-Daten), Chrome User Experience Report (CrUX, rohe Nutzerdaten aus dem Chrome-Browser), Lighthouse (integriert in Chrome DevTools, liefert Labor-Messungen).
Wichtiger Hinweis: Laboratory-Daten (Lighthouse, PageSpeed Insights Lab) können von Field-Daten (echte Nutzer, CrUX) abweichen. Google bewertet ausschließlich Field-Daten für das Ranking. Wenn Ihre Seite in Lighthouse grün ist, aber in der Search Console rote Werte zeigt, sind die Search-Console-Daten maßgeblich.
LCP optimieren: Konkrete Maßnahmen
Diese Maßnahmen verbessern Ihren LCP-Wert nachweislich. Setzen Sie sie in der angegebenen Reihenfolge um – die ersten Punkte haben den größten Hebel.
Schritt 1: LCP-Element identifizieren
Rufen Sie PageSpeed Insights für Ihre wichtigsten Seiten auf. Im Abschnitt 'Diagnostics' sehen Sie, welches Element den LCP auslöst. Häufig ist es ein Hero-Bild, eine große Überschrift oder ein Hintergrundvideo. Notieren Sie das Element und seine aktuelle Ladezeit.
Schritt 2: Bilder optimieren
Wenn das LCP-Element ein Bild ist: Konvertieren Sie es in WebP oder AVIF (bis zu 30-50 % kleiner als JPEG). Komprimieren Sie es mit Tools wie Squoosh oder TinyPNG. Definieren Sie immer Breite und Höhe des Bildes im HTML (verhindert Layout Shift). Verwenden Sie das loading='eager'-Attribut für das LCP-Bild (kein Lazy Loading für above-the-fold Bilder). Nutzen Sie fetchpriority='high' für das LCP-Bild.
Schritt 3: Server-Antwortzeit verbessern (TTFB)
Die Time to First Byte (TTFB) ist die Basis aller anderen Metriken. Ein schlechter TTFB (>600ms) macht alle anderen Optimierungen wirkungslos. Maßnahmen: Wechsel zu einem schnelleren Hosting-Anbieter, Aktivierung von Server-seitigem Caching, Nutzung eines Content Delivery Networks (CDN) für statische Assets, Datenbankoptimierung bei dynamischen Seiten.
Schritt 4: Render-blocking Ressourcen eliminieren
JavaScript und CSS, die den Seitenaufbau blockieren, verzögern den LCP erheblich. Prüfen Sie in den PageSpeed Insights den Abschnitt 'Eliminate render-blocking resources'. Maßnahmen: Kritisches CSS inline einbetten (above-the-fold Styles direkt im HTML), nicht-kritisches CSS und JS mit defer oder async laden, unnötige Drittanbieter-Skripte (Chat-Widgets, Social-Media-Buttons) entfernen oder später laden.
CLS optimieren: Layout-Sprünge verhindern
Ein hoher CLS-Wert entsteht fast immer durch eine handvoll bekannter Ursachen. Diese Schritt-für-Schritt-Anleitung behebt die häufigsten.
Schritt 1: Bilddimensionen immer angeben
Der häufigste CLS-Verursacher: Bilder ohne definierte Breite und Höhe. Wenn der Browser die Bildgröße nicht im Voraus kennt, reserviert er keinen Platz – und wenn das Bild lädt, verschiebt sich alles darunter. Lösung: Jedes img-Tag benötigt width und height Attribute. Modern: Nutzen Sie CSS aspect-ratio für responsive Bilder.
Schritt 2: Web Fonts vorladen
Spät geladene Web Fonts verursachen FOUT (Flash of Unstyled Text) – Text erscheint zuerst in der System-Schrift und springt dann in die Web Font. Lösung: Binden Sie Ihre wichtigste Schrift mit <link rel='preload'> ein. Nutzen Sie font-display: swap für alle Web Fonts. Hosten Sie Schriften selbst statt über Google Fonts CDN (reduziert DNS-Lookup-Zeit).
Schritt 3: Werbeanzeigen und dynamische Inhalte
Werbeanzeigen, Cookie-Banner und Chat-Widgets, die nachträglich in den Inhaltsfluss eingefügt werden, sind klassische CLS-Verursacher. Lösung: Reservieren Sie immer ausreichend Platz für Anzeigen (min-height für Ad-Container). Platzieren Sie Cookie-Banner als Fixed-Overlay, nicht als Teil des Inhalts. Laden Sie Chat-Widgets erst nach der User-Interaktion.
INP optimieren: Interaktivität verbessern
INP (Interaction to Next Paint) ist die neueste und technisch anspruchsvollste Core Web Vital. Sie misst, wie schnell die Seite auf Klicks, Tippaktionen und andere Nutzerinteraktionen reagiert. Ein schlechter INP-Wert entsteht fast immer durch zu viel JavaScript, das den Main Thread blockiert.
Hauptsächliche INP-Ursachen und Lösungen
1. Zu große JavaScript-Bundles: Nutzen Sie Code-Splitting und laden Sie nur den JS-Code, der für die aktuelle Seite tatsächlich benötigt wird. 2. Synchrone Event-Handler: Verschieben Sie schwere Berechnungen in Web Workers oder nutzen Sie setTimeout/requestAnimationFrame. 3. Drittanbieter-Skripte: Analytics, Tag Manager, Marketing-Tools können den Main Thread massiv blockieren. Prüfen Sie mit Chrome DevTools Performance Profiler, welche Skripte am meisten blockieren.
Core Web Vitals Schwellenwerte: Übersicht
Diese Tabelle zeigt die offiziellen Google-Schwellenwerte für alle drei Core Web Vitals. 'Gut' bedeutet, dass mindestens 75 Prozent der Seitenladevorgänge den Schwellenwert erfüllen.
| Metrik | Gut | Verbesserungswürdig | Schlecht |
|---|---|---|---|
| LCP (Largest Contentful Paint) | < 2,5s | 2,5s – 4,0s | > 4,0s |
| CLS (Cumulative Layout Shift) | < 0,1 | 0,1 – 0,25 | > 0,25 |
| INP (Interaction to Next Paint) | < 200ms | 200ms – 500ms | > 500ms |
Quelle: web.dev/vitals (Google Developers). Die Schwellenwerte gelten für den 75. Perzentile der Nutzerdaten (CrUX).
Core Web Vitals Optimierung: Kurzfassung
Kennzahl
Guter LCP-Wert
Unter 2,5 Sekunden für den Largest Contentful Paint
Kennzahl
Guter CLS-Wert
Unter 0,1 für den Cumulative Layout Shift
Kennzahl
Guter INP-Wert
Unter 200 Millisekunden für den Interaction to Next Paint
Kennzahl
Mindest-Anteil
Mindestens 75% aller Seitenladevorgänge müssen den Schwellenwert erfüllen
Wichtig: Field Data vs. Lab Data
Google bewertet für das Ranking ausschließlich Field Data – also echte Nutzerdaten aus dem Chrome User Experience Report (CrUX). Diese Daten finden Sie in der Google Search Console unter 'Nutzererfahrung'. Lab-Daten aus PageSpeed Insights oder Lighthouse sind nützlich für die Diagnose, aber nicht das, was Google für das Ranking heranzieht. Wenn Ihre Lab-Daten grün sind, aber die Search Console weiterhin Probleme zeigt, liegt das an echten Nutzererfahrungen auf älteren Geräten oder langsameren Verbindungen.
Häufige Fragen zu Core Web Vitals
Wie stark beeinflussen Core Web Vitals das Google-Ranking?
Google hat bestätigt, dass Core Web Vitals Teil des Page Experience Signals sind, aber kein überwältigender Rankingfaktor. Relevante, hochwertige Inhalte können auch mit mittleren Core Web Vitals gut ranken. Der Einfluss ist größer bei Suchanfragen, wo viele Seiten ähnlich relevant sind – dort kann die Page Experience den Ausschlag geben. Die indirekte Wirkung (niedrigere Absprungrate, höhere Verweildauer bei schnellen Seiten) ist messbar und relevant.
Wie lange dauert es, bis Verbesserungen im Ranking sichtbar werden?
Core Web Vitals-Daten werden auf Basis der letzten 28 Tage Nutzerdaten berechnet. Das bedeutet: Änderungen an Ihrer Website brauchen mindestens 28 Tage, bis sie vollständig in den CrUX-Daten reflektiert werden. In der Google Search Console sehen Sie die aktualisierten Werte täglich. Ranking-Veränderungen folgen typischerweise 4–8 Wochen nach der technischen Verbesserung.
Muss ich alle drei Core Web Vitals im grünen Bereich haben?
Ja – Google bewertet eine Seite nur dann als 'Core Web Vitals bestanden', wenn alle drei Metriken im grünen Bereich liegen. Das 75. Perzentile-Prinzip bedeutet: Mindestens 75% aller Seitenaufrufe müssen den Schwellenwert erfüllen. Seiten, die nur zwei von drei Metriken erfüllen, werden nicht als 'bestanden' gewertet. Fokussieren Sie sich zuerst auf die Metrik mit dem schlechtesten Wert.
Was ist der Unterschied zwischen PageSpeed Score und Core Web Vitals?
Der PageSpeed Score (0–100) ist ein Laborwert aus Lighthouse – nützlich für die Diagnose, aber nicht direkt das, was Google für das Ranking verwendet. Core Web Vitals sind Field Data (echte Nutzerdaten) und spiegeln die tatsächliche Nutzererfahrung wider. Ein PageSpeed Score von 90+ garantiert keine guten Core Web Vitals. Umgekehrt kann ein Score von 70 mit guten Field Data einhergehen. Optimieren Sie beide, priorisieren Sie aber immer die Field Data aus der Search Console.
Funktioniert Core Web Vitals Optimierung auch für WordPress?
Ja, und WordPress hat einige spezifische Herausforderungen und Lösungen. Die größten WordPress-CWV-Probleme: Zu viele Plugins (jedes lädt zusätzliches CSS/JS), schwere Page-Builder (Elementor, Divi erzeugen viel Overhead), unkomprimierte Bilder, fehlendes Caching. Bewährte Lösungen: WP Rocket oder LiteSpeed Cache für Caching und Optimierung, Imagify oder ShortPixel für automatische Bildkomprimierung, Asset CleanUp zum deaktivieren unnötiger Plugin-Skripte, Wechsel zu einem schnelleren Theme (GeneratePress, Astra).
Core Web Vitals optimieren lassen
Unsere Experten analysieren Ihre Website, identifizieren die größten Performance-Probleme und setzen konkrete Maßnahmen um. Mit messbaren Ergebnissen.