Core Web Vitals: LCP, INP & CLS optimieren
Core Web Vitals (CWV) sind eine Reihe spezifischer Faktoren, die Google als sehr wichtig für die gesamte Nutzererfahrung einer Webseite erachtet. Sie messen die reale Nutzererfahrung in Bezug auf Ladeperformance, Interaktivität und visuelle Stabilität der Seite.
1. Was sind Core Web Vitals?
Von Google eingeführt, sind Core Web Vitals eine Teilmenge der umfassenderen „Page Experience"-Signale. Statt nur auf die generische Ladezeit der Seite zu schauen, konzentriert sich CWV auf Metriken, die direkt beeinflussen, wie sich ein Nutzer fühlt, wenn er mit deiner Website interagiert. Wartet er zu lange darauf, das Hauptbild zu sehen? Ist die Website nicht reaktionsfähig, wenn er auf einen Button klickt? Springt der Text herum, während er versucht zu lesen?
2. Largest Contentful Paint (LCP)
Was es misst: Ladeperformance.
LCP misst die Zeit, die der größte Textblock oder das größte Bildelement, das im Viewport sichtbar ist, benötigt, um vollständig auf dem Bildschirm gerendert zu werden. Es sagt dem Nutzer, dass der Hauptinhalt der Seite tatsächlich geladen ist.
- Gut: 2,5 Sekunden oder weniger
- Verbesserungswürdig: 2,5 bis 4,0 Sekunden
- Schlecht: Länger als 4,0 Sekunden
Wie du LCP verbesserst:
- Optimiere und komprimiere Bilder (verwende moderne Formate wie WebP oder AVIF).
- Setze Lazy Loading ein (aber lade niemals dein LCP-Bild per Lazy Loading!).
- Verbessere die Server-Antwortzeiten (Time to First Byte - TTFB) über Caching oder ein CDN.
- Beseitige oder verzögere render-blockierendes JavaScript und CSS.
3. Interaction to Next Paint (INP)
Was es misst: Interaktivität und Reaktionsfähigkeit.
Hinweis: INP hat First Input Delay (FID) offiziell im März 2024 abgelöst.
INP beobachtet die Latenz aller Klick-, Tipp- und Tastaturinteraktionen, die ein Nutzer mit einer Seite während ihrer gesamten Lebensdauer hat. Es meldet die längste einzelne Verzögerung. Wenn ein Nutzer auf einen „In den Warenkorb"-Button klickt, misst INP, wie lange die Seite braucht, um sich visuell zu aktualisieren und diesen Klick zu bestätigen.
- Gut: 200 Millisekunden oder weniger
- Verbesserungswürdig: 200 bis 500 Millisekunden
- Schlecht: Länger als 500 Millisekunden
Wie du INP verbesserst:
- Minimiere die Arbeit im Main Thread, indem du die JavaScript-Ausführungszeit reduzierst.
- Teile lange, komplexe JavaScript-Aufgaben in kleinere Häppchen auf.
- Entferne ungenutzte Drittanbieter-Skripte (wie schwere Tracking-Pixel oder Chat-Widgets).
4. Cumulative Layout Shift (CLS)
Was es misst: Visuelle Stabilität.
Wolltest du jemals gerade auf einen Link klicken, aber plötzlich lädt die Seite eine Anzeige, schiebt den Text nach unten, und du klickst aus Versehen auf etwas anderes? Das ist ein Layout Shift. CLS misst die Gesamtsumme aller unerwarteten Layout-Verschiebungen, die während der gesamten Lebensdauer der Seite auftreten.
- Gut: 0,1 oder weniger
- Verbesserungswürdig: 0,1 bis 0,25
- Schlecht: Höher als 0,25
Wie du CLS verbesserst:
- Gib auf deinen Bild- und Videoelementen immer die Größenattribute
widthundheightan. - Reserviere Platz für Anzeigen, Embeds und iframes mithilfe von CSS-Seitenverhältnissen.
- Füge niemals dynamisch neuen Inhalt oberhalb bestehenden Inhalts ein, außer als Reaktion auf eine Nutzer- interaktion.
- Stelle sicher, dass benutzerdefinierte Webfonts reibungslos laden, ohne FOUT/FOIT (Flash of Unstyled Text)-Layout- Verschiebungen zu verursachen.
Profi-Tipp: Mit Rank-O-Saur kannst du schnell die strukturellen Elemente deiner Seite ansehen, um sicherzustellen, dass Bilder ihre Abmessungen korrekt deklariert haben, und so CLS-Probleme verhindern, bevor sie auftreten.
5. Wie du Core Web Vitals misst
Google stellt mehrere Tools zur Messung deiner CWV bereit. Es ist wichtig, den Unterschied zwischen Field Data (echte Nutzer) und Lab Data (simulierte Tests) zu verstehen:
- Google Search Console: Zeigt Field Data basierend auf dem Chrome User Experience Report (CrUX). Das sind genau die Daten, die Google für Rankings verwendet.
- PageSpeed Insights (PSI): Zeigt sowohl Field Data (falls verfügbar) als auch Lab Data (einen simulierten Lighthouse-Lauf).
- Chrome DevTools (Lighthouse): Zeigt nur Lab Data. Hervorragend, um Probleme lokal zu debuggen, bevor du in die Produktion gehst.
6. Warum CWV für SEO wichtig ist
Google hat ausdrücklich erklärt, dass Core Web Vitals ein Ranking-Faktor sind. Sie sind jedoch Teil eines Tie-Breaker-Systems.
Wichtig: Content ist nach wie vor King. Eine schnelle Website mit furchtbarem Content wird keine langsamere Website mit hochrelevantem, autoritativem Content überholen. Core Web Vitals fungieren als Tie-Breaker, wenn mehrere Seiten ähnlich hochwertigen Content haben.
Über die Rankings hinaus verbessert die Optimierung deiner CWV die Nutzerbindung drastisch, senkt Absprungraten und erhöht E-Commerce-Conversion-Raten. Nutzer hassen Warten, und sie hassen ruckelige Websites. Für CWV zu optimieren bedeutet, für deine Kunden zu optimieren.
