Core Web Vitals prüfen und verbessern: LCP, INP & CLS

Warum Google-Speed-Metriken für Ihr Business wichtig sind

Core Web Vitals sind Teil der Page-Experience-Signale in Googles Ranking-Systemen. Google betont zugleich, dass Relevanz und weitere Signale zentral bleiben und gute Werte keine Top-Platzierung garantieren.

Quelle: Google Search Central zu Page Experience.

Aber es geht nicht nur um Rankings. Lange Lade- und Reaktionszeiten erschweren die Nutzung und können dazu führen, dass Interessenten vor einer Anfrage abbrechen. Entscheidend sind reale Felddaten und die wichtigsten Nutzerwege.

In diesem Artikel erklären wir die drei Core Web Vitals verständlich und zeigen konkrete Maßnahmen, die wirklich helfen.

Core Web Vitals prüfen: der schnelle Einstieg

1. Felddaten zuerst ansehen: Prüfen Sie die URL in PageSpeed Insights. Der Bereich mit realen Nutzerdaten ist aussagekräftiger für die tatsächliche Nutzung als ein einzelner Labortest.
2. Betroffene Seitengruppen finden: Nutzen Sie den Bericht zu den Core Web Vitals in der Google Search Console, um wiederkehrende Probleme über mehrere URLs zu erkennen.
3. Ursache im Labortest eingrenzen: Lighthouse und die Performance-Werkzeuge in Chrome helfen dabei, LCP-Elemente, lange JavaScript-Aufgaben und Layoutverschiebungen zu lokalisieren.
4. Nach der Änderung erneut messen: Labordaten reagieren sofort. Neue Felddaten brauchen reale Besuche und ein ausreichend langes Messfenster.

Metric 1: LCP — Largest Contentful Paint

Was es misst: LCP misst, wie lange es dauert, bis das größte sichtbare Element im Viewport geladen ist. Typischerweise ist das ein Headerbild, ein Hero-Banner oder ein großes Textelement.

Was Google will: Unter 2,5 Sekunden = gut. 2,5–4,0 Sekunden = verbesserungswürdig. Über 4,0 Sekunden = schlecht.

Warum LCP oft schlecht ist

Der häufigste Grund: Unkomprimierte, zu große Bilder. Ein 5-MB-JPEG als Hero-Bild ist einer der häufigsten Performance-Killer, die wir sehen. Weitere Ursachen: langsames Server-Response-Time, Render-blocking JavaScript und CSS, fehlende Ressourcen-Priorisierung.

Wie man LCP verbessert

• Bilder optimieren: Modernes Format (WebP oder AVIF), richtige Größe für den Viewport, Komprimierung. Ein 5-MB-Bild sollte nach Optimierung unter 200 KB sein
• Preloading: Das LCP-Element mit rel="preload" priorisieren — der Browser lädt es früher
• Server-Performance: Schnelles Hosting, CDN für statische Assets, Server-Response-Time unter 200ms
• Critical CSS: Den CSS-Code, der above-the-fold gerendert wird, inline einbinden statt aus einer externen Datei laden

Metric 2: INP — Interaction to Next Paint

Was es misst: INP (seit März 2024 offiziell als Nachfolger von FID) misst die Reaktionsfähigkeit der Seite auf Nutzereingaben. Genauer: Die Zeit zwischen einem Klick/Tippen und der sichtbaren Reaktion der Seite.

Was Google will: Unter 200 Millisekunden = gut. 200–500 ms = verbesserungswürdig. Über 500 ms = schlecht.

Warum INP wichtig ist

Wenn ein Nutzer auf einen Button klickt und nichts passiert — oder erst nach halber Sekunde — entsteht Frustration. Bei mobilen Nutzern ist das besonders kritisch. Schlechte INP-Werte deuten auf Probleme mit JavaScript-Ausführung hin.

Wie man INP verbessert

• JavaScript-Last reduzieren: Zu viele und zu große JS-Dateien blockieren den Main-Thread. Code-Splitting und lazy loading helfen
• Third-Party-Scripts: Google Analytics, Chat-Widgets, Social-Embeds — jeder dieser Scripts hat einen Preis. Kritisch prüfen, welche wirklich gebraucht werden
• Event Handler optimieren: Komplexe Berechnungen in Event-Handlern in Web Workers auslagern
• Debouncing: Häufig ausgelöste Events (Scroll, Resize) mit Debouncing oder Throttling begrenzen

Metric 3: CLS — Cumulative Layout Shift

Was es misst: CLS misst visuelle Stabilität — also wie stark Elemente beim Laden unerwartet verschieben. Kennen Sie das: Sie wollen auf einen Link klicken, und plötzlich springt die Seite und Sie klicken auf etwas anderes?

Was Google will: Unter 0,1 = gut. 0,1–0,25 = verbesserungswürdig. Über 0,25 = schlecht.

Was CLS verursacht

• Bilder ohne definierte Breite/Höhe (der Browser weiß nicht, wie viel Platz er reservieren soll)
• Werbeanzeigen die nachträglich eingeblendet werden und Inhalte verschieben
• Web Fonts die nach dem ersten Render laden (FOUT — Flash of Unstyled Text)
• Dynamisch eingebettete Inhalte ohne Größenreservierung

Wie man CLS verbessert

• Bildgrößen explizit angeben: Immer width und height Attribute setzen — oder in modernen Frameworks aspect-ratio nutzen
• Font-Optimierung: font-display: swap und lokale Fonts bevorzugen (wie wir es bei Pulse Digital machen)
• Platzhalter für dynamische Inhalte: Wenn Werbung oder dynamische Komponenten geladen werden, Platz im Layout reservieren
• Transforms statt Layout-Properties: Animationen mit CSS transforms statt margin/top/left

Wie Sie Ihre Core Web Vitals messen

Bevor Sie optimieren, müssen Sie wissen wo Sie stehen:

PageSpeed Insights (kostenlos)

Google's offizielles Tool unter pagespeed.web.dev — zeigt LCP, INP und CLS für mobile und desktop Ansicht. Wichtig: Es zeigt sowohl Lab-Daten (simuliert) als auch Field-Daten (echte Nutzerdaten aus Google's CrUX-Dataset).

Google Search Console

Im Search Console Report "Core Web Vitals" sehen Sie, wie Ihre echten Nutzer die Seite erleben — aufgeteilt in URLs die als gut, verbesserungswürdig oder schlecht bewertet werden.

Lighthouse in Chrome DevTools

Für tiefergehende Analyse: In Chrome F12 → Lighthouse → Generate report. Liefert detaillierte Diagnosen und konkrete Verbesserungsvorschläge.

Die häufigsten Quick Wins

Aus unserer Erfahrung: Diese Maßnahmen bringen die größten Verbesserungen mit dem geringsten Aufwand:

1. Bilder in geeigneten modernen Formaten ausgeben und mit sichtbarer Qualitätskontrolle komprimieren
2. Lazy Loading für Bilder below-the-fold (loading="lazy")
3. Fonts lokal hosten statt von Google Fonts laden
4. Unnötige Third-Party-Scripts entfernen oder deferred laden
5. Browser-Caching konfigurieren

Was das für Ihre Website bedeutet

Gute Core Web Vitals stehen für messbar bessere technische Nutzungsvoraussetzungen. Ob sich das auf Rankings, Absprünge oder Conversions auswirkt, hängt von weiteren Faktoren ab und sollte mit Feld- und Geschäftsdaten getrennt ausgewertet werden.

Bei Pulse Digital wird Performance von Anfang an berücksichtigt und nach dem Build an den relevanten Seiten gemessen. Feste LCP-, INP- oder CLS-Werte lassen sich ohne Kenntnis von Inhalt, Gerät, Verbindung und Drittanbieter-Skripten nicht seriös versprechen.

Wenn Sie wissen wollen, wie Ihre aktuelle Website abschneidet und was verbessert werden kann, schauen Sie sich unsere Suchmaschinenoptimierung Moers oder den kostenlosen Website-Check an.

Und wenn Sie eine neue Website planen: Schauen Sie sich an, was wir unter Webdesign anbieten — mit Performance built-in.