Mi az az INP (Interaction to Next Paint), és hogyan lassítja a webhelyedet 2026-ban

Hallottad, hogy a Google megváltoztatta az egyik Core Web Vitals mutatóját, és hogy mostantól valami INP nevű dolog számít. Talán láttál egy piros pontszámot a PageSpeed Insightsban, és megijedtél. Ez normális — az INP-t nehezebb megérteni, mint a régi mutatót, amelyet leváltott, de amint megérted, mit mér, minden a helyére kerül.

Röviden: az INP nem azt méri, milyen gyorsan töltődik be az oldal. Azt méri, milyen gyorsan reagál a webhelyed, amikor kattintasz, koppintasz vagy beírsz valamit egy űrlapba. Ez a „reszponzivitás” mutatója. Egy oldal tűnhet teljesen betöltöttnek, és mégis fagyottnak érződhet egy másodperc töredékéig, amikor megnyomsz egy gombot — pontosan ezt ragadja meg az INP. Ebben a cikkben megmutatom, mit jelent, hogyan mérd helyesen, és mit tegyél valójában a javításáért.

Mi az INP, és mit váltott le

Az INP az Interaction to Next Paint rövidítése. 2024 márciusa óta az INP hivatalosan leváltotta a FID-et (First Input Delay) mint a három Core Web Vitals mutató egyikét, az LCP (betöltési sebesség) és a CLS (vizuális stabilitás) mellett.

A FID-től való eltérés számít. A FID csak az ELSŐ interakció késleltetését mérte, és annak is csak a várakozó részét — nem azt, hogy a reakció valójában mennyi ideig tartott. Elnéző mutató volt; rengeteg lassú webhely könnyedén átment rajta.

Az INP sokkal őszintébb: az oldal MINDEN interakcióját figyeli (kattintások, koppintások, billentyűleütések) a látogatás során, és lényegében a leglassabbat jelenti. Az egész utat méri: attól a pillanattól, amikor koppintasz, egészen addig, amíg a képernyő ténylegesen meg is változik válaszként. Ezért nehezebb átmenni rajta.

Hogyan mérik az INP-t: küszöbértékek és eszközök

Az INP-t ezredmásodpercben mérik, és a Google ezeket a küszöbértékeket használja (a valós felhasználók 75. percentilisén):

• 200 ms alatt — jó (zöld)
• 200 és 500 ms között — javításra szorul (narancssárga)
• 500 ms felett — gyenge (piros)

Hol ellenőrizd:

• PageSpeed Insights — a legegyszerűbb; valós terepadatokat (CrUX) is ad, ha a webhelyednek elég forgalma van.
• Chrome DevTools, Performance fül — rögzíts egy interakciót, és lásd pontosan, mi visz el időt.
• A Web Vitals bővítmény Chrome-hoz — valós időben mutatja az INP-t, miközben böngészel.

Megjegyzés: az INP „terepadaton” alapuló mutató, ami azt jelenti, hogy valós felhasználóktól, az ő telefonjaiktól és kapcsolatuktól függ. Egy laboratóriumi teszt becslést ad, de a valóság a CrUX-adatokban jelenik meg, amelyek idővel halmozódnak fel.

Miért lassú a webhelyed az INP szempontjából

Szinte minden esetben a bűnös a fő szálat blokkoló JavaScript. A böngészőnek egyetlen szála van, amelyet egyszerre használ az oldal kirajzolására és a szkriptek futtatására. Amikor egy szkript sokáig fut, a böngésző nem tud reagálni a kattintásodra, amíg be nem fejeződik — és ez a késleltetés.

Gyakori okok, különösen a kisvállalkozások webhelyein:

• Túl sok bővítmény és harmadik féltől származó szkript (chatek, követőpixelek, cookie-bannerek, widgetek).
• Nehéz WordPress-sablonok, amelyek rengeteg felesleges JavaScriptet töltenek be.
• „Hosszú feladatok” — munka, amely 50 ms-nál tovább foglalja le a szálat.
• Kód, amely minden interakciónál sokszor újraszámítja az elrendezést.

A paradoxon az, hogy egy webhelynek lehet jó LCP-je (gyorsan töltődik), és mégis gyenge INP-je, mert a teljes súly akkor érződik, amikor elkezdesz interakcióba lépni.

Hogyan javítsd valójában az INP-t

Nincs varázsgomb, de a lépések egyértelműek:

• Dobd ki a nem használt szkripteket. Minden extra chat-widgetnek vagy követőeszköznek ára van. Csak azt tartsd meg, ami ügyfeleket hoz.
• Halaszd el a nem kritikus JavaScriptet, hogy ne blokkolja az első interakciót.
• Bontsd a hosszú feladatokat kis darabokra, és „engedd át” a fő szálat (setTimeout-tal vagy a böngésző modern ütemezőjével), hogy a kattintásra adott válasz mehessen előre.
• Egyszerű animációkhoz és effektekhez válaszd a CSS-t a JavaScript helyett — a CSS másik szálon fut, és nem blokkol.
• Űrlapoknál használj debounce-t, hogy a kód ne fusson le minden billentyűleütésnél.
• Válassz könnyű sablont vagy építkezz a kezdetektől azzal, ne egy túlterhelt sablonnal, amit aztán „optimalizálsz”.

A legolcsóbb nyereség gyakran a ballaszt eltávolítása, nem pedig optimalizálások egymásra halmozása.

Mit jelent ez egy kisvállalkozás webhelyének

Ha szalont, klinikát vagy helyi boltot vezetsz, nem kell fejlesztővé válnod. De két dolgot érdemes tudni. Először: a reszponzivitás valóban befolyásolja, hány látogató marad, és kattint az „Időpont foglalása” vagy „Hívás” gombra. Másodszor: sok lassú webhely felépítésénél fogva lassú, nem egyetlen elfelejtett bővítmény miatt — és ilyenkor a ráaggatott optimalizálások nem sokat segítenek.

A MPO Web Studiónál kezdettől fogva könnyű webhelyeket építünk, éppen azért, hogy később ne kelljen az INP ellen küzdenünk. Országszerte távolról dolgozunk, és tudunk neked ingyenes, előre elkészített demót építeni a webhelyedből, hogy még fizetés előtt lásd a különbséget.

Ha szeretnéd, hogy együtt nézzük meg, miért lassú a jelenlegi webhelyed, írj nekünk WhatsApp-on — őszintén megmondjuk, hogy javítani vagy újraépíteni kell-e.