Core Web Vitals: Ladezeit der Webseite messen und verbessern

Core Web Vitals sind drei Messwerte, mit denen Google bewertet, wie schnell eine Webseite lädt, wie flott sie reagiert und wie ruhig sie beim Laden bleibt. Gute Werte sind LCP bis 2,5 Sekunden, INP bis 200 Millisekunden und CLS bis 0,1. Hier lesen Sie, was hinter den Abkürzungen steckt, wie Sie Ihre Werte prüfen und welche Maßnahmen die Ladezeit Ihrer Webseite wirklich verbessern.

Was sind Core Web Vitals?

Google hat die Core Web Vitals als gemeinsamen Maßstab für die Nutzererfahrung auf Webseiten eingeführt (web.dev: Web Vitals). Jeder der drei Werte steht für eine Frage, die sich auch Ihre Besucher stellen: Kommt der Inhalt bald? Reagiert die Seite, wenn ich tippe? Bleibt alles an seinem Platz?

Die drei Core Web Vitals

• LCPLargest Contentful Paint: Wann ist der größte Inhalt im sichtbaren Bereich geladen, meist ein Bild oder eine Überschrift?gut: bis 2,5 s
• INPInteraction to Next Paint: Wie schnell zeigt die Seite eine Reaktion, nachdem jemand klickt, tippt oder eine Taste drückt?gut: bis 200 ms
• CLSCumulative Layout Shift: Wie stark verrutschen sichtbare Inhalte unerwartet, während die Seite lädt?gut: bis 0,1

Zwischen „gut“ und „schlecht“ liegt jeweils ein Bereich, den Google als verbesserungswürdig einstuft:

Messwert	Gut	Verbesserungswürdig	Schlecht
LCP	bis 2,5 s	bis 4 s	über 4 s
INP	bis 200 ms	bis 500 ms	über 500 ms
CLS	bis 0,1	bis 0,25	über 0,25

LCP: Wann ist der Hauptinhalt da?

LCP misst die Zeit vom Aufruf der Seite bis zu dem Moment, in dem das größte Bild oder der größte Textblock im sichtbaren Bereich fertig dargestellt ist (web.dev: LCP). Auf vielen Seiten ist das das große Titelbild oder die Hauptüberschrift. LCP kommt dem Eindruck „die Seite ist da“ ziemlich nahe.

INP: Wie schnell reagiert die Seite?

INP beobachtet alle Klicks, Tipper und Tastatureingaben während eines Besuchs und meldet, wie lange es bei den langsamsten davon gedauert hat, bis sich auf dem Bildschirm etwas tut (web.dev: INP). Scrollen und das Überfahren mit der Maus zählen nicht. Im März 2024 hat INP den älteren Wert FID abgelöst, der nur die erste Interaktion betrachtet hat.

CLS: Bleibt alles an seinem Platz?

CLS erfasst unerwartete Verschiebungen: Sie wollen einen Link antippen, und genau dann rutscht ein Banner darüber. Verschiebungen direkt nach einer Eingabe, etwa ein Menü, das sich auf Klick öffnet, zählen nicht (web.dev: CLS). CLS ist eine Zahl ohne Einheit. Je kleiner, desto ruhiger die Seite.

Das 75. Perzentil: was „bestanden“ bedeutet

Google bewertet nicht den Durchschnitt, sondern das 75. Perzentil. Drei von vier Seitenaufrufen müssen also den guten Wert erreichen. Handy und Desktop werden getrennt ausgewertet. Viele Seiten bestehen am Desktop und fallen am Handy durch, weil dort schwächere Prozessoren und langsamere Verbindungen zusammenkommen.

Felddaten und Labordaten: zwei Arten zu messen

Wer zum ersten Mal PageSpeed Insights öffnet, wundert sich oft über zwei unterschiedliche Ergebnisse auf einer Seite. Das ist kein Fehler.

Felddaten stammen aus dem Chrome User Experience Report (CrUX). Das sind anonymisierte Messungen echter Chrome-Nutzer der letzten 28 Tage. Nur diese Daten fließen in Googles Bewertung ein. Sie erscheinen allerdings erst, wenn eine Seite genug Besuche hat.

Labordaten liefert Lighthouse. Es lädt die Seite einmal unter festgelegten Bedingungen, etwa mit einem simulierten Mittelklasse-Handy und gebremster Verbindung. Das ist ideal zum Testen und Vergleichen, bildet aber nicht Ihre echten Besucher ab. INP kann Lighthouse gar nicht messen, weil niemand klickt. Es zeigt stattdessen die Total Blocking Time als Annäherung.

Die Punktzahl von 0 bis 100 oben im Lighthouse-Bericht ist übrigens kein Core-Web-Vitals-Ergebnis. Eine Seite kann 95 Punkte haben und im Feld trotzdem durchfallen, oder umgekehrt.

PageSpeed und andere Werkzeuge: Werte prüfen

Für den Anfang reichen drei kostenlose Werkzeuge:

• PageSpeed Insights: Adresse eingeben, und Sie sehen Felddaten für die einzelne Seite und die ganze Domain, darunter die Lighthouse-Analyse mit konkreten Hinweisen. Wechseln Sie zwischen den Reitern für Handy und Desktop.
• Search Console, Bericht „Core Web Vitals“: zeigt für Ihre ganze Webseite, welche Gruppen ähnlicher Seiten gut, verbesserungswürdig oder schlecht abschneiden. Hier erkennen Sie Muster, etwa dass alle Blogartikel ein CLS-Problem haben.
• Chrome DevTools: Im Bereich „Performance“ sehen Sie LCP, CLS und INP live, während Sie selbst durch die Seite klicken. Damit finden Sie heraus, welches Element der LCP ist und welcher Klick langsam reagiert.

Ein Hinweis zur Geduld: Weil die Felddaten 28 Tage umfassen, zeigen sich Verbesserungen dort erst nach einigen Wochen.

Wo Sie am besten anfangen

Beginnen Sie mit dem Handy und mit dem Wert, der am schlechtesten abschneidet. Denken Sie dabei in Vorlagen statt in Einzelseiten: Wenn alle Leistungsseiten denselben Aufbau haben, behebt eine Änderung an der Vorlage das Problem überall auf einmal. Die Hinweise in Lighthouse sind ein guter Startpunkt, aber nicht jeder Punkt ist für Ihre Seite gleich wichtig. Ein großes Titelbild zu verkleinern bringt oft mehr als zehn kleine Optimierungen.

Ladezeit der Webseite verbessern: LCP

Ein schlechter LCP hat fast immer eine von wenigen Ursachen. Die häufigste: das Titelbild.

• Bilder verkleinern und moderne Formate nutzen: WebP oder AVIF sind bei gleicher Qualität meist deutlich kleiner als JPEG oder PNG. Mit srcset bekommt jedes Gerät eine passende Größe statt eines riesigen Desktop-Bildes.
• Das LCP-Bild nicht verzögern: loading="lazy" gehört zu Bildern weiter unten, nie zum Titelbild. Mit fetchpriority="high" sagen Sie dem Browser, dass dieses Bild Vorrang hat.
• Blockierendes CSS und JavaScript reduzieren: Alles, was vor dem ersten Bild geladen werden muss, verschiebt den LCP nach hinten.
• Schriften schlank halten: nur die Schnitte laden, die Sie wirklich verwenden, am besten vom eigenen Server.
• Hosting, Caching und CDN: Wenn der Server lange braucht, bis er überhaupt antwortet, hilft die beste Bildoptimierung wenig. Gutes Caching liefert fertige Seiten aus, statt sie bei jedem Aufruf neu zu bauen. Ein CDN bringt Dateien näher zu Besuchern in anderen Ländern.

INP verbessern: weniger JavaScript, schnellere Reaktion

Ein schlechter INP bedeutet: Der Browser ist mit etwas anderem beschäftigt, wenn jemand tippt. Meist ist das JavaScript.

• Drittanbieter-Skripte prüfen: Chat-Widgets, Tracking, Werbenetzwerke und eingebettete Videos laden oft viel Code. Fragen Sie bei jedem Skript, ob es noch gebraucht wird, und laden Sie den Rest erst, wenn er nötig ist.
• Weniger JavaScript ausliefern: Große Frameworks und Plugins, die auf jeder Seite laden, auch wenn sie nur auf einer gebraucht werden, kosten Reaktionszeit.
• Lange Aufgaben aufteilen: Rechenintensiver Code sollte in kleinen Stücken laufen, damit der Browser zwischendurch auf Eingaben reagieren kann.
• Sofort Rückmeldung geben: Ein Button kann zuerst sichtbar reagieren und die eigentliche Arbeit danach erledigen.
• Seiten nicht überladen: Sehr viele Elemente auf einer Seite machen jede Aktualisierung langsamer.

CLS verbessern: nichts darf nachrutschen

Layout-Verschiebungen sind meist schnell behoben, wenn man die Ursache kennt.

• Größenangaben für Bilder und Videos: Mit width und height oder aspect-ratio reserviert der Browser den Platz, bevor das Bild geladen ist.
• Platz für Werbung und Einbettungen freihalten: Anzeigen, Karten und Social-Media-Einbettungen bekommen einen Rahmen mit fester Mindesthöhe.
• Cookie-Banner als Überlagerung: Ein Banner, das von oben die Seite nach unten schiebt, verursacht Verschiebungen. Eines, das über dem Inhalt liegt, nicht.
• Schriften abstimmen: Wenn die Webschrift deutlich breiter ist als die Ersatzschrift, springt der Text beim Wechsel. Passende Ersatzschriften oder size-adjust dämpfen das.
• Animationen mit transform: Bewegungen über transform verschieben keine anderen Elemente, Änderungen an Höhe oder Abstand schon.

Wie wichtig sind Core Web Vitals für SEO?

Google beschreibt die Core Web Vitals als Teil der Seitenerfahrung, die in die Rankingsysteme einfließt (Google Search Central: Seitenerfahrung). Im selben Dokument steht aber auch: Google zeigt die relevantesten Inhalte, selbst wenn die Seitenerfahrung nicht ideal ist. Guter Inhalt schlägt gute Ladezeit.

Trotzdem lohnt sich die Arbeit, und zwar vor allem wegen der Menschen. Wer auf ein leeres Handydisplay starrt oder den falschen Button erwischt, weil die Seite verrutscht, kommt seltener wieder und schreibt seltener eine Anfrage. Das spüren Sie direkt, unabhängig von Google. Bei lokaler SEO ist das besonders deutlich, weil viele Suchen unterwegs am Handy passieren.

Auch aufwendige Gestaltung muss nicht langsam sein. Wie eine Seite mit 3D-Szene schnell bleibt, zeigt unser Artikel über 3D-Webseiten mit WebGL: Inhalt zuerst, Effekte danach. Und wenn Sie einen Umbau planen, messen Sie vorher und nachher. Wie ein Relaunch ohne SEO-Verluste gelingt, haben wir separat beschrieben.

Ihre Checkliste

1. PageSpeed Insights für Startseite und wichtigste Unterseiten aufrufen, Handy zuerst
2. Bericht „Core Web Vitals“ in der Search Console nach Mustern durchsehen
3. LCP-Element finden und Titelbild optimieren: modernes Format, passende Größe, kein Lazy Loading
4. Schriften auf die nötigen Schnitte reduzieren
5. Drittanbieter-Skripte auflisten und alles Überflüssige entfernen
6. Größenangaben für alle Bilder, Videos und Einbettungen setzen
7. Cookie-Banner und Werbung so einbauen, dass nichts nachrutscht
8. Hosting und Caching prüfen
9. nach vier Wochen die Felddaten erneut ansehen

Schnelle Seiten entstehen am leichtesten, wenn Tempo von Anfang an mitgedacht wird. So bauen wir unsere Seiten im Webdesign. Für bestehende Seiten messen und verbessern wir Ladezeit und Core Web Vitals im Rahmen von SEO und Betreuung, auf Wunsch samt Hosting. Schreiben Sie uns über das Kontaktformular, welche Seite Sie prüfen lassen möchten.