Lernen
INP-Optimierung: Interaction to Next Paint und Core Web Vitals verbessern
Ein praktischer Leitfaden zu Interaction to Next Paint: was gemessen wird, warum es schwerer zu beheben ist als die Ladezeit und wie echte Interaktionen schneller reagieren.
Starte ein frisches DomainLens-Audit und nutze den Report als Prioritätenliste.
Was INP wirklich misst
Interaction to Next Paint (INP) misst die Reaktionsfähigkeit: wie lange die Seite braucht, um nach Klick, Tap oder Tastendruck sichtbar zu reagieren. Es beobachtet alle Interaktionen des Besuchs und meldet nahezu die schlechteste — ein einziges ruckelndes Menü oder ein langsamer „In den Warenkorb“-Button kann den Wert der ganzen Seite bestimmen.
Der gute Schwellenwert liegt bei 200 ms oder weniger; über 500 ms ist schlecht. Anders als LCP, das vor allem misst, wie schnell Inhalt erscheint, geht es bei INP darum, was passiert, wenn die Seite schon sichtbar ist — deshalb kann eine Seite schnell laden und sich trotzdem kaputt anfühlen, sobald man sie benutzt.
Warum INP schwerer zu beheben ist als Ladegeschwindigkeit
Lade-Metriken hängen vor allem von Netzwerk und Server ab, daher helfen Caching und schnelleres Hosting viel. INP hängt von Ihrem eigenen JavaScript ab, das im Main Thread läuft. Wenn ein Klick auslöst, kann der Browser die Antwort erst zeichnen, wenn Event Handler, Framework-Re-Render und alle anderen Aufgaben in der Warteschlange fertig sind — lange Tasks, die auf einem schnellen Laptop unsichtbar sind, werden auf einem Mittelklasse-Handy zu spürbaren Stockungen.
INP hat First Input Delay im März 2024 abgelöst. FID maß nur die Verzögerung bis zum Verarbeitungsbeginn der ersten Interaktion; INP misst die volle Zeit bis zum nächsten gezeichneten Frame, für Interaktionen im gesamten Besuch. Das ist deutlich strenger — und deshalb scheitern Seiten an INP, die FID locker bestanden.
Wo Sie Ihre schlimmsten Interaktionen finden
Beginnen Sie mit Felddaten — INP ist eine Real-User-Metrik, und ein Labortool weiß nicht, mit welchem Button Ihre Besucher wirklich kämpfen.
- Chrome UX Report / Search Console: bestätigen Sie, dass INP bei echten Nutzern scheitert, und notieren Sie, ob Mobile, Desktop oder bestimmte Templates betroffen sind.
- Web-Vitals-Erweiterung oder Performance-Panel: reproduzieren Sie die Interaktion und lesen Sie die INP-Aufteilung in Input Delay, Processing Time und Presentation Delay.
- Die Long-Tasks-Spur im Performance-Panel: nehmen Sie auf, während Sie das Element anklicken, und finden Sie die Task über 50 ms, die den nächsten Paint blockiert.
- Framework-Devtools (React Profiler, Vue Devtools): finden Sie Komponenten, die bei einer einzigen Interaktion weit öfter neu rendern als nötig.
So reagieren Interaktionen schneller
Das Ziel ist, dem Browser eine Chance zum Zeichnen zu geben, bevor Sie teure Arbeit erledigen. Teilen Sie die große Task in eine kleine, sichtbare Sofortreaktion und die schwere Arbeit danach.
- Geben Sie den Main Thread frei: nach dem Update dessen, was der Nutzer sieht, verschieben Sie unwichtige Arbeit mit requestIdleCallback, setTimeout oder await scheduler.yield().
- Senken Sie die Hydration-Kosten: liefern Sie auf React, Vue, Nuxt oder Next.js weniger Client-JavaScript und bevorzugen Sie Server Components oder Islands.
- Zähmen Sie Drittanbieter: Analytics, Chat-Widgets, Tag Manager und Ad-Skripte laufen im selben Main Thread — laden Sie sie verzögert und entfernen Sie nutzlose.
- Debounce und Memoization: verhindern Sie, dass teures Filtern, Layout und State Updates bei jedem Tastendruck oder Scroll auslösen, und cachen Sie abgeleitete Werte.
Fehler, die INP im roten Bereich halten
- Nur den Lighthouse-Wert Total Blocking Time optimieren und annehmen, das Feld-INP folge — TBT ist ein Ladezeit-Proxy, nicht die echten Interaktionen.
- Auf einem schnellen Desktop testen, während der Traffic Mittelklasse-Android ist, wo derselbe Handler ein Vielfaches länger braucht.
- Jeden Drittanbieter-Tag behalten, weil er „klein wirkt“ — die Kosten summieren sich und landen auf dem Interaktionspfad.
- Die durchschnittliche statt der schlechtesten Interaktion beheben; INP wird vom langsamen Ende bestimmt, nicht vom Median.
So bestätigen Sie, dass INP wirklich besser wurde
Feld-Metriken bewegen sich langsam, weil sie 28 Tage echter Besuche aggregieren — erwarten Sie also keinen Sprung im Search-Console-Graphen am Deploy-Tag. Validieren Sie zweischichtig: reproduzieren Sie die konkrete Interaktion im Performance-Panel und prüfen Sie, dass die lange Task weg ist, und verfolgen Sie dann den Feldtrend über die nächsten Wochen.
Behandeln Sie INP in DomainLens im selben Beweisstrang wie LCP, CLS und Page Speed — die stärksten Fixes machen die Live-Seite wirklich flüssiger nutzbar, nicht nur grüner im Laborlauf.