{"id":124969,"date":"2023-07-20T00:13:43","date_gmt":"2023-07-19T22:13:43","guid":{"rendered":"https:\/\/quondos.com\/mag\/?p=124969"},"modified":"2023-07-27T12:04:09","modified_gmt":"2023-07-27T10:04:09","slug":"interaction-to-next-paint-inp-guia-completa","status":"publish","type":"post","link":"https:\/\/quondos.com\/mag\/interaction-to-next-paint-inp-guia-completa\/","title":{"rendered":"Interaction to Next Paint (INP) Gu\u00eda completa"},"content":{"rendered":"\n<p>El pasado 10 de mayo Google daba el pistoletazo de salida a la <strong>implementaci\u00f3n del INP<\/strong>, <strong>Interaction to Next Paint<\/strong>, la <strong>nueva m\u00e9trica de las Core Web Vitals<\/strong>, que sustituir\u00e1 al FID el <strong>pr\u00f3ximo marzo de 2024<\/strong>.<\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_76 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">\u00cdndice de contenidos<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Alternar tabla de contenidos\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/quondos.com\/mag\/interaction-to-next-paint-inp-guia-completa\/#Explicacion_del_INP_en_video\" >Explicaci\u00f3n del INP en v\u00eddeo<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/quondos.com\/mag\/interaction-to-next-paint-inp-guia-completa\/#%C2%BFQue_es_el_INP_La_nueva_CWV\" >\u00bfQu\u00e9 es el INP? La nueva CWV<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/quondos.com\/mag\/interaction-to-next-paint-inp-guia-completa\/#%C2%BFQue_mide_el_INP\" >\u00bfQu\u00e9 mide el INP?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/quondos.com\/mag\/interaction-to-next-paint-inp-guia-completa\/#Que_valor_de_INP_debemos_tener\" >Qu\u00e9 valor de INP debemos tener<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/quondos.com\/mag\/interaction-to-next-paint-inp-guia-completa\/#Como_medir_nuestro_INP\" >C\u00f3mo medir nuestro INP<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/quondos.com\/mag\/interaction-to-next-paint-inp-guia-completa\/#Que_tener_en_cuenta_para_mejorar_nuestro_INP\" >Qu\u00e9 tener en cuenta para mejorar nuestro INP<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/quondos.com\/mag\/interaction-to-next-paint-inp-guia-completa\/#%C2%BFQue_importancia_tiene_el_INP\" >\u00bfQu\u00e9 importancia tiene el INP?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/quondos.com\/mag\/interaction-to-next-paint-inp-guia-completa\/#Autor_David_Cuesta\" >Autor: David Cuesta<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Explicacion_del_INP_en_video\"><\/span>Explicaci\u00f3n del INP en v\u00eddeo<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<iframe width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/v-jYLKg2X80\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe>\n\n\n\n<p>No ha sido hasta julio que Google nos ha obligado a enterarnos a trav\u00e9s de la alerta de error en Search Console que muchos hemos recibido.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"634\" height=\"321\" src=\"https:\/\/quondos.com\/mag\/wp-content\/uploads\/2023\/07\/error-search-console-INP.jpg\" alt=\"Se han detectado problemas de INP de Core Web Vitals en tus sitios\" class=\"wp-image-124970\" title=\"\" srcset=\"https:\/\/quondos.com\/mag\/wp-content\/uploads\/2023\/07\/error-search-console-INP.jpg 634w, https:\/\/quondos.com\/mag\/wp-content\/uploads\/2023\/07\/error-search-console-INP-300x152.jpg 300w\" sizes=\"auto, (max-width: 634px) 100vw, 634px\" \/><figcaption class=\"wp-element-caption\"><em>Error de Search Console: Se han detectado problemas de INP de Core Web Vitals en tus sitios<\/em><\/figcaption><\/figure><\/div>\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"%C2%BFQue_es_el_INP_La_nueva_CWV\"><\/span>\u00bfQu\u00e9 es el INP? La nueva CWV<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>INP, siglas de \u00abInteracci\u00f3n hasta el siguiente renderizado\u00bb, es una nueva m\u00e9trica de velocidad de usabilidad de p\u00e1ginas web que Google pretende empezar a tener en cuenta en marzo de 2024, aunque ya podemos medirla y recibir errores al respecto en la Search console.<\/p>\n\n\n\n<figure class=\"wp-block-video aligncenter\"><video autoplay loop muted src=\"https:\/\/quondos.com\/mag\/wp-content\/uploads\/2023\/07\/WSmcjiQC4lyLxGoES4dd.mp4\"><\/video><figcaption class=\"wp-element-caption\"><em>Este es un ejemplo de una mala y buena capacidad de respuesta. A la izquierda, tareas largas bloquean la apertura de un acorde\u00f3n, llevando al usuario a hacer clic m\u00faltiples veces creyendo que hay un fallo. Cuando el hilo principal procesa los clics retrasados, el acorde\u00f3n se abre y cierra inesperadamente. Fuente: https:\/\/web.dev\/inp\/<\/em><\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"%C2%BFQue_mide_el_INP\"><\/span>\u00bfQu\u00e9 mide el INP?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>El INP ofrece un valor en milisegundos que es el tiempo que tarda una acci\u00f3n del usuario que conlleve un renderizado en terminar de realizarse. Este renderizado ser\u00eda de cualquier interacci\u00f3n de la p\u00e1gina, a diferencia del FID (First Imput Delay) que med\u00eda la velocidad de respuesta del primer elemento interactivo.<\/p>\n\n\n\n<p class=\"has-base-3-color has-accent-background-color has-text-color has-background\">Ser\u00eda por lo tanto el tiempo que tarda cualquier elemento de la p\u00e1gina que necesite renderizarse o ejecutar alg\u00fan cambio debido a la acci\u00f3n del usuario visitante.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Que_valor_de_INP_debemos_tener\"><\/span>Qu\u00e9 valor de INP debemos tener<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Un buen INP ser\u00e1 aquel que est\u00e9 por debajo de los 200 milisegundos, entre 500 y 200 ser\u00eda normal, y m\u00e1s de 500 milisegundos, ser\u00eda un mal INP.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"754\" height=\"467\" src=\"https:\/\/quondos.com\/mag\/wp-content\/uploads\/2023\/07\/valores-inp.jpg\" alt=\"valores inp\" class=\"wp-image-124971\" title=\"\" srcset=\"https:\/\/quondos.com\/mag\/wp-content\/uploads\/2023\/07\/valores-inp.jpg 754w, https:\/\/quondos.com\/mag\/wp-content\/uploads\/2023\/07\/valores-inp-300x186.jpg 300w\" sizes=\"auto, (max-width: 754px) 100vw, 754px\" \/><figcaption class=\"wp-element-caption\"><em>La vida de una interacci\u00f3n implica un retraso en la entrada hasta que los handlers de eventos comienzan a funcionar, lo cual puede ser causado por tareas largas en el hilo principal. Luego se ejecutan los handlers de eventos de la interacci\u00f3n, y ocurre un retraso antes de presentar el siguiente frame. Fuente: https:\/\/web.dev\/inp\/<\/em><\/figcaption><\/figure><\/div>\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Como_medir_nuestro_INP\"><\/span>C\u00f3mo medir nuestro INP<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>De momento la forma m\u00e1s sencilla de medirlo es con la <a href=\"https:\/\/chrome.google.com\/webstore\/detail\/web-vitals\/ahfhijdlegdabablpippeagghigmibma\/\" target=\"_blank\" rel=\"noreferrer noopener\">extensi\u00f3n Web Vitals<\/a><\/p>\n\n\n\n<p>Para usarla:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Vas a una URL de tu web que quieras medir<\/li>\n\n\n\n<li>Activas aquel disparador (bot\u00f3n, elemento, lo que sea que realice una acci\u00f3n) que deseas medir<\/li>\n\n\n\n<li>Clicas en la extensi\u00f3n para ver el valor de INP<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/quondos.com\/mag\/wp-content\/uploads\/2023\/07\/core-web-vitals.jpg\" alt=\"core web vitals\" class=\"wp-image-124972\" width=\"557\" height=\"542\" title=\"\" srcset=\"https:\/\/quondos.com\/mag\/wp-content\/uploads\/2023\/07\/core-web-vitals.jpg 557w, https:\/\/quondos.com\/mag\/wp-content\/uploads\/2023\/07\/core-web-vitals-300x292.jpg 300w\" sizes=\"auto, (max-width: 557px) 100vw, 557px\" \/><figcaption class=\"wp-element-caption\">Captura de la extensi\u00f3n Web Vitals<\/figcaption><\/figure><\/div>\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Que_tener_en_cuenta_para_mejorar_nuestro_INP\"><\/span>Qu\u00e9 tener en cuenta para mejorar nuestro INP<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Para mejorar el tiempo de respuesta ante la interactuaci\u00f3n de los usuarios, lo mejor es trabajar en optimizar el hilo principal.<\/p>\n\n\n\n<p>Hilo principal es la cadena de carga de todos los elementos de una URL.<\/p>\n\n\n\n<p>Para mejorar el hilo principal, debemos enfocarnos en reducir la cantidad de c\u00f3digo que se requiere cargar en una URL, esto se logra reduciendo el c\u00f3digo de terceros que carga en la URL.<\/p>\n\n\n\n<p>Debemos reducir la cantidad de plugins o funcionalidades del tema. Tambi\u00e9n evitar las fuentes de terceros.<\/p>\n\n\n\n<p>Pero la mejora de INP tambi\u00e9n implica un trabajo t\u00e9cnico sobre el javascript que se cargue en la URL, revisando que todo el javascript que se carga funcione correctamente.<\/p>\n\n\n\n<p>Por \u00faltimo, la carga de im\u00e1genes, botones, animaciones, y cualquier otro elemento que var\u00ede en la URL tambi\u00e9n afectar\u00e1 al INP.<\/p>\n\n\n\n<p>Si quieres optimizar al m\u00e1ximo el INP necesitar\u00e1s conocimientos t\u00e9cnicos, si ya los tienes, esta gu\u00eda de Google te ayudar\u00e1: https:\/\/web.dev\/optimize-inp\/<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"%C2%BFQue_importancia_tiene_el_INP\"><\/span>\u00bfQu\u00e9 importancia tiene el INP?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Seg\u00fan Google, el 93% de las cargas de webs en dispositivos m\u00f3viles tienen un FID positivo.<\/p>\n\n\n\n<p>Sin embargo, solo el 65% de las mismas cargas superan la m\u00e9trica INP, por lo que esta es mucho m\u00e1s restrictiva, y har\u00e1 que cumplir con esta m\u00e9trica pueda merecer la pena frente a la competencia.<\/p>\n\n\n\n<p>Es importante recordar que hasta marzo del 2024 no necesitamos preocuparnos, aunque ya podemos ir d\u00e1ndole una vuelta.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Autor_David_Cuesta\"><\/span>Autor: David Cuesta<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Este post y breve gu\u00eda ha sido escrito por <a href=\"https:\/\/www.linkedin.com\/in\/davidcuestachavez\/\" target=\"_blank\" rel=\"noreferrer noopener\">David Cuesta<\/a>, especialista SEO, fundador del ChorriClub y director de la agencia AMDSEO.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>El pasado 10 de mayo Google daba el pistoletazo de salida a la implementaci\u00f3n del INP, Interaction to Next Paint, &#8230; <\/p>\n<p class=\"read-more-container\"><a title=\"Interaction to Next Paint (INP) Gu\u00eda completa\" class=\"read-more button\" href=\"https:\/\/quondos.com\/mag\/interaction-to-next-paint-inp-guia-completa\/#more-124969\" aria-label=\"Leer m\u00e1s sobre Interaction to Next Paint (INP) Gu\u00eda completa\">Leer m\u00e1s<\/a><\/p>\n","protected":false},"author":2,"featured_media":124152,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[236],"tags":[],"class_list":["post-124969","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-seo","generate-columns","tablet-grid-50","mobile-grid-100","grid-parent","grid-50","no-featured-image-padding"],"_links":{"self":[{"href":"https:\/\/quondos.com\/mag\/wp-json\/wp\/v2\/posts\/124969","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/quondos.com\/mag\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/quondos.com\/mag\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/quondos.com\/mag\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/quondos.com\/mag\/wp-json\/wp\/v2\/comments?post=124969"}],"version-history":[{"count":6,"href":"https:\/\/quondos.com\/mag\/wp-json\/wp\/v2\/posts\/124969\/revisions"}],"predecessor-version":[{"id":125025,"href":"https:\/\/quondos.com\/mag\/wp-json\/wp\/v2\/posts\/124969\/revisions\/125025"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/quondos.com\/mag\/wp-json\/wp\/v2\/media\/124152"}],"wp:attachment":[{"href":"https:\/\/quondos.com\/mag\/wp-json\/wp\/v2\/media?parent=124969"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/quondos.com\/mag\/wp-json\/wp\/v2\/categories?post=124969"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/quondos.com\/mag\/wp-json\/wp\/v2\/tags?post=124969"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}