Core Web Vitals einfach erklärt

Largest Contentful Paint (LCP)

LCP misst, wie lange es dauert, bis das größte sichtbare Element im ersten Bildschirm fertig angezeigt wird. Meist ist das ein großes Bild oder die Hauptüberschrift. Für Besucher ist das der Moment, in dem die Seite „da“ ist.

Was LCP oft bremst

• Große, unkomprimierte Bilder, etwa ein Foto direkt aus der Kamera als Titelbild
• Das Titelbild wird per Lazy Loading erst spät nachgeladen
• Ein langsamer Server, der lange braucht, bis überhaupt das erste Byte ankommt
• CSS, JavaScript und Schriften, die das Anzeigen der Seite blockieren

Was hilft

• Bilder in der passenden Größe ausliefern und in modernen Formaten wie WebP oder AVIF
• Das wichtigste Bild nicht verzögert laden, sondern mit hoher Priorität (fetchpriority="high")
• Caching und ein Server oder CDN in der Nähe deiner Besucher
• Nur das CSS und JavaScript laden, das die Seite wirklich braucht

WebP und AVIF

Beide Formate machen Bilder deutlich kleiner als JPEG oder PNG, bei gleicher sichtbarer Qualität. AVIF ist meist noch etwas kleiner als WebP. Alle aktuellen Browser können beide Formate anzeigen. Ein gutes Bildformat ist oft der schnellste Weg zu einem besseren LCP.

Interaction to Next Paint (INP)

INP misst, wie schnell die Seite reagiert, wenn jemand klickt, tippt oder eine Taste drückt. Gezählt werden alle Interaktionen während eines Besuchs, und der Wert spiegelt die langsamsten davon wider. Öffnet sich das Menü erst nach einer halben Sekunde, fühlt sich die Seite kaputt an, auch wenn sie schnell geladen hat.

INP hat am 12. März 2024 den früheren Wert First Input Delay (FID) abgelöst. FID hat nur die Wartezeit bei der ersten Interaktion gemessen, INP betrachtet den ganzen Besuch.

Was INP oft bremst

• Viel JavaScript, etwa von Pagebuildern, Slidern und Animationen
• Skripte von Drittanbietern wie Tracking, Chat-Widgets oder eingebettete Videos
• Lange Aufgaben im Browser, die alles andere blockieren

Was hilft

• Weniger JavaScript ausliefern und Unnötiges entfernen
• Drittanbieter-Skripte prüfen und erst laden, wenn sie gebraucht werden
• Lange Aufgaben in kleinere Schritte aufteilen, damit der Browser dazwischen reagieren kann

Cumulative Layout Shift (CLS)

CLS misst, wie stark Inhalte beim Laden unerwartet verrutschen. Jeder kennt das. Du willst auf einen Link tippen, ein Bild lädt nach, alles rutscht nach unten, und du triffst etwas anderes. Der Wert hat keine Einheit. Er ergibt sich aus der Fläche, die sich bewegt, und der Strecke, um die sie sich verschiebt.

Was CLS oft verursacht

• Bilder und Videos ohne feste Breite und Höhe
• Werbung, Karten oder eingebettete Inhalte ohne reservierten Platz
• Cookie-Banner oder Hinweise, die Inhalte nach unten schieben
• Webschriften, die spät laden und den Text umbrechen lassen

Was hilft

• Breite und Höhe für alle Bilder angeben, damit der Browser den Platz freihält
• Für nachladende Inhalte vorab Platz reservieren
• Banner über den Inhalt legen statt ihn zu verschieben
• Schriften selbst hosten und eine ähnlich breite Ersatzschrift festlegen

Wie wichtig die Core Web Vitals für das Ranking sind

Google nutzt die Core Web Vitals in seinen Ranking-Systemen. Google sagt aber auch klar, dass eine gute Nutzererfahrung keinen besseren Inhalt ersetzt. Eine schnelle Seite mit schwachem Text rankt nicht automatisch vor einer langsameren Seite, die die Frage besser beantwortet.

Wichtig sind die Werte trotzdem, vor allem für deine Besucher. Wer auf dem Handy wartet oder sich vertippt, weil Inhalte springen, geht eher zurück zu den Suchergebnissen. Eine Studie von Deloitte im Auftrag von Google aus dem Jahr 2020 fand, dass schon 0,1 Sekunden schnellere Ladezeit auf dem Handy die Conversion Rate im Handel um 8,4 Prozent erhöhte.

Wenn du wissen willst, wie deine Website abschneidet, schau dir meine Performance-Optimierung an. Den Kurz-Check deiner Startseite bekommst du kostenlos.