Core Web Vitals 2025: Die wichtigsten Metriken für SEO – NimzSquare Blog

Was sind Core Web Vitals?

Core Web Vitals sind drei spezielle Metriken, die Google seit 2021 als Ranking-Faktor verwendet. Sie messen die tatsächliche Nutzererfahrung Ihrer Website-Besucher.

Die drei Metriken (Stand 2025):

LCP (Largest Contentful Paint): Ladegeschwindigkeit des größten sichtbaren Elements
CLS (Cumulative Layout Shift): Visuelle Stabilität während des Ladevorgangs
INP (Interaction to Next Paint): Reaktionsfähigkeit auf Nutzerinteraktionen

Wichtiger Hinweis: INP hat seit März 2024 offiziell die FID (First Input Delay) als Core Web Vital abgelöst. Websites sollten sich nun auf INP-Optimierung konzentrieren.

Warum sind Core Web Vitals wichtig?

SEO-Impact

Google nutzt Core Web Vitals als Teil der Page Experience Signale. Schlechte Werte können die Sichtbarkeit beeinträchtigen, gute Werte sind dagegen eine solide Grundlage für wettbewerbsfähige Rankings.

Business-Impact (realistisch)

Schnellere und stabile Websites führen häufig zu besseren Nutzererfahrungen und höheren Conversion-Raten. Die konkrete Wirkung variiert jedoch je nach Branche, Publikum und Angebot. Messen Sie Effekte grundsätzlich mit Ihren eigenen Analytics-Daten (z. B. Ereignisse und Trichter in Google Analytics 4) statt sich auf allgemeine Prozentangaben zu verlassen.

Quellen:

Google Search Central – Core Web Vitals Überblick: https://developers.google.com/search/docs/appearance/core-web-vitals
web.dev – Page experience and search: https://web.dev/learn-core-web-vitals/

LCP (Largest Contentful Paint)

Was ist LCP?

LCP misst, wann der größte sichtbare Inhalt geladen ist. Das kann ein Bild, ein Video oder ein großer Textblock sein.

Zielwerte:

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

Häufige LCP-Probleme

1. Langsame Server-Antwortzeiten

Als grobe Orientierung gilt: Eine Time to First Byte (TTFB) von ≤ 0,8s ist „gut“ (web.dev). Sie können Ihre Server-Antwortzeit so messen:

# Server-Antwortzeit messen (TTFB)
curl -w "Connect: %{time_connect}s\nTTFB: %{time_starttransfer}s\nTotal: %{time_total}s\n" -o /dev/null -s "https://ihre-website.de"

Häufige TTFB-Probleme:

Shared Hosting mit überlasteten Servern
Datenbankabfragen ohne Optimierung
Fehlende Server-Caching-Strategien
Zu weit entfernte Server-Standorte

2. Render-blockierende Ressourcen

<!-- Schlecht: CSS blockiert das Rendering -->
<link rel="stylesheet" href="styles.css" />

<!-- Besser: Kritisches CSS inline -->
<style>
  /* Nur das CSS für above-the-fold Inhalte */
  .header {
    background: blue;
  }
</style>
<link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'" />

3. Große Bilder ohne Optimierung

<!-- Schlecht: Großes, unoptimiertes Bild -->
<img src="hero-image.jpg" alt="Hero" />

<!-- Besser: Responsive, optimierte Bilder -->
<img
  src="hero-image-800w.webp"
  srcset="hero-image-400w.webp 400w, hero-image-800w.webp 800w, hero-image-1200w.webp 1200w"
  sizes="(max-width: 768px) 100vw, 50vw"
  alt="Hero"
  loading="eager"
/>

LCP optimieren: Schritt-für-Schritt

1. LCP-Element identifizieren

// JavaScript zur LCP-Identifikation
new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    console.log('LCP candidate:', entry.element, entry.startTime);
  }
}).observe({ type: 'largest-contentful-paint', buffered: true });

2. Kritische Ressourcen priorisieren

<!-- Preload für wichtige Ressourcen -->
<link rel="preload" href="/fonts/main.woff2" as="font" type="font/woff2" crossorigin />
<link rel="preload" href="/hero-image.webp" as="image" />

<!-- DNS-Prefetch für externe Ressourcen -->
<link rel="dns-prefetch" href="//fonts.googleapis.com" />

3. Server-Optimierung

CDN verwenden (Cloudflare, AWS CloudFront)
Gzip/Brotli Kompression aktivieren
HTTP/2 oder HTTP/3 nutzen
Browser-Caching konfigurieren

CLS (Cumulative Layout Shift)

Was ist CLS?

CLS misst unerwartete Layoutverschiebungen. Kennen Sie das? Sie wollen einen Button klicken, aber ein Banner lädt und verschiebt alles.

Zielwerte:

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

Häufige CLS-Ursachen

1. Bilder ohne Dimensionen

<!-- Schlecht: Keine Dimensionen -->
<img src="bild.jpg" alt="Beispiel" />

<!-- Besser: Feste Dimensionen -->
<img src="bild.jpg" alt="Beispiel" width="400" height="300" />

<!-- Noch besser: Aspect-Ratio CSS -->
<img src="bild.jpg" alt="Beispiel" style="aspect-ratio: 4/3; width: 100%;" />

2. Dynamisch eingefügte Inhalte

/* Platz für Werbebanner reservieren */
.ad-container {
  min-height: 250px; /* Feste Höhe für Banner */
  background: #f0f0f0; /* Platzhalter-Hintergrund */
}

3. Web Fonts ohne Fallback

/* Schlecht: Font-Tausch verursacht Layout-Shift */
font-family: 'Custom Font', sans-serif;

/* Besser: font-display verwenden */
@font-face {
  font-family: 'Custom Font';
  src: url('font.woff2') format('woff2');
  font-display: swap; /* Verhindert unsichtbaren Text */
}

INP (Interaction to Next Paint)

Was ist INP?

INP misst die Reaktionszeit auf Nutzerinteraktionen (Klicks, Taps, Tastatureingaben).

Zielwerte:

Gut: unter 200ms
Verbesserungsbedürftig: 200ms - 500ms
Schlecht: über 500ms

INP-Optimierung

1. JavaScript-Execution reduzieren

// Schlecht: Lange Berechnungen blockieren UI
function heavyCalculation() {
  for (let i = 0; i < 10000000; i++) {
    // Schwere Berechnung
  }
}

// Besser: In kleinere Chunks aufteilen
async function heavyCalculationOptimized() {
  const chunks = 100;
  const itemsPerChunk = 100000;

  for (let chunk = 0; chunk < chunks; chunk++) {
    for (let i = 0; i < itemsPerChunk; i++) {
      // Berechnung
    }
    // UI Zeit zum Atmen geben
    await new Promise((resolve) => setTimeout(resolve, 0));
  }
}

2. Event-Handler optimieren

// Schlecht: Schwere Operationen im Event-Handler
button.addEventListener('click', () => {
  // Schwere DOM-Manipulation
  updateComplexUI();
});

// Besser: Debouncing verwenden
const debouncedUpdate = debounce(() => {
  updateComplexUI();
}, 16); // ~60fps

button.addEventListener('click', debouncedUpdate);

Mini-Fall aus der Praxis: Autopflege Südbaden

Ein regionaler Autopflege-Betrieb („Autopflege Südbaden“) ließ die Startseite gezielt auf LCP, CLS und INP optimieren. Vorgehen und Learnings – ohne Marketing-Superlative:

LCP: Hero-Bild auf WebP/AVIF umgestellt, kritisches CSS für Header/Above-the-fold inline, Bild per <link rel="preload"> priorisiert.
CLS: Für Bilder feste Breite/Höhe bzw. aspect-ratio gesetzt; UI-Banner mit reservierter Container-Höhe; Webfonts mit font-display: swap.
INP: Lange Event-Handler entkoppelt (requestIdleCallback, rAF), nicht-kritische JS-Bundles per Dynamic Import nachgeladen.

Messung und Überwachung liefen über PageSpeed Insights (Lab) sowie den Core Web Vitals Report in der Google Search Console (Field). Die konkreten Zahlen sind projektspezifisch; entscheidend war der stabile Trend in den Field-Daten über 28 Tage.

Quellen:

web.dev – Optimize LCP: https://web.dev/optimize-lcp/
web.dev – Optimize CLS: https://web.dev/cls/
web.dev – Optimize INP: https://web.dev/inp/

Tools zur Core Web Vitals Messung

Google-Tools (kostenlos und offiziell)

1. PageSpeed Insights - pagespeed.web.dev

Offizielle Google-Daten aus Chrome UX Report (CrUX)
Lab-Daten (Lighthouse) + Field-Daten (echte Nutzer)
Mobile- und Desktop-Bewertung getrennt
Konkrete Optimierungsvorschläge mit Einsparungspotenzial

2. Google Search Console - Core Web Vitals Report

Real User Monitoring (RUM) basierend auf Chrome-Nutzern
28-Tage-Durchschnittswerte für URL-Gruppen
Historische Daten zur Trend-Analyse
Integration mit Google Analytics möglich

3. Chrome DevTools - Lighthouse

Lokale Messung ohne externe Faktoren
Waterfall-Analyse für detailliertes Debugging
Performance-Budgets und CI/CD-Integration
Accessibility- und SEO-Audits zusätzlich

Quellen:

PageSpeed Insights: https://pagespeed.web.dev/
Google Search Console – Core Web Vitals: https://search.google.com/search-console
Lighthouse (Chrome DevTools): https://developer.chrome.com/docs/lighthouse/overview/

Weiterführende Analyse-Tools

WebPageTest - webpagetest.org

Verschiedene Standorte und Geräte simulieren
Filmstrip-Ansicht für visuelle Analyse
Advanced Metrics wie Speed Index und Time to Interactive
A/B-Testing zwischen Website-Versionen möglich

GTmetrix - gtmetrix.com

Lighthouse + PageSpeed Insights in einem Tool
Monitoring und Alerting bei Performance-Verschlechterung
Waterfall-Charts und Video-Aufzeichnung
API für automatisierte Performance-Tests

Real User Monitoring (RUM) Implementation

Warum RUM wichtig ist: Lab-Daten (Lighthouse) unterscheiden sich oft erheblich von Field-Daten echter Nutzer. Google verwendet für Rankings Field-Daten (CrUX). Planen Sie Optimierungen deshalb nach Field-Daten, nicht ausschließlich nach Lab-Scores.

// Google's web-vitals Library (empfohlene Implementierung)
import { onCLS, onINP, onLCP } from 'web-vitals';

function sendToAnalytics(metric) {
  // Google Analytics 4 Integration
  gtag('event', metric.name, {
    value: Math.round(metric.value),
    metric_rating: metric.rating, // 'good', 'needs-improvement', 'poor'
    custom_parameter_1: metric.delta,
    custom_parameter_2: metric.id,
  });
}

// Core Web Vitals überwachen
onCLS(sendToAnalytics);
onINP(sendToAnalytics); // Seit März 2024 statt FID
onLCP(sendToAnalytics);

Custom Dashboard Setup (Google Analytics 4):

// Erweiterte Metriken für Business-Intelligence
function sendToAnalytics(metric) {
  // An GA4 senden
  gtag('event', 'core_web_vitals', {
    metric_name: metric.name,
    metric_value: Math.round(metric.value),
    metric_rating: metric.rating,
    page_path: window.location.pathname,
    connection_type: navigator.connection?.effectiveType || 'unknown',
    device_memory: navigator.deviceMemory || 'unknown',
  });

  // Optional: An eigenes Analytics-System
  fetch('/api/analytics/cwv', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      metric: metric.name,
      value: metric.value,
      rating: metric.rating,
      timestamp: Date.now(),
      userAgent: navigator.userAgent,
      url: window.location.href,
    }),
  });
}

Quellen:

web-vitals (offizielle Bibliothek): https://github.com/GoogleChrome/web-vitals
GA4 – Ereignisse messen: https://developers.google.com/analytics/devguides/collection/ga4

Häufige Optimierungs-Fehler (und wie Sie sie vermeiden)

1. Ausschließlich Lab-Daten optimieren

Problem: Lighthouse-Scores verbessern sich, aber Google Rankings bleiben schlecht. Warum: Google verwendet für Rankings nur Field-Daten (Chrome UX Report) von echten Nutzern.

Lösung:

75% der realen Nutzer müssen die Schwellenwerte erreichen
RUM mit web-vitals Library implementieren
Google Search Console Core Web Vitals Report regelmäßig prüfen
Mindestens 28 Tage Datensammlung vor Bewertung

2. Mobile Performance vernachlässigen

Problem: Desktop-optimiert, aber 60-80% der Besucher kommen mobil. Warum: Mobile Geräte haben weniger CPU/RAM, langsamere Netzwerke.

Lösung (Mobile-First Approach):

/* Responsive Bilder für Mobile priorisieren */
img {
  max-width: 100%;
  height: auto;
  loading: 'lazy'; /* Außer above-the-fold Bilder */
}

/* Touch-Targets mindestens 44x44px (Apple) / 48x48px (Google) */
.button {
  min-height: 44px;
  min-width: 44px;
  padding: 12px 16px;
}

3. Performance-Regression durch fehlende Überwachung

Problem: Performance verschlechtert sich schleichend nach Launch. Häufige Ursachen: Neue Plugins, Bilder ohne Optimierung, Third-Party Scripts.

Lösung (Continuous Monitoring):

Performance-Budgets in CI/CD Pipeline
Wöchentliche PageSpeed Insights Checks
Alerts bei CWV-Verschlechterung > 10%
Lighthouse CI für automatisierte Tests

// Performance Budget Beispiel (Lighthouse CI)
module.exports = {
  ci: {
    collect: {
      numberOfRuns: 3,
    },
    assert: {
      assertions: {
        'categories:performance': ['warn', { minScore: 0.85 }],
        'largest-contentful-paint': ['error', { maxNumericValue: 2500 }],
        'cumulative-layout-shift': ['error', { maxNumericValue: 0.1 }],
        'total-blocking-time': ['warn', { maxNumericValue: 300 }],
      },
    },
  },
};

Praxisorientierte Optimierungs-Checkliste

Sofort umsetzbar (0-2 Stunden):

[ ] Bildoptimierung: WebP/AVIF Format, max. 100KB pro Bild
[ ] Browser-Caching: Cache-Control Headers (1 Jahr für Bilder/CSS/JS)
[ ] Compression: Gzip/Brotli aktivieren (ca. 70% Größenreduktion)
[ ] Aufräumen: Ungenutzte Plugins/Scripts entfernen (PageSpeed Insights Audit)
[ ] Font-Display: font-display: swap für alle Web Fonts

Mit Entwickler-Aufwand (1-2 Tage):

[ ] CDN: Cloudflare/AWS CloudFront für statische Assets
[ ] Critical CSS: Above-the-fold CSS inline (< 14KB)
[ ] Lazy Loading: Für alle Bilder außer Hero-Bereich
[ ] Resource Hints: preload für kritische Ressourcen
[ ] JavaScript: Code-Splitting und Dynamic Imports

Strategische Optimierung (1-2 Wochen):

[ ] Server-Performance: TTFB < 800ms (Google-Empfehlung)
[ ] Progressive Enhancement: Core-Funktionen ohne JavaScript
[ ] Service Worker: Intelligent Caching für Repeat Visits
[ ] PWA Features: App-Shell-Pattern für bessere Performance
[ ] Database: Query-Optimierung und Caching-Layer

Monitoring & Wartung (fortlaufend):

[ ] RUM: Real User Monitoring mit web-vitals Library
[ ] Performance Budgets: Lighthouse CI in Deployment-Pipeline
[ ] Competitive Analysis: Quartalsweise Benchmarks
[ ] Core Web Vitals Report: Monatliche Google Search Console Auswertung

Fazit: Core Web Vitals als Geschäftsfaktor

Core Web Vitals sind seit 2021 ein offizielles Suchsignal. Sie verbessern die Nutzererfahrung und können mittelbar Rankings und Conversions positiv beeinflussen. Investitionen sollten datenbasiert priorisiert werden – gemessen an Ihren Zielen und Field-Daten.

Priorisierung nach Geschäftszielen:

E-Commerce/Online-Shops: LCP > INP > CLS (Kaufentscheidung)
Lead-Generation: INP > CLS > LCP (Formular-Interaktionen)
Content/Publishing: CLS > LCP > INP (Leseerfahrung)
Local Business: LCP > CLS > INP (Mobile-First)

Core Web Vitals sind keine technische Spielerei, sondern echte Qualitätsmerkmale. Statt allgemeiner Prozentangaben empfehlen wir: Hypothesen formulieren, Änderungen schrittweise ausrollen, Effekte mit GA4-Events und GSC-Reports belegen.

Nächste Schritte

Aktuelle Werte messen mit PageSpeed Insights
Größte Probleme identifizieren (LCP, CLS oder INP)
Quick Wins umsetzen aus unserer Checkliste
Fortschritt überwachen mit RUM

Quellen (allgemein):

Google Search Central – Core Web Vitals: https://developers.google.com/search/docs/appearance/core-web-vitals
web.dev – Core Web Vitals Leitfaden: https://web.dev/learn-core-web-vitals/
web.dev – INP ersetzt FID (2024): https://web.dev/inp/

Bei komplexeren Optimierungen oder technischen Fragen stehen wir gerne zur Verfügung.

Was sind Core Web Vitals?

Warum sind Core Web Vitals wichtig?

SEO-Impact

Business-Impact (realistisch)

LCP (Largest Contentful Paint)

Was ist LCP?

Zielwerte:

Häufige LCP-Probleme

1. Langsame Server-Antwortzeiten

2. Render-blockierende Ressourcen

3. Große Bilder ohne Optimierung

LCP optimieren: Schritt-für-Schritt

1. LCP-Element identifizieren

2. Kritische Ressourcen priorisieren

3. Server-Optimierung

CLS (Cumulative Layout Shift)

Was ist CLS?

Zielwerte:

Häufige CLS-Ursachen

1. Bilder ohne Dimensionen

2. Dynamisch eingefügte Inhalte

3. Web Fonts ohne Fallback

INP (Interaction to Next Paint)

Was ist INP?

Zielwerte:

INP-Optimierung

1. JavaScript-Execution reduzieren

2. Event-Handler optimieren

Mini-Fall aus der Praxis: Autopflege Südbaden

Tools zur Core Web Vitals Messung

Google-Tools (kostenlos und offiziell)

Weiterführende Analyse-Tools

Real User Monitoring (RUM) Implementation

Häufige Optimierungs-Fehler (und wie Sie sie vermeiden)

1. Ausschließlich Lab-Daten optimieren

2. Mobile Performance vernachlässigen

3. Performance-Regression durch fehlende Überwachung

Praxisorientierte Optimierungs-Checkliste

Sofort umsetzbar (0-2 Stunden):

Mit Entwickler-Aufwand (1-2 Tage):

Strategische Optimierung (1-2 Wochen):

Monitoring & Wartung (fortlaufend):

Fazit: Core Web Vitals als Geschäftsfaktor

Priorisierung nach Geschäftszielen:

Nächste Schritte

Fragen zu diesem Artikel?