Seit März 2024 ist Interaction to Next Paint (INP) offiziell der neue Core Web Vital und ersetzt den bisherigen First Input Delay (FID). Dieser Wechsel hat weitreichende Konsequenzen für die technische SEO-Optimierung.
Warum wurde FID ersetzt?
First Input Delay hatte ein fundamentales Problem: Er maß nur die Verzögerung bei der allerersten Interaktion eines Nutzers mit der Seite. Danach war es egal, wie träge die Seite reagierte. Das führte zu absurden Situationen: Eine Seite konnte einen perfekten FID-Score haben, aber bei jedem weiteren Klick mehrere Sekunden einfrieren.
INP schließt diese Lücke. Es misst die Reaktionszeit bei ALLEN Nutzerinteraktionen – Klicks, Taps, Tastatureingaben – über die gesamte Sitzung hinweg. Der schlechteste Wert (abzüglich statistischer Ausreißer) wird als INP-Score gewertet.
Die Schwellenwerte im Detail
• Gut (grün): unter 200 Millisekunden – Die Interaktion fühlt sich sofort an. • Verbesserungsbedürftig (gelb): 200–500 Millisekunden – Nutzer bemerken eine leichte Verzögerung. • Schlecht (rot): über 500 Millisekunden – Die Seite fühlt sich träge und frustrierend an.
Die häufigsten INP-Killer und wie du sie behebst
-
Schwere JavaScript-Bundles Problem: Große JS-Dateien blockieren den Main Thread und verzögern die Verarbeitung von Nutzeraktionen. Lösung: Code-Splitting implementieren, ungenutztes JavaScript entfernen (Tree Shaking), dynamische Imports für nicht-kritische Funktionen nutzen.
-
Aufwendige DOM-Manipulationen Problem: Wenn ein Klick-Event hunderte DOM-Elemente gleichzeitig verändert, dauert das Rendering zu lange. Lösung: Änderungen bündeln, Virtual Scrolling für lange Listen einsetzen, CSS-Animationen statt JavaScript-Animationen verwenden.
-
Third-Party-Scripts Problem: Analytics, Ads, Chat-Widgets und Social-Media-Einbindungen konkurrieren um die gleichen Browser-Ressourcen. Lösung: Third-Party-Scripts priorisieren und verzögert laden (defer/async), Performance-Budget festlegen, Partytown oder ähnliche Lösungen evaluieren.
-
Nicht optimierte Event-Handler Problem: Komplexe Berechnungen direkt im Click-Handler blockieren die Antwort. Lösung: Aufwändige Operationen in requestAnimationFrame oder Web Worker auslagern, Debouncing für Scroll- und Resize-Events.
-
Layout Shifts durch Interaktionen Problem: Wenn ein Klick ein Element einfügt, das ein Layout Shift verursacht, zählt die gesamte Dauer zum INP. Lösung: Platzhalter für dynamische Inhalte vorsehen, CSS contain-Eigenschaft nutzen.
So misst du deinen INP-Score
• Google PageSpeed Insights: Zeigt sowohl Lab-Daten als auch Felddaten (echte Nutzerdaten) an. • Chrome DevTools: Performance-Tab → Interactions-Track zeigt jede Interaktion mit Dauer. • Web Vitals Extension: Chrome-Erweiterung für Echtzeit-Messung. • Google Search Console: Core Web Vitals Report mit Felddaten.
Unser Tipp: Fokussiere dich zuerst auf die Interaktionen, die am häufigsten vorkommen – typischerweise das Hauptmenü, Formulare und Call-to-Action-Buttons. Hier hat eine Verbesserung den größten Effekt.