Core Web Vitals und Ladezeit verbessern

Eine Seite kann schnell sichtbar werden und trotzdem auf Eingaben träge reagieren. Eine andere Seite lädt flott, während Bilder und Schriften den Inhalt nachträglich verschieben. Die Core Web Vitals helfen, diese unterschiedlichen Probleme auseinanderzuhalten: LCP beschreibt die Ladeleistung, INP die Reaktionsfähigkeit und CLS die visuelle Stabilität.

Dieser Leitfaden zeigt, wie du Werte richtig liest, Ursachen eingrenzt und passende Massnahmen auswählst. Gute Messwerte sind Qualitätsziele für die Nutzung deiner Website. Gute Werte garantieren weder bessere Rankings noch mehr Anfragen oder Umsatz. Die übergeordnete Einordnung findest du unter Technisches SEO.

Inhalt dieser Seite

Was LCP, INP und CLS aussagen

Die drei Kennzahlen beantworten unterschiedliche Fragen. LCP misst, wann der grösste relevante Bild- oder Textblock im sichtbaren Bereich erscheint. INP betrachtet die Verzögerung zwischen einer Interaktion und der nächsten Darstellung im Browser. CLS bewertet unerwartete Verschiebungen sichtbarer Inhalte. Es reicht deshalb nicht, nur die Dateigrösse oder die Ladezeit der Startseite anzusehen. Die Begriffe kurz erklärt findest du im Glossar zu Core Web Vitals.

LCP, Ladeleistung

Guter Zielwert bis einschliesslich 2,5 Sekunden. Gemessen wird der Zeitpunkt, zu dem der grösste relevante Bild- oder Textblock im sichtbaren Bereich dargestellt ist.

INP, Reaktionsfähigkeit

Guter Zielwert bis einschliesslich 200 Millisekunden. Gemessen wird die Zeit von einer Interaktion bis zur nächsten Darstellung im Browser.

CLS, visuelle Stabilität

Guter Zielwert bis einschliesslich 0,1. Der Wert ist einheitenlos und hat ausdrücklich keine Zeiteinheit; er beschreibt unerwartete Verschiebungen.

Die Bewertung erfolgt anhand des 75. Perzentils, getrennt nach Mobilgeräten und Desktop: Mindestens 75 Prozent der erfassten Werte liegen dann am angegebenen Wert oder darunter.

Das bedeutet nicht, dass jeder einzelne Besuch diese Ziele erreicht. Eine grüne Labormessung ist ebenfalls kein Nachweis, dass die realen Besucher gute Werte erleben. Wie viel eine Korrektur bewirkt, hängt vom tatsächlichen Engpass ab.

Erst messen: Felddaten und Labordaten trennen

Starte mit einer wichtigen URL und halte fest, welcher Seitentyp betroffen ist. Eine Produktseite, ein Ratgeber und ein Kontaktformular können ganz unterschiedliche Engpässe haben. Vergleiche nicht unbemerkt verschiedene URLs, Geräteklassen oder Zeiträume.

Felddaten zeigen die erfasste reale Nutzung

PageSpeed Insights zeigt, sofern genügend Daten vorliegen, Felddaten aus dem Chrome User Experience Report. Diese Daten beziehen sich auf die vergangenen 28 Tage und auf die dort erfassten Chrome-Nutzungen, nicht auf sämtliche Besucher deiner Website. Achte darauf, ob das Werkzeug Werte für genau diese URL oder für den gesamten Ursprung, also die Origin, anzeigt. Origin-Daten sind kein Messergebnis der einzelnen Seite.

Fehlen genügend URL-Daten, kann PageSpeed Insights auf Origin-Daten ausweichen. Fehlen auch diese, ist die reale Nutzung mit diesem Datensatz nicht beurteilbar. Das ist eine Datenlücke und kein Beleg für gute oder schlechte Leistung. Auch ein fehlender INP-Wert bedeutet nicht automatisch, dass die Seite besonders schnell reagiert.

Für die Gesamtbewertung verlangt PageSpeed Insights normalerweise gute 75.-Perzentilwerte aller drei Kennzahlen. Fehlen ausreichende INP-Daten, kann die Bewertung anhand von LCP und CLS erfolgen. Fehlen LCP- oder CLS-Daten, ist keine entsprechende Gesamtbewertung möglich.

Labortests helfen, Ursachen nachzustellen

Labortests laufen unter kontrollierten Bedingungen. Ein Labortest hilft, eine Ursache zu finden und eine Änderung vor der Veröffentlichung zu vergleichen. Ein einzelner Testlauf bildet aber nicht die Vielfalt realer Geräte, Verbindungen und Nutzungswege ab. Notiere die Testbedingungen und wiederhole auffällige Läufe, statt die höchste Punktzahl auszuwählen.

Für Interaktionsprobleme reicht das reine Laden der Seite nicht. Teste beispielsweise Menü, Formular und Filter aktiv in den Chrome DevTools. Total Blocking Time kann im Labortest Hinweise auf blockierende Arbeit geben, ist aber nicht dasselbe wie INP und ersetzt keine INP-Messung. Der Lighthouse-Performance-Score und die Core-Web-Vitals-Feldbewertung sind ebenfalls zwei verschiedene Ergebnisse. Den Begriff selbst erklärt das Glossar zur PageSpeed.

LCP: den grössten sichtbaren Inhalt früher darstellen

LCP ist nicht die Zeit, bis jedes Element vollständig geladen ist. Gemessen wird, wann der grösste relevante Bild- oder Textblock im sichtbaren Bereich dargestellt wird. Das kann ein Kopfbild sein, muss aber keines sein. Identifiziere zuerst das tatsächlich gemessene Element.

LCP messen

Lies zunächst den LCP-Feldwert für die richtige URL beziehungsweise Origin und Geräteklasse. Im Labortest helfen PageSpeed Insights und das Performance-Panel der Chrome DevTools, das LCP-Element und den Ladeablauf zu finden. Halte fest, welches Element bei diesem Test als LCP erfasst wurde. Bei anderer Bildschirmgrösse oder anderem Seitenzustand kann es ein anderes sein.

LCP diagnostizieren

Zerlege die Wartezeit: Wie lange dauert es bis zum ersten Byte der HTML-Antwort? Wann entdeckt und startet der Browser die benötigte Ressource? Wie lange dauert ihre Übertragung? Und wie lange wartet das bereits geladene Element noch auf die Darstellung?

Diese Unterscheidung verhindert falsche Massnahmen. Eine kleinere Bilddatei hilft nur begrenzt, wenn das Bild erst spät durch JavaScript eingefügt wird oder die Darstellung weiterhin auf andere Arbeit wartet. Bei einem Textblock ohne zusätzliche Ressource sind die Ressourcen-Ladeanteile entsprechend nicht vorhanden.

LCP gezielt verbessern

Ist das LCP-Element ein Bild, prüfe passende Abmessungen, Dateigrösse und Bildformat. Ein bestätigtes LCP-Bild sollte nicht erst durch Lazy Loading angefordert werden. Mach es früh im HTML auffindbar; ein gezielt gesetztes fetchpriority="high" kann dem Browser seine Bedeutung anzeigen. Kennzeichne nicht pauschal alle Bilder als hoch priorisiert. Grundlagen dazu im Glossar zur Bildoptimierung.

Liegt der Engpass vor der HTML-Antwort, untersuche Serverantwort, Weiterleitungswege und Caching. Werden Inhalte erst spät dargestellt, prüfe blockierendes CSS, Skripte und lange Aufgaben im Browser. Nicht benötigte Ressourcen können reduziert oder später geladen werden, sofern Darstellung und Funktionen erhalten bleiben. Nach jeder Änderung muss derselbe Engpass erneut geprüft werden.

INP: nach einer Eingabe schneller Rückmeldung geben

INP betrachtet Klicks, Tippen und Tastatureingaben während des Seitenbesuchs. Es geht um die Zeit bis zum nächsten dargestellten Bild, nicht um die vollständige Dauer jeder nachfolgenden Serveranfrage. Der Besuchswert orientiert sich an langsamen Interaktionen; bei vielen Interaktionen werden einzelne Ausreisser nach den Regeln der Metrik ausgeklammert. INP ist weder ein Durchschnitt aller Klicks noch ausschliesslich die erste Eingabe.

FID wurde 2024 als Core Web Vital durch INP ersetzt. FID betrachtete nur die Eingabeverzögerung der ersten Interaktion. Eine gute historische FID-Messung belegt deshalb keine gute heutige INP-Leistung.

INP messen

Prüfe zuerst die verfügbaren INP-Felddaten. Ein aggregierter Wert zeigt, ob ein Problem besteht, verrät aber nicht automatisch, welcher Klick die Ursache war. Spiel wichtige Wege nach: mobiles Menü öffnen, Suchfeld verwenden, Filter ändern oder ein Formular bedienen. Reines Scrollen ist keine INP-Interaktion.

INP diagnostizieren

Eine langsame Interaktion besteht aus drei möglichen Verzögerungen: Die Eingabe wartet, bevor ihre Verarbeitung beginnt. Der zugehörige Code benötigt Zeit. Anschliessend muss der Browser die nächste Darstellung berechnen und ausgeben. Prüfe in einer Aufzeichnung, welcher Teil dominiert.

INP gezielt verbessern

Reduziere unnötige Arbeit während einer Interaktion. Umfangreiche Aufgaben können in kleinere Schritte aufgeteilt werden, damit der Browser dazwischen Eingaben verarbeiten und Rückmeldung darstellen kann. Nicht unmittelbar benötigte Nacharbeiten sollten die erste sichtbare Rückmeldung nicht blockieren. Prüfe ausserdem aufwendige Layoutwechsel und die Grösse der betroffenen Seitenstruktur.

Teste sowohl während des Ladens als auch danach. Fehlt ein INP-Wert, kann das auch daran liegen, dass keine qualifizierende Interaktion gemessen wurde. Ein aggregierter Wert zeigt zwar, dass ein Problem besteht, aber nicht, welcher Klick es ausgelöst hat: Dafür braucht es gezielte Interaktionstests oder geeignete Messdaten aus realer Nutzung. Lange JavaScript-Aufgaben, aufwendige Ereignisverarbeitung oder umfangreiche Layoutberechnungen können unterschiedliche Massnahmen verlangen. Das blosse Verschieben eines Skript-Downloads löst nicht automatisch die Arbeit, die dieses Skript später ausführt.

Teste nach einer Änderung denselben Nutzungsweg erneut. Eine schnelle erste Rückmeldung darf keinen erfolgreichen Vorgang vortäuschen: Wenn Daten noch geladen oder gespeichert werden, muss der sichtbare Status das korrekt zeigen.

CLS: unerwartete Layoutsprünge vermeiden

CLS bewertet, wie stark sich sichtbare Inhalte unerwartet verschieben. Der Wert ist einheitenlos und berücksichtigt sowohl die betroffene Fläche als auch die Bewegungsdistanz. Er basiert auf dem stärksten zusammenhängenden Verschiebungsfenster während des Besuchs, nicht auf einer Ladezeit und nicht auf der einfachen Summe aller Bewegungen über den gesamten Besuch.

CLS messen

Vergleiche den CLS-Feldwert mit einer lokalen Aufzeichnung. Ein einfacher Seitenladetest kann spätere Sprünge übersehen. Geh daher auch durch die Seite, warte auf nachgeladene Inhalte und beobachte, was bei Einbettungen oder Schriftwechseln passiert.

Ein unauffälliger Start bedeutet nicht, dass die ganze Nutzung stabil bleibt. Weichen Feld- und Labordaten deutlich voneinander ab, such insbesondere nach späteren Zuständen, die der kurze Test nicht abgebildet hat.

CLS diagnostizieren

Die Layout-Shift-Aufzeichnung der Chrome DevTools hilft, Zeitpunkt und betroffene Elemente zu erkennen. Das sichtbar verschobene Element ist aber nicht zwingend die Ursache. Ein später eingefügtes Bild oberhalb eines Absatzes kann beispielsweise den Absatz bewegen.

Typische Prüfstellen sind Bilder ohne reservierte Abmessungen, nachgeladene Anzeigen und Einbettungen sowie Schriften mit abweichenden Zeichenmassen. Eine erwartete Layoutänderung direkt nach einer qualifizierenden Eingabe wird anders behandelt als ein unerwarteter Sprung. Nicht jede Animation oder jede Bewegung ist automatisch ein CLS-Fehler.

CLS gezielt verbessern

Reserviere den benötigten Platz für Bilder und Videos über passende Breiten- und Höhenangaben oder ein korrektes Seitenverhältnis. Für Anzeigen, Karten und andere nachgeladene Inhalte braucht es ebenfalls einen geeigneten Bereich im Layout. Vermeide, diesen Platz später unerwartet wieder zusammenfallen zu lassen.

Prüfe beim Schriftwechsel, ob Ersatzschrift und Webschrift stark unterschiedliche Abmessungen erzeugen. Eine passende Ersatzschrift und bewusst gewählte Ladestrategie können Verschiebungen begrenzen. Kontrolliere die betroffenen Zustände anschliessend auf Mobilgeräten und Desktop, ohne die Lesbarkeit oder notwendige Funktionen zu opfern.

Bilder, Cache und CDN passend einsetzen

Bilder optimieren heisst nicht, jede Datei maximal zu komprimieren. Vergleiche sichtbare Qualität, benötigte Abmessungen, Format und Dateigrösse. JPEG kann für Fotos geeignet sein; moderne Formate wie WebP oder AVIF sind je nach Inhalt und Auslieferung ebenfalls zu prüfen. Für Grafiken gelten andere Anforderungen als für Fotos. Nicht jedes kleinere Bild verbessert automatisch den LCP, wenn der Engpass an anderer Stelle liegt.

Lazy Loading ist für später benötigte Bilder sinnvoll zu prüfen, nicht pauschal für das bestätigte LCP-Bild. Reservierte Bildflächen sind davon unabhängig wichtig, damit Inhalte beim Laden nicht springen.

Caching kann bei passenden Wiederholabrufen Übertragungen vermeiden. Es braucht aber Regeln, damit geänderte Inhalte nicht als alte Fassung hängen bleiben. Ein CDN kann Inhalte näher bei den Nutzern ausliefern. Ob ein Wechsel oder eine andere Konfiguration hilft, muss zur tatsächlichen Ursache passen. Ein CDN allein repariert weder eine blockierende Interaktion noch ein fehlendes Bild-Seitenverhältnis.

Massnahmen priorisieren und nachprüfen

Beginne bei dem Problem, das reale wichtige Nutzungswege betrifft. Setze nicht gleichzeitig mehrere unverbundene Optimierungen um, wenn du deren Wirkung anschliessend auseinanderhalten möchtest. Eine sinnvolle Reihenfolge in fünf Schritten:

Problem dokumentieren

Halte die betroffene URL oder Vorlage, die auffällige Kennzahl, die Datenquelle und den vermuteten Engpass fest. Diese Notiz ist die Grundlage, um eine Änderung später einordnen zu können.

Ursache reproduzieren

Stell den Engpass unter vergleichbaren Bedingungen nach. Zeigt sich ein Problem wiederholt, lässt es sich gezielt bearbeiten statt geraten.

Gezielt ändern

Ändere den Punkt, der zum gefundenen Engpass passt. Mehrere gleichzeitige Eingriffe erschweren es, die Wirkung später einem einzelnen Schritt zuzuordnen.

Im Labor kontrollieren

Prüfe die Änderung zunächst unter vergleichbaren Laborbedingungen und kontrolliere Funktionen, Darstellung und wichtige Interaktionen. Ein besserer Messwert bei eingeschränkter Funktion wäre kein brauchbares Ergebnis.

Felddaten nachverfolgen

Nach einer freigegebenen Veröffentlichung beobachte die realen Daten weiter. Die 28-Tage-Auswertung enthält zunächst weiterhin Besuche aus der Zeit vor der Änderung und bestätigt daher nicht sofort ausschliesslich den neuen Stand.

Unsicher, welche Kennzahl zuerst dran ist?

netpulse ordnet deine Messwerte nach Ursache und Priorität ein, bevor mehrere Einstellungen gleichzeitig geändert werden.

Gute CWV-Werte ersetzen keine hilfreichen Inhalte, mobile Bedienbarkeit oder sichere Verbindungen. Mobile Darstellung und HTTPS bleiben eigene Prüfthemen. Dieser Leitfaden ist Teil von Technischem SEO, aber keine Anleitung für jede technische Aufgabe.

Häufige Fragen zu Core Web Vitals

Den nächsten Prüfschritt klären

Wenn mehrere Seitentypen betroffen sind oder eine Ursache nicht reproduzierbar ist, hilft ein klar abgegrenzter Prüfauftrag: Welche Seiten sind wichtig, welche Daten liegen vor und welche Änderung lässt sich sicher überprüfen? Halte diese Punkte fest, bevor du neue Werkzeuge oder pauschale Optimierungen einsetzt.

Die SEO-Strategie ist der passende Angebotsbezug, wenn technische Prioritäten mit den Zielen deiner Website zusammengeführt werden sollen.

Weiterlesen zu Messung, Bildern und Auslieferung

Die folgenden Themen schliessen fachlich an diese Seite an:

• Technisches SEO : die Übersichtsseite, unter der diese Anleitung steht.
• Core Web Vitals und Ladezeitoptimierung : die Begriffe kurz erklärt.
• Google PageSpeed Insights und PageSpeed : Werkzeug und Kennzahl auseinandergehalten.
• Bildoptimierung und JPEG : Grösse, Format und Qualität entscheiden.
• Cache und CDN : wie Inhalte wiederverwendet und ausgeliefert werden.
• Crawling steuern und Indexierung steuern : die beiden Nachbaranleitungen im Technischen SEO.