Quelle: https://hostingwissen.de/wissen/core-web-vitals/

Datenstand: 2026-11-03. Anbieter: webhoster.de AG.

Performance / Praxiswissen

# Core Web Vitals: LCP, INP und CLS richtig verbessern

Die Core Web Vitals beschreiben ausgewählte Aspekte der Nutzererfahrung: wie schnell ein wichtiges Inhaltselement sichtbar wird, wie zügig die Seite auf Interaktionen reagiert und wie stabil sich das Layout verhält. Sie sind eine gute Orientierung für konkrete Verbesserungen. Ein einzelner Testlauf ist jedoch weder ein vollständiges Qualitätsurteil noch eine Zusage für Suchpositionen. Entscheidend ist, welche Probleme reale Besucher auf deinen wichtigen Seitentypen erleben.

Redaktion HostingwissenStand: 3. November 20264 Min. Lesezeit

![Drei unterschiedlich hohe petrolfarbene Säulen in einem technischen Messrahmen; KI-Illustration](https://hostingwissen.de/assets/wissen-performance.webp)

Illustratives Bildmotiv · KI-generiert

In diesem ArtikelDie wichtigsten Gedanken

* LCP betrachtet das größte sichtbare Inhaltselement, INP die Reaktion auf Interaktionen und CLS unerwartete Verschiebungen.
* Die guten Grenzwerte liegen bei höchstens 2,5 Sekunden, 200 Millisekunden und 0,1.
* Für die Bewertung zählen Felddaten am 75. Perzentil; Labortests helfen bei der Diagnose.
Grafik: Drei Perspektiven auf die Erfahrung einer Seite LCP · sichtbarer Hauptinhalt → INP · Reaktion auf Eingaben → CLS · visuelle Stabilität. Schematische Darstellung, keine Messwerte.

Drei Perspektiven auf die Erfahrung einer Seite · schematisch

## Die drei Messgrößen im Zusammenhang lesen

Largest Contentful Paint, kurz LCP, misst den Zeitpunkt, zu dem das größte relevante Inhaltselement im sichtbaren Bereich gerendert wird. Das kann ein großes Bild oder ein Textblock sein. Interaction to Next Paint, INP, beschreibt die Reaktionsfähigkeit bei Interaktionen über den Besuch hinweg. Cumulative Layout Shift, CLS, bewertet unerwartete Layoutverschiebungen. Keine dieser Größen lässt sich allein aus einer Serverausstattung zuverlässig vorhersagen.

Als gut gelten LCP bis 2,5 Sekunden, INP bis 200 Millisekunden und CLS bis 0,1. Für eine gute Einordnung müssen die drei Bedingungen jeweils am 75. Perzentil der betrachteten Besuche erfüllt sein. Mobile und Desktop-Erfahrungen können sich unterscheiden. Werte ohne Angabe des Datentyps, der betrachteten Seite und des Zeitraums sind deshalb schwer zu vergleichen.

| Messgröße | Guter Bereich | Häufige Ansatzpunkte |
| --- | --- | --- |
| LCP | ≤ 2,5 Sekunden | Serverantwort, Hauptbild, blockierende Ressourcen |
| INP | ≤ 200 Millisekunden | Lange JavaScript-Aufgaben und Interaktionsabläufe |
| CLS | ≤ 0,1 | Reservierter Platz und stabile Schrift-/Bilddarstellung |

## Felddaten und Laborwerte unterscheiden

Felddaten stammen aus tatsächlich beobachteten Besuchen. Dabei unterscheiden sich Geräte, Netzverbindungen und Nutzungsabläufe. Für kleine oder neue Websites stehen unter Umständen keine ausreichenden öffentlichen Daten bereit. Das ist kein automatischer Nachweis einer schlechten Website. Es bedeutet zunächst, dass eine belastbare öffentliche Feldbewertung fehlt. Eigene Messungen müssen datenschutzgerecht geplant und sauber interpretiert werden.

Ein Labortest läuft dagegen unter festgelegten oder simulierten Bedingungen. Er hilft, ein Problem wiederzufinden und eine Änderung zu vergleichen. Ein Laborwert bildet aber nicht alle echten Interaktionen ab. Besonders die Reaktionsfähigkeit verlangt eine Prüfung konkreter Bedienabläufe. Berichte deshalb getrennt, was im Labor beobachtet wurde und ob eine Feldbewertung existiert. Ein Screenshot eines grünen Testlaufs ersetzt diese Einordnung nicht.

## LCP: Das sichtbare Hauptelement zuerst versorgen

Finde zunächst heraus, welches Element der Test als LCP erkennt. Bei einem großen Bild helfen passende Abmessungen, moderne Bildformate und ein zur Bildschirmgröße passendes Bild. Das sofort sichtbare Hauptbild sollte nicht durch unnötiges Lazy Loading oder erst spät ausgeführtes JavaScript entdeckt werden. Übertriebene Bildgrößen und eine lange Serverantwort können gleichzeitig zum Problem beitragen.

Prüfe außerdem, ob wichtige Stylesheets oder Schriften die Darstellung aufhalten. Lokale Schriften allein garantieren noch keine schnelle Anzeige; Dateigröße und Ladeverhalten bleiben relevant. Arbeite am tatsächlichen Engpass: Wenn zuerst mehrere Sekunden auf HTML gewartet wird, ist ein minimal kleineres Logo nicht die wichtigste Änderung. Miss denselben Seitentyp nach jeder größeren Anpassung erneut.

## INP: Interaktionen als Abläufe untersuchen

Teste Navigation, Suche, Filter, Warenkorb und Dialoge auf einem weniger leistungsfähigen Gerät. Lange JavaScript-Aufgaben können verhindern, dass der Browser zügig auf eine Eingabe reagiert. Große Skriptpakete und aufwendige Arbeiten direkt im Ereignishandler verdienen Aufmerksamkeit. Teile umfangreiche Arbeit sinnvoll auf und entferne Funktionen, die für die Aufgabe keinen Nutzen bringen.

Eine sichtbare Rückmeldung unterstützt die Bedienung, ersetzt aber keine funktionierende Reaktion. Beobachte auch aufeinanderfolgende Aktionen und Zustände nach längerer Nutzung. Ein Filter kann beim ersten Klick unauffällig und nach vielen Interaktionen problematisch sein. Dokumentiere, welche konkrete Aktion betroffen ist, statt nur pauschal „JavaScript optimieren“ als Aufgabe festzuhalten.

## CLS: Platz vorsehen und Änderungen prüfen

Bilder und eingebettete Inhalte sollten ihren benötigten Platz früh reservieren, etwa durch passende Größenangaben oder ein Seitenverhältnis. Nachladende Banner und dynamische Hinweise dürfen den bereits gelesenen Text nicht überraschend verschieben. Schriften mit deutlich anderen Abmessungen können beim Austausch ebenfalls für Bewegung sorgen. Prüfe deshalb den gesamten Ladeablauf, nicht nur den fertig aufgebauten Zustand.

Führe eine kurze Prioritätenliste nach Seitentyp: Startseite, Artikel, Produkt und gegebenenfalls Checkout. Behebe zuerst das Problem mit dem größten Einfluss auf echte Aufgaben. Anschließend prüfst du Darstellung, Bedienbarkeit und Messwerte gemeinsam. Diese Website veröffentlicht keine erfundenen Leistungswerte; verlässliche Aussagen brauchen einen benannten Messlauf oder eine ausreichend belastbare Feldgrundlage.

Nachlesen im Original

## Quellen & Dokumentation

Primärquellen, geprüft am 3. November 2026. Angaben gelten im beschriebenen Zusammenhang; die konkrete Umgebung und der gebuchte Leistungsumfang bleiben maßgeblich.

* [Google web.dev: Core Web Vitals ↗](https://web.dev/articles/vitals)
* [Google web.dev: LCP optimieren ↗](https://web.dev/articles/optimize-lcp)
* [Google web.dev: INP optimieren ↗](https://web.dev/articles/optimize-inp)
* [Google web.dev: CLS optimieren ↗](https://web.dev/articles/optimize-cls)

**Transparenz**

Dieser Artikel stammt von der Redaktion Hostingwissen, einem Angebot der webhoster.de AG. Die Gesellschaft bietet selbst Webhosting und Managed Server an. Allgemeine Erklärungen und konkrete Produktleistungen sind gesondert zu prüfen.

In diesem Artikel[← Zur Bibliothek](https://hostingwissen.de/wissen/)

Weiterdenken

## Dazu passt auch

[![Drei unterschiedlich hohe petrolfarbene Säulen in einem technischen Messrahmen; KI-Illustration](https://hostingwissen.de/assets/wissen-performance.webp)](https://hostingwissen.de/wissen/litespeed-seiten-cache/)

Performance · 4 Min.

### [LiteSpeed-Seiten-Cache: Cache-Hit, Cache-Miss und sichere Ausnahmen](https://hostingwissen.de/wissen/litespeed-seiten-cache/)

Wie LSCache fertige Seiten wiederverwendet, wann ein Purge sinnvoll ist und warum Warenkorb, Login und persönliche Inhalte besondere Regeln brauchen.

↗

[![Drei unterschiedlich hohe petrolfarbene Säulen in einem technischen Messrahmen; KI-Illustration](https://hostingwissen.de/assets/wissen-performance.webp)](https://hostingwissen.de/wissen/http2-http3-quic/)

Performance · 4 Min.

### [HTTP/2, HTTP/3 und QUIC: Was sich für Websites verändert](https://hostingwissen.de/wissen/http2-http3-quic/)

HTTP/3 verwendet QUIC statt TCP. Verstehe Streams, Paketverlust, Voraussetzungen und warum ein Protokollname noch keine schnellere Website garantiert.

↗

[![Papiermodell aus Laptop, Server, Datenbank und Ordnern mit verbindenden Wegen; KI-Illustration](https://hostingwissen.de/assets/wissen-grundlagen.webp)](https://hostingwissen.de/wissen/nvme-und-ssd/)

Grundlagen · 4 Min.

### [NVMe und SSD beim Hosting: Was die Speicherangabe wirklich sagt](https://hostingwissen.de/wissen/nvme-und-ssd/)

NVMe beschreibt eine Speicheranbindung, SSD das Speichermedium. Erfahre, welche Aussagen daraus folgen und warum sie keine Website-Benchmark ersetzen.

↗