Zum Inhalt springen
Webdesign

Core Web Vitals erklärt: So wird Ihre Website schneller

LCP, INP, CLS — klingt technisch, ist aber entscheidend für Ihre Google-Rankings. Wir erklären die drei Core Web Vitals verständlich und zeigen, was Sie konkret tun können, um bessere Werte zu erreichen.

15. Januar 202610 Min. Lesezeitvon Arda Ucak · Geschäftsführer · Entwicklung

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

Google hat 2021 Core Web Vitals als offiziellen Rankingfaktor eingeführt — und seitdem hat sich dieser Einfluss verstärkt. Was bedeutet das praktisch? Eine langsame Website rangiert schlechter als eine schnelle, selbst wenn der Inhalt gleichwertig ist.

Aber es geht nicht nur um Rankings. Eine Studie von Google zeigt: Wenn die Ladezeit einer Seite von 1 auf 3 Sekunden steigt, erhöht sich die Absprungrate um 32%. Bei 5 Sekunden Ladezeit steigt sie um 90%. Jede Sekunde Wartezeit kostet echte Kunden.

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

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 WebP konvertieren und richtig komprimieren (oft 50-80% Größenreduktion)
  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

Eine Website mit guten Core Web Vitals rankt besser, hat niedrigere Absprungraten und konvertiert mehr Besucher zu Kunden. Das ist kein theoretisches Konzept — es ist messbar und beweisbar.

Bei Pulse Digital ist Performance keine nachträgliche Optimierung, sondern von Anfang an integriert. Unsere Next.js-basierten Websites erreichen standardmäßig LCP-Werte unter 1,5 Sekunden und CLS-Werte nahe 0.

Wenn Sie wissen wollen, wie Ihre aktuelle Website abschneidet und was verbessert werden kann, schauen Sie sich unsere SEO-Optimierungsleistungen an. Für Unternehmen in Köln und ganz NRW bieten wir kostenlose Website-Audits an — kontaktieren Sie uns und erfahren Sie, wo das größte Verbesserungspotenzial liegt.

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

🤖
KI-Assistent

Hey! 👋 Brauchst du eine Website oder eine kostenlose Analyse? Schreib mir!

💬 Chat mit uns
Core Web Vitals erklärt: LCP, INP, CLS und wie Sie Ihre Website schneller machen | Pulse Digital | Pulse Digital GbR