Seit Mai 2021 sind Core Web Vitals offiziell Teil des Google-Algorithmus. Drei Messwerte entscheiden mit darüber, wo Ihre Seite in den Suchergebnissen erscheint. Nicht als alleiniger Faktor, aber als Tiebreaker zwischen zwei inhaltlich gleichwertigen Seiten. Und gerade dann kann es den Unterschied zwischen Seite 1 und Seite 2 ausmachen.

Was viele nicht wissen: Schlechte Core Web Vitals schaden nicht nur dem Google Ranking. Sie kosten Sie direkt Conversions. Studien zeigen, dass jede Sekunde zusätzliche Ladezeit die Absprungrate um mehrere Prozentpunkte erhöht. Nutzer warten nicht. Sie klicken weg.

Dieser Guide zeigt Ihnen, was hinter den drei Metriken steckt, welche konkreten Maßnahmen wirklich helfen und wo Sie am besten anfangen.

LCP verstehen und verbessern

LCP steht für Largest Contentful Paint. Der Wert misst, wie lange es dauert, bis das größte sichtbare Element im Viewport geladen ist. Das kann ein Bild, ein Video oder ein großer Textblock sein. Meist ist es das Hero-Bild oder die Hauptüberschrift einer Seite.

Der Zielwert liegt bei unter 2,5 Sekunden. Werte zwischen 2,5 und 4 Sekunden gelten als verbesserungswürdig. Alles über 4 Sekunden wird von Google als schlecht eingestuft.

Häufige Ursachen für schlechten LCP

• Unkomprimierte Bilder: Ein Hero-Bild mit 3 MB Dateigröße ist der häufigste LCP-Killer. Der Browser muss das Bild erst vollständig laden, bevor LCP gemeldet wird.
• Kein Preload für kritische Ressourcen: Wenn der Browser erst das HTML parsen muss, um zu merken, dass er ein wichtiges Bild braucht, verlieren Sie wertvolle Sekunden.
• Render-blocking JavaScript und CSS: Scripts, die den Browser blockieren, bevor er überhaupt mit dem Rendern anfängt, verzögern alles.
• Langsamer Server: Eine hohe Time to First Byte (TTFB) über 600 ms zieht den LCP automatisch nach unten.
• Kein CDN: Nutzer, die geografisch weit vom Server entfernt sind, warten länger.

Konkrete Maßnahmen für besseren LCP

Fangen Sie mit dem LCP-Element selbst an. Komprimieren Sie Bilder auf WebP oder AVIF. Ein JPG-Bild mit 800 KB können Sie als WebP oft auf unter 150 KB bringen, ohne sichtbaren Qualitätsverlust. Nutzen Sie dafür Tools wie Squoosh oder integrieren Sie die Konvertierung direkt in Ihren Build-Prozess.

Setzen Sie einen Preload-Link im HTML-Head für das LCP-Bild. Das signalisiert dem Browser, dieses Element sofort zu laden, noch bevor er das komplette HTML analysiert hat.

<link rel="preload" as="image" href="/hero.webp">

Prüfen Sie Ihre TTFB. Werte über 600 ms deuten auf Serverprobleme hin. Aktivieren Sie serverseitiges Caching, wechseln Sie zu einem besseren Hosting oder setzen Sie ein CDN ein. Cloudflare bietet einen kostenlosen Plan, der TTFB für viele Websites deutlich verbessert.

Entfernen Sie render-blocking Ressourcen. CSS, das nicht sofort benötigt wird, kann asynchron geladen werden. JavaScript sollte mit defer oder async eingebunden sein, sofern es nicht unmittelbar beim Seitenaufbau gebraucht wird.

INP verstehen und verbessern

INP steht für Interaction to Next Paint. Seit März 2024 hat INP den alten Messwert FID (First Input Delay) vollständig abgelöst. Der Unterschied ist wichtig: FID maß nur die Verzögerung bei der ersten Interaktion. INP misst alle Interaktionen während des gesamten Seitenbesuchs und nimmt den schlechtesten Wert.

Der Zielwert liegt bei unter 200 Millisekunden. Zwischen 200 und 500 ms gilt als verbesserungswürdig. Über 500 ms ist schlecht.

INP misst, wie schnell die Seite nach einem Klick, Tastendruck oder einer anderen Interaktion visuell reagiert. Wenn ein Nutzer auf einen Button klickt und 800 ms wartet, bevor irgendetwas passiert, ist das ein schlechter INP-Wert.

Ursachen für schlechten INP

• Schweres JavaScript: Lange JavaScript-Tasks blockieren den Main Thread. Während eine Funktion läuft, kann der Browser keine Nutzereingaben verarbeiten.
• Drittanbieter-Scripts: Analytics, Chat-Widgets, Werbenetzwerke. Jedes externe Script kann den Main Thread blockieren.
• Zu viel Arbeit in Event-Handlern: Wenn ein Klick-Handler eine komplexe Berechnung oder DOM-Manipulation auslöst, verzögert das die visuelle Antwort.
• Unnötiges Re-Rendering: Bei React oder anderen Frameworks können schlecht optimierte Komponenten bei jeder Interaktion unnötig viel neu rendern.

Konkrete Maßnahmen für besseren INP

Analysieren Sie lange JavaScript-Tasks. Im Chrome DevTools Performance-Tab sehen Sie, welche Funktionen den Main Thread wie lange blockieren. Alles über 50 ms gilt als lange Task.

Teilen Sie lange Tasks auf. Nutzen Sie setTimeout mit 0 Millisekunden oder die scheduler.yield() API, um dem Browser zwischen Aufgaben Luft zu lassen. So bleibt die Seite responsiv.

Prüfen Sie jedes Drittanbieter-Script kritisch. Brauchen Sie wirklich fünf verschiedene Tracking-Tools? Laden Sie externe Scripts nur dann, wenn sie wirklich gebraucht werden. Viele Chat-Widgets können mit einem Klick initiiert werden, anstatt beim Seitenaufruf zu laden.

Bei React-Anwendungen helfen React.memo, useMemo und useCallback, um unnötige Renders zu vermeiden. Verwenden Sie außerdem startTransition für Updates, die nicht sofort sichtbar sein müssen.

CLS verstehen und verbessern

CLS steht für Cumulative Layout Shift. Diese Metrik misst, wie viel sich der Seiteninhalt während des Ladens verschiebt. Jeder kennt das Phänomen: Sie wollen auf einen Link klicken, dann lädt plötzlich eine Anzeige nach, alles rutscht nach unten, und Sie klicken versehentlich auf etwas anderes.

Der Zielwert liegt bei unter 0,1. Zwischen 0,1 und 0,25 ist verbesserungswürdig. Über 0,25 ist schlecht.

Häufige Ursachen für hohen CLS

• Bilder ohne Größenangaben: Wenn der Browser die Bildgröße nicht kennt, reserviert er keinen Platz. Sobald das Bild lädt, verschiebt sich alles darunter.
• Nachgeladene Werbeanzeigen: Ads, die nach dem initialen Seitenaufbau in den Content eingefügt werden, sind eine der häufigsten CLS-Quellen.
• Web Fonts ohne Fallback: Wenn eine Schriftart nachgeladen wird und sich die Buchstabenbreiten von der Fallback-Schrift unterscheiden, verschiebt sich der Text.
• Dynamisch eingefügte Elemente: Cookie-Banner, Newsletter-Popups oder Benachrichtigungsleisten, die oben auf der Seite erscheinen, schieben den gesamten Inhalt nach unten.

Konkrete Maßnahmen für besseren CLS

Geben Sie jedem Bild und Video explizite Breiten- und Höhenangaben. Das genügt, damit der Browser den Platz vorab reserviert. In modernem HTML sieht das so aus:

<img src="bild.webp" width="800" height="450" alt="Beschreibung">

Alternativ funktioniert das CSS-Property aspect-ratio sehr gut für responsive Bilder, die sich in der Breite anpassen.

Reservieren Sie Platz für Werbeanzeigen mit fixen Containern. Wenn Sie wissen, dass eine Ad 250 px hoch sein wird, setzen Sie diesen Platz bereits beim Seitenaufbau, bevor die Ad geladen ist.

Bei Web Fonts helfen zwei Techniken. Erstens: Laden Sie Schriften mit font-display: optional oder font-display: swap. Zweitens: Nutzen Sie size-adjust, um Fallback-Schriften so anzupassen, dass sie der Custom Font möglichst ähneln. Tools wie the Font Style Matcher helfen dabei.

Cookie-Banner und andere dynamische Elemente sollten nie den bestehenden Content verschieben. Platzieren Sie sie am unteren Rand des Viewports oder bauen Sie den Platz im Layout von Anfang an ein.

Core Web Vitals messen: Die besten Tools

Bevor Sie optimieren, müssen Sie wissen, wo Sie stehen. Diese vier Tools decken alle Messbedürfnisse ab.

PageSpeed Insights

PageSpeed Insights von Google ist der einfachste Einstieg. Sie geben eine URL ein und bekommen sowohl Lab-Daten (synthetische Messung) als auch Field-Daten (echte Nutzerdaten aus dem Chrome User Experience Report) zurück. Die Field-Daten sind für das Ranking entscheidend, weil Google genau diese Daten verwendet. Öffnen Sie pagespeed.web.dev und testen Sie Ihre wichtigsten Seiten.

Google Search Console

Die Google Search Console zeigt Ihnen unter "Nutzererfahrung" den Core Web Vitals Bericht für Ihre gesamte Website. Sie sehen, welche URLs schlechte Werte haben und wie viele Nutzer betroffen sind. Der Vorteil: Sie sehen aggregierte Felddaten über alle Nutzer, nicht nur einzelne Messungen.

Chrome DevTools

Im Performance-Tab von Chrome DevTools können Sie eine Seite aufzeichnen und genau nachvollziehen, was wann geladen wird. Der Lighthouse-Tab gibt Ihnen ähnliche Informationen wie PageSpeed Insights, aber direkt im Browser. Nützlich für die Entwicklungsphase, weil Sie Änderungen sofort testen können.

WebPageTest

WebPageTest unter webpagetest.org ist das mächtigste kostenlose Tool für detaillierte Ladeanalysen. Sie können den Teststandort wählen, verschiedene Verbindungsgeschwindigkeiten simulieren und sehen ein Wasserfall-Diagramm jeder einzelnen Netzwerkanfrage. Besonders hilfreich, um render-blocking Ressourcen zu identifizieren.

Priorisierung: Wo fangen Sie an?

Nicht jede Optimierung bringt den gleichen Effekt. Gehen Sie so vor.

1. Messen Sie zuerst: Öffnen Sie PageSpeed Insights und testen Sie Ihre fünf wichtigsten Seiten. Notieren Sie, welche Metrik am schlechtesten ist.
2. Fokus auf die schlechteste Metrik: Wenn LCP bei 5 Sekunden liegt, arbeiten Sie zuerst daran. Versuchen Sie nicht, alle drei Metriken gleichzeitig zu verbessern.
3. Größte Bilder zuerst: Bildoptimierung hat in den meisten Fällen den größten Hebel für LCP. Das geht schnell und kostet wenig.
4. Field-Daten als Maßstab: Lab-Daten in DevTools können täuschen. Orientieren Sie sich an den Field-Daten in der Search Console, weil diese das echte Nutzererlebnis widerspiegeln.
5. Nach der Optimierung warten: Google aktualisiert die Field-Daten über ein rollendes 28-Tage-Fenster. Nach einer Optimierung dauert es bis zu vier Wochen, bis die Verbesserung vollständig in den Messwerten sichtbar ist.

Priorisieren Sie Seiten mit hohem Traffic. Eine Verbesserung auf Ihrer Startseite und Ihren wichtigsten Landingpages hat mehr Wirkung als eine perfekt optimierte Impressum-Seite.

Achten Sie auch auf den Unterschied zwischen Desktop und Mobile. Google verwendet für das Ranking die Mobile-Werte. Viele Websites haben auf Desktop gute Werte, auf Mobilgeräten aber deutlich schlechtere. Testen Sie beide.

Fazit

Core Web Vitals sind kein Mysterium. LCP verlangt schnelle, gut komprimierte Hauptbilder und einen reaktionsschnellen Server. INP verlangt schlankes JavaScript und keine blockierenden Drittanbieter-Scripts. CLS verlangt, dass Sie Layout-Verschiebungen beim Laden von vornherein verhindern.

Die häufigsten Probleme lösen Sie mit wenigen gezielten Maßnahmen. Bildkomprimierung, Preload für kritische Ressourcen und korrekte Bildgrößen im HTML beheben bei den meisten Websites den Großteil der Schwachstellen.

Fangen Sie mit PageSpeed Insights an. Messen Sie Ihre wichtigsten Seiten. Dann gehen Sie die schlechteste Metrik an, bevor Sie sich um die anderen kümmern.

Wenn Sie Unterstützung bei der technischen Optimierung Ihrer Website brauchen, analysiert das Team von SEO Mannheim Ihre Core Web Vitals und zeigt Ihnen, welche Maßnahmen bei Ihrer spezifischen Website die größte Wirkung haben.