Core Web Vitals verbessern: LCP, CLS und INP für KMU-Websites
Core Web Vitals verbessern: Was KMU-Betreiber wirklich wissen müssen
Seit Google die Core Web Vitals als Rankingfaktor eingeführt hat, tauchen die drei Abkürzungen LCP, CLS und INP in jedem SEO-Gespräch auf. Das Problem: Die meisten Erklärungen richten sich an Entwickler. Dabei entscheiden diese Metriken letztlich darüber, ob deine Website bei Google weiter oben auftaucht – und ob Besucher nach dem ersten Klick auch bleiben.
In diesem Artikel erkläre ich dir, was die drei Kennzahlen bedeuten, warum sie für dein Geschäft relevant sind, und was du – oder jemand wie ich – konkret dagegen tun kann.
Was sind Core Web Vitals?
Core Web Vitals sind drei Messwerte, mit denen Google die tatsächliche Nutzererfahrung auf einer Seite bewertet. Google erhebt die Werte aus echten Chrome-Nutzern (nicht aus Labor-Tests) und zeigt sie im Search Console Bericht zu den Nutzererfahrungsberichten an. Du findest sie außerdem in PageSpeed Insights und Lighthouse.
- LCP – Largest Contentful Paint: Wann wird das größte sichtbare Element geladen?
- CLS – Cumulative Layout Shift: Springt das Layout während des Ladens?
- INP – Interaction to Next Paint: Wie schnell reagiert die Seite auf Klicks und Eingaben?
Google empfiehlt: LCP unter 2,5 Sekunden, CLS unter 0,1, INP unter 200 Millisekunden. Seiten, die diese Schwellen deutlich verfehlen, können im Ranking zurückfallen – besonders in hart umkämpften Nischen.
LCP: Das Hero-Bild lädt zu langsam
Der LCP-Wert wird in den meisten Fällen durch das Hero-Bild bestimmt – das große Bild ganz oben auf deiner Startseite. Lädt es langsam, wartet der Besucher.
Die häufigsten Ursachen und ihre Fixes:
- Bildgröße nicht optimiert: Ein 4 MB JPEG als Hero funktioniert nicht. WebP oder AVIF mit richtiger Komprimierung kann die Dateigröße auf unter 200 KB drücken – ohne sichtbaren Qualitätsverlust.
- Kein Preload: Browser erkennen das Hero-Bild oft erst spät. Mit
<link rel="preload">im<head>lässt sich der Download früher anstoßen. - Langsamer Hosting-Server oder kein CDN: Liegt dein Server physisch weit vom Besucher entfernt, kostet das Zeit. Ein CDN (Content Delivery Network) liefert statische Inhalte aus einem nahen Knotenpunkt.
- Render-blocking Resources: JavaScript und CSS, die den Browser blockieren, bevor er irgendetwas rendern kann. Nicht benötigte Scripts sollte man verzögert laden (
deferoderasync).
CLS: Layout-Sprünge, die Besucher vertreiben
Kennst du das Gefühl, auf einen Link klicken zu wollen, und genau in dem Moment springt der Inhalt einen Zentimeter nach unten? Das ist CLS. Es passiert, wenn Browser Platz für Elemente reservieren müssen, deren Größe er vorher nicht kennt.
Die häufigsten Ursachen:
- Bilder ohne definierte Dimensionen: Jedes
<img>-Tag solltewidthundheighthaben. Der Browser kann dann das Layout schon berechnen, bevor das Bild fertig geladen ist. - Schriften, die nachgeladen werden: Wechselt eine Seite von einer System-Fallback-Schrift auf die eigentliche Web-Schrift, verschiebt sich der Text.
font-display: optionaloderswapzusammen mit Preloading der Schriftdatei hilft. - Ads, Embeds und Banner: Inhalte, die nachträglich injiziert werden (Cookies, Werbebanner), verschieben den Rest der Seite. Space reservieren, bevor sie erscheinen.
INP: Die Seite reagiert zu langsam auf Klicks
INP hat 2024 den alten FID-Wert abgelöst und misst, wie schnell eine Seite auf alle Interaktionen reagiert – nicht nur den ersten Klick. Ein hoher INP fühlt sich an wie eine träge Anwendung: du klickst auf etwas, und es passiert erstmal nichts.
Die Hauptursache ist fast immer zu viel JavaScript auf dem Haupt-Thread des Browsers. Konkrete Maßnahmen:
- JavaScript-Menge reduzieren: Nicht genutzter Code aus Plugins und Themes schleppt viele Sites mit. Tools wie Coverage in den Chrome DevTools zeigen, wie viel JS tatsächlich verwendet wird.
- Code splitting: Statt alles auf einmal zu laden, nur das laden, was gerade benötigt wird.
- Schwere Berechnungen auslagern: Web Workers können rechenintensive Aufgaben in einen Hintergrund-Thread verschieben, damit der Haupt-Thread für Interaktionen frei bleibt.
- Page Builder evaluieren: Viele WordPress-Page-Builder laden standardmäßig sehr viel JavaScript – auch für Elemente, die auf einer bestimmten Seite gar nicht vorkommen.
Messen: Wo du anfängst
Bevor du anfängst, irgendwas zu optimieren, schau dir die Ist-Werte an:
- PageSpeed Insights (pagespeed.web.dev): Zeigt sowohl Lab-Daten (simuliert) als auch echte Nutzerdaten (Field Data), wenn genug Besucher vorhanden sind.
- Google Search Console: Im Bereich "Nutzererfahrung" findest du den Core Web Vitals Report mit Seiten-URLs, die als "schlecht" oder "muss verbessert werden" eingestuft sind.
- Lighthouse: Direkt im Chrome Browser unter DevTools → Lighthouse – gut für schnelle lokale Tests während der Entwicklung.
Wichtig: Schau dir immer die Field Data an, wenn sie vorhanden ist. Lab-Daten (simulierte Tests) können die Realität verzerren – besonders bei Seiten mit vielen Third-Party-Skripten.
Core Web Vitals verbessern lohnt sich
Gute Core Web Vitals sind kein Selbstzweck. Eine Seite, die schnell lädt, nicht springt und sofort auf Klicks reagiert, konvertiert besser – ganz unabhängig vom Ranking-Effekt. Für KMU-Websites, die oft mit schmalem Budget entwickelt werden, ist gezielte Optimierung deshalb besonders wertvoll: du bekommst mehr aus dem gleichen Traffic heraus.
Ich helfe KMU-Betreibern dabei, Core Web Vitals konkret zu verbessern – von der Diagnose bis zur Umsetzung. Wenn du wissen möchtest, wo deine Website steht und was sich sinnvoll optimieren lässt, melde dich gern: Kontakt aufnehmen. Was ich an Leistungen anbiete, findest du unter meinen Services.