Interaction to Next Paint (INP)
Poznaj INP — kluczową metrykę Web Vitals mierzącą rzeczywistą responsywność — dowiedz się, jak jest obliczana podczas wizyty i jakie techniki zapewniają płynność interakcji.
Interaction to Next Paint (INP) to bezpłatna lekcja Web Performance Optimization & Lighthouse na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Web Performance Optimization & Lighthouse, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Web Performance Optimization & Lighthouse zawiera 4 lekcji w sumie.
Części tej lekcji nie zostały jeszcze przetłumaczone i są wyświetlane po angielsku.
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.
Ucz się Web Performance Optimization & Lighthouse dzięki korepetycjom AI — za darmo
Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.
- Kursy
- 12
- Lekcje
- 48
Często zadawane pytania
Czy lekcja „Interaction to Next Paint (INP)” jest bezpłatna?
Tak — pełny tekst „Interaction to Next Paint (INP)” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Web Performance Optimization & Lighthouse, przejdź na CoddyKit PRO. Kurs Web Performance Optimization & Lighthouse zawiera 4 lekcji w sumie.
Co nauczysz się w „Interaction to Next Paint (INP)”?
Poznaj INP — kluczową metrykę Web Vitals mierzącą rzeczywistą responsywność — dowiedz się, jak jest obliczana podczas wizyty i jakie techniki zapewniają płynność interakcji. Ćwiczysz Web Performance Optimization & Lighthouse z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Web Performance Optimization & Lighthouse?
Nie wymagamy żadnego doświadczenia. Web Performance Optimization & Lighthouse w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.
Ile czasu zajmuje lekcja „Interaction to Next Paint (INP)”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Web Performance Optimization & Lighthouse?
Tak. Każda lekcja Web Performance Optimization & Lighthouse zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Wprowadzenie do Core Web Vitals
- Dogłębna analiza LCP, FID i CLS
- Poprawa wskaźników interakcji użytkownika
- Interaction to Next Paint (INP)