Interaction to Next Paint (INP)
Verstehen Sie INP, den Core Web Vital für die reale Reaktionsfähigkeit, seine Berechnung während eines Besuchs und Techniken für schnelle Interaktionen.
Interaction to Next Paint (INP) ist eine kostenlose Web Performance Optimization & Lighthouse-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Web Performance Optimization & Lighthouse-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Web Performance Optimization & Lighthouse-Kurs umfasst insgesamt 4 Lektionen.
Teile dieser Lektion wurden noch nicht übersetzt und werden auf Englisch angezeigt.
Responsiveness as a Vital
Interaction to Next Paint (INP) measures how quickly the page visually responds to user input across the whole visit. It became a Core Web Vital, replacing First Input Delay.
INP vs FID
FID only measured the first interaction's input delay. INP is broader: it considers all interactions and the full latency through event handling and rendering, not just the initial delay.
What an Interaction Includes
Each interaction's latency spans three parts: input delay (waiting for the main thread), processing time (event handlers), and presentation delay (rendering the next frame).
How INP Is Reported
Across a visit, INP reports roughly the worst interaction latency (with an allowance for outliers on pages with many interactions), so it reflects the user's worst-case responsiveness.
The Thresholds
- Good: 200ms or less
- Needs improvement: 200-500ms
- Poor: over 500ms
The Main Thread Is the Bottleneck
Long tasks block the main thread so input cannot be handled promptly. Breaking up long JavaScript tasks is the single biggest lever for improving INP.
Yielding to the Main Thread
Break long work into chunks and yield so the browser can handle input between them. scheduler.yield() or a setTimeout based yield helps.
async function process(items) {
for (const item of items) {
handle(item);
await new Promise(r => setTimeout(r, 0));
}
}Defer Non-Urgent Work
Update the UI immediately for feedback, then run heavy work afterward. Patterns like requestAnimationFrame for visual updates and deferring analytics keep handlers short.
button.addEventListener('click', () => {
showSpinner();
setTimeout(doHeavyWork, 0);
});Reduce Rendering Cost
The presentation phase suffers from large DOM updates and expensive layout. Use content-visibility, virtualization, and minimal DOM changes to render the next frame faster.
Measuring INP
Capture INP in the field with the web-vitals library, and use the DevTools Performance panel's interaction track to see input delay, processing, and presentation for each event.
import { onINP } from 'web-vitals';
onINP(metric => console.log('INP', metric.value));Improvement Checklist
- Break up long tasks and yield.
- Defer non-urgent work after paint.
- Trim event handler work.
- Reduce DOM size and rendering cost.
Quick Check
How does INP differ fundamentally from the metric it replaced, FID?
Recap
You learned INP measures whole-visit responsiveness across input delay, processing, and presentation, with a good threshold of 200ms. Improve it by breaking up long tasks, yielding to the main thread, deferring non-urgent work, and reducing rendering cost.
Häufig gestellte Fragen
Ist die Lektion „Interaction to Next Paint (INP)“ kostenlos?
Ja — der vollständige Text von „Interaction to Next Paint (INP)“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Web Performance Optimization & Lighthouse-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Web Performance Optimization & Lighthouse-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Interaction to Next Paint (INP)“?
Verstehen Sie INP, den Core Web Vital für die reale Reaktionsfähigkeit, seine Berechnung während eines Besuchs und Techniken für schnelle Interaktionen. Du übst Web Performance Optimization & Lighthouse mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Web Performance Optimization & Lighthouse zu starten?
Keine Vorkenntnisse erforderlich. Web Performance Optimization & Lighthouse auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.
Wie lange dauert die Lektion „Interaction to Next Paint (INP)“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Web Performance Optimization & Lighthouse-Lektion Code schreiben und ausführen?
Ja. Jede Web Performance Optimization & Lighthouse-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Einführung in Core Web Vitals
- LCP, FID und CLS im Detail
- Metriken zur Nutzerinteraktion verbessern
- Interaction to Next Paint (INP)