Interaction to Next Paint (INP): Definition, Thresholds, Fixes

Was ist Interaction to Next Paint (INP)?

Interaction to Next Paint (INP) ist der Core Web Vital, der die Gesamt-Responsiveness einer Page auf User-Interaktionen misst. Für jeden Click, Tap oder Tastendruck misst INP die Zeit vom Input-Event bis zum nächsten visuellen Update (Next-Paint). Der reported INP ist im Wesentlichen die LÄNGSTE solche Interaction über den ganzen Visit.

INP ersetzte First Input Delay (FID) als Core Web Vital am 12. März 2024. FID maß nur die allererste Interaction; INP samples Interactions über den ganzen Page-Lifecycle.

INP-Thresholds

Warum INP FID ersetzte

Was INP includes

1. Input-Delay — Main-Thread busy bevor Event-Handler laufen kann
2. Processing-Time — Event-Handler-Execution + State-Update
3. Presentation-Delay — Zeit bis Browser visuell updated

Wie INP messen

JavaScript-API

new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (entry.interactionId && entry.duration > 40) {
      console.log('INP candidate:', entry.duration, 'ms');
    }
  }
}).observe({ type: 'event', buffered: true, durationThreshold: 40 });

import { onINP } from 'web-vitals';
onINP((metric) => sendBeacon('/rum', metric));

Tools

Häufige INP-Optimierungen

1. Long-Tasks aufbrechen

async function processInBatches(arr) {
  for (let i = 0; i < arr.length; i += 100) {
    arr.slice(i, i + 100).forEach(processItem);
    await new Promise(r => setTimeout(r, 0));
  }
}

2. Non-critical JavaScript deferren

<script src="analytics.js" defer></script>

3. requestIdleCallback nutzen

requestIdleCallback(() => { prefetchNextPage(); });

4. Feedback während slow Operations zeigen

Optimistic UI macht es feel schneller.

5. Web Workers für CPU-heavy Work

Expensive Computation off Main-Thread moven.

6. React/Vue Hydration-Cost reduzieren

Partial Hydration (Astro Islands), Server-Components, Resumability.

7. Event-Handler optimieren

Debounce/throttle rapid Events.

8. Third-party Scripts reduzieren

Ads + Analytics + Chat-Widgets compound.

Lab-Proxy: Total Blocking Time (TBT)

Häufige INP-Fallstricke

• Long-running Event-Handler.
• Hydration während User-Interaction.
• Layout-Thrashing.
• Heavy Hydration auf langsamen Devices.
• Synchronous Network-Calls in Handlers.
• Re-rendering huge Component-Trees.
• Third-party Tag-Managers.

FAQ: Interaction to Next Paint

Was ist ein guter INP-Score?

≤ 200ms im 75. Perzentil.

Wie unterscheidet sich INP von FID?

FID maß NUR erste Interaction. INP misst ALLE Interactions end-to-end.

Warum sieht mein Lighthouse-Score fine aus, aber Field-INP ist schlecht?

Lighthouse kann INP nicht direkt messen. Nutze TBT als Lab-Proxy.

Wie finde ich heraus, welche Interaction langsam ist?

Web Vitals Chrome-Extension zeigt das Element.

Ist INP dasselbe wie "Page ist laggy"?

Roughly.

Wie beeinflusst Hydration INP?

Hydration is JavaScript executing — blocked Main-Thread.

Was ersetzte FID?

INP wurde der offizielle Core Web Vital am 12. März 2024.

INP-impacting JS-Bundles mit LoadFocus testen

LoadFocus läuft Lighthouse-Audits aus 25+ globalen Regionen, misst TBT. Registrieren bei loadfocus.com/signup.