INP – Interaction to Next Paint
INP érthetően: hogyan méri az Interaction to Next Paint a felhasználói interakciók válaszkészségét, és miért okoz gondot a hosszú main-thread task?
Röviden
Az INP a felhasználói interakciókra adott vizuális reakció késleltetését jellemzi a page visit során. Jó INP célérték legfeljebb 200 ms a 75. percentilisen. Nem egyszerűen click handler futási idő: input delay, event processing és a következő paintig tartó prezentációs késés is számít.
Mit jelent a inp – interaction to next paint?
Az INP a felhasználói interakciókra adott vizuális reakció késleltetését jellemzi a page visit során. Jó INP célérték legfeljebb 200 ms a 75. percentilisen. Nem egyszerűen click handler futási idő: input delay, event processing és a következő paintig tartó prezentációs késés is számít.
INP három része
01
Input delay
02
Processing
03
Presentation delay
04
Next paint
Hogyan működik a gyakorlatban?
Ha a main thread hosszú JavaScript taskkal foglalt, az input várakozik. A handler túl sok szinkron munkája, nagy render vagy layout is növelheti az időt. A javítás gyakran munka feldarabolása, kevesebb kliens JS, hatékonyabb state update és drága render elkerülése.
- Jó INP: ≤200 ms; gyenge: >500 ms.
- Long task blokkolhatja az input feldolgozását.
- A gyors network nem oldja meg a main-thread túlterhelést.
- Valódi field INP többféle interakcióból jöhet, nem csak az első kattintásból.
Gyakorlati fejlesztői szemlélet
RUM vagy field adatból keresd meg, mely route és interakció rossz. Utána performance trace-ben reprodukáld, és bontsd a késést input delay / processing / presentation részekre.
Gyakori hibák és félreértések
- TBT-t és INP-t ugyanannak tekinteni.
- Minden handlerre debouncet rakni valódi ok feltárása nélkül.
- Nagy React subtree újrarenderelést hálózati problémának nézni.
Források és szabványok
A technikai részletekhez elsődleges szabványokat és karbantartott hivatalos dokumentációt használok. Frameworkök, böngészők és webes API-k idővel változhatnak, ezért implementálás előtt mindig ellenőrizd az aktuális dokumentációt is.
Kapcsolódó ByBence Academy