Core Web Vitals (LCP, INP, CLS) – Umfassender SEO-Ratgeber

Die drei Core Web Vitals im Detail

Jede der drei Metriken adressiert einen spezifischen Aspekt der Nutzererfahrung. Das Verständnis der einzelnen Metriken ist die Grundlage für eine gezielte Optimierung.

Largest Contentful Paint (LCP)

Der Largest Contentful Paint misst die Zeit, bis das größte sichtbare Content-Element im Viewport vollständig gerendert ist. Typischerweise handelt es sich dabei um ein Hero-Bild, ein großes Textblock oder ein Video-Thumbnail. LCP ist der zentrale Indikator dafür, wie schnell eine Seite für den Nutzer nutzbar erscheint.

Die häufigsten LCP-Elemente sind: <img>-Tags, <video>-Poster-Bilder, Elemente mit background-image via CSS und große Textblöcke innerhalb von <p> oder <h1>-Tags. Um den LCP zu identifizieren, nutzen Sie die Chrome DevTools unter dem Tab "Performance" oder die Google Search Console unter "Core Web Vitals".

Interaction to Next Paint (INP)

Interaction to Next Paint (INP) hat im März 2024 die Metrik First Input Delay (FID) als Core Web Vital ersetzt. INP misst die Reaktionszeit einer Seite auf Nutzerinteraktionen über den gesamten Seitenbesuch hinweg, nicht nur die erste Interaktion. INP berücksichtigt Klicks, Tastatureingaben und Taps auf Touchscreens und bewertet die Latenz von der Interaktion bis zum nächsten visuellen Feedback (Paint).

INP ist besonders relevant für interaktive Websites wie Online-Shops, Single-Page-Applications und Seiten mit komplexen Formularen. Die Metrik setzt sich aus drei Phasen zusammen: Input Delay (Wartezeit, bis der Event-Handler startet), Processing Time (Ausführungsdauer des Event-Handlers) und Presentation Delay (Zeit bis zum nächsten Frame-Rendering).

Cumulative Layout Shift (CLS)

Cumulative Layout Shift (CLS) misst die visuelle Stabilität einer Seite. Die Metrik quantifiziert, wie stark sich sichtbare Elemente während des Ladevorgangs unerwartet verschieben. Jeder hat schon erlebt, dass ein Button oder Link plotzlich an eine andere Position springt, weil ein Bild oder eine Werbeanzeige nachgeladen wird, was dazu führt, dass man versehentlich auf das falsche Element klickt.

CLS wird als dimensionsloser Score berechnet: Impact Fraction (Anteil des Viewports, der betroffen ist) multipliziert mit Distance Fraction (Distanz der Verschiebung relativ zum Viewport). Seit der Aktualisierung im Jahr 2022 verwendet Google ein sogenanntes Session-Window mit einer maximalen Lücke von einer Sekunde und einer maximalen Dauer von fünf Sekunden, um den CLS-Score zu berechnen.

Core Web Vitals als Ranking-Faktor

Google hat die Core Web Vitals im Juni 2021 als Teil des Page-Experience-Updates offiziell zum Ranking-Signal gemacht. Doch wie stark ist der tatsächliche Einfluss auf die Rankings? Diese Frage beschäftigt SEO-Experten seit der Ankündigung.

Stärke des Ranking-Signals

Google selbst hat betont, dass die Core Web Vitals ein "Tie-Breaker" sind: Bei ansonsten gleicher Relevanz und Qualität erhält die Seite mit besseren Core Web Vitals den Vorzug. Content-Relevanz, Backlinks und E-E-A-T-Signale bleiben stärkere Ranking-Faktoren. Dennoch zeigen Analysen von SEO-Plattformen wie Searchmetrics und Sistrix, dass Websites mit guten Core Web Vitals im Durchschnitt höhere Rankings erzielen als solche mit schlechten Werten.

Indirekter Einfluss auf Rankings

Neben dem direkten Ranking-Signal haben gute Core Web Vitals erhebliche indirekte Auswirkungen:

• Niedrigere Absprungrate: Schnelle, stabile Seiten halten Nutzer länger, was Google als positives Engagement-Signal wertet
• Höhere Conversion-Rate: Studien zeigen, dass jede Sekunde zusätzliche Ladezeit die Conversion-Rate um bis zu 7 Prozent senkt
• Besseres Crawl-Budget: Schnellere Seiten ermöglichen es dem Googlebot, mehr Seiten zu crawlen und zu indexieren
• Verbesserte Nutzersignale: Längere Verweildauer und mehr Seitenaufrufe pro Sitzung senden positive Signale an Google

LCP optimieren: Praktische Maßnahmen

Die Optimierung des Largest Contentful Paint ist oft der wirkungsvollste Hebel zur Verbesserung der Core Web Vitals, da LCP die am häufigsten problematische Metrik ist. Hier sind die wichtigsten Optimierungsstrategien geordnet nach ihrem typischen Impact.

Server-Response-Time (TTFB) verbessern

Die Time to First Byte (TTFB) ist die Grundlage für einen guten LCP. Wenn der Server zu lange braucht, um das HTML-Dokument auszuliefern, kann der LCP nicht gut sein, unabhängig von allen anderen Optimierungen. Maßnahmen:

• Verwenden Sie ein Content Delivery Network (CDN) wie Cloudflare, Fastly oder AWS CloudFront
• Aktivieren Sie Server-seitiges Caching für dynamische Inhalte
• Optimieren Sie Datenbankabfragen und reduzieren Sie die Backend-Verarbeitungszeit
• Nutzen Sie HTTP/2 oder HTTP/3 für parallele Ressourcenauslieferung
• Wählen Sie einen Hosting-Anbieter mit Serverstandort in der Nähe Ihrer Zielgruppe

Bilder als häufigster LCP-Engpass

In den meisten Fällen ist ein Bild das LCP-Element. Die Bildoptimierung ist daher zentral für einen guten LCP-Wert. Folgende Maßnahmen sind besonders wirkungsvoll:

<!-- Optimales Bild-Markup für LCP -->
<img
    src="hero-image.webp"
    alt="Beschreibender Alt-Text"
    width="1200"
    height="630"
    fetchpriority="high"
    decoding="async"
>

<!-- Mit Responsive Images für verschiedene Viewports -->
<picture>
    <source srcset="hero-800.avif" type="image/avif" media="(max-width: 800px)">
    <source srcset="hero-1200.avif" type="image/avif">
    <source srcset="hero-800.webp" type="image/webp" media="(max-width: 800px)">
    <source srcset="hero-1200.webp" type="image/webp">
    <img src="hero-1200.jpg" alt="Hero-Bild" width="1200" height="630" fetchpriority="high">
</picture>

<!-- Preload für das LCP-Bild im Head -->
<link rel="preload" as="image" href="hero-image.webp" fetchpriority="high">

Render-blockierende Ressourcen eliminieren

CSS- und JavaScript-Dateien, die im <head> geladen werden, blockieren das Rendering und verzögern den LCP. Strategien zur Minimierung:

<!-- Critical CSS inline im Head -->
<style>
    /* Nur die CSS-Regeln, die für den Above-the-Fold-Bereich nötig sind */
    .hero { display: flex; min-height: 60vh; }
    .hero img { width: 100%; height: auto; }
</style>

<!-- Restliches CSS asynchron laden -->
<link rel="preload" href="/css/main.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="/css/main.css"></noscript>

<!-- JavaScript nicht-blockierend laden -->
<script src="/js/app.js" defer></script>
<!-- Oder für Module -->
<script type="module" src="/js/app.mjs"></script>

Font-Optimierung für LCP-Text

Wenn das LCP-Element ein Textblock ist (häufig bei textlastigen Seiten), ist die Font-Ladezeit entscheidend:

<!-- Font-Preload im Head -->
<link rel="preload" href="/fonts/main.woff2" as="font" type="font/woff2" crossorigin>

<!-- Font-Display: swap für sofortige Textdarstellung -->
<style>
@font-face {
    font-family: 'CustomFont';
    src: url('/fonts/main.woff2') format('woff2');
    font-display: swap;
}
</style>

INP optimieren: Reaktionsfähigkeit verbessern

Die Optimierung des Interaction to Next Paint erfordert ein Verständnis der drei Phasen einer Interaktion: Input Delay, Processing Time und Presentation Delay. Jede Phase bietet eigene Optimierungspotenziale.

Input Delay reduzieren

Der Input Delay entsteht, wenn der Main Thread des Browsers mit anderen Aufgaben beschäftigt ist, während der Nutzer interagiert. Hauptursachen sind lange JavaScript-Tasks, die den Main Thread blockieren.

• Long Tasks aufbrechen: Verwenden Sie requestIdleCallback() oder scheduler.yield() um lange JavaScript-Ausführungen in kleinere Aufgaben zu teilen
• Third-Party-Scripts minimieren: Analytics, Werbe-Tags und Social-Media-Widgets sind häufige Verursacher von Long Tasks
• Web Workers nutzen: Lagern Sie rechenintensive Aufgaben in Web Workers aus, die den Main Thread nicht blockieren

Processing Time optimieren

Die Processing Time ist die Dauer der Event-Handler-Ausführung. Optimierungsansätze:

// Schlecht: Schwere Berechnungen im Event-Handler
button.addEventListener('click', () => {
    // 500ms schwere Berechnung
    const result = heavyCalculation(data);
    updateDOM(result);
});

// Besser: Aufteilen mit scheduler.yield()
button.addEventListener('click', async () => {
    // Sofortiges visuelles Feedback
    showLoadingState();
    await scheduler.yield();

    // Schwere Berechnung nach dem nächsten Paint
    const result = heavyCalculation(data);
    await scheduler.yield();

    // DOM-Update
    updateDOM(result);
});

Presentation Delay minimieren

Der Presentation Delay entsteht durch aufwändige DOM-Änderungen und Style-Berechnungen nach dem Event-Handler:

• Vermeiden Sie Layout Thrashing: Lesen Sie DOM-Werte gebundelt, bevor Sie Änderungen vornehmen
• Nutzen Sie CSS Containment (contain: layout) um den Recalculation-Scope einzuschränken
• Verwenden Sie content-visibility: auto für Off-Screen-Elemente
• Minimieren Sie die Komplexität von CSS-Selektoren, besonders bei großen DOM-Baeumen

CLS optimieren: Visuelle Stabilität sicherstellen

Layout-Verschiebungen entstehen, wenn Elemente ihre Position oder Größe ändern, nachdem sie bereits sichtbar waren. Die Optimierung des Cumulative Layout Shift erfordert praventive Maßnahmen, die Verschiebungen von vornherein verhindern.

Explizite Größenangaben für Medien

Die häufigste Ursache für CLS sind Bilder und Videos ohne definierte Abmessungen. Ohne width und height Attribute kann der Browser keinen Platz reservieren, bis das Medium vollständig geladen ist.

<!-- Schlecht: Keine Größenangaben -->
<img src="foto.jpg" alt="Foto">

<!-- Gut: Explizite Abmessungen -->
<img src="foto.jpg" alt="Foto" width="800" height="450">

<!-- Gut: CSS aspect-ratio als Alternative -->
<style>
.responsive-img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
}
</style>
<img src="foto.jpg" alt="Foto" class="responsive-img">

<!-- Für eingebettete Videos / Iframes -->
<style>
.video-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
}
.video-wrapper iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
</style>

Web Fonts und CLS

Der Wechsel von einem Fallback-Font zu einem Web-Font (FOUT, Flash of Unstyled Text) kann erhebliche Layout-Verschiebungen verursachen, wenn die Schriftgrößen unterschiedlich sind:

• Verwenden Sie font-display: optional statt swap für nicht-kritische Fonts, um FOUT komplett zu vermeiden
• Nutzen Sie die CSS Font Metrics Override-Deskriptoren (size-adjust, ascent-override, descent-override) um den Fallback-Font metrisch an den Web-Font anzupassen
• Preloaden Sie kritische Fonts im <head>

Dynamische Inhalte und Werbung

Werbebanner, Cookie-Banner und dynamisch nachgeladene Inhalte sind häufige CLS-Verursacher. Lösungsansätze:

• Platzhalter mit fester Größe: Reservieren Sie den Platz für Werbebanner mit min-height bevor der Inhalt geladen wird
• Cookie-Banner: Positionieren Sie Cookie-Banner als Overlay (position: fixed) statt als Element im Dokumentfluss
• Lazy-loaded Content: Verwenden Sie Skeleton-Screens oder Platzhalter mit definierten Abmessungen

Core Web Vitals messen und überwachen

Die korrekte Messung der Core Web Vitals ist die Grundlage für jede Optimierung. Google bietet verschiedene Tools, die unterschiedliche Perspektiven auf die Performance liefern. Dabei ist die Unterscheidung zwischen Lab-Daten und Field-Daten (Felddaten) essenziell.

Lab-Daten vs. Field-Daten

Empfohlener Messworkflow

Für eine umfassende Core-Web-Vitals-Optimierung empfehlen wir folgenden Workflow:

1. Status-Quo analysieren: Prüfen Sie die Core Web Vitals in der Google Search Console unter "Core Web Vitals" für einen Überblick über alle URLs
2. Problematische Seiten identifizieren: Nutzen Sie den CrUX-Report oder PageSpeed Insights, um einzelne Seiten gezielt zu analysieren
3. Ursachen finden: Verwenden Sie Lighthouse und Chrome DevTools für detailliertes Debugging (Lab-Daten)
4. Optimierungen umsetzen: Implementieren Sie die Änderungen und testen Sie mit Lab-Tools
5. Ergebnisse verifizieren: Warten Sie 28 Tage und prüfen Sie die Field-Daten in CrUX und Search Console

Häufige Fehler bei der Core-Web-Vitals-Optimierung

Viele Website-Betreiber machen bei der Optimierung der Core Web Vitals typische Fehler, die den Erfolg der Maßnahmen untergraben. Hier sind die häufigsten Fallstricke und ihre Lösungen.

Fehler 1: Nur Lab-Daten optimieren

Problem: Viele SEOs optimieren ausschließlich auf Basis von Lighthouse-Scores und übersehen, dass Google für das Ranking Field-Daten (CrUX) verwendet. Lab-Daten können stark von den realen Nutzerdaten abweichen.

Lösung: Nutzen Sie die Google Search Console und den CrUX-Report als primäre Datenquelle. Lab-Tools wie Lighthouse eignen sich hervorragend zum Debugging, aber die Field-Daten sind für das Ranking entscheidend.

Fehler 2: INP ignorieren

Problem: Viele Websites hatten gute FID-Werte und gehen davon aus, dass auch INP kein Problem darstellt. INP ist jedoch deutlich strenger als FID, da es alle Interaktionen während des gesamten Seitenbesuchs bewertet.

Lösung: Prüfen Sie INP separat und testen Sie Ihre Seite mit den Chrome DevTools (Performance-Tab). Achten Sie besonders auf JavaScript-lastige Seiten mit komplexen Interaktionen.

Fehler 3: Optimierung ohne Priorisierung

Problem: Es werden alle drei Metriken gleichzeitig optimiert, ohne zu priorisieren, welche Metrik den größten Impact hat.

Lösung: Analysieren Sie zunächst, welche Metrik am schlechtesten abschneidet und welche Seiten am meisten Traffic haben. Konzentrieren Sie sich auf die Kombination aus schlechtester Metrik und wichtigsten Seiten für den größten ROI.

Fehler 4: Lazy Loading des LCP-Elements

Problem: Das LCP-Bild wird mit loading="lazy" versehen, was die Ladezeit verzögert, da der Browser das Bild erst lädt, wenn es in den Viewport scrollt.

Lösung: Das LCP-Element sollte niemals lazy-loaded werden. Verwenden Sie stattdessen fetchpriority="high" und ein <link rel="preload"> im Head.

Fehler 5: CLS durch nachträgliche geladene Schriftarten

Problem: Web Fonts werden ohne Optimierung geladen, was zu sichtbaren Layout-Verschiebungen beim Font-Wechsel führt.

Lösung: Nutzen Sie font-display: swap in Kombination mit Font-Metriken-Overrides, um den Platzbedarf des Fallback-Fonts an den Web-Font anzupassen. Preloaden Sie kritische Fonts im <head>.

Fehler 6: Zu viele Third-Party-Scripts

Problem: Analytics, Marketing-Tags, Chat-Widgets und Social-Media-Embeds blockieren den Main Thread und verschlechtern alle drei Core Web Vitals.

Lösung: Auditieren Sie alle Third-Party-Scripts mit dem Coverage-Tab in den DevTools. Entfernen Sie unnötige Scripts, laden Sie die verbleibenden asynchron und verzögern Sie nicht-kritische Scripts mit requestIdleCallback().

PageSpeed Insights richtig interpretieren

Google PageSpeed Insights (PSI) ist das am häufigsten verwendete Tool zur Analyse der Core Web Vitals. Doch die Ergebnisse werden oft falsch interpretiert. PSI zeigt sowohl Lab-Daten (Lighthouse) als auch Field-Daten (CrUX) an, und die Unterscheidung ist entscheidend.

Der PSI-Score ist nicht der Ranking-Faktor

Der prominente Score von 0-100, den PageSpeed Insights anzeigt, ist ein Lighthouse-Lab-Score. Er basiert auf simulierten Tests und hat keinen direkten Einfluss auf das Ranking. Für das Ranking sind ausschließlich die CrUX-Felddaten relevant, die im oberen Bereich von PSI unter "Wie echte Nutzer die Seite erleben" angezeigt werden.

Es ist durchaus möglich, dass eine Seite einen mittleren PSI-Score von 60 hat, aber hervorragende Field-Daten aufweist und umgekehrt. Konzentrieren Sie sich daher primär auf die Field-Daten und nutzen Sie den Lab-Score als Richtlinie für die Optimierung.

URL-Level vs. Origin-Level

PSI zeigt zwei Datensätze: Daten für die spezifische URL und Daten für die gesamte Origin (Domain). Wenn für eine einzelne URL nicht genügend CrUX-Daten vorliegen (z. B. bei Seiten mit wenig Traffic), greift Google auf die Origin-Level-Daten zurück. Für eine effektive Optimierung sollten Sie sich auf die Seiten mit dem meisten Traffic konzentrieren, da diese am ehesten eigene URL-Level-Daten haben.

Fortgeschrittene Optimierungsstrategien

Nachdem die grundlegenden Optimierungen umgesetzt sind, können fortgeschrittene Strategien die Core Web Vitals weiter verbessern.

Speculative Loading und Prefetching

Moderne Browser unterstützen das vorausschauende Laden von Ressourcen, was besonders den LCP auf Folgeseiten verbessert:

<!-- Speculation Rules API (Chrome 109+) -->
<script type="speculationrules">
{
    "prerender": [
        {"where": {"href_matches": "/produkte/*"}, "eagerness": "moderate"}
    ],
    "prefetch": [
        {"where": {"selector_matches": "a[href^='/blog/']"}, "eagerness": "conservative"}
    ]
}
</script>

<!-- Klassisches Prefetching -->
<link rel="prefetch" href="/nächste-seite/">
<link rel="dns-prefetch" href="https://cdn.example.com">
<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>

Service Worker für Offline-Caching

Ein Service Worker kann statische Ressourcen lokal cachen und bei wiederholten Besuchen sofort ausliefern, was den LCP drastisch verbessert:

// service-worker.js
const CACHE_NAME = 'cwv-cache-v1';
const STATIC_ASSETS = ['/css/main.css', '/js/app.js', '/fonts/main.woff2'];

self.addEventListener('install', (event) => {
    event.waitUntil(
        caches.open(CACHE_NAME).then((cache) => cache.addAll(STATIC_ASSETS))
    );
});

self.addEventListener('fetch', (event) => {
    event.respondWith(
        caches.match(event.request).then((response) => {
            return response || fetch(event.request);
        })
    );
});

Performance-Budget etablieren

Ein Performance-Budget definiert klare Grenzen für die Seitengröße und Ladezeit, die nicht überschritten werden dürfen. Dies verhindert, dass die Core Web Vitals nach erfolgreicher Optimierung wieder schlechter werden:

Die korrekte Umsetzung der Core Web Vitals erfordert eine enge Zusammenarbeit zwischen SEO-Experten und Entwicklern. Die technischen Optimierungen müssen in den Entwicklungsprozess integriert werden, damit neue Features die Performance nicht wieder verschlechtern. Tools wie Lighthouse CI und Web Vitals Chrome Extension helfen, die Core Web Vitals kontinuierlich zu überwachen und Regressionen frühzeitig zu erkennen. Verknüpfen Sie die Performance-Arbeit stets mit der breiteren Content-Strategie und der internen Verlinkung, um den maximalen SEO-Effekt zu erzielen.

Nützliche Tools