INP (Interaction to Next Paint): què és, com mesurar-lo i com millorar-lo

L'INP (Interaction to Next Paint) és la mètrica dels Core Web Vitals que mesura la capacitat de resposta d'una pàgina: quant triga a reaccionar de manera visible quan algú fa clic, toca la pantalla o prem una tecla. Google la va incorporar el març de 2024 en substitució del FID i és una de les mètriques més sensibles al JavaScript que carrega el web, per la qual cosa sol ser de les que més costa millorar.

Aquesta guia explica com es calcula, quins valors es consideren bons, com mesurar-lo amb dades reals i què fer per millorar-lo. Forma part dels continguts de SEO tècnic que treballem des de la nostra agència SEO.

Què és l'INP?

L'INP avalua la capacitat de resposta d'una pàgina observant la latència de tots els clics, tocs i pulsacions de tecla que es produeixen durant la visita. El valor que s'informa és el de la interacció més llarga. En pàgines amb moltes interaccions es descarta una de cada 50, per no penalitzar pics aïllats.

La latència d'una interacció és el temps que passa des que l'usuari actua fins que el navegador pot pintar el fotograma següent amb una resposta visible. Per això l'INP no mesura quant triga a completar-se tot el que desencadena l'acció, com ara una petició al servidor, sinó quant triga la pàgina a reaccionar a la vista de l'usuari.

Un exemple habitual és l'enviament d'un formulari de contacte. En prémer el botó es disparen diversos processos: enviar el correu de confirmació, registrar el contacte al CRM, avisar les eines d'analítica. Si tot això s'executa abans que la pàgina mostri res, l'usuari veu el botó congelat durant uns segons i l'INP és alt. Si la pàgina mostra primer la confirmació o un avís d'«Enviant…» i deixa la resta de la feina per a després, l'INP baixa.

Les tres fases d'una interacció

• Retard d'entrada: el temps fins que el navegador comença a processar l'acció. Sol allargar-se perquè el fil principal està ocupat amb una altra tasca.
• Temps de processament: el que triguen a executar-se els controladors d'esdeveniments associats a la interacció.
• Retard de presentació: el temps des que acaben aquests controladors fins que el navegador pinta el fotograma.

Saber en quina de les tres es perd el temps és el que orienta l'optimització.

Quines interaccions compten

Compten els clics amb el ratolí, els tocs en pantalles tàctils i les pulsacions de tecla, físiques o en pantalla. No compten el desplaçament, el pas del cursor per sobre ni el zoom. Sí que compten les interaccions dins d'iframes incrustats, com el botó de reproduir d'un vídeo.

Quin és un bon valor d'INP?

Google avalua l'INP al percentil 75 de les visites, per separat en mòbil i en escriptori:

• Igual o inferior a 200 mil·lisegons: bona capacitat de resposta.
• Entre 200 i 500 mil·lisegons: cal millorar-la.
• Superior a 500 mil·lisegons: capacitat de resposta deficient.

Una pàgina pot no tenir valor d'INP si ningú hi interactua, si els usuaris només es desplacen o hi passen el cursor, o si no hi ha prou dades d'usuaris de Chrome.

Què són els Core Web Vitals?

L'INP és una de les tres mètriques dels Core Web Vitals, el conjunt amb el qual Google mesura l'experiència d'usuari d'una pàgina:

• LCP (Largest Contentful Paint): quant triga a mostrar-se el contingut principal. Es considera bo fins a 2,5 segons.
• INP: la capacitat de resposta a les interaccions. Bo fins a 200 mil·lisegons.
• CLS (Cumulative Layout Shift): l'estabilitat visual, és a dir, els moviments inesperats d'elements. Bo fins a 0,1.

Formen part de les senyals d'experiència de pàgina que Google té en compte en el posicionament. Són una senyal més i no substitueixen la rellevància del contingut, però millorar-los beneficia directament l'usuari.

INP vs FID

El FID (First Input Delay) només mesurava el retard de la primera interacció, és a dir, el temps fins que el navegador començava a processar-la. L'INP observa totes les interaccions i cobreix el recorregut complet: retard d'entrada, processament i presentació.

Per això un web que aprovava amb el FID pot suspendre amb l'INP. Abans n'hi havia prou que la primera resposta fos àgil. Ara compta també tot el que passa després. Google va substituir el FID per l'INP el 12 de març de 2024.

Com mesurar l'INP

La millor font és la dada de camp, recollida d'usuaris reals, perquè l'INP depèn del que fa cada visitant a la pàgina.

Dades de camp

• PageSpeed Insights: mostra dades d'usuaris reals de Chrome (CrUX) quan la URL o l'origen tenen prou trànsit.
• Search Console: l'informe de Core Web Vitals agrupa les URL amb un INP deficient o que cal millorar.
• Monitorització d'usuaris reals (RUM) i biblioteca web-vitals: mesuren l'INP al teu propi web i permeten saber quina interacció el provoca. Les dades es poden enviar a Google Analytics o a una altra eina per analitzar-les.

CrUX et diu si hi ha un problema, però no què el causa. A més, procedeix només d'usuaris de Chrome: segons la documentació de Google, Safari no ho admet.

Dades de laboratori

En laboratori, l'INP depèn de les interaccions que simulis, així que no substitueix la dada de camp. Algunes eines només observen la càrrega de la pàgina i no informen d'INP. En aquest cas, el Temps total de bloqueig (TBT) serveix com a indicador aproximat, tot i que no equival a l'INP.

Per reproduir interaccions lentes, obre la pàgina a Chrome, fes servir el panell de Rendiment de DevTools i repeteix els recorreguts habituals: obrir el menú, fer servir el cercador intern, desplegar blocs de contingut, enviar un formulari. Interactua també mentre la pàgina s'està carregant, que és quan el fil principal sol estar més ocupat. Google explica el mètode a la seva guia per diagnosticar interaccions lentes en laboratori.

Causes habituals d'un INP alt

• Tasques llargues de JavaScript al fil principal, sobretot durant la càrrega.
• Controladors d'esdeveniments pesats: fan massa feina abans que la pàgina pugui pintar una resposta.
• Scripts de tercers: etiquetes de Google Tag Manager, xats, ginys i publicitat.
• DOM gran i estils complexos: com més elements i regles, més costa recalcular i pintar després de cada interacció.
• Canvis de disseny que forcen a recalcular la pàgina diverses vegades seguides.

Les peticions de xarxa, per si soles, no penalitzen l'INP. El que compta és si la pàgina pot pintar una resposta mentre aquestes peticions es resolen.

Com millorar l'INP d'un web

El primer pas és identificar quines interaccions són lentes, amb dades de camp si n'hi ha i amb proves en laboratori si no. El segon és veure en quina fase es perd el temps i actuar-hi.

Si el problema és el retard d'entrada

Redueix les tasques llargues durant la càrrega, posposa els scripts que no calen al principi i revisa les etiquetes de Google Tag Manager i els plugins que afegeixen JavaScript propi.

Si el problema és el temps de processament

Divideix les tasques llargues en parts més petites i cedeix el control al navegador entre elles. Limita el que fa el controlador de l'esdeveniment a l'imprescindible per mostrar la resposta i deixa la resta per a després. Al formulari de l'exemple, mostra primer la confirmació i envia després les dades al CRM i a analítica. Per a càlculs pesats, valora els web workers, que els treuen del fil principal.

Si el problema és el retard de presentació

Redueix la mida del DOM, simplifica els estils i evita els canvis de disseny que obliguen a recalcular la pàgina diverses vegades seguides.

Afegir un indicador visual de resposta ràpida ajuda, però només funciona si el fil principal queda lliure per pintar-lo. Si no, cal atacar la causa. La col·lecció de guies de web.dev sobre optimització de l'INP detalla cada tècnica.

Preguntes freqüents

Puc mesurar l'INP només amb eines de laboratori?

No del tot. En laboratori el valor depèn de les interaccions que se simulin i pot no reflectir el que experimenten els usuaris. L'ideal és començar per les dades de camp i fer servir el laboratori per reproduir i corregir els problemes.

Què faig si la meva pàgina no té valor d'INP?

Sol ser perquè els usuaris no hi interactuen, perquè només es desplacen o perquè no hi ha prou dades. En aquests casos, el valor apareixerà quan hi hagi més visites amb interaccions mesurables. Mentrestant, prova tu els recorreguts clau en laboratori.

Influeix l'INP en el posicionament?

Forma part de les senyals d'experiència de pàgina, però és una senyal més. Millorar-lo no garanteix pujar posicions, tot i que sí que millora l'experiència de qui fa servir el web, i amb ella la probabilitat de conversió.

Si necessites ajuda per diagnosticar i millorar l'INP del teu web, des de la nostra agència SEO podem revisar-lo: parlem.