INP (Interaction to Next Paint) Optimalizálás: A Google Új Sebességi Mutatója
Az INP hivatalosan felváltotta a FID mutatót a Google Core Web Vitals rendszerében. Ismerd meg, mi okozza a kattintási késleltetéseket, és hogyan szorítsd 200 ms alá!
Mi az az INP, és miért váltotta le a régi FID (First Input Delay) mutatót?
A korábbi FID mutató kizárólag a weboldal megnyitásakor történt legelső kattintást mérte. Az INP (Interaction to Next Paint) ezzel szemben a látogató teljes munkamenete alatt (oldalmegnyitástól a bezárásig) leadott összes interakciót (gombkattintások, lenyíló menük, kosárba rakás, lapozás) monitorozza, és a leglassabb reakcióidőt veszi alapul.
- Jó (Zöld sáv): 200 milliszekundum (ms) alatti reakcióidő.
- Fejlesztendő (Sárga sáv): 200 ms és 500 ms közötti várakozás.
- Gyenge (Piros sáv): 500 ms feletti fagyás (a látogató úgy érzi, a weboldal nem reagál a kattintására).
Az INP 3 belső fázisa: Hol veszik el az idő?
Egy felhasználói kattintás és a következő képi frissítés között 3 folyamat zajlik le a böngészőben:
- 1. Input Delay (Bemeneti késleltetés): Az idő, amíg a böngésző várakozik, mert a JavaScript főszál (Main Thread) épp egy másik feladatot (Long Task) végez, és nem tudja elkezdeni a kattintás feldolgozását.
- 2. Processing Time (Feldolgozási idő): Az eseménykezelő függvény (JavaScript Event Callback) tényleges lefutási ideje.
- 3. Presentation Delay (Megjelenítési késleltetés): Az idő, amíg a böngésző újraszámolja az elrendezést (Recalculate Style, Layout) és kirajzolja az új pixeleket a képernyőre (Paint & Composite).
Hogyan javítható az INP a gyakorlatban?
Az INP optimalizálása mély JavaScript és DOM szintű beavatkozást igényel:
- Hosszú feladatok (Long Tasks) feldarabolása: Az 50 ms-nál hosszabb JavaScript feladatok blokkolják a főszálat. A feladatok kisebb async mikrotasakokra bontása (`scheduler.yield()` vagy `setTimeout`) felszabadítja a böngészőt.
- Külső követőkódok és widgetek késleltetése: A Facebook Pixel, Google Tag Manager vagy élő chat widgetek futása gyakran épp a felhasználói kattintások pillanatában foglalja le a processzort.
- Azonnali vizuális visszajelzés (Optimistic UI): Egy gomb megnyomásakor a felületnek azonnal (akár egy loading spinnerrel vagy állapotváltással) reagálnia kell 50 ms-on belül, míg a háttérbeli nehéz API hívás aszinkron futhat.
- DOM fa méretének és komplexitásának csökkentése: A 1500+ DOM elemet tartalmazó oldalakon az újrarendezés (Layout Thrashing) drasztikusan lelassítja a megjelenítést.
Nem vagy biztos benne, hogyan állítsd be a weboldaladon?
Minden weboldal és tartalomkezelő (WordPress, Webflow, Shopify vagy egyedi fejlesztés) más technikai felépítéssel működik. Ne pazarold az idődet a kockázatos kísérletezésre! Két debreceni egyetemistaként alaposan átvilágítjuk a teljes weboldaladat, feltárjuk az összes rejtett technikai, sebességi és SEO akadályt, és pontos, személyre szabott feladatlistát készítünk a javításhoz.