{"id":20930,"date":"2022-09-07T16:50:11","date_gmt":"2022-09-07T15:50:11","guid":{"rendered":"https:\/\/www.movilesdualsim.com\/blog\/?p=20930"},"modified":"2022-09-07T16:50:16","modified_gmt":"2022-09-07T15:50:16","slug":"que-es-interaction-to-next-paint-inp","status":"publish","type":"post","link":"https:\/\/www.movilesdualsim.com\/blog\/que-es-interaction-to-next-paint-inp\/","title":{"rendered":"\u00bfQu\u00e9 es Interaction To Next Paint (INP)?"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Interaction to Next Paint (INP) o en Espa\u00f1ol \u00abInteracci\u00f3n a Nueva Pintada\u00bb es una nueva m\u00e9trica introducida por Google y que se encuentra en estado experimental, m\u00e9trica que <strong>se encarga de medir capacidad de respuesta de una p\u00e1gina web a lo largo de todas las interacciones en una p\u00e1gina<\/strong>. Una INP baja garantiza que la p\u00e1gina responda de manera confiable en todo momento, lo que repercute directamente en la experiencia de usuario.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Para calcular la m\u00e9trica INP, se guardan todas las diferencias entre cada interacci\u00f3n del usuario y el cambio de presentaci\u00f3n final en la p\u00e1gina. El n\u00famero m\u00e1s alto de todas las interacciones (o el percentil 98) ser\u00e1 la m\u00e9trica final Interaction to Next Paint (INP).<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u00bfPercentil 98 o el INP m\u00e1s bajo?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">INP es una m\u00e9trica que tiene como objetivo representar la latencia de interacci\u00f3n general de una p\u00e1gina <strong>seleccionando una de las interacciones m\u00e1s largas que ocurren cuando un usuario visita una p\u00e1gina<\/strong>. Para p\u00e1ginas con menos de 50 interacciones en total, su INP ser\u00e1 la interacci\u00f3n con peor latencia. Para p\u00e1ginas con muchas interacciones (50+), el valor de INP suele ser el percentil 98 de latencia de interacci\u00f3n.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u00bfC\u00f3mo funciona exactamente Interaction to Next Paint (INP)?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Una interacci\u00f3n ocurre cuando un visitante hace clic, toca o se desplaza en una p\u00e1gina web. Esa interacci\u00f3n podr\u00eda resultar en un cambio en la presentaci\u00f3n en la pantalla. El valor de Interaction to Next Paint (INP) mide el tiempo entre el clic y el cambio en la capa de presentaci\u00f3n, es decir, lo que ve el usuario.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">El valor de Interaction to Next Paint consiste en la duraci\u00f3n \u00fanica m\u00e1s larga de cualquier evento que sea parte de la interacci\u00f3n de un usuario, donde la duraci\u00f3n se mide desde el punto en el que el usuario interactu\u00f3 con la p\u00e1gina hasta que se presenta el siguiente cuadro despu\u00e9s de que se hayan ejecutado todos los controladores de eventos asociados. La duraci\u00f3n es la suma de los siguientes intervalos de tiempo:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>El retraso de entrada<\/strong>, que es el tiempo entre el momento en que el usuario interact\u00faa con la p\u00e1gina y el momento en que se ejecutan los controladores de eventos.<\/li><li><strong>El tiempo de procesamiento<\/strong>, que es la cantidad total de tiempo que lleva ejecutar el c\u00f3digo en los controladores de eventos asociados.<\/li><li><strong>El retraso de presentaci\u00f3n<\/strong>, que es el tiempo entre el momento en que los controladores de eventos han terminado de ejecutarse y el momento en que el navegador presenta el siguiente cuadro.<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">\u00bfCu\u00e1les son los valores buenos y malos de la m\u00e9trica Interaction to Next Paint (INP)?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Para dar por aprobada la m\u00e9trica <strong>Core Web Vitals for the Interaction to Next Paint<\/strong>, el percentil 75 de las cargas de p\u00e1gina registradas en el campo debe permanecer por debajo de los 200 ms:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Un INP por debajo o a 200 milisegundos se traduce en que la p\u00e1gina tiene una buena capacidad de respuesta.<\/li><li>Un INP entre 200 y 500 milisegundos significa que la capacidad de respuesta de la p\u00e1gina necesita mejorar.<\/li><li>Un INP superior a 500 milisegundos es un indicativo importante de que la p\u00e1gina tiene poca capacidad de respuesta.<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">\u00bfC\u00f3mo medir la m\u00e9trica Interaction to Next Paint (INP)?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">La m\u00e9trica Interaction to Next Paint se puede calcular mediante algunas herramientas de laboratorio o atrav\u00e9s de herramientas de campo. La forma m\u00e1s sencilla de medir la Interaction to Next Paint es a trav\u00e9s de PageSpeed \u200b\u200bo mediante Lighthouse en el modo de \u00abIntervalo de tiempo\u00bb. Puedes aprender m\u00e1s al respecto aqu\u00ed: <a href=\"https:\/\/developer.chrome.com\/en\/blog\/inp-tools-2022\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/developer.chrome.com\/en\/blog\/inp-tools-2022\/<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u00bfC\u00f3mo mejorar el puntaje de Interaction to Next Paint?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">El puntaje obtenido en Interaction to Next Paint es una m\u00e9trica complicada pero no imposible de mejorar, pues por lo general requiere conocimientos de programaci\u00f3n avanzados. Tu p\u00e1gina puede ser realmente r\u00e1pida y responder instant\u00e1neamente la mayor parte del tiempo y aun as\u00ed puede que una \u00fanica interacci\u00f3n lenta afecte la m\u00e9trica &#8211; esto es complicado porque incluso puede usarse por atacantes para efectuar algo de SEO negativo bajando dicha m\u00e9trica para enga\u00f1ar a Google.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Por lo general, casi cualquier p\u00e1gina responde menos durante la fase de carga e inicializaci\u00f3n de la p\u00e1gina. Es en este momento cuando se realiza la mayor parte del trabajo del hilo principal (parsing, decodificaci\u00f3n, representaci\u00f3n y ejecuci\u00f3n de secuencias de comandos).<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Proporcione una respuesta inmediata a las interacciones de los usuarios para asegurarse de que la p\u00e1gina responda con inmediatez a las peticiones del usuario<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Por lo tanto, cuando un visitante realiza una acci\u00f3n como enviar un formulario o desplegar un men\u00fa, no esperes la confirmaci\u00f3n del lado del servidor para mostrar una respuesta o cambio en pantalla. Mensajes tardios del tipo formulario enviado o producto a\u00f1adido a la cesta pueden repercutir negativamente en esta m\u00e9trica por lo que debe cabiarse para que la respuesta sea inmediata &#8211; por ejemplo un mensaje de \u00abprocesando\u00bb que luego se actualice al valor deseado podr\u00eda funcionar bien.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Un ejemplo de esto ser\u00eda el c\u00f3digo de abajo<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const msgFeedback = document.getElementById(\"msgFeedback\");\nconst formulario = document.getElementById(\"form\");\n\nfomulario.addEventListener(\"submit\", (evt) => {\n  evt.preventDefault();\n  msgFeedback.innerText = \"Procesando... por favor espere\";\n\n  let headers = new Headers({ Accept: \"application\/json\" });\n  let formData = new FormData(formulario);\n  fetch(\"\/enviar-formulario\", { method: \"POST\", headers, body: formData })\n    .then(function (response) {\n      return response.json();\n    })\n    .then(function (jsonData) {\n      formulario.reset();\n      msgFeedback.innerText = jsonData.message;\n    });\n});<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Apenas el usuario interactua, esto es en el ejemplo enviar un formulario, se despliega un mensaje \u00abprocesadndo&#8230; por favor espere\u00bb y una vez tenemos la respuesta del servidor volvemos a actualizar la pantalla.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Esta es tan solo la mejora m\u00e1s obvia pero hay otros apartados que necesitan atenci\u00f3n pues muchos plugins de wordpress retrasan la carga de los ficheros javascript para mejorar las m\u00e9tricas, esto puede estar afectando el valor de INP de forma negativa pues si el usuario intenta interactuar antes de la carga completa seguramente falle.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Necesitamos entonces identificar los scripts de las interacciones y darles prioridad de carga, optimizarlos y en algunos casos cambiar por completo la l\u00f3gica de estos para que esta m\u00e9trica tenga un valor acorde al est\u00e1ndar esperado.<\/p>\n\n\n<div class=\"kk-star-ratings kksr-auto kksr-align-center kksr-valign-bottom\"\n    data-payload='{&quot;align&quot;:&quot;center&quot;,&quot;id&quot;:&quot;20930&quot;,&quot;slug&quot;:&quot;default&quot;,&quot;valign&quot;:&quot;bottom&quot;,&quot;ignore&quot;:&quot;&quot;,&quot;reference&quot;:&quot;auto&quot;,&quot;class&quot;:&quot;&quot;,&quot;count&quot;:&quot;7&quot;,&quot;legendonly&quot;:&quot;&quot;,&quot;readonly&quot;:&quot;&quot;,&quot;score&quot;:&quot;5&quot;,&quot;starsonly&quot;:&quot;&quot;,&quot;best&quot;:&quot;5&quot;,&quot;gap&quot;:&quot;5&quot;,&quot;greet&quot;:&quot;&quot;,&quot;legend&quot;:&quot;5\\\/5 - (7 votos)&quot;,&quot;size&quot;:&quot;24&quot;,&quot;title&quot;:&quot;\u00bfQu\u00e9 es Interaction To Next Paint (INP)?&quot;,&quot;width&quot;:&quot;142.5&quot;,&quot;_legend&quot;:&quot;{score}\\\/{best} - ({count} {votes})&quot;,&quot;font_factor&quot;:&quot;1.25&quot;}'>\n            \n<div class=\"kksr-stars\">\n    \n<div class=\"kksr-stars-inactive\">\n            <div class=\"kksr-star\" data-star=\"1\" style=\"padding-right: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 24px; height: 24px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"2\" style=\"padding-right: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 24px; height: 24px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"3\" style=\"padding-right: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 24px; height: 24px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"4\" style=\"padding-right: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 24px; height: 24px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"5\" style=\"padding-right: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 24px; height: 24px;\"><\/div>\n        <\/div>\n    <\/div>\n    \n<div class=\"kksr-stars-active\" style=\"width: 142.5px;\">\n            <div class=\"kksr-star\" style=\"padding-right: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 24px; height: 24px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 24px; height: 24px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 24px; height: 24px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 24px; height: 24px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 24px; height: 24px;\"><\/div>\n        <\/div>\n    <\/div>\n<\/div>\n                \n\n<div class=\"kksr-legend\" style=\"font-size: 19.2px;\">\n            5\/5 - (7 votos)    <\/div>\n    <\/div>\n","protected":false},"excerpt":{"rendered":"<p>Interaction to Next Paint (INP) o en Espa\u00f1ol \u00abInteracci\u00f3n a Nueva Pintada\u00bb es una nueva m\u00e9trica introducida por Google y que se encuentra en estado experimental, m\u00e9trica que se encarga de medir capacidad de respuesta de una p\u00e1gina web a lo largo de todas las interacciones en una p\u00e1gina. Una INP baja garantiza que la [&hellip;]<\/p>\n","protected":false},"author":14,"featured_media":20931,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1312],"tags":[],"class_list":["post-20930","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-seo"],"_links":{"self":[{"href":"https:\/\/www.movilesdualsim.com\/blog\/wp-json\/wp\/v2\/posts\/20930","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.movilesdualsim.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.movilesdualsim.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.movilesdualsim.com\/blog\/wp-json\/wp\/v2\/users\/14"}],"replies":[{"embeddable":true,"href":"https:\/\/www.movilesdualsim.com\/blog\/wp-json\/wp\/v2\/comments?post=20930"}],"version-history":[{"count":0,"href":"https:\/\/www.movilesdualsim.com\/blog\/wp-json\/wp\/v2\/posts\/20930\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.movilesdualsim.com\/blog\/wp-json\/wp\/v2\/media\/20931"}],"wp:attachment":[{"href":"https:\/\/www.movilesdualsim.com\/blog\/wp-json\/wp\/v2\/media?parent=20930"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.movilesdualsim.com\/blog\/wp-json\/wp\/v2\/categories?post=20930"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.movilesdualsim.com\/blog\/wp-json\/wp\/v2\/tags?post=20930"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}