INP-Bereitschaft

1. Was ist INP Readiness?

INP Readiness gibt an, ob die Interaction to Next Paint (INP) einer Webseite – die Verzögerung zwischen einer Benutzereingabe (Klick, Tap, Tastendruck) und der nächsten sichtbaren Änderung – unter Googles Schwellenwert von 200 ms liegt. Wenn eine Seite „ready“ ist, fühlen sich die meisten Interaktionen sofort an und signalisieren Google, dass die Site schnell auf die Nutzerintention reagiert.

2. Warum das für SEO wichtig ist

Googles Core Web Vitals beeinflussen das Ranking. INP wird im März 2024 ein Core Web Vital und ersetzt First Input Delay (FID). Seiten, die das 200 ms-Ziel erreichen, profitieren von zwei Vorteilen:

• Höhere Chance auf Top-10-Platzierungen — schnelle, responsive Seiten reduzieren die Absprungrate und erhalten Googles Performance-Boost.
• Bessere Nutzersignale — ein niedriger INP korreliert mit längeren Sitzungen und höheren Conversions und stärkt damit die positiven Engagement-Metriken, die Google beobachtet.

3. Wie INP gemessen wird (anfängerfreundlich)

• Wenn ein Nutzer interagiert, protokolliert der Browser den Zeitpunkt des Events (z. B. mousedown).
• Danach wartet er auf den nächsten Paint-Zyklus – den Moment, in dem eine sichtbare Änderung auf dem Bildschirm erscheint.
• Die Differenz zwischen diesen beiden Zeitstempeln ist der INP für diese Interaktion.
• Während einer Session sammelt Chrome alle Interaktionen und behält den längsten Wert. Diese „Worst-Case“-Zahl zeigen der CrUX-Report und PageSpeed Insights an.

4. Best Practices & Implementierungstipps

• Haupt-Thread-Arbeit minimieren: lange JavaScript-Aufgaben mit requestIdleCallback oder setTimeout in kleinere Teile aufteilen.
• Passive Event-Listener verwenden: addEventListener('touchstart', handler, {passive: true}) hält das Scrollen flüssig.
• Nicht-kritische Skripte aufschieben: Analytics- und Chat-Widgets erst nach load oder per async/defer laden.
• Layout-Thrashing vermeiden: DOM-Reads und ‑Writes bündeln. Tools wie ResizeObserver helfen, teure Reflows zu erkennen.
• Mit Lighthouse und der Web Vitals Chrome Extension prüfen, um Callbacks über 50 ms zu identifizieren.

5. Praxisbeispiele

• E-Commerce-Produktseite: Der Austausch eines jQuery-Karussells durch einen schlanken CSS-Slider senkte den INP von 350 ms auf 110 ms und steigerte Add-to-Cart-Klicks um 8%.
• News-Site: Das Verschieben der Social-Share-Buttons in lazy-geladene iframes verhinderte einen 180 ms-JavaScript-Block und brachte den INP unter die 200 ms-Marke.

6. Häufige Anwendungsfälle

• Checkout-Flows: Nutzer brechen Käufe ab, wenn Formulareingaben verzögern. INP-Monitoring erkennt Engpässe frühzeitig.
• SaaS-Dashboards: Häufige Button-Klicks und Filteränderungen machen Reaktionsfähigkeit zum entscheidenden Qualitätsmerkmal.
• Mobile Landingpages: Auf langsameren Geräten ist die Reduzierung des INP oft der schnellste Gewinn, um die Core Web Vitals einzuhalten.