INP javítás: miért nem reagál azonnal az oldalad?

Rákattintasz egy gombra, és egy pillanatig semmi nem történik. Aztán megjelenik a menü, vagy elindul a keresés, de addigra már kattintottál még egyet, hátha elsőre nem sikerült. Ezt az érzést méri az INP.

Mit mér pontosan az INP?

Az INP (Interaction to Next Paint) azt méri, mennyi idő telik el egy kattintás, érintés vagy billentyűleütés és aközött, hogy a képernyőn megjelenik a válasz. Nem egyetlen interakciót néz, hanem a látogatás során mértek közül nagyjából a leglassabbat. Ha tehát egyetlen gomb lassú az oldalon, az rontja az egész oldal értékét.

A görgetés és az egér mozgatása nem számít bele, csak az, amikor a látogató ténylegesen csinál valamit.

A határok: 200 ezredmásodperc alatt jó, 200 és 500 között fejlesztendő, 500 felett gyenge. Az INP 2024 márciusa óta a Core Web Vitals része, akkor váltotta le a korábbi FID mutatót.

Miért nem látod a PageSpeed laborértékei között?

A PageSpeed laborszimulációja betölti az oldalt, de nem kattint rajta semmire, tehát INP-t nem tud mérni. Helyette a TBT-t (Total Blocking Time) mutatja, ami azt méri, mennyi ideig volt foglalt a böngésző a betöltés alatt. A kettő összefügg: ahol a TBT magas, ott az INP is jó eséllyel rossz, mert a foglalt böngésző a kattintásra sem tud reagálni.

Valódi INP-t csak valódi látogatók adataiból lehet mérni. Ha az oldaladnak elég nagy a forgalma, a PageSpeed eredményoldalán a valódi felhasználói adatoknál megjelenik, és a Search Console Webes alapmutatók menüpontjában is. Kis forgalmú oldalnál ez üres marad.

Hogyan mérd magad?

A Chrome fejlesztői eszközeiben (F12) a Teljesítmény (Performance) fül megnyitásakor élőben látod a helyi mutatókat, köztük az INP-t. Kattintgass az oldaladon úgy, ahogy egy látogató tenné: menü, űrlap, szűrő, gombok. Figyeld, melyik interakciónál ugrik meg a szám. Ha rögzítést is indítasz, az idővonalon azt is látod, mi futott a kattintás alatt.

Két beállítás kell hozzá. Kapcsold be a processzor lassítását (4x vagy 6x), mert a te géped jóval gyorsabb egy átlagos telefonnál. És mérj privát ablakban, hogy a bővítményeid ne torzítsák az eredményt.

Mi okozza a lassú reakciót?

Egy interakció ideje három részből áll: a várakozásból, amíg a böngésző egyáltalán hozzáfér a kattintáshoz, a kattintást kezelő kód futásából, és a képernyő újrarajzolásából. A gyakori okok:

• Hosszú JavaScript-feladatok. A böngésző a fő szálon egyszerre csak egy dolgot csinál. Ha éppen egy 300 ezredmásodperces feladat fut, a kattintás addig vár.

• Külső szkriptek. Chat-widget, hirdetési és követőkódok, sütisáv. Ezek a te kódod mellett futnak, és gyakran épp akkor dolgoznak, amikor a látogató kattintana.

• Túl sok munka egy kattintásra. Például egy szűrő, ami minden billentyűleütésnél újraszámol és újrarajzol ezer elemet.

• Túl nagy oldalszerkezet. Minél több elemből áll az oldal, annál tovább tart minden újrarajzolás. Az oldalépítővel összerakott, sokszorosan egymásba ágyazott dobozok itt is visszaütnek.

Megoldások

Adj azonnali visszajelzést. Ez a leghatékonyabb egyszerű javítás. A kattintásra először csak jelezd, hogy megtörtént (a gomb állapota, egy töltésjelző), és a nehéz munkát utána végezd. Az INP azt méri, mikor jelenik meg a következő kép, nem azt, mikor végez a teljes művelet.

button.addEventListener('click', async () => {
  button.classList.add('is-loading');
  // megvárjuk, hogy a töltésjelző kirajzolódjon
  await new Promise((r) => requestAnimationFrame(() => setTimeout(r, 0)));
  runHeavyFilter();
});

Darabold fel a hosszú feladatokat. Ami egyben 300 ezredmásodperc, az tíz darabban, közöttük szót adva a böngészőnek, már nem blokkolja a kattintást. Chrome-ban erre külön eszköz is van (scheduler.yield()), a mindenhol működő régi megoldás a fenti setTimeout.

Gépelésnél várj egy pillanatot. Egy kereső vagy szűrő ne minden leütésre fusson le, hanem akkor, ha a látogató egy pillanatra megállt.

let timer;
input.addEventListener('input', () => {
  clearTimeout(timer);
  timer = setTimeout(() => runSearch(input.value), 250);
});

Nézd át a külső szkripteket. Amit nem használsz, töröld. Ami kell, azt töltsd később: a chat-widgetnek például elég az első görgetés vagy kattintás után betöltődnie.

WordPressen a bővítményekkel kezdd. Sok bővítmény minden oldalra betölti a saját JavaScriptjét, akkor is, ha csak egy aloldalon használod. A csúszkák és az oldalépítők a legnagyobb tételek. Hogy ez a letöltésre is hogyan hat, azt a sebesség-cikk felesleges JavaScriptről szóló részében írtam le.

A másik két mutató

Az INP a három Core Web Vitals mutató egyike. A másik kettő az LCP, ami a betöltés sebességét méri, és a CLS, ami az ugráló tartalmat. A teljes képet, a helyes méréssel és a leggyakoribb okokkal együtt, itt találod: Miért lassú a weboldalad, és hogyan gyorsítsd fel?