TL;DR: INP (Interaction to Next Paint) ist seit März 2024 der neue Core Web Vital und ersetzt FID. INP misst die Reaktionszeit deiner Website auf ALLE Nutzerinteraktionen — nicht nur die erste. Guter Wert: unter 200ms.
Was sind Core Web Vitals 2026?
Core Web Vitals sind drei Metriken, die Google als Ranking-Faktoren nutzt. Sie messen die reale Nutzererfahrung:
- LCP (Largest Contentful Paint): Wie schnell ist der Hauptinhalt sichtbar? Gut: unter 2,5 Sekunden.
- INP (Interaction to Next Paint): Wie schnell reagiert die Seite auf Klicks/Taps? Gut: unter 200ms.
- CLS (Cumulative Layout Shift): Wie stabil ist das Layout? Gut: unter 0,1.
Was ist INP und warum ist es wichtig?
INP misst die Zeit von einer Nutzerinteraktion (Klick, Tap, Tastendruck) bis zum nächsten visuellen Update. Aber anders als der alte FID (First Input Delay) misst INP nicht nur die erste Interaktion, sondern alle — und nimmt den schlechtesten Wert.
Beispiel: Deine Seite reagiert auf den ersten Klick in 50ms (gut), aber wenn jemand den Warenkorb öffnet, dauert es 800ms (schlecht). FID hätte 50ms gemeldet. INP meldet 800ms. INP ist ehrlicher.
Typische INP-Probleme
1. Schwere JavaScript-Bundles
Das häufigste Problem: Zu viel JavaScript, das den Main Thread blockiert. Wenn der Browser noch JavaScript parst, kann er nicht auf Klicks reagieren.
Fix: Code-Splitting, Tree-Shaking, lazy Loading von Komponenten. In Next.js: Dynamic Imports mit next/dynamic.
2. Synchrone API-Calls bei Interaktion
Wenn ein Button-Klick einen synchronen API-Call auslöst und die UI erst danach updated, ist der INP-Wert schlecht.
Fix: Optimistic UI Updates. Die UI reagiert sofort, der API-Call läuft im Hintergrund. Bei Fehler: Rollback.
3. Teure Re-Renders
In React: Wenn ein State-Update eine große Komponenten-Hierarchie neu rendert, blockiert das den Main Thread.
Fix: React.memo, useMemo, useCallback gezielt einsetzen. React Server Components für statische Teile nutzen.
4. Layout Thrashing
Wenn JavaScript DOM-Änderungen und Layout-Berechnungen abwechselnd erzwingt, wird der Browser ineffizient.
Fix: Batch-DOM-Updates, CSS Containment, transform statt top/left für Animationen.
INP optimieren: Schritt für Schritt
Schritt 1: Messen
Chrome DevTools → Performance Tab → Interaction. Oder: Google PageSpeed Insights für Felddaten.
Wichtig: Felddaten (echte Nutzer) sind relevanter als Lab-Daten (Lighthouse). Google nutzt Felddaten für Rankings.
Schritt 2: Identifizieren
Chrome DevTools zeigt dir genau, welche Interaktion langsam ist. Suche nach "Long Tasks" (Aufgaben > 50ms) die nach einer Interaktion auftreten.
Schritt 3: Optimieren
Die Top-5 Quick Wins:
- JavaScript-Bundle verkleinern: Nutze
next build --analyzeum große Dependencies zu finden - Third-Party-Scripts entfernen oder lazy laden: Analytics, Chat-Widgets, Social Embeds
- Event-Handler optimieren: Debounce für Scroll/Resize, keine schweren Berechnungen im Click-Handler
- React Server Components nutzen: Statischer Content als RSC → weniger Client-JS
- CSS statt JS für Animationen: transform und opacity sind GPU-beschleunigt
Schritt 4: Verifizieren
Nach Änderungen: 28 Tage warten bis Google genug Felddaten gesammelt hat. Dann in Search Console → Core Web Vitals prüfen.
LCP optimieren (Bonus)
LCP ist oft das größte Bild oder der größte Text-Block. Quick Wins:
- Hero-Bild mit
priority/fetchpriority="high"laden - Bilder in WebP/AVIF mit optimierter Größe
- Font-Display: swap nutzen
- Server Response Time optimieren (unter 200ms)
- Preload für kritische Ressourcen
CLS optimieren (Bonus)
CLS passiert wenn Elemente nachladen und den Content verschieben:
- Immer
widthundheightauf Bildern setzen (oder aspect-ratio) - Keine Ads/Embeds ohne reservierten Platz
- Fonts preloaden um FOUT (Flash of Unstyled Text) zu vermeiden
- Dynamische Inhalte unterhalb des Folds laden
Fazit
Core Web Vitals sind 2026 ein bestätigter Ranking-Faktor. INP ist die neueste und anspruchsvollste Metrik. Websites, die auf allen drei Metriken "gut" stehen, haben einen messbaren SEO-Vorteil.
Bei r.digital bauen wir Next.js Websites mit Core Web Vitals im grünen Bereich — by default, nicht als Nachoptimierung. Und für bestehende Websites bieten wir Performance-Audits an.
Häufige Fragen
Was ist ein guter INP-Wert?
Unter 200ms = gut (grün). 200-500ms = needs improvement (gelb). Über 500ms = poor (rot). Google empfiehlt den 75. Perzentil deiner Felddaten als Referenzwert.
Wie stark beeinflusst INP mein Ranking?
Core Web Vitals sind ein Ranking-Signal, aber nicht das stärkste. Content-Relevanz, Backlinks und E-E-A-T sind wichtiger. Aber bei gleicher Content-Qualität gewinnt die schnellere Seite.
Kann WordPress gute INP-Werte erreichen?
Ja, aber es ist schwieriger. Wenige Plugins, leichtes Theme, Caching und CDN helfen. Für optimale Werte ist ein Framework wie Next.js besser geeignet.
