Moin,
Core Web Vitals sind Googles Art zu sagen: Deine Website ist zu langsam, und das kostet Dich Rankings. Seit 2021 sind sie offizieller Ranking-Faktor. Ignorieren ist keine Option mehr.
Aber was bedeuten diese Abkürzungen eigentlich? Und wie optimierst Du sie, ohne Informatik studiert zu haben?
#Die drei Metriken, die zählen
LCP steht für Largest Contentful Paint. Das ist die Zeit, bis das größte sichtbare Element geladen ist. Meistens ein Bild, manchmal ein Textblock. Google will das unter 2,5 Sekunden.
INP steht für Interaction to Next Paint. Das hat FID ersetzt, den alten Wert. INP misst, wie schnell die Seite auf Interaktionen reagiert. Klicks, Taps, Tastatureingaben. Google will das unter 200 Millisekunden.
CLS steht für Cumulative Layout Shift. Das misst, wie viel sich auf der Seite verschiebt, während sie lädt. Du kennst das: Du willst auf einen Link klicken, und plötzlich rutscht alles nach unten, weil ein Bild geladen wurde. Google will CLS unter 0,1.
#Warum das wichtig ist
Google nutzt Core Web Vitals als Ranking-Signal. Schlechte Werte bedeuten schlechtere Rankings. Nicht dramatisch, aber messbar.
Wichtiger noch: Schlechte Core Web Vitals bedeuten schlechte Nutzererfahrung. Und schlechte Nutzererfahrung bedeutet, dass Besucher abspringen. Die kaufen nicht, die fragen nicht an, die kommen nicht wieder.
Ich habe Seiten gesehen, die nach einer Performance-Optimierung 30 Prozent mehr Conversions hatten. Nicht weil sie besser ranken, sondern weil die Besucher nicht mehr frustriert aufgeben.
#LCP optimieren
Das größte Element muss schnell laden. Meistens ist das ein Bild. Also fang dort an.
Bilder komprimieren. WebP statt JPEG. Richtige Größen, nicht 4000 Pixel breit für eine 800-Pixel-Anzeige. Lazy Loading für Bilder, die nicht sofort sichtbar sind.
Aber LCP ist nicht nur Bilder. Auch der Server muss schnell antworten. Ein schlechtes Hosting kann den besten Code ruinieren. Ich empfehle Hosting mit SSD-Speicher und europäischen Servern für deutsche Seiten.
Caching hilft enorm. Was einmal geladen wurde, muss nicht nochmal vom Server geholt werden. Browser-Caching für wiederkehrende Besucher, Server-Caching für die erste Anfrage.
Kritisches CSS inline laden. Das CSS, das für den sichtbaren Bereich nötig ist, sollte direkt im HTML stehen. Nicht in einer externen Datei, die erst geladen werden muss.
#INP optimieren
INP ist komplizierter. Es misst, wie lange der Browser braucht, um auf Interaktionen zu reagieren. Wenn Du auf einen Button klickst und nichts passiert, ist das schlechtes INP.
Der Übeltäter ist meistens JavaScript. Zu viel davon, schlecht geschrieben, oder beides. JavaScript blockiert den Main Thread. Während er arbeitet, reagiert die Seite nicht.
Die Lösung: Weniger JavaScript. Klingt simpel, ist es auch. Braucht die Seite wirklich fünf verschiedene Tracking-Tools? Braucht sie wirklich dieses animierte Menü?
Was übrig bleibt, sollte effizient sein. Lange Tasks aufbrechen. Nicht blockierendes JavaScript verwenden. Event-Handler optimieren.
Third-Party-Scripts sind oft das Problem. Chat-Widgets, Analytics, Social-Media-Einbindungen. Jedes davon fügt JavaScript hinzu. Manche davon sind katastrophal schlecht programmiert.
#CLS optimieren
Layout-Shifts passieren, wenn Elemente ihre Position ändern, nachdem die Seite schon sichtbar ist. Das ist irritierend für Nutzer und schlecht für CLS.
Der häufigste Grund: Bilder ohne definierte Größe. Der Browser weiß nicht, wie groß das Bild wird, also reserviert er keinen Platz. Wenn das Bild lädt, schiebt es alles andere weg.
Die Lösung: Width und Height im HTML angeben. Oder Aspect-Ratio im CSS. Dann reserviert der Browser den richtigen Platz, bevor das Bild da ist.
Web-Fonts sind der zweite Übeltäter. Der Browser zeigt erst eine System-Schrift, dann lädt die Web-Font und ersetzt sie. Das verursacht Shifts.
Die Lösung: Font-Display: swap verwenden. Oder die Fonts preloaden. Oder weniger Web-Fonts verwenden. System-Fonts sind nicht sexy, aber sie shiften nicht.
Werbung und Embeds sind der dritte Übeltäter. Banner, die ihre Größe ändern. YouTube-Videos, die nachgeladen werden. Das lässt sich oft nicht komplett verhindern, aber mit reserviertem Platz minimieren.
#Tools zur Messung
Google PageSpeed Insights ist der Klassiker. Du gibst eine URL ein, bekommst Deine Werte. Einfach, aber nicht immer genau.
Lighthouse im Chrome DevTools geht tiefer. Du siehst nicht nur die Werte, sondern auch, was sie verursacht. Für Entwickler unverzichtbar.
Die Search Console zeigt Real-World-Daten. Nicht Labor-Messungen, sondern echte Nutzerdaten. Das ist aussagekräftiger, aber langsamer, es dauert Wochen, bis Änderungen sichtbar werden.
WebPageTest ist für Nerds. Detaillierte Wasserfalldiagramme, verschiedene Testbedingungen, wiederholbare Ergebnisse. Wenn Du wirklich verstehen willst, was passiert, führt kein Weg dran vorbei.
#Was realistische Ziele sind
Perfekte Core Web Vitals sind nicht immer möglich. Manche Seiten brauchen einfach mehr Zeit zum Laden. Ein Shop mit tausend Produkten lädt langsamer als eine Visitenkarten-Website.
Das Ziel sollte sein: Besser werden. Nicht perfekt, aber gut genug. Wenn alle drei Metriken grün sind, ist das fantastisch. Wenn sie gelb sind, ist das akzeptabel. Wenn sie rot sind, hast Du ein Problem.
Priorisierung hilft. LCP hat den größten Einfluss auf die wahrgenommene Geschwindigkeit. Fang dort an. INP ist wichtiger geworden seit dem FID-Ersatz. CLS ist am einfachsten zu beheben.
#Der eigentliche Punkt
Core Web Vitals sind kein Selbstzweck. Sie messen, wie gut Deine Website funktioniert. Gute Werte bedeuten glückliche Nutzer. Glückliche Nutzer bedeuten mehr Conversions.
Die Optimierung ist technisch, aber nicht unmöglich. Die meisten Verbesserungen sind Grundlagen: Bilder komprimieren, Hosting verbessern, überflüssiges JavaScript entfernen.
Wer das konsequent macht, sieht Ergebnisse. Bessere Rankings, ja. Aber wichtiger: bessere Nutzererfahrung. Und die zahlt sich immer aus.
Cheers,
Rafael