Core Web Vitals optimieren: Anleitung für 2026

Was sind Core Web Vitals?

Core Web Vitals sind drei von Google definierte Messwerte, die das Nutzererlebnis einer Website quantifizieren. Sie messen die drei Aspekte, die für Nutzer am wichtigsten sind: Wie schnell lädt die Seite? Wie schnell reagiert sie auf Eingaben? Und wie stabil bleibt das Layout beim Laden?

Google hat diese Metriken 2020 vorgestellt und nutzt sie seit Juni 2021 als Ranking-Signal. Sie sind kein dominanter Ranking-Faktor, aber zusammen mit Mobile-First-Indexierung bilden sie die technische Basis. Bei ansonsten gleicher Inhaltsqualität können sie den Unterschied zwischen Seite 1 und Seite 2 machen. Und für das Nutzererlebnis sind sie entscheidend: Eine langsame, ruckelige Seite verliert Besucher, bevor diese den ersten Satz gelesen haben.

Die drei Metriken im Detail

LCP — Largest Contentful Paint

LCP misst, wie lange es dauert, bis das größte sichtbare Element auf der Seite geladen ist. Das kann ein Bild, ein Video-Thumbnail oder ein großer Textblock sein. Die Zielzeit liegt bei maximal 2,5 Sekunden.

LCP ist die Metrik, die Nutzer am direktesten spüren. Wenn sie auf einen Link klicken und 4 Sekunden auf eine weiße Seite starren, sind sie weg — egal wie gut dein Inhalt ist.

So optimierst du LCP:

Komprimiere Bilder konsequent. Nutze moderne Formate wie WebP oder AVIF statt PNG oder JPG. Ein typisches Hero-Bild lässt sich von 2 MB auf 100 KB reduzieren — ohne sichtbaren Qualitätsverlust. Lade das LCP-Element mit hoher Priorität: Setze fetchpriority="high" auf das wichtigste Bild. Vermeide Render-Blocking-Ressourcen: CSS und JavaScript, die das Rendern blockieren, verzögern den LCP. Lade nicht-kritisches CSS asynchron und verschiebe JavaScript mit defer.

INP — Interaction to Next Paint

INP hat 2024 die ältere FID-Metrik (First Input Delay) ersetzt. INP misst die gesamte Reaktionszeit auf Nutzerinteraktionen — nicht nur die erste, sondern alle. Ein Klick auf einen Button, das Öffnen eines Menüs, das Scrollen durch eine Liste — INP erfasst, wie lange es dauert, bis die Seite visuell auf die Interaktion reagiert.

Der Zielwert liegt bei maximal 200 Millisekunden. Alles darüber fühlt sich für Nutzer träge an.

So optimierst du INP:

Reduziere JavaScript-Ausführungszeit. Schwere Skripte, die den Main Thread blockieren, sind der häufigste INP-Killer. Teile lange Tasks in kleinere auf (unter 50ms pro Task). Entferne ungenutztes JavaScript — viele Websites laden Megabytes an Code, den sie nie ausführen. Nutze requestIdleCallback für nicht-dringende Aufgaben.

CLS — Cumulative Layout Shift

CLS misst, wie stark sich das Layout der Seite während des Ladens verschiebt. Jeder hat das schon erlebt: Du willst auf einen Button klicken, und plötzlich springt die Seite nach unten, weil ein Bild oder eine Werbeanzeige geladen wird. Genau das misst CLS.

Der Zielwert liegt bei maximal 0,1. Alles darüber bedeutet, dass dein Layout während des Ladens sichtbar springt.

So optimierst du CLS:

Definiere feste Abmessungen für alle Bilder und Videos. Ohne definierte Breite und Höhe reserviert der Browser keinen Platz — und das Layout verschiebt sich, sobald das Bild lädt. Lade Schriftarten mit font-display: swap und stelle sicher, dass Web-Fonts keine Layout-Verschiebungen verursachen. Füge keine Inhalte dynamisch über bestehendem Content ein — neue Elemente sollten immer unter dem aktuell sichtbaren Bereich erscheinen.

So misst du deine Core Web Vitals

Google PageSpeed Insights

Gehe auf pagespeed.web.dev und gib deine URL ein. Du bekommst sowohl Labordaten (simulierte Tests) als auch Felddaten (echte Nutzerdaten, wenn genug Traffic vorhanden). Felddaten sind die relevanten — Google nutzt diese für das Ranking. Als neue Website wirst du anfangs nur Labordaten haben.

Google Search Console

Unter „Core Web Vitals" in der Search Console siehst du den Status aller deiner Seiten — aufgeteilt nach Mobile und Desktop. Hier werden Seiten mit Problemen rot markiert, Seiten mit Verbesserungspotenzial gelb, und gute Seiten grün.

Chrome DevTools

Im Lighthouse-Tab von Chrome DevTools kannst du detaillierte Performance-Audits durchführen. Hier siehst du genau, welche Ressourcen die Ladezeit verlängern und bekommst spezifische Empfehlungen.

Warum statisches HTML perfekte Core Web Vitals liefert

Hier ist ein Vorteil, den du als Proof-of-Reach-Leser bereits hast: Statische HTML-Seiten — also genau das, was wir hier bauen — haben von Natur aus hervorragende Core Web Vitals.

Kein WordPress mit 30 Plugins, die JavaScript laden. Kein PHP, das auf dem Server Seiten zusammenbaut. Kein CMS-Overhead. Eine einzelne HTML-Datei mit eingebettetem CSS wird in Millisekunden geladen. Das ist der einfachste Weg zu einem perfekten Performance-Score.

Diese Website (proofofreach.de) nutzt genau diesen Ansatz: Statisches HTML, minimales CSS, kein externes JavaScript. Das Ergebnis sind Core Web Vitals im oberen Prozentbereich — und genau das ist der Beweis, den wir unseren Kunden zeigen können.

Checkliste: Core Web Vitals in 30 Minuten verbessern

Bilder optimieren (10 Min.): Konvertiere alle Bilder zu WebP. Setze Width- und Height-Attribute. Füge loading="lazy" für Bilder unterhalb des sichtbaren Bereichs hinzu. Setze fetchpriority="high" auf das LCP-Element.

JavaScript aufräumen (10 Min.): Entferne ungenutztes JavaScript. Verschiebe alle Skripte ans Ende des Body oder lade sie mit defer. Prüfe, ob externe Skripte (Analytics, Widgets) den Main Thread blockieren.

Layout stabilisieren (10 Min.): Definiere feste Dimensionen für alle Medienelemente. Reserviere Platz für dynamische Inhalte (Werbung, Lazy-Loading). Nutze font-display: swap für Web-Fonts.

Häufige Fragen

Zuletzt aktualisiert: 25. März 2026