Core Web Vitals verbessern 2026: Der Praxis-Leitfaden für schnelle Websites

Von Christopher Schütz · Juni 2026 · 9 Min. Lesezeit

Google wertet Core Web Vitals seit 2021 als offizielles Ranking-Signal — und 2026 sind die Anforderungen schärfer als je zuvor. Wer LCP, INP und CLS im grünen Bereich hält, rankt nicht nur besser, sondern senkt auch die Absprungrate und gewinnt mehr Kunden. Dieser Leitfaden zeigt, was hinter den drei Metriken steckt und wie Sie sie Schritt für Schritt verbessern.

1. Was sind Core Web Vitals?

Core Web Vitals sind drei Kennzahlen, mit denen Google die Nutzererfahrung auf einer Website messbar macht. Sie fließen als Teil der sogenannten Page-Experience-Signale in die Bewertung ein. Die drei Metriken decken jeweils einen anderen Aspekt der Seitenqualität ab:

• LCP — Largest Contentful Paint misst, wie schnell das größte sichtbare Element einer Seite gerendert wird — meistens ein Hero-Bild oder eine große Überschrift. Zielwert: unter 2,5 Sekunden. Er steht für das wahrgenommene Ladegefühl: Lädt das Wichtigste schnell, fühlt sich die Seite flüssig an.
• INP — Interaction to Next Paint ist seit März 2024 der Nachfolger des alten FID (First Input Delay) und misst die Reaktionsschnelligkeit auf alle Nutzerinteraktionen — Klicks, Tippen, Scrollen. Zielwert: unter 200 Millisekunden. Ein hoher INP-Wert bedeutet, dass die Seite träge auf Eingaben reagiert, was besonders auf Formularen und im Shop frustriert.
• CLS — Cumulative Layout Shift erfasst, wie stark sich Seitenelemente während des Ladens unvorhergesehen verschieben. Zielwert: unter 0,1. Wer schon einmal auf einen Link geklickt hat, kurz bevor ein Bild nachrutschte und den Klick versetzt hat, kennt das Problem aus der Nutzerperspektive.

Wichtig: Es gibt zwei Arten von Core-Web-Vitals-Daten. Laborwerte (gemessen in kontrollierten Umgebungen, z. B. Lighthouse) zeigen das Potenzial einer Seite. Felddaten (echte Nutzerdaten aus dem Chrome-UX-Report, kurz CrUX) spiegeln wider, was tatsächliche Besucher erleben. Für das Google-Ranking zählen ausschließlich die Felddaten — ein guter Lighthouse-Score allein reicht nicht.

2. Warum Core Web Vitals fürs Ranking zählen

Google hat Core Web Vitals in den Page-Experience-Algorithmus integriert. Das bedeutet: Bei zwei Seiten mit ähnlicher Inhaltsqualität kann die technisch schnellere Seite den entscheidenden Vorteil erhalten. Die Metriken sind kein alleiniger Ranking-Faktor — relevanter, hochwertiger Content bleibt Trumpf — aber in umkämpften Branchen können sie als Tiebreaker wirken.

Noch wichtiger als der SEO-Effekt ist allerdings der direkte Einfluss auf die Conversion. Studien von Google zeigen: Seiten, die den Grün-Bereich bei allen drei Metriken erreichen, verzeichnen im Schnitt deutlich niedrigere Absprungraten. Für einen Handwerker, einen Onlineshop oder eine Kanzlei bedeutet eine halbe Sekunde weniger Ladezeit bares Geld — wer wartet, klickt weg.

Besonders relevant: Google indexiert seit 2024 konsequent Mobile-first. Die Core Web Vitals werden primär für mobile Geräte bewertet. Wer seinen Desktop-Score optimiert, aber das Mobilgerät vernachlässigt, riskiert trotzdem schlechte Felddaten.

3. LCP verbessern

Der LCP hängt davon ab, wie schnell das größte Element im sichtbaren Bereich gerendert werden kann. In den meisten Fällen ist das ein Bild — ein Hero-Banner, ein Produktfoto oder ein prominentes Teaser-Bild. Folgende Maßnahmen bringen den größten Effekt:

• Moderne Bildformate nutzen: WebP ist Standard, AVIF bietet nochmals 20–30 % bessere Kompression bei gleicher Qualität. Konvertieren Sie alle Bilder und liefern Sie via <picture>-Element das passende Format je Browser.
• Bilder richtig dimensionieren: Keine 2000-px-Bilder für 400-px-Slots. Nutzen Sie srcset und sizes, damit der Browser das passende Bild lädt.
• Server-Antwortzeit (TTFB) senken: Ein langsamer Server verzögert alles. Gutes Hosting, PHP-Opcode-Cache, Datenbank-Optimierung und serverseitiges Caching (z. B. Nginx FastCGI Cache) helfen direkt.
• Critical CSS inlinen: Das CSS, das für die Darstellung des sichtbaren Bereichs nötig ist, sollte direkt im <head> stehen — nicht als externe Datei, die erst geladen werden muss.
• LCP-Ressource preloaden: Mit <link rel="preload" as="image"> teilen Sie dem Browser früh mit, welches Bild Priorität hat. Besonders wirksam bei Hero-Bildern.
• Render-blocking-Ressourcen entfernen: JavaScript und CSS, die das Rendering blockieren, verzögern den LCP. Scripts ans Ende der Seite oder mit defer/async laden.
• CDN einsetzen: Ein Content Delivery Network liefert statische Dateien aus einem Serverstandort in Nutzernähe — das reduziert Latenz spürbar.

4. INP verbessern

INP misst die Reaktionszeit auf Nutzerinteraktionen. Schlechte INP-Werte entstehen fast immer durch zu viel JavaScript, das den Haupt-Thread (Main Thread) des Browsers blockiert. Der Haupt-Thread kann nur eine Aufgabe gleichzeitig bearbeiten — lange Tasks lassen den Browser auf Eingaben nicht mehr reagieren.

• JavaScript reduzieren und aufteilen: Laden Sie nur das JavaScript, das für die aktuelle Seite wirklich benötigt wird (Code-Splitting). Frameworks wie React oder Vue können Tree-Shaking und dynamische Imports nutzen.
• Lange Tasks vermeiden: Jeder JavaScript-Task über 50 ms gilt als lang. Nutzen Sie den Performance-Tab in Chrome DevTools, um solche Blockaden zu finden und aufzubrechen — z. B. mit setTimeout oder dem Web Workers API für rechenintensive Aufgaben.
• Third-Party-Skripte zähmen: Chat-Widgets, Analytics, Retargeting-Pixel — all das läuft auf dem Main Thread. Laden Sie externe Skripte verzögert (defer oder nach dem load-Event) und evaluieren Sie, ob jedes Tool wirklich notwendig ist.
• Layout-Berechnungen minimieren: Jede DOM-Änderung kann einen Reflow auslösen. Fassen Sie DOM-Manipulationen zusammen und messen Sie Werte nicht direkt nach dem Schreiben, um erzwungene synchrone Layouts zu vermeiden.

INP ist die Metrik, bei der viele WordPress-Seiten mit zahlreichen Plugins schlecht abschneiden — oft liegen die Ursachen bei schlecht implementierten Slidern, Live-Chats oder Cookie-Bannern, die zu früh geladen werden.

5. CLS beheben

Layout-Shifts entstehen, wenn der Browser Elemente erst rendert und sie dann verschiebt, weil nachgeladene Inhalte Platz beanspruchen. Die gute Nachricht: CLS-Probleme lassen sich in vielen Fällen mit wenigen Zeilen CSS dauerhaft beheben.

• Breite und Höhe an Bildern setzen: Jedes <img>-Element sollte width und height-Attribute tragen. Der Browser reserviert dann den Platz, bevor das Bild geladen ist. Alternativ: aspect-ratio in CSS.
• Videos und Embeds mit fester Höhe versehen: YouTube-Iframes, Karten-Embeds und ähnliche Elemente sollten einen definierten Container mit aspect-ratio oder festem padding-bottom erhalten.
• Werbeflächen und dynamische Inhalte reservieren: Wenn Werbebanner oder Cookie-Banner nachgeladen werden, muss ihr Platz schon beim ersten Render reserviert sein — sonst verschieben sie den gesamten darunterliegenden Inhalt.
• Webfonts mit font-display: swap und Fallback-Metriken: font-display: swap verhindert, dass Text unsichtbar bleibt (FOIT). Kombiniert mit size-adjust und passenden Fallback-Fonts lassen sich die Layout-Verschiebungen beim Schrifttausch auf nahezu null reduzieren.
• Keine nachträglich injizierten Elemente über bestehendem Content: Toasts, Sticky-Banner und Chat-Bubbles dürfen bestehenden Inhalt nicht nach unten schieben. Nutzen Sie Overlays oder absolute Positionierung, die den Dokumentfluss nicht verändert.

6. Wie Sie Core Web Vitals messen

Bevor Sie optimieren, müssen Sie wissen, wo Sie stehen. Dafür stehen verschiedene Werkzeuge zur Verfügung — sowohl für Laborwerte als auch für echte Felddaten:

• PageSpeed Insights (pagespeed.web.dev): Das wichtigste Tool für den Einstieg. Zeigt Laborwerte aus Lighthouse und — sofern vorhanden — echte Felddaten aus dem CrUX-Datensatz. Kostenlos, ohne Anmeldung nutzbar.
• Google Search Console: Unter "Nutzererfahrung" finden Sie den Bericht "Core Web Vitals". Er zeigt, welche URL-Gruppen bei echten Nutzern schlecht abschneiden und klassifiziert Seiten als gut, verbesserungswürdig oder schlecht.
• Chrome DevTools — Lighthouse: Direkt im Browser, ohne externe Dienste. Gut geeignet für Entwickler, um Optimierungen lokal zu testen, bevor sie live gehen.
• CrUX-Dashboard (Looker Studio): Der Chrome User Experience Report liefert 28-Tage-Zeitreihen für alle Metriken auf Domain-Ebene. Nützlich, um den Trend nach Optimierungsmaßnahmen zu verfolgen.
• Web-Vitals-JS-Bibliothek für Real-User-Monitoring (RUM): Mit der offiziellen web-vitals-Bibliothek von Google können Sie INP, LCP und CLS direkt im Browser Ihrer echten Besucher messen und in Ihr Analytics-System schicken. Das ist die präziseste Methode für kontinuierliches Monitoring.

Der entscheidende Unterschied: Laborwerte messen eine Seite unter kontrollierten Bedingungen mit einer simulierten Netzwerk- und CPU-Geschwindigkeit. Felddaten aggregieren das tatsächliche Nutzererlebnis über Wochen. Für das Google-Ranking sind die Felddaten maßgeblich — Laborwerte sind jedoch unverzichtbar für die Fehlersuche.

7. Praxis-Checkliste

Mit diesen Quick-Wins legen Sie die Grundlage für grüne Core Web Vitals:

• ✔ Alle Bilder in WebP oder AVIF konvertieren und mit srcset ausliefern
• ✔ width- und height-Attribute an jedem <img>-Tag setzen
• ✔ LCP-Bild (Hero) mit <link rel="preload"> vorladen
• ✔ Critical CSS inline im <head>, restliches CSS non-blocking laden
• ✔ JavaScript mit defer oder async laden, Render-Blocking eliminieren
• ✔ Third-Party-Skripte (Tracking, Chat, Werbung) verzögert nach dem load-Event einbinden
• ✔ Server-Caching aktivieren (z. B. FastCGI Cache, Redis oder Varnish)
• ✔ Webfonts mit font-display: swap und angepassten Fallback-Metriken einbinden
• ✔ Werbeflächen und dynamische Banner-Bereiche im Layout reservieren
• ✔ Ergebnisse mit PageSpeed Insights und der Google Search Console regelmäßig prüfen

Sie möchten wissen, wie Ihre Website bei den Core Web Vitals abschneidet? Wir analysieren Ladezeit und Page-Experience Ihrer Seite und zeigen die größten Hebel — als Teil unseres performanten Webdesigns oder als eigenständiges Performance-Audit.

Sprechen Sie uns an: TwoPixels GmbH aus Schortens (Friesland) entwickelt schnelle, technisch saubere Websites für kleine und mittelständische Unternehmen. Vereinbaren Sie ein kostenloses Erstgespräch — telefonisch unter +49 1556 7039821 oder per E-Mail an info@webagentur-twopixels.de.