CLS und INP sind Core Web Vitals. Sie messen andere Seiten des Nutzererlebnisses als das Tempo.
CLS misst die visuelle Stabilität. Ein Layout-Sprung entsteht, wenn sich Inhalt nach dem Laden bewegt. Ein Nutzer liest einen Artikel. Eine Anzeige lädt. Der Artikel rutscht nach unten. Der Nutzer verliert die Stelle. CLS beziffert diesen Ärger.
INP misst die Reaktionsfähigkeit. Ein Nutzer klickt auf eine Schaltfläche. Das System reagiert. Wie lange dauert das? INP beziffert die Verzögerung der Reaktion.
Cumulative Layout Shift (CLS) im Detail
Was CLS verursacht
Anzeigen laden und nehmen Platz ein. Eingebettete Inhalte laden und nehmen Platz ein. Bilder laden ohne festgelegte Höhe. Schriften wechseln und der Text läuft neu um. Inhalte werden per JavaScript eingefügt.
Ein Praxisbeispiel
Das Seitenlayout ist stabil. Der Nutzer beginnt zu lesen. Eine Anzeige lädt. Sie ist 300 Pixel hoch. Der Inhalt darunter rutscht um 300 Pixel nach unten. Der Nutzer verliert die Stelle. Das nervt.
Messung
CLS wird als Anteil des Viewports gemessen, der sich verschiebt. Ist der Viewport 1.000 Pixel hoch und der Inhalt springt um 300 Pixel, liegt der CLS bei 0,3. Das Ziel ist unter 0,1 (zehn Prozent Verschiebung sind akzeptabel, 30 Prozent nicht).
CLS optimieren
Strategie eins: Platz reservieren
Reserviere Platz für Anzeigen, eingebettete Inhalte und Bilder. Sag der Layout-Engine: Die Anzeige braucht 300 Pixel. Reserviere den Platz. Die Anzeige lädt in den reservierten Platz. Es gibt keinen Sprung.
Strategie zwei: unten einfügen
Füge Inhalte nicht mitten in die Seite ein. Füge sie unten ein (der Inhalt darunter ist ohnehin aus dem Viewport gescrollt). Oder nutze einen fixierten Header (Nutzer erwarten, dass sich der Header ändert).
Strategie drei: Schriftwechsel vermeiden
Vermeide es, die Schrift mitten im Seitenaufbau zu wechseln. Ein Schriftwechsel lässt den Text neu umbrechen. Aller Text in dieser Schrift verschiebt sich. Nutze `font-display: optional` oder `font-display: swap`, um den Sprung klein zu halten.
Strategie vier: Bildhöhe festlegen
Nutze feste Höhen für Bilder. Das Bild lädt. Die Höhe ist festgelegt. Das Bild füllt den reservierten Platz. Es gibt keinen Sprung.
Ein Praxisbeispiel: CLS einer Produktseite im Onlineshop optimieren
Ausgangs-CLS: 0,25 (schlecht).
Analyse
Produktbilder laden ohne festgelegte Höhe. Die Bilder verschieben den Inhalt. Das trägt 0,10 zum CLS bei. Eine Anzeige unter dem Produkt lädt nach dem Seitenaufbau. Sie braucht Platz. Der Inhalt springt. Das trägt 0,12 zum CLS bei. Kundenbewertungen werden per API geladen und in die Seite eingefügt. Der Inhalt springt. Das trägt 0,3 zum CLS bei.
Optimierung
Lege die Bildhöhe im HTML fest. Die Bilder füllen den reservierten Platz. Beitrag zum CLS: null. Reserviere Platz für die Anzeige. Sie lädt in den reservierten Platz. Beitrag zum CLS: null. Lade Kundenbewertungen unterhalb des sichtbaren Bereichs per Lazy Loading. Füge nichts im sichtbaren Bereich ein. Beitrag zum CLS: null (der Sprung passiert unterhalb des Viewports).
Neuer CLS: 0,05 (gut).
Interaction to Next Paint (INP) im Detail
Was INP misst
INP misst die Reaktionsfähigkeit. Ein Nutzer klickt auf eine Schaltfläche. Das System verarbeitet den Klick, aktualisiert den Zustand, berechnet die Änderung und zeigt sie auf dem Bildschirm. INP ist die Zeit vom Klick bis zur ersten sichtbaren Aktualisierung.
Ein Praxisbeispiel
Ein Nutzer klickt auf „In den Warenkorb“. Das System prüft den Lagerbestand, aktualisiert den Warenkorb-Zähler und zeigt die neue Zahl auf dem Bildschirm. Liegt der INP bei 100 Millisekunden, sieht der Nutzer den Zähler sofort wechseln. Liegt er bei einer Sekunde, ändert sich der Zähler erst eine Sekunde später. Das fühlt sich träge an.
Messung
INP wird in Millisekunden gemessen. Ein Ziel unter 200 Millisekunden ist gut.
INP optimieren
Strategie eins: JavaScript-Laufzeit verkürzen
Langes JavaScript blockiert die Darstellung. Teile lange Aufgaben in kleinere auf. Nutze async, defer oder Web Worker für aufwendige Berechnungen.
Strategie zwei: Event-Handler optimieren
Event-Handler sollten möglichst wenig tun. Verlagere schwere Arbeit in den Hintergrund.
Strategie drei: CSS optimieren
Aufwendiges CSS kann die Darstellung verzögern. Nutze CSS Containment und sag dem Browser: Dieses Element ist in sich geschlossen. Berechne nicht die Stile der ganzen Seite neu, wenn es sich ändert.
Strategie vier: schnellere Darstellungstechniken nutzen
CSS-Aktualisierungen sind schneller als DOM-Änderungen per JavaScript. Nutze CSS-Transforms statt Positionierung mit left und top. Nutze CSS-Opacity statt Änderungen der Sichtbarkeit.
Ein Praxisbeispiel: Reaktionsfähigkeit eines Formulars
Ausgangs-INP: 400 Millisekunden (schlecht).
Analyse
Das Formular hat eine Validierung per JavaScript. Der Nutzer tippt in ein Feld. Die Validierung läuft. Sie läuft synchron und blockiert die Aktualisierung des Eingabefelds. Das Feld ändert sich erst, wenn die Validierung fertig ist. Das fühlt sich träge an.
Optimierung
Verlagere die Validierung in den Hintergrund (Web Worker oder setTimeout). Das Eingabefeld aktualisiert sich sofort. Die Validierung läuft im Hintergrund. Nutze CSS Containment für das Formular. Sag dem Browser: Das Formular ist in sich geschlossen, berechne nicht die Stile der ganzen Seite neu. Nutze CSS-Transforms für Animationen statt Positionierung per JavaScript.
Neuer INP: 150 Millisekunden (gut).
CLS und INP zusammen
CLS lässt die Seite instabil wirken. INP lässt sie träge wirken. Zusammen prägen sie, wie Nutzer die Qualität wahrnehmen.
Eine Seite mit gutem LCP, aber schlechtem CLS (schnell, aber unruhig) wirkt frustrierend. Nutzer schieben es auf die Langsamkeit, obwohl die Ursache die Stabilität ist.
Eine Seite mit gutem LCP und CLS, aber schlechtem INP (schnell und stabil, aber träge) wirkt kaputt. Schaltflächen reagieren nicht auf Klicks.
Alle drei Core Web Vitals zählen für ein gutes Nutzererlebnis.
Häufig gestellte Fragen
Wie erkenne ich CLS-Probleme?
Nutze die Entwicklertools deines Browsers. Klicke mit der rechten Maustaste auf die Seite und wähle „Untersuchen“. Öffne den Tab „Performance“ und zeichne das Laden der Seite auf. Die DevTools zeigen dir die Layout-Sprünge beim Laden. Auch ein Tool für Seitengeschwindigkeit hilft: Labortools erkennen CLS-Probleme. Der Bericht zu den Core Web Vitals in der Search Console zeigt Seiten mit schlechtem CLS. Mit dem Website-Builder von WEMASY kannst du das direkt auf deiner Website einrichten.
Soll ich Platz für alle Anzeigen reservieren oder nur für kritische?
Reserviere Platz für Anzeigen im sichtbaren Bereich (Anzeigen, die sofort laden). Für Anzeigen unterhalb des sichtbaren Bereichs (sie laden erst beim Scrollen) musst du keinen Platz reservieren. Sie können zwar Inhalte darunter verschieben, aber der Nutzer sieht den Sprung nicht.
Wie optimiere ich INP bei komplexen Anwendungen mit viel JavaScript?
Verlagere aufwendige Berechnungen in Web Worker. Ein Web Worker läuft in einem eigenen Thread und blockiert den Haupt-Thread nicht. So bleibt der Haupt-Thread für Eingaben des Nutzers frei. Nutze außerdem Frameworks mit Suspense-Funktionen, die schwere Berechnungen auf später verschieben, bis die Interaktion verarbeitet ist.
Ist CLS auf Mobilgeräten wichtiger als am Desktop?
Ja, mobil ist er wichtiger. Der Bildschirm ist kleiner. Layout-Sprünge fallen stärker auf. Mobile Nutzer bemerken Sprünge eher und ärgern sich. Priorisiere die CLS-Optimierung für Mobilgeräte.
Können guter CLS und guter INP einen schlechten LCP ausgleichen?
Nein. Braucht eine Seite fünf Sekunden zum Laden, ist der Nutzer schon verärgert, bevor CLS und INP eine Rolle spielen. Er geht, bevor er etwas anklickt. Schnelles Laden (guter LCP) ist die Voraussetzung für ein gutes Erlebnis. Guter CLS und INP verbessern das Erlebnis einer schnellen Seite, nicht das einer langsamen.
Wie messe und verfolge ich Verbesserungen bei CLS und INP?
Ausgangswert: Miss vor der Optimierung. Setze die Optimierung um. Neuer Wert: Miss danach. Nutze eine JavaScript-Bibliothek, die Core Web Vitals misst, um echte Nutzerdaten zu verfolgen. Richte Warnungen ein: Wird CLS oder INP schlechter, informiert eine Benachrichtigung dein Team.