Interaction to Next Paint (INP)

Trzy fazy każdej interakcji

• Opóźnienie wejścia — czekanie, aż główny wątek będzie wolny, by uruchomić handler.
• Czas przetwarzania — wykonanie kodu obsługującego zdarzenie.
• Opóźnienie prezentacji — przeliczenie layoutu i odmalowanie kolejnej klatki.

Jak poprawić INP

Kluczem jest odciążenie głównego wątku: dzielenie długich zadań (yielding), redukcja i odroczenie JavaScriptu, unikanie nadmiarowych re-renderów oraz ograniczenie kosztownych operacji na DOM w handlerach zdarzeń.

Przykład

Ciężka operacja synchroniczna w handlerze kliknięcia blokuje główny wątek i opóźnia kolejne odmalowanie. Dzielenie pracy na mniejsze porcje (yield) pozwala przeglądarce zareagować szybciej.

button.addEventListener('click', () => {
  for (let i = 0; i < 50000; i++) {
    processItem(items[i]); // blokuje główny wątek
  }
  updateUI();
});

button.addEventListener('click', async () => {
  for (let i = 0; i < items.length; i++) {
    processItem(items[i]);
    if (i % 100 === 0) await new Promise(requestAnimationFrame);
  }
  updateUI();
});