INP-probléma mobilon: miért késnek a kattintások, és hogyan javítsd?
Az INP (Interaction to Next Paint) azt méri, milyen gyorsan kap a látogató látható választ kattintás, érintés vagy billentyűleütés után. Jó cél a 200 ms vagy kevesebb a látogatások 75%-ánál; 500 ms felett gyenge. Rossz INP-nél a fő szálat általában túl sok JavaScript, hosszú eseménykezelő, nagy DOM vagy lassú külső widget foglalja. Nem a pontszámot kell vakon javítani: azokat a valódi interakciókat keresd, amelyek a leadhez vezetnek – mobil menü, ajánlatkérő gomb, dátumválasztó, űrlap és kosár. Mérd be a lassú lépést, csökkentsd vagy halaszd a felesleges kódot, és adj azonnali vizuális visszajelzést.
Mit jelent ez az üzletednek?
Súlyosság: közepes. A látogató azonnal érzékeli a lassú reakciót; a kapcsolatfelvétel és vásárlás előtti bizonytalanság közvetlenül ronthatja a konverziót.
Egy lassan nyíló menü vagy későn reagáló űrlap könnyen azt az érzetet kelti, hogy az oldal hibás. Telefonon a felhasználó ilyenkor ismét rábök, majd amikor a böngésző utoléri magát, dupla művelet vagy félrevezető állapot történhet.
A leggyakoribb okok – és hogyan ismered fel őket
- 1
Hosszú JavaScript-feladatok
A böngésző a nagy szkript betöltése, értelmezése vagy futása közben nem tud gyorsan reagálni.
Így ellenőrizd: A Performance felvételben látszanak 50 ms-nál hosszabb main-thread feladatok kattintás előtt vagy után?
- 2
Nehéz külső widget
Chat, hőtérkép, videó, értékelés, reklám vagy több mérőkód az interakció közben is terhelheti az oldalt.
Így ellenőrizd: A hiba eltűnik, ha egyenként kikapcsolod a nem kritikus külső scripteket tesztkörnyezetben?
- 3
Túl sok munka a kattintás eseményében
Egyetlen click handler egyszerre validál, DOM-ot épít, listát rendez és hálózati kérést indít.
Így ellenőrizd: A lassú interakcióhoz tartozó handler sok elemet módosít vagy nagy adatot dolgoz fel?
- 4
Nagy, drága újrarajzolás
A kattintás után sok száz DOM-elem stílusa vagy elrendezése változik.
Így ellenőrizd: A DevTools a válasz után nagy rendering vagy layout időt mutat?
Javítás lépésről lépésre
- 1. lépés
Válaszd ki a leadhez vezető interakciókat
Előbb a menü, telefonkattintás, CTA, ajánlatkérő űrlap, kosár és időpontfoglalás működését vizsgáld valódi mobilon. Ne csak egy átlagos pontszámot nézz.
- 2. lépés
Mérj valós és laboradatból is
A Search Console a valós felhasználói képet mutatja, a DevTools Performance felvétele pedig segít reprodukálni a lassú kattintást és megtalálni a kódot.
- 3. lépés
Csökkentsd a fő szál terhelését
Távolítsd el a felesleges kódot, késleltesd a nem kritikus widgeteket, kódoszd fel a nagy csomagokat, és ne töltsd be azonnal azt, amire csak később van szükség.
- 4. lépés
Rövidítsd az eseménykezelőket
A kattintásra csak a szükséges állapotváltozás történjen meg. A nehéz feldolgozást bontsd kisebb feladatokra vagy tedd háttérfolyamatba, hogy a böngésző mielőbb kirajzolhassa a választ.
- 5. lépés
Adj azonnali visszajelzést és mérj újra
A gomb kapjon betöltési állapotot, a menü azonnal nyíljon, az űrlap jelezze a feldolgozást. Javítás után valós mobilon és a következő 28 napos mezőadatban is ellenőrizd az eredményt.
Tippek platformonként
WordPress
Az oldalépítő, slider, több optimalizáló bővítmény és külső marketing script együtt gyakori ok. Ne csak minify-old: előbb azonosítsd és vedd ki a nem szükséges bővítményt.
Next.js
A nem interaktív részek maradjanak szerveroldalon, az ügyféloldali komponenseket pedig bontsd kisebb egységekre. Nagy modalt, térképet vagy chatet csak igény szerint tölts be.
Gyakori hibák javítás közben
- Csak a betöltési sebességet javítani, miközben a kattintások maradnak lassúak.
- Minden külső scriptet azonnal betölteni.
- A gombon nem jelezni, hogy a kattintás feldolgozás alatt van.
- Asztali gépen mérni, majd mobilos problémát lezártnak tekinteni.
Mikor kérj segítséget?
Ha az INP-t üzleti kritikus űrlap, kosár vagy összetett JavaScript okozza, kód- és UX-szintű diagnózis kell. A Core Web Vitals audit megmutatja, melyik interakció, script és renderelési lépés okozza a veszteséget.
Gyakori kérdések
Mi számít jó INP-nek?
A cél 200 ms vagy kevesebb a látogatások 75%-ánál. 200–500 ms között javítandó, 500 ms felett gyenge.
Az INP ugyanaz, mint az oldal betöltési ideje?
Nem. Az INP a teljes látogatás alatt mért kattintások, érintések és billentyűleütések válaszkészségét vizsgálja.
Miért nincs INP-adat minden oldalon?
Ha kevés a forgalom vagy a látogatók nem kattintanak, nincs elegendő valós interakció. Ilyenkor célzott laborvizsgálat kell.