Web Performance
Core Web Vitals 2026: INP, LCP und CLS in den grünen Bereich bringen
Seit INP den Wert FID abgelöst hat, lohnt ein neuer Blick auf die eigene Seite. Sie erfahren, was die drei Kennzahlen messen, was sie verschlechtert und wie Sie technisch gegensteuern.
Auf einen Blick
- Autor
- Ciyan Gültoplayan
- LCP
- 2,5 Sekunden oder weniger
- INP
- 200 Millisekunden oder weniger
- CLS
- 0,1 oder weniger
Was Core Web Vitals sind
Core Web Vitals sind drei Kennzahlen, mit denen Google die erlebte Nutzung einer Seite beschreibt: wie schnell der Hauptinhalt erscheint (LCP, Largest Contentful Paint), wie schnell die Seite auf Eingaben reagiert (INP, Interaction to Next Paint) und wie stabil das Layout bleibt (CLS, Cumulative Layout Shift). INP wurde 2024 zur stabilen Kennzahl und hat First Input Delay (FID) abgelöst.
Google empfiehlt gute Core Web Vitals ausdrücklich für den Erfolg in der Suche und beschreibt sie als abgestimmt auf das, was die Ranking-Systeme belohnen wollen. Als direkten Rankingfaktor mit festem Gewicht bezeichnet Google sie nicht. Realistisch eingeordnet: Sie ersetzen keine guten Inhalte, helfen aber, Besucher zu halten, und sind ein sinnvolles technisches Ziel.
Entscheidend ist die Datenquelle. Felddaten stammen von echten Besuchern; Google wertet sie über den Chrome UX Report aus, der Messungen über 28 Tage zusammenfasst. Labordaten, etwa aus einem Lighthouse-Lauf, sind eine Einzelmessung unter festen Bedingungen. Nach web.dev sollten Sie Korrekturen nach den Felddaten priorisieren. Nur den grünen Lighthouse-Wert zu feiern, kann am Ziel vorbeiführen.
Quelle: web.dev (Core Web Vitals, Optimierung von LCP, INP und CLS, Labor- und Felddaten) und Google Search Central, abgerufen am 24.10.2026. Sinngemäß wiedergegeben; Schwellenwerte und Empfehlungen können sich ändern.
Die Zielwerte im Überblick
Google nennt pro Kennzahl einen Zielwert. Maßgeblich ist das 75. Perzentil der Seitenaufrufe, getrennt nach Mobilgeräten und Desktop. Eine Seite besteht, wenn sie alle drei Ziele auf diesem Niveau erreicht.
LCP: Ladeverhalten
Der größte sichtbare Inhalt soll innerhalb von 2,5 Sekunden nach Ladebeginn erscheinen. Meist ist das ein großes Bild oder eine Überschrift.
INP: Reaktionsfähigkeit
Klicks, Taps und Tastendrücke sollen innerhalb von 200 Millisekunden eine sichtbare Antwort erhalten.
CLS: Layout-Stabilität
Sichtbare Elemente sollen beim Laden nicht unerwartet springen. Der Zielwert liegt bei 0,1 oder weniger.
Einordnung
Die drei Werte sind Zielmarken, keine Garantie für Platzierungen. Wie Sie das Thema allgemein angehen, steht in Website schneller machen.
Quelle: web.dev (Core Web Vitals, Optimierung von LCP, INP und CLS, Labor- und Felddaten) und Google Search Central, abgerufen am 24.10.2026. Sinngemäß wiedergegeben; Schwellenwerte und Empfehlungen können sich ändern.
LCP optimieren: der Hauptinhalt kommt zu spät
Der LCP setzt sich nach web.dev aus vier Teilen zusammen: der Zeit bis zum ersten Byte (TTFB), der Verzögerung vor dem Laden der Ressource, der Ladedauer der Ressource und der Verzögerung bis zum Anzeigen. Welcher Teil bei Ihnen am längsten dauert, zeigt die Messung.
- 01
Serverantwort beschleunigen
Nichts startet, bevor die erste Antwort da ist. Vermeiden Sie unnötige Weiterleitungen und Adressen mit wechselnden Parametern, die den Zwischenspeicher umgehen. Mit Caching und einer Auslieferung nah am Besucher liegt fertiges HTML schneller bereit.
- 02
Das LCP-Bild früh auffindbar machen
Steht das Bild direkt im HTML (src oder srcset), findet der Browser es früh. Wird es nur per CSS oder JavaScript nachgeladen, hilft ein Preload.
- 03
Priorität erhöhen, nie verzögert laden
Mit fetchpriority=high markieren Sie das erwartete LCP-Bild. web.dev warnt, mehr als ein oder zwei Bilder so zu markieren, weil der Effekt sonst verpufft. Das LCP-Bild darf nicht verzögert geladen werden.
- 04
Dateigröße und Format
Kleine, passende Bilder in modernen Formaten laden schneller. Die Bildkomponente von Next.js kann Formate und Größen für Sie vorbereiten; das wichtigste Bild kennzeichnen Sie gezielt.
Quellen: web.dev (LCP-Optimierung) und Next.js-Dokumentation, abgerufen am 24.10.2026.
INP optimieren: die Seite reagiert zu träge
Der INP misst, wie lange es von einer Eingabe bis zum nächsten sichtbaren Bild dauert. Anders als FID zählt nicht nur die erste Interaktion, sondern der Besuch insgesamt. Schlechte Werte haben meist eine Ursache: Der Browser ist beschäftigt, wenn der Besucher klickt.
web.dev nennt mehrere Ursachen. Skripte werden geladen, geparst und ausgeführt, und Eingaben warten darauf. Die Verarbeitung im Ereignis dauert zu lange. Nach der Verarbeitung braucht der Browser lange, um das nächste Bild zu zeichnen, etwa bei sehr großer Seitenstruktur. Auch Iframes zählen mit, denn der INP wird für die gesamte Seite gemeldet.
Die Gegenmaßnahmen folgen daraus. Je weniger Code der Browser ausführen muss, desto freier ist er für Eingaben. Frameworks können dabei helfen: Server Components in Next.js werden auf dem Server gerendert, und die Dokumentation nennt ausdrücklich, dass sich so die an den Browser gesendete JavaScript-Menge verringert. Interaktiv sollte nur sein, was wirklich Interaktion braucht.
- Weniger Code laden: Selten genutzte Funktionen erst bei Bedarf nachladen und Drittanbieter-Skripte prüfen.
- Lange Aufgaben aufteilen: Schwere Arbeit in kleinere Aufgaben zerlegen, zum Beispiel mit setTimeout, damit der Browser dazwischen Eingaben bearbeiten kann.
- Ereignisse schlank halten: Im Klick-Ereignis nur Notwendiges tun, Unwichtiges (Speichern, Prüfungen) auf später verschieben.
- Seitenstruktur klein halten: Eine sehr große DOM-Struktur verlängert das Zeichnen nach jeder Interaktion.
Quellen: web.dev (INP-Optimierung) und Next.js-Dokumentation zu Server Components, abgerufen am 24.10.2026.
CLS optimieren: das Layout springt
Jeder kennt es: Man will tippen, ein nachgeladenes Element schiebt alles nach unten, und man trifft die falsche Stelle. Die Ursachen sind meist klar benennbar, deshalb lässt sich CLS oft gut beheben.
Bilder und Videos ohne Maße
Mit Breite und Höhe oder aspect-ratio reserviert der Browser den Platz, bevor das Medium geladen ist.
Werbung, Einbettungen, Banner
Geben Sie solchen Elementen einen Container mit Mindesthöhe. Den Platz behalten Sie auch dann, wenn nichts geladen wird, sonst springt es beim Einklappen.
Nachgeladene Inhalte
Neue Inhalte besser weiter unten im Sichtbereich einfügen oder erst nach einer Aktion des Besuchers laden, etwa über eine Schaltfläche „Mehr laden“.
Webschriften
Beim Wechsel von der Ersatzschrift zur Webschrift kann Text verrutschen. web.dev nennt als Gegenmittel unter anderem passende Ersatzschriften, Anpassungen mit size-adjust, font-display und das Vorladen wichtiger Schriften.
Quelle: web.dev (Optimierung von CLS), abgerufen am 24.10.2026. Cookie-Banner gehören ebenfalls zu den Elementen, die Platz brauchen: Sie sollten Inhalt nicht nachträglich verschieben.
Richtig messen: im Labor prüfen, im Feld bewerten
Diese Werkzeuge gehören in jeden Ablauf. Wichtig ist zu wissen, welche Daten sie liefern.
- 01
PageSpeed Insights
Zeigt oben die Felddaten echter Besucher und darunter einen Labor-Lauf mit Hinweisen.
- 02
Search Console
Der Core-Web-Vitals-Bericht zeigt, wie Ihre Seiten im Feld abschneiden. So priorisieren Sie, welche Seitengruppen zuerst dran sind.
- 03
Lighthouse
Misst im Labor und eignet sich zum Eingrenzen einer Ursache. Es sagt nicht, wie echte Besucher Ihre Seite erleben.
- 04
Abweichungen verstehen
Labor und Feld weichen ab, etwa weil echte Besucher andere Geräte nutzen, Inhalte aus dem Zwischenspeicher sehen oder Seiten interaktiv bedienen. Besonders INP lässt sich im Labor schlecht vorhersagen.
Merksatz: Im Labor suchen Sie die Ursache, im Feld bewerten Sie das Ergebnis. Quelle: web.dev, abgerufen am 24.10.2026.
Checkliste: die Hebel mit der größten Wirkung
Zusammengefasst, womit Sie in der Praxis typischerweise beginnen.
LCP-Element finden
Bild im Format, in passender Größe, früh auffindbar, mit hoher Priorität, nicht verzögert geladen.
Antwortzeit prüfen
Caching, Auslieferung nah am Besucher und möglichst wenige Weiterleitungen.
Code verringern
Weniger JavaScript, Drittanbieter prüfen, Arbeit in kleine Aufgaben teilen (INP).
Platz reservieren
Maße für alle Medien und Werbeflächen, Ersatzschriften abstimmen (CLS).
Core Web Vitals sind kein einmaliges Projekt: Jede neue Funktion und jedes Skript kann die Werte wieder verschlechtern. Wer Performance von Beginn an in die Technik einplant, spart späteres Tuning. Genau das tun wir in der Webentwicklung. Wie sich ein Stack mit Next.js zu WordPress verhält, beschreibt Next.js oder WordPress, und wo Ihre Seite insgesamt steht, klärt ein SEO-Audit.
Häufige Fragen
Ihre Frage ist nicht dabei? Rufen Sie an oder schreiben Sie uns, wir antworten persönlich.
Welche Zielwerte gelten für die Core Web Vitals?
Laut web.dev gilt als gut: LCP innerhalb von 2,5 Sekunden, INP bei 200 Millisekunden oder weniger und CLS bei 0,1 oder weniger. Bewertet wird das 75. Perzentil der Seitenaufrufe, getrennt nach Mobilgerät und Desktop. Eine Seite besteht, wenn sie alle drei Ziele erreicht. Quelle: web.dev, abgerufen am 24.10.2026.
Was hat sich mit INP gegenüber FID geändert?
FID betrachtete nur die Verzögerung der ersten Eingabe. INP bewertet die Reaktion auf Interaktionen über den gesamten Besuch bis zum nächsten sichtbaren Bild. Deshalb fällt auf, wenn eine Seite nach dem Laden träge wird. Nach web.dev wurde INP 2024 zur stabilen Core-Web-Vitals-Kennzahl. Quelle: web.dev, abgerufen am 24.10.2026.
Sind Core Web Vitals ein Rankingfaktor?
Google empfiehlt gute Werte ausdrücklich für den Erfolg in der Suche und sagt, sie passten zu dem, was die Ranking-Systeme belohnen wollen. Ein festes Gewicht nennt Google nicht. Rechnen Sie also nicht mit einem Sprung nach oben, aber mit einem sinnvollen technischen Ziel, das auch Besucher hält. Quelle: Google Search Central, abgerufen am 24.10.2026.
Warum zeigt Lighthouse grün, die Search Console aber nicht?
Lighthouse ist eine Einzelmessung im Labor, die Search Console zeigt Felddaten echter Besucher. Diese unterscheiden sich durch Geräte, Verbindungen, Zwischenspeicher und Interaktionen. Besonders INP lässt sich im Labor kaum vorhersagen. Bewerten Sie Ihre Seite deshalb nach den Felddaten und nutzen Sie das Labor zum Eingrenzen von Ursachen. Quelle: web.dev, abgerufen am 24.10.2026.
Kann ich Core Web Vitals bei WordPress verbessern?
Ja, oft mit überschaubarem Aufwand: Bilder anpassen, das LCP-Bild früh laden, Skripte und Plugins prüfen, Platz für Medien und Banner reservieren, Caching einrichten. Wo das nicht reicht, kann eine andere Architektur sinnvoll sein. Was zu Ihrer Seite passt, klären wir nach einer Messung. Die Einordnung finden Sie im Beitrag zum Vergleich von Next.js und WordPress.
