Az INP (Interaction to Next Paint) azt méri, mennyi idő telik el a látogató interakciója és a képernyő következő vizuális frissítése között. A Core Web Vitals egyik hivatalos mérőszáma, és azt mutatja meg, mennyire érzi válaszkésznek az oldalt az, aki éppen használja.
Hogyan működik
A böngésző minden kattintást, koppintást és billentyűleütést megmér. Egy interakció ideje három szakaszból áll:
- input delay: amíg a böngésző hozzá tud kezdeni az eseménykezelőhöz, mert a fő szál más munkával van elfoglalva
- processing time: maga az eseménykezelő JavaScript futása
- presentation delay: amíg a böngésző ki is rajzolja az új állapotot
Az oldal INP-értéke nagyjából a legrosszabb interakció ideje az adott látogatás alatt. Nem az átlag számít, hanem a rossz élmény.
Mit mér és mit nem
Az INP csak a valódi beavatkozást nézi: kattintás, koppintás, billentyűzet. A görgetés és az egérmozgás nem számít bele. A tiszta betöltési sebesség sem: azt az LCP (Largest Contentful Paint) és a FCP (First Contentful Paint) mutatja. Tipikus INP-gyilkos egy szűrő, egy legördülő menü, egy kosárba tevés gomb vagy egy nagy termék-lista újrarajzolása.
Küszöbök és adatforrás
A Google határértékei egyszerűek. 200 ms alatt jó, 200 és 500 ms között javítandó, 500 ms felett rossz. Az értékelés a valós látogatók adatainak 75. percentilisén (p75) alapul, a CrUX: mezei vs labor adat adatbázisból. Ez azt jelenti, hogy a látogatók háromnegyedének legalább ilyen jó élményt kell kapnia.
Röviden: az INP nem a betöltésről szól, hanem arról, hogy használat közben akad-e az oldal.
Miért fontos
Keresők
Az INP a Core Web Vitals része, tehát része a Google oldalélmény-jelzéseinek. Nem ez dönti el a helyezést, de szoros mezőnyben számíthat. Ennél fontosabb, hogy a Search Console külön riportban jelzi a rossz INP-t, URL-csoportokra bontva.
Üzlet
A lassú válasz valódi pénzbe kerül. Ha a kosárba tevés gomb 600 ms-ig nem csinál semmit, a látogató újra rákattint. Ebből lesz a duplán hozzáadott termék vagy a dupla űrlapküldés. A riportokban ezt látjuk a leggyakrabban webshopoknál: a szűrő működik, csak másfél másodperc múlva.
AI és gépi olvasók
Az INP a nyelvi modellek szempontjából közvetve számít. Egy AI-ügynök (agent) vagy egy fetch-elő bot nem kattintgat, de az a JavaScript-tömeg, ami az INP-t rontja, jellemzően a tartalom megjelenítését is késlelteti. Ha a lényegi szöveg csak interakció után renderelődik, az AI-értelmezhetőség: mit ért egy nyelvi modell az oldaladból is romlik.
Technikai példa
Valós INP-mérés a saját oldaladon, a web-vitals könyvtárral. Az attribution build azt is megmondja, melyik elemre kattintottak:
<script type="module">
import { onINP } from 'https://unpkg.com/web-vitals@4/dist/web-vitals.attribution.js?module';
onINP((metric) => {
console.log('INP:', Math.round(metric.value), 'ms', metric.rating);
console.log('Elem:', metric.attribution.interactionTarget);
console.log('Input delay:', Math.round(metric.attribution.inputDelay));
});
</script>
A rating értéke good, needs-improvement vagy poor a 200/500 ms küszöbök szerint. Az adatot érdemes a Google Analytics 4 (GA4)-be vagy saját végpontra küldeni.
Eseménykezelő, ami nem blokkol. Előbb a vizuális visszajelzés, utána a nehéz munka:
button.addEventListener('click', async () => {
button.classList.add('is-loading');
// a fő szál átengedése: a böngésző kirajzolhatja a loading állapotot
if ('scheduler' in window && 'yield' in scheduler) {
await scheduler.yield();
} else {
await new Promise((resolve) => { setTimeout(resolve, 0); });
}
renderProductList(); // a drága rész már a rajzolás után fut
button.classList.remove('is-loading');
});
A különbség mérhető: a kattintás és a látható változás között 30-50 ms lesz, nem 600.
Gyakori kérdések
Miért nem mutat INP-értéket a PageSpeed Insights az oldalamra?
Mert nincs elég valós látogatód. A CrUX csak akkor közöl adatot, ha a mintában elég sok Chrome-felhasználó szerepel. Kis forgalmú oldalaknál próbáld az origin-szintű adatot, az gyakran megvan. Addig laborban, a DevTools Performance paneljével tesztelj CPU-lassítással.
Az INP ugyanaz, mint a TBT?
Nem, de közeli rokonok. A
TBT (Total Blocking Time) laborban mér, a betöltés alatti blokkolt időt nézi. Az INP valós látogatóktól származik, és a teljes látogatás bármely interakcióját mérheti. Ha a TBT magas, az INP is gyanús: ugyanaz a túlterhelt fő szál áll mögötte.
Mennyi idő alatt javul a mért érték, ha kijavítottuk a hibát?
A CrUX 28 napos gördülő ablakkal dolgozik. Az első elmozdulás nagyjából egy hét után látszik, a teljes hatás négy hét múlva. Türelem kell, és érdemes közben saját mérést is futtatni a web-vitals könyvtárral.
Elég, ha a mobil menü és a gombok gyorsak?
Nem feltétlenül. Az INP a látogatás legrosszabb interakcióját veszi alapul. Ha a szűrő vagy a kosárba tevés lassú, az rontja az értéket, akkor is, ha minden más pillanatszerű. Webshopnál mindig a vásárlási úton lévő interakciókat mérd először.
Rontja a Google-helyezésemet a rossz INP?
Közvetlenül alig, a tartalom és a relevancia sokkal erősebb tényező. A
Core Web Vitals mint oldalélmény-jelzés szoros versenyben billenthet. Az üzleti hatás ennél nagyobb: a lassú válasz megszakított vásárlásokat és dupla küldéseket okoz.
