How-To

Wie du Core Web Vitals analysierst und konkrete Probleme fixt

Schlechte Core Web Vitals kosten dich Rankings und Nutzer. In dieser Anleitung lernst du, wie du LCP, INP und CLS mit kostenlosen Tools präzise analysierst und die häufigsten Probleme gezielt behebst. Am Ende weißt du genau, welche Stellschrauben du drehen musst, um im Google PageSpeed Insights Report grüne Werte zu erreichen — ohne Rätselraten. Die Anleitung richtet sich an Webmaster, Entwickler und SEOs, die Core Web Vitals fixen wollen und konkrete, umsetzbare Schritte suchen.
5 Min Lesezeit ·
Inhaltsverzeichnis
  1. Voraussetzungen
  2. Schritt-für-Schritt Anleitung
  3. Häufige Fehler
  4. Verifizierung

Voraussetzungen

Bevor du startest, stelle sicher, dass folgende Punkte erfüllt sind:

  • Google Search Console Zugriff: Deine Website muss verifiziert sein. Gehe zu search.google.com/search-console und prüfe, ob du Daten unter „Core Web Vitals" siehst.
  • PageSpeed Insights: Kein Account nötig — rufe pagespeed.web.dev auf und halte die URL deiner wichtigsten Seite bereit.
  • Chrome DevTools: Aktueller Chrome-Browser installiert (F12 öffnet die DevTools).
  • Zugriff auf deinen Code oder CMS: Du brauchst die Möglichkeit, HTML, CSS oder dein CMS (z. B. WordPress) zu bearbeiten.
  • Optional — WebPageTest Account: Kostenlos unter webpagetest.org für tiefere Analysen.

Schritt-für-Schritt Anleitung

Schritt 1: Felddaten in der Google Search Console auswerten

Öffne die Google Search Console und navigiere zu Erfahrung → Core Web Vitals. Dort siehst du zwei Berichte: Mobil und Desktop. Klicke auf „Bericht öffnen" beim schlechteren Wert. Die Tabelle zeigt dir gruppierte URL-Gruppen mit dem Status „Schlecht", „Verbesserungswürdig" oder „Gut". Klicke auf eine Gruppe mit dem Status „Schlecht", um die betroffenen URLs zu sehen. Notiere dir die drei bis fünf URLs mit den meisten Impressionen — diese priorisierst du.

Schritt 2: Einzelne URL mit PageSpeed Insights analysieren

Gehe zu pagespeed.web.dev, füge eine der priorisierten URLs ein und klicke auf „Analysieren". Warte auf den vollständigen Bericht. Oben siehst du die Felddaten (echte Nutzerdaten aus dem CrUX-Datensatz) und darunter die Labordaten (simulierter Test). Notiere die Werte für:

  • LCP (Largest Contentful Paint): Zielwert unter 2,5 Sekunden
  • INP (Interaction to Next Paint): Zielwert unter 200 ms
  • CLS (Cumulative Layout Shift): Zielwert unter 0,1

Scrolle weiter zu „Möglichkeiten" und „Diagnose" — hier nennt PageSpeed Insights die konkreten Probleme mit geschätzter Zeitersparnis.

Schritt 3: LCP-Problem identifizieren und beheben

Der LCP misst, wann das größte sichtbare Element geladen ist — meist ein Hero-Bild oder eine große Überschrift. In den PageSpeed-Ergebnissen siehst du unter „Largest Contentful Paint element", welches Element gemeint ist.

Häufigste LCP-Fixes:

  1. Bild vorausladen: Füge im <head> deiner Seite einen Preload-Link ein:
    <link rel='preload' as='image' href='/images/hero.webp' fetchpriority='high'>
  2. Bild in WebP konvertieren: Nutze Tools wie Squoosh oder das WordPress-Plugin ShortPixel. WebP ist 25–35 % kleiner als JPEG.
  3. Lazy Loading beim LCP-Bild entfernen: Das LCP-Bild darf KEIN loading='lazy' haben. Entferne dieses Attribut explizit:
    <img src='/images/hero.webp' alt='Hero' fetchpriority='high'>
  4. Server-Antwortzeit prüfen: Wenn TTFB (Time to First Byte) über 600 ms liegt, wechsle zu einem schnelleren Hosting oder aktiviere serverseitiges Caching (z. B. WP Rocket oder Nginx FastCGI Cache).

Schritt 4: CLS-Problem identifizieren und beheben

CLS misst unerwartete Layout-Verschiebungen. Öffne Chrome DevTools (F12), gehe zum Tab Performance und klicke auf das Aufnahme-Symbol. Lade die Seite neu, stoppe die Aufnahme und suche nach roten Balken mit der Bezeichnung „Layout Shift". Klicke darauf, um das betroffene Element zu sehen.

Häufigste CLS-Fixes:

  1. Bildabmessungen immer angeben:
    <img src='/bild.webp' width='800' height='450' alt='Beschreibung'>
  2. Werbebanner reservieren: Reserviere Platz für Ads mit CSS, bevor sie laden:
    .ad-container { min-height: 250px; }
  3. Web Fonts ohne FOUT laden: Nutze font-display: optional oder lade Schriften vor:
    <link rel='preload' as='font' href='/fonts/myfont.woff2' type='font/woff2' crossorigin>

Schritt 5: INP-Problem identifizieren und beheben

INP ersetzt seit März 2024 den FID und misst die Reaktionszeit auf alle Nutzerinteraktionen. Öffne Chrome DevTools, gehe zu Performance Insights oder nutze das Web Vitals Extension für Chrome. Interagiere mit der Seite (klicken, tippen, scrollen) und beobachte, welche Interaktion den höchsten INP-Wert erzeugt.

Häufigste INP-Fixes:

  1. Schwere JavaScript-Tasks aufteilen: Nutze setTimeout oder scheduler.yield(), um lange Tasks zu unterbrechen:
    async function processItems(items) {
  for (const item of items) {
    processItem(item);
    await scheduler.yield();
  }
}
  2. Unnötige Third-Party-Skripte entfernen: Prüfe unter PageSpeed Insights → „Drittanbieter-Code reduzieren", welche Skripte blockieren. Entferne nicht benötigte Plugins oder lade sie mit defer oder async.
  3. Event-Handler optimieren: Vermeide schwere Berechnungen direkt in Click-Handlern. Lagere sie in Web Workers aus oder verzögere sie mit requestIdleCallback.

Schritt 6: Änderungen deployen und Cache leeren

Nachdem du Änderungen vorgenommen hast, deploye sie auf deinem Server. Leere anschließend alle Caching-Ebenen:

  • Server-Cache (z. B. WP Rocket: „Alle Caches leeren")
  • CDN-Cache (z. B. Cloudflare: Purge Everything unter Caching → Configuration)
  • Browser-Cache: Teste im Inkognito-Modus

Schritt 7: Ergebnis messen und in Search Console validieren

Führe den PageSpeed Insights Test erneut durch und vergleiche die Werte. Wenn die Labordaten besser sind, warte 28 Tage — so lange braucht Google, um genug Felddaten zu sammeln. Gehe dann zurück zur Search Console → Core Web Vitals → Klicke auf die URL-Gruppe → „Validierung starten". Google prüft nun, ob das Problem behoben ist.

Häufige Fehler beim Core Web Vitals fixen

  • Nur Labordaten optimieren, Felddaten ignorieren: PageSpeed Insights Labordaten und echte Nutzerdaten können stark abweichen. Prüfe immer beide Quellen. Entscheidend für das Google-Ranking sind die Felddaten (CrUX).
  • LCP-Bild mit Lazy Loading versehen: Ein häufiger Fehler in WordPress-Themes. Das LCP-Element darf niemals loading='lazy' haben — das verzögert genau das Element, das schnell laden muss.
  • CLS durch dynamisch injizierte Inhalte: Wenn Banners, Cookie-Hinweise oder Widgets nach dem ersten Paint eingefügt werden, ohne Platz zu reservieren, steigt der CLS massiv. Reserviere immer Platz im CSS.
  • Alle Seiten gleichzeitig optimieren wollen: Beginne mit den Seiten, die die meisten Impressionen haben. Eine Verbesserung der Top-5-URLs bringt mehr als das Optimieren von 50 Unterseiten.
  • Nach Fixes nicht validieren: Ohne Validierung in der Search Console bleibt der Status „Schlecht" im Bericht stehen, auch wenn das Problem längst behoben ist. Starte immer die Validierung manuell.

Verifizierung: So prüfst du den Erfolg

Nutze diese drei Methoden, um sicherzustellen, dass deine Fixes wirken:

  1. PageSpeed Insights Soforttest: Teste die URL direkt auf pagespeed.web.dev. Grüne Werte in den Labordaten sind ein gutes Zeichen, aber nicht das finale Urteil.
  2. Chrome Web Vitals Extension: Installiere die offizielle Web Vitals Extension aus dem Chrome Web Store. Sie zeigt dir LCP, INP und CLS in Echtzeit beim Browsen — inklusive Debug-Informationen, welches Element den Wert verursacht.
  3. Search Console Validierung nach 28 Tagen: Gehe zu Core Web Vitals → wähle die URL-Gruppe → klicke „Validierung starten". Google bestätigt den Fix, sobald genug positive Felddaten vorliegen. Der Status wechselt von „Schlecht" zu „Gut".

Häufige Fragen

Wie lange dauert es, bis Core Web Vitals Fixes im Google Ranking wirken? +
Google aktualisiert die Core Web Vitals Felddaten alle 28 Tage auf Basis des CrUX-Datensatzes. Nachdem du Fixes deployt hast, dauert es also bis zu vier Wochen, bis die verbesserten Werte in der Search Console erscheinen. Ranking-Auswirkungen können weitere zwei bis vier Wochen später sichtbar werden, da Google die Daten in seinen Algorithmus einfließen lässt. Sofortigen Feedback bekommst du über PageSpeed Insights Labordaten.
Was ist der Unterschied zwischen Feld- und Labordaten bei Core Web Vitals? +
Felddaten stammen aus echten Nutzersitzungen, die Google über das Chrome User Experience Report (CrUX) Programm sammelt. Sie spiegeln reale Bedingungen wider — verschiedene Geräte, Verbindungen und Nutzerverhalten. Labordaten werden in einer kontrollierten Umgebung simuliert (z. B. durch PageSpeed Insights mit einem emulierten Gerät). Für das Google-Ranking zählen ausschließlich die Felddaten. Labordaten sind aber nützlich für schnelles Debugging.
Welches Core Web Vital hat den größten Einfluss auf das Ranking? +
Google gewichtet alle drei Core Web Vitals (LCP, INP, CLS) im Page Experience Signal. In der Praxis hat LCP oft den größten Einfluss, weil er direkt die wahrgenommene Ladegeschwindigkeit misst und bei vielen Seiten im roten Bereich liegt. INP ist seit März 2024 neu und ersetzt FID — Seiten mit vielen Interaktionen wie Shops oder Formulare sollten INP priorisieren. CLS ist besonders wichtig für mobile Nutzer.
Kann ich Core Web Vitals ohne Entwickler verbessern? +
Ja, viele Fixes sind ohne tiefes Coding-Wissen umsetzbar — besonders in WordPress. Plugins wie WP Rocket, ShortPixel oder Perfmatters beheben die häufigsten LCP- und CLS-Probleme automatisch. Für INP-Optimierungen (JavaScript-Optimierung) ist oft Entwickler-Unterstützung nötig. Starte mit den einfachen Wins: Bildformate optimieren, Lazy Loading beim LCP-Bild entfernen und Bildabmessungen angeben.
Was tun, wenn Core Web Vitals gut sind, aber das Ranking trotzdem schlecht ist? +
Core Web Vitals sind nur ein Rankingfaktor unter vielen. Wenn deine Werte grün sind, aber das Ranking stagniert, prüfe Content-Qualität, Backlink-Profil, E-E-A-T-Signale und technische SEO-Grundlagen wie Crawlbarkeit und interne Verlinkung. Core Web Vitals sind ein Tiebreaker bei gleichwertigem Content — kein Ersatz für relevante, autoritative Inhalte.

Du hast den Artikel gelesen.
Jetzt umsetzen?

Wir analysieren in 5 Minuten wo deine Website strukturell unsichtbar ist — kostenlos, ohne Verkaufsdruck.

Kostenlose Analyse starten