{"id":41095,"date":"2024-07-25T16:52:40","date_gmt":"2024-07-25T14:52:40","guid":{"rendered":"\/tutoriales\/?p=41095"},"modified":"2026-03-10T16:43:10","modified_gmt":"2026-03-10T15:43:10","slug":"interaction-to-next-paint","status":"publish","type":"post","link":"\/co\/tutoriales\/interaction-to-next-paint\/","title":{"rendered":"INP Interaction to Next Paint: nueva m\u00e9trica Core Web Vitals"},"content":{"rendered":"<?xml encoding=\"utf-8\" ?><p class=\"wp-block-paragraph\">Interaction to Next Paint (INP) es una de las m&eacute;tricas de rendimiento que Google ha introducido para medir la capacidad de respuesta de las p&aacute;ginas web.<\/p><p class=\"wp-block-paragraph\">Si quieres mejorar la clasificaci&oacute;n de tu sitio en los motores de b&uacute;squeda, es fundamental que sepas qu&eacute; es la INP y c&oacute;mo optimizarla. De lo contrario, tus p&aacute;ginas podr&iacute;an aparecer peor clasificadas en los resultados de las b&uacute;squedas.<\/p><p class=\"wp-block-paragraph\">Este art&iacute;culo analizar&aacute; la INP con m&aacute;s detalle, incluyendo en qu&eacute; se diferencia de otras m&eacute;tricas de Core Web Vitals y c&oacute;mo medirla para mejorar tu puntuaci&oacute;n actual.<\/p><figure class=\"wp-block-image size-large\"><a href=\"https:\/\/assets.hostinger.com\/content\/tutorials\/pdf\/Speed-Up-Your-Website-ES.pdf\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"1024\" height=\"283\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2022\/12\/eBook-Speed-Up-your-website-ES.png\/w=1024,h=1024,fit=scale-down\" alt=\"\" class=\"wp-image-25983\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2022\/12\/eBook-Speed-Up-your-website-ES.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2022\/12\/eBook-Speed-Up-your-website-ES.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2022\/12\/eBook-Speed-Up-your-website-ES.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2022\/12\/eBook-Speed-Up-your-website-ES.png\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2022\/12\/eBook-Speed-Up-your-website-ES.png\/w=1536,fit=scale-down 1536w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><p class=\"wp-block-paragraph\"><\/p><p class=\"wp-block-paragraph\"><div class=\"protip\"><div class=\"protip__heading\">\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <path d=\"M1.49234 23.5024C1.23229 23.5024 0.972242 23.4024 0.782206 23.2123C0.562165 22.9923 0.452144 22.6822 0.502153 22.3722C0.562165 21.9221 1.14227 17.9113 3.00262 16.351C3.63274 15.8209 4.43289 15.5509 5.26305 15.5609C6.09321 15.5909 6.87335 15.9109 7.47347 16.4911C8.6937 17.6913 8.76371 19.6717 7.6435 20.9919C6.0832 22.8523 2.08245 23.4324 1.63237 23.4924C1.59236 23.4924 1.54235 23.4924 1.50234 23.4924L1.49234 23.5024ZM5.16303 17.5613C4.84297 17.5613 4.53291 17.6713 4.29287 17.8813C3.60274 18.4614 3.07264 19.9317 2.75258 21.242C4.06282 20.9219 5.5331 20.3918 6.11321 19.7017C6.55329 19.1716 6.54329 18.3814 6.0832 17.9213C5.85316 17.7013 5.5431 17.5713 5.20304 17.5613C5.19304 17.5613 5.17303 17.5613 5.16303 17.5613ZM11.7243 21.8821C11.4942 21.8821 11.2642 21.8021 11.0841 21.652C10.8541 21.462 10.7241 21.1819 10.7241 20.8819V15.9109L8.08358 13.2705H3.11264C2.81259 13.2705 2.53254 13.1404 2.3425 12.9104C2.15246 12.6803 2.07245 12.3803 2.12246 12.0902C2.19247 11.7102 2.84259 8.36953 4.70294 7.12929C6.33325 6.04909 8.96375 6.49918 10.244 6.80923C11.5442 4.96889 13.2546 3.4286 15.2349 2.33839C17.4553 1.11816 19.9858 0.518051 22.4963 0.498047C23.0464 0.498047 23.4865 0.948132 23.4865 1.49824C23.4865 5.0389 22.3763 9.97983 17.1753 13.7605C17.4853 15.0408 17.9354 17.6613 16.8552 19.2816C15.615 21.1419 12.2744 21.7921 11.8943 21.8621C11.8343 21.8721 11.7743 21.8821 11.7143 21.8821H11.7243ZM12.7245 16.181V19.6016C13.7146 19.2916 14.7948 18.7915 15.2049 18.1814C15.675 17.4812 15.605 16.091 15.385 14.9008C14.5248 15.3808 13.6346 15.8109 12.7245 16.181ZM9.66388 12.0302L11.9643 14.3307C13.1845 13.8306 14.3648 13.2204 15.485 12.5103C19.9358 9.51974 21.2361 5.60901 21.4561 2.53843C19.6157 2.67846 17.8254 3.20856 16.2051 4.09872C14.2847 5.14892 12.6544 6.68921 11.4942 8.54956C10.7841 9.65977 10.174 10.82 9.66388 12.0302ZM4.39289 11.2701H7.81353C8.1936 10.3599 8.63368 9.46974 9.11377 8.60957C7.92355 8.38953 6.51329 8.31952 5.81315 8.78961C5.19304 9.19968 4.70294 10.3099 4.39289 11.2701Z\" fill=\"#673DE6\"\/>\n                <\/svg>\n                <p class=\"protip__title\">\n                   &iquest;Qu&eacute; es la Interaction to Next Paint (INP)?\n                <\/p>\n            <\/div>\n            <p class=\"protip__content\">Interaction to Next Paint (INP) es una m&eacute;trica de Core Web Vitals que mide el tiempo de respuesta de las p&aacute;ginas web. Determina lo r&aacute;pido que se actualiza una p&aacute;gina web despu&eacute;s de que un usuario interact&uacute;e con ella, por ejemplo, haciendo clic en un enlace o pulsando un bot&oacute;n.<\/p><\/div><\/p><h2 class=\"wp-block-heading\" id=\"h-como-funciona-la-interaction-to-next-paint-inp\">C&oacute;mo funciona la Interaction to Next Paint (INP)<\/h2><p class=\"wp-block-paragraph\">Como m&eacute;trica de capacidad de respuesta, la INP se centra en el retardo de la interacci&oacute;n con el usuario. Mide la rapidez con la que responder&aacute; un elemento de una p&aacute;gina web despu&eacute;s de que realices una determinada acci&oacute;n sobre &eacute;l.<\/p><p class=\"wp-block-paragraph\">As&iacute; es como funciona la INP:<\/p><ol class=\"wp-block-list\">\n<li>Un usuario interact&uacute;a con una p&aacute;gina web, por ejemplo haciendo clic en un bot&oacute;n.<\/li>\n\n\n\n<li>El navegador env&iacute;a una petici&oacute;n al servidor web para obtener el nuevo contenido.<\/li>\n\n\n\n<li>El servidor web env&iacute;a el nuevo contenido al navegador.<\/li>\n\n\n\n<li>El navegador muestra el nuevo contenido en la p&aacute;gina.<\/li>\n\n\n\n<li>El navegador mide el tiempo que tarda en renderizar el nuevo contenido y lo comunica como puntuaci&oacute;n INP.<\/li>\n<\/ol><p class=\"wp-block-paragraph\">Un valor de INP bajo significa que la p&aacute;gina es muy receptiva a la interacci&oacute;n del usuario.<\/p><p class=\"wp-block-paragraph\">Como parte de <a href=\"\/co\/tutoriales\/core-web-vitals\/\">Core Web Vitals<\/a>, INP es importante por las siguientes razones:<\/p><ul class=\"wp-block-list\">\n<li><strong>Mejora de la experiencia del usuario: <\/strong>un valor INP alto significa que los usuarios tienen que esperar mucho tiempo a que la p&aacute;gina web reaccione a sus interacciones, lo que puede resultar frustrante.<\/li>\n\n\n\n<li><a href=\"\/co\/tutoriales\/que-es-seo\/\">Optimizaci&oacute;n de motores de b&uacute;squeda (SEO)<\/a><strong>: <\/strong>la<strong> INP <\/strong>y otras Core Web Vitals forman parte de las <a href=\"https:\/\/developers.google.com\/search\/blog\/2020\/05\/evaluating-page-experience?hl=es\" target=\"_blank\" rel=\"noreferrer noopener\">se&ntilde;ales de experiencia de p&aacute;gina<\/a> de Google, que determinan el rango de un sitio web en sus p&aacute;ginas de resultados. Esto hace que la m&eacute;trica INP SEO sea especialmente importante.<\/li>\n\n\n\n<li><strong>Menor tasa de rebote: <\/strong>un tiempo de carga lento puede hacer que los usuarios abandonen la p&aacute;gina, perjudicando los resultados de tu negocio.<\/li>\n<\/ul><figure class=\"wp-block-image size-large\"><a href=\"\/co\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"1024\" height=\"300\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2023\/02\/ES-Web-hosting_in-text-banner.png\/w=1024,h=1024,fit=scale-down\" alt=\"\" class=\"wp-image-29291\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2023\/02\/ES-Web-hosting_in-text-banner.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2023\/02\/ES-Web-hosting_in-text-banner.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2023\/02\/ES-Web-hosting_in-text-banner.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2023\/02\/ES-Web-hosting_in-text-banner.png\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2023\/02\/ES-Web-hosting_in-text-banner.png\/w=1536,fit=scale-down 1536w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><h3 class=\"wp-block-heading\" id=\"h-interaction-to-next-paint-inp-como-core-web-vital\">Interaction to Next Paint (INP) como Core Web Vital<\/h3><p class=\"wp-block-paragraph\">La INP sustituy&oacute; a la m&eacute;trica <a href=\"https:\/\/web.dev\/blog\/inp-cwv-march-12?hl=es-419\" target=\"_blank\" rel=\"noreferrer noopener\">First Input Delay (FID)<\/a> en marzo de 2024. INP y FID son similares, pero funcionan de forma diferente.<\/p><p class=\"wp-block-paragraph\">La FID mide la capacidad de respuesta de carga de la p&aacute;gina s&oacute;lo cuando se abre el sitio web por primera vez. Por otro lado, la m&eacute;trica INP de Google tiene en cuenta todos los retrasos en la interacci&oacute;n del usuario a lo largo de toda la visita, despu&eacute;s de que la p&aacute;gina se haya cargado.<\/p><p class=\"wp-block-paragraph\">Seg&uacute;n los datos de Google, la mayor parte del tiempo que un usuario pasa en una p&aacute;gina web es despu&eacute;s de que se cargue. Por ello, la INP puede medir la interactividad de la p&aacute;gina de forma mucho m&aacute;s eficaz que la FID.<\/p><p class=\"wp-block-paragraph\">INP tambi&eacute;n difiere de otras Core Web Vitals como Cumulative Layout Shift (CLS) y <a href=\"\/co\/tutoriales\/largest-contentful-paint\/\">Large Contentful Paint (LCP)<\/a>. CLS eval&uacute;a cu&aacute;nto puede desplazarse inesperadamente un sitio web, mientras que LCP determina la rapidez con que una p&aacute;gina web muestra sus elementos m&aacute;s grandes.<\/p><h2 class=\"wp-block-heading\" id=\"h-como-medir-la-interaction-to-next-paint-inp\">C&oacute;mo medir la Interaction to Next Paint (INP)<\/h2><p class=\"wp-block-paragraph\">Antes de iniciar la medici&oacute;n de Interaction to Next Paint, veamos qu&eacute; significan los valores INP.<\/p><p class=\"wp-block-paragraph\">El INP se mide en milisegundos (ms). Un valor de referencia <strong>Bueno <\/strong>es inferior a 200 ms y todo lo que est&eacute; entre ese valor y 500 ms se considera que <strong>Necesita mejorar<\/strong>. 500 ms o m&aacute;s se considera <strong>Deficiente<\/strong>.<\/p><figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1024\" height=\"406\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2024\/07\/inp.png\/public\" alt=\"C&oacute;mo medir la Interaction to Next Paint (INP)\" class=\"wp-image-41097\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2024\/07\/inp.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2024\/07\/inp.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2024\/07\/inp.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2024\/07\/inp.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><p class=\"wp-block-paragraph\">Varios factores pueden afectar a un valor INP, como el tama&ntilde;o y la complejidad de una p&aacute;gina web, as&iacute; como el n&uacute;mero de archivos JavaScript y CSS cargados.<\/p><p class=\"wp-block-paragraph\">Puedes medir el valor INP de un sitio web utilizando herramientas de <a href=\"\/co\/tutoriales\/test-velocidad-web\/\">prueba de velocidad de sitios web<\/a>. Este tipo de aplicaci&oacute;n puede proporcionar informaci&oacute;n sobre el rendimiento de tus m&eacute;tricas de Core Web Vitals y sobre c&oacute;mo optimizarlas.<\/p><p class=\"wp-block-paragraph\"><a href=\"https:\/\/pagespeed.web.dev\/\" target=\"_blank\" rel=\"noreferrer noopener\">Google PageSpeed Insights<\/a> es una opci&oacute;n popular para medir la INP y el rendimiento del sitio web. Realizar&aacute; una auditor&iacute;a de un sitio y proporcionar&aacute; detalles sobre las mejores pr&aacute;cticas que se deben aplicar. Tambi&eacute;n puedes ver la velocidad de tu sitio cuando se carga en dispositivos m&oacute;viles y de escritorio.<\/p><p class=\"wp-block-paragraph\">PageSpeed Insights muestra dos tipos de resultados. La secci&oacute;n superior muestra las m&eacute;tricas de Core Web Vitals de un sitio a partir del <a href=\"https:\/\/developer.chrome.com\/blog\/chrome-ux-report-pagespeed-insights?hl=es-419\" target=\"_blank\" rel=\"noreferrer noopener\">informe Chrome UX<\/a>, una recopilaci&oacute;n de datos de rendimiento reales de usuarios de Chrome.<\/p><figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1024\" height=\"462\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2024\/07\/informe-pagespeed-insights.png\/public\" alt=\"Informe de PageSpeed Insights\" class=\"wp-image-41098\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2024\/07\/informe-pagespeed-insights.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2024\/07\/informe-pagespeed-insights.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2024\/07\/informe-pagespeed-insights.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2024\/07\/informe-pagespeed-insights.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><p class=\"wp-block-paragraph\">El siguiente informe muestra las mismas m&eacute;tricas, pero proceden de un entorno de laboratorio controlado que se ejecuta en Google Lighthouse. Estos datos pueden ser &uacute;tiles para probar nuevas funciones antes de publicarlas en directo.<\/p><figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1024\" height=\"586\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2024\/07\/PageSpeed-Insights.png\/public\" alt=\"Informe de PageSpeed Insights\" class=\"wp-image-41099\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2024\/07\/PageSpeed-Insights.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2024\/07\/PageSpeed-Insights.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2024\/07\/PageSpeed-Insights.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2024\/07\/PageSpeed-Insights.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><p class=\"wp-block-paragraph\">Si los datos INP del sitio no est&aacute;n disponibles, comprueba su Tiempo Total de Bloqueo (TBT). Esta m&eacute;trica mide un tipo diferente de capacidad de respuesta. Se centra en el tiempo que una p&aacute;gina est&aacute; bloqueada para responder a la interacci&oacute;n durante la carga de la p&aacute;gina.<\/p><p class=\"wp-block-paragraph\">Hacia la parte inferior, hay sugerencias sobre c&oacute;mo mejorar las m&eacute;tricas de Core Web Vitals, as&iacute;:<\/p><figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1024\" height=\"457\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2024\/07\/sugerencias-PageSpeed-Insights.png\/public\" alt=\"Sugerencias de PageSpeed Insights\" class=\"wp-image-41100\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2024\/07\/sugerencias-PageSpeed-Insights.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2024\/07\/sugerencias-PageSpeed-Insights.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2024\/07\/sugerencias-PageSpeed-Insights.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2024\/07\/sugerencias-PageSpeed-Insights.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><p class=\"wp-block-paragraph\">Los clientes de Hostinger pueden utilizar la <a href=\"https:\/\/support.hostinger.com\/es\/articles\/6104420-como-analizar-la-velocidad-de-un-sitio-web-en-hpanel\" target=\"_blank\" rel=\"noreferrer noopener\">integraci&oacute;n de PageSpeed Insights<\/a> en hPanel. Abre el panel de tu cuenta de <strong>Panel<\/strong> &rarr; <strong>Rendimiento <\/strong>&rarr; <strong>Velocidad de p&aacute;gina <\/strong>para acceder a ella.<\/p><figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1024\" height=\"705\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2024\/07\/velocidad-de-pagina-hpanel.png\/public\" alt=\"Velocidad de p&aacute;gina en hPanel\" class=\"wp-image-41101\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2024\/07\/velocidad-de-pagina-hpanel.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2024\/07\/velocidad-de-pagina-hpanel.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2024\/07\/velocidad-de-pagina-hpanel.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2024\/07\/velocidad-de-pagina-hpanel.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><h2 class=\"wp-block-heading\" id=\"h-como-optimizar-la-interaction-to-next-paint-inp\">C&oacute;mo optimizar la Interaction to Next Paint (INP)<\/h2><p class=\"wp-block-paragraph\">Hablemos de c&oacute;mo realizar la optimizaci&oacute;n INP en tu sitio web.<\/p><p class=\"wp-block-paragraph\"><div class=\"announcement-block announcement-block--important\">\n            <span class=\"announcement-block__heading\">\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n                          d=\"M12 22.5C17.799 22.5 22.5 17.799 22.5 12C22.5 6.20101 17.799 1.5 12 1.5C6.20101 1.5 1.5 6.20101 1.5 12C1.5 17.799 6.20101 22.5 12 22.5ZM13.637 7.65198C13.637 6.74791 12.9041 6.01501 12 6.01501C11.0959 6.01501 10.363 6.74791 10.363 7.65198C10.5335 9.53749 10.875 13.383 10.875 13.383C10.875 14.0043 11.3787 14.508 12 14.508C12.6213 14.508 13.125 14.0043 13.125 13.383V13.38L13.637 7.65198ZM11.9927 15.714C11.3714 15.714 10.8677 16.2177 10.8677 16.839C10.8677 17.4603 11.3714 17.964 11.9927 17.964H12.0073C12.6286 17.964 13.1323 17.4603 13.1323 16.839C13.1323 16.2177 12.6286 15.714 12.0073 15.714H11.9927Z\"\n                          fill=\"#FEA419\"\/>\n                <\/svg>\n                Important\n            <\/span>\n            <p class=\"announcement-block__content\">\n                <strong>&iexcl;Importante!<\/strong> La mayor&iacute;a de estos m&eacute;todos requieren ciertos conocimientos t&eacute;cnicos de JavaScript. Antes de realizar cambios en tu sitio web, aseg&uacute;rate de <a href=\"\/co\/tutoriales\/que-es-un-backup-web-y-como-hacerlo\/\">hacer una copia de seguridad<\/a> por si se producen errores.\n            <\/p><\/div><\/p><h3 class=\"wp-block-heading\" id=\"h-1-optimiza-la-ejecucion-de-javascript\">1. Optimiza la ejecuci&oacute;n de JavaScript<\/h3><p class=\"wp-block-paragraph\"><a href=\"\/co\/tutoriales\/que-es-javascript-introduccion-basica\/\">JavaScript es<\/a> un componente importante de muchas p&aacute;ginas web. A&ntilde;ade varios elementos interactivos, pero tambi&eacute;n puede ralentizar el rendimiento del sitio.<\/p><p class=\"wp-block-paragraph\">Cuando se ejecuta, JavaScript se ejecuta en el hilo principal, el responsable de renderizar una p&aacute;gina web. Si el c&oacute;digo es ineficiente, puede bloquear el hilo e impedir que la p&aacute;gina responda a la interacci&oacute;n del usuario.<\/p><p class=\"wp-block-paragraph\">La clave para acelerar la capacidad de respuesta es optimizar tu JavaScript, lo que puedes hacer de la siguiente manera:<\/p><ul class=\"wp-block-list\">\n<li><a href=\"\/co\/tutoriales\/minificar-html\/\">Minificar archivos JavaScript<\/a>: reducir&aacute; el tama&ntilde;o del JavaScript, haciendo que se carguen m&aacute;s r&aacute;pido.<\/li>\n\n\n\n<li><strong>Activar la compresi&oacute;n GZip: <\/strong>otro m&eacute;todo popular para hacer m&aacute;s peque&ntilde;os los archivos y datos del sitio.<\/li>\n\n\n\n<li><strong>Utilizar un framework de JavaScript:<\/strong> esta herramienta puede ayudar a organizar tu c&oacute;digo JavaScript para hacerlo m&aacute;s eficiente. AngularJS y <a href=\"\/co\/tutoriales\/que-es-jquery\/\">jQuery<\/a> son algunos ejemplos bien conocidos.<\/li>\n\n\n\n<li><a href=\"\/co\/tutoriales\/que-es-cdn\/\">Usar una CDN<\/a><strong>:<\/strong> abreviatura de red de entrega de contenidos, esta funci&oacute;n entregar&aacute; tus archivos JavaScript desde servidores cercanos a tu p&uacute;blico objetivo, mejorando los tiempos de carga. Para utilizar la CDN interna de Hostinger, los usuarios deben contratar un plan de <a href=\"\/co\/hosting-web\">alojamiento web<\/a> Business o superior.<\/li>\n<\/ul><figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1024\" height=\"728\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2024\/07\/optimizacion-web-hpanel.png\/public\" alt=\"Optimizaci&oacute;n web en hPanel\" class=\"wp-image-41102\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2024\/07\/optimizacion-web-hpanel.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2024\/07\/optimizacion-web-hpanel.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2024\/07\/optimizacion-web-hpanel.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2024\/07\/optimizacion-web-hpanel.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><h3 class=\"wp-block-heading\" id=\"h-2-utiliza-web-workers\">2. Utiliza Web Workers<\/h3><p class=\"wp-block-paragraph\">Los Web Workers son un servicio que permite que JavaScript se ejecute independientemente del hilo principal. Son &uacute;tiles para ejecutar operaciones complejas en segundo plano.<\/p><p class=\"wp-block-paragraph\">Digamos que tienes un sitio web de WordPress lleno de im&aacute;genes, v&iacute;deos y datos. Los Web Workers pueden descargar estos pesados c&aacute;lculos de JavaScript a un subproceso en segundo plano para evitar que se congele tu interfaz.<\/p><p class=\"wp-block-paragraph\">Para utilizar web workers, necesitar&aacute;s crear dos archivos JavaScript. Uno es el <strong>main.js <\/strong>para iniciar las tareas del script web worker:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ main.js\nif (window.Worker) {\n  \/\/ Create a new worker instance\n  const myWorker = new Worker('worker-script.js');\n  \/\/ Send a message to the worker\n  myWorker.postMessage('Hello Worker!');\n  \/\/ Listen for messages from the worker\n  myWorker.onmessage = function(e) {\n    console.log('Message received from worker', e.data);\n  };\n} else {\n  console.log('Your browser does not support Web Workers.');\n}<\/pre><p class=\"wp-block-paragraph\">Otro es <strong>worker.js<\/strong>, que contiene las tareas del web worker. Aqu&iacute; un ejemplo simplificado:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ worker.js\nonmessage = function(e) {\n  console.log('Message received from main script', e.data);\n  \/\/ Perform heavy computation or data processing here\n  \/\/ Then send a message back to the main script\n  postMessage('Hello Main Script!');\n}<\/pre><p class=\"wp-block-paragraph\">Para incluir estos scripts en tu sitio web, consulta la documentaci&oacute;n de tu tecnolog&iacute;a o plataforma espec&iacute;fica y sigue el proceso est&aacute;ndar.<\/p><p class=\"wp-block-paragraph\">Para los usuarios de WordPress, utiliza la funci&oacute;n <a href=\"\/co\/tutoriales\/wp_enqueue_scripts\/\">wp_enqueue_script<\/a> para incluir scripts de web worker en el archivo functions.php de tu tema.<\/p><h3 class=\"wp-block-heading\" id=\"h-3-divide-las-tareas-largas\">3. Divide las tareas largas<\/h3><p class=\"wp-block-paragraph\">Dividir las tareas largas de JavaScript es otra forma de evitar el bloqueo del hilo principal. Utilicemos un ejemplo de compradores online navegando por un sitio de comercio electr&oacute;nico.&nbsp;<\/p><p class=\"wp-block-paragraph\">Sin dividir las tareas largas, el subproceso principal tiene que obtener, procesar y procesar grandes cantidades de datos de productos e im&aacute;genes simult&aacute;neamente, lo que consume mucho tiempo y recursos.<\/p><p class=\"wp-block-paragraph\">Mientras ocurre este proceso, el hilo principal est&aacute; ocupado. Esto hace que el sitio web se cargue lentamente y no pueda responder a la siguiente interacci&oacute;n del usuario.<\/p><p class=\"wp-block-paragraph\">Dividir las tareas largas permite al navegador web manejar trozos m&aacute;s peque&ntilde;os cada vez. Como resultado, el hilo principal queda libre para realizar tareas m&aacute;s esenciales.<\/p><p class=\"wp-block-paragraph\">Puedes utilizar dos tipos de c&oacute;digo para separar las tareas largas:<\/p><ul class=\"wp-block-list\">\n<li><strong>setTimeout<\/strong>: funci&oacute;n incorporada en JavaScript que programa una tarea espec&iacute;fica para que se ejecute tras un cierto retardo en milisegundos. Puede aplazar la ejecuci&oacute;n a un momento posterior, evitando que el hilo principal quede bloqueado durante un periodo prolongado.<\/li>\n\n\n\n<li><a href=\"https:\/\/developer.mozilla.org\/es\/docs\/Web\/API\/Window\/requestIdleCallback\" target=\"_blank\" rel=\"noreferrer noopener\">requestIdleCallback<\/a><strong>: <\/strong>esta API proporciona un enfoque m&aacute;s eficiente, ya que garantiza que las funciones se ejecuten durante los periodos de tiempo inactivo. Tambi&eacute;n ofrece un par&aacute;metro de fecha l&iacute;mite, que te permite controlar cu&aacute;nto tiempo puede durar la tarea sin afectar a procesos importantes.<\/li>\n<\/ul><h3 class=\"wp-block-heading\" id=\"h-4-prioriza-la-preparacion-de-las-entradas\">4. Prioriza la preparaci&oacute;n de las entradas<\/h3><p class=\"wp-block-paragraph\">La disponibilidad de entrada se refiere a cu&aacute;ndo una p&aacute;gina web est&aacute; preparada para responder a la interacci&oacute;n del usuario. Cuando no lo est&aacute;, suele significar que el hilo principal del navegador est&aacute; ocupado realizando otras tareas.<\/p><p class=\"wp-block-paragraph\">Ac&aacute; c&oacute;mo priorizar la preparaci&oacute;n de la entrada para mejorar la INP:<\/p><ul class=\"wp-block-list\">\n<li><strong>Aplazar JavaScript no cr&iacute;tico<\/strong>:<strong> <\/strong>algunos JavaScript no son esenciales para la carga inicial de la p&aacute;gina y pueden ejecutarse despu&eacute;s del contenido principal. Esto permite al hilo principal dar prioridad a las interacciones del usuario y mejorar la capacidad de respuesta general de la p&aacute;gina.<\/li>\n\n\n\n<li><strong>Estrangulamiento:<\/strong> esta t&eacute;cnica controla la frecuencia de ejecuci&oacute;n de una funci&oacute;n. Por ejemplo, cuando los usuarios se desplazan hacia abajo, ese evento puede disparar el mismo c&oacute;digo cientos de veces por segundo. El throttling permite que s&oacute;lo se ejecute una vez cada milisegundo aproximadamente, independientemente de cu&aacute;ntas veces se dispare realmente el evento.<\/li>\n\n\n\n<li><strong>Rebote: <\/strong>esto impide que una funci&oacute;n vuelva a ejecutarse hasta que haya transcurrido cierto tiempo. Por ejemplo, cuando los usuarios cambian el tama&ntilde;o de la ventana del navegador, este evento puede activar el mismo proceso repetidamente. El rebote puede retrasar su ejecuci&oacute;n hasta que el usuario deje de cambiar el tama&ntilde;o durante un tiempo determinado.<\/li>\n\n\n\n<li><strong>Escuchadores de eventos pasivos: <\/strong>los escuchadores de eventos son construcciones de programaci&oacute;n que detectan eventos espec&iacute;ficos, como desplazamientos y toques. Hacerlos pasivos le dir&aacute; al navegador que no espere a que una determinada funci&oacute;n termine de ejecutarse y contin&uacute;e con otras tareas mientras tanto.<\/li>\n<\/ul><h3 class=\"wp-block-heading\" id=\"h-5-proporciona-retroalimentacion-inmediata\">5. Proporciona retroalimentaci&oacute;n inmediata<\/h3><p class=\"wp-block-paragraph\">Algunas interacciones pueden provocar retrasos notables en la respuesta, como el env&iacute;o de un formulario con varias entradas de datos.<\/p><p class=\"wp-block-paragraph\">Ah&iacute; es donde entra en juego la respuesta inmediata. Esta t&aacute;ctica proporciona a los usuarios una indicaci&oacute;n visual de que el sitio web ha recibido y est&aacute; procesando su solicitud.<\/p><p class=\"wp-block-paragraph\">Con una respuesta inmediata, los usuarios no se preguntar&aacute;n si el sitio web ha registrado su entrada. Puede dar la impresi&oacute;n de un rendimiento m&aacute;s r&aacute;pido, aunque no reduzca el tiempo real de procesamiento.<\/p><p class=\"wp-block-paragraph\">Echa un vistazo a algunos ejemplos de se&ntilde;ales de respuesta inmediata:<\/p><ul class=\"wp-block-list\">\n<li><strong>Indicadores de carga:<\/strong> muestra un spinner o una barra de progreso cuando un proceso est&eacute; en marcha, especialmente al mostrar datos o pasar a una nueva p&aacute;gina.<\/li>\n\n\n\n<li><strong>Ventanas emergentes de confirmaci&oacute;n:<\/strong> para acciones como a&ntilde;adir un art&iacute;culo al carrito, es bueno mostrar un mensaje que confirme que la acci&oacute;n se ha realizado correctamente.<\/li>\n\n\n\n<li><strong>Validaci&oacute;n de campos de formulario:<\/strong> por ejemplo, si un usuario ha introducido una direcci&oacute;n de correo electr&oacute;nico con un formato incorrecto, muestra un mensaje de error inmediatamente en lugar de esperar a que env&iacute;e el formulario.<\/li>\n<\/ul><h2 class=\"wp-block-heading\" id=\"h-que-significa-interaction-to-next-paint-inp-para-los-propietarios-de-sitios-web\">&iquest;Qu&eacute; significa Interaction to Next Paint (INP) para los propietarios de sitios web?<\/h2><p class=\"wp-block-paragraph\">La INP y la clasificaci&oacute;n del sitio web tendr&aacute;n una fuerte correlaci&oacute;n. Si no se optimiza, la velocidad del sitio web, la experiencia del usuario y, a su vez, el rendimiento del tr&aacute;fico org&aacute;nico pueden ser deficientes.<\/p><p class=\"wp-block-paragraph\">De hecho, <a href=\"https:\/\/web.dev\/case-studies\/economic-times-inp?hl=es-419\" target=\"_blank\" rel=\"noreferrer noopener\">Economic Times<\/a> ha demostrado que mejorar la INP tiene importantes beneficios para el negocio. Han reducido su tasa de rebote en <strong>un 50%<\/strong>, lo que significa que es m&aacute;s probable que los visitantes se queden y exploren su contenido.<\/p><p class=\"wp-block-paragraph\">Identificar qu&eacute; hace que la capacidad de respuesta de tu sitio web sea lenta es clave para optimizarlo para la INP. Realiza pruebas de producci&oacute;n, examina c&oacute;mo maneja tu sitio web las entradas del usuario y consulta con un desarrollador web si es necesario.<\/p><h2 class=\"wp-block-heading\" id=\"h-conclusion\">Conclusi&oacute;n<\/h2><p class=\"wp-block-paragraph\">Abreviatura de Interaction to Next Paint, INP es una m&eacute;trica de Core Web Vitals que sustituy&oacute; a FID. Mide el tiempo que tarda un sitio web en responder a la interacci&oacute;n del usuario. Cuanto m&aacute;s baja sea la puntuaci&oacute;n, m&aacute;s r&aacute;pida es la capacidad de respuesta de tu sitio.<\/p><p class=\"wp-block-paragraph\">La diferencia entre INP y FID es que la primera mide todos los retrasos en la interacci&oacute;n del usuario en toda una sesi&oacute;n. La segunda m&eacute;trica se centra en el mismo elemento s&oacute;lo cuando se abre el sitio web por primera vez.<\/p><p class=\"wp-block-paragraph\">Utiliza PageSpeed Insights para medir el INP de tu sitio web. Si los datos no est&aacute;n disponibles, tambi&eacute;n puedes consultar la m&eacute;trica TBT de tu sitio.<\/p><p class=\"wp-block-paragraph\">Optimizar para INP implica varios m&eacute;todos: desde hacer m&aacute;s eficiente la ejecuci&oacute;n de tu JavaScript y utilizar web workers hasta priorizar la preparaci&oacute;n de la entrada.&nbsp;<\/p><p class=\"wp-block-paragraph\">Independientemente del proceso, haz una copia de seguridad de tu sitio web para anticiparte a cualquier error al hacer cambios.<\/p><p class=\"wp-block-paragraph\">Esperamos que esta gu&iacute;a te haya sido de utilidad. Si tienes alg&uacute;n comentario o pregunta, escr&iacute;bela en la secci&oacute;n de abajo. &iexcl;Buena suerte!<\/p><figure class=\"wp-block-image size-large\"><a href=\"\/co\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"1024\" height=\"300\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2023\/02\/ES-Web-hosting_in-text-banner.png\/w=1024,h=1024,fit=scale-down\" alt=\"\" class=\"wp-image-29291\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2023\/02\/ES-Web-hosting_in-text-banner.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2023\/02\/ES-Web-hosting_in-text-banner.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2023\/02\/ES-Web-hosting_in-text-banner.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2023\/02\/ES-Web-hosting_in-text-banner.png\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2023\/02\/ES-Web-hosting_in-text-banner.png\/w=1536,fit=scale-down 1536w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><h2 class=\"wp-block-heading\" id=\"h-interaction-to-next-paint-inp-preguntas-frecuentes\">Interaction to Next Paint (INP) &ndash; Preguntas frecuentes<\/h2><p class=\"wp-block-paragraph\">Consulta las respuestas a las preguntas m&aacute;s comunes sobre el factor de clasificaci&oacute;n INP de Google.<\/p><div id=\"rank-math-faq\" class=\"rank-math-block\">\n<div class=\"rank-math-list \">\n<div id=\"faq-question-69446aaf5740d\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">&iquest;Es el INP una m&eacute;trica b&aacute;sica de Web Vitals?<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>S&iacute;, INP es una m&eacute;trica de Core Web Vitals que sustituy&oacute; a FID para medir la capacidad de respuesta en marzo de 2024.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-69446aaf57422\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">&iquest;Cu&aacute;nto es una buena puntuaci&oacute;n INP?<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>Una buena puntuaci&oacute;n INP es inferior a 200 ms. Un valor entre 200 y 500 ms se considera u003cstrongu003eNecesita mejorar, u003c\/strongu003ey cualquier valor por encima de 500 ms es u003cstrongu003eDeficienteu003c\/strongu003e.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-69446aaf57423\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">&iquest;Cu&aacute;l es la diferencia entre INP y FID?<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>La FID mide el tiempo que tarda una p&aacute;gina web en responder a la primera entrada del usuario, mientras que la INP eval&uacute;a el tiempo de respuesta a cualquier interacci&oacute;n del visitante del sitio web, no s&oacute;lo a la primera.&nbsp;u003cbr \/u003eu003cbr \/u003eEsto hace que INP sea una m&eacute;trica de capacidad de respuesta m&aacute;s completa.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-69446aaf57424\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">&iquest;C&oacute;mo identificar los problemas de INP en tu sitio web?<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>Utiliza PageSpeed Insights para obtener la puntuaci&oacute;n INP de tu sitio web y sugerencias para mejorar su rendimiento.<\/p>\n\n<\/div>\n<\/div>\n<\/div>\n<\/div><h3 class=\"wp-block-heading\" id=\"h-\"><\/h3>\n","protected":false},"excerpt":{"rendered":"<p>Interaction to Next Paint (INP) es una de las m&eacute;tricas de rendimiento que Google ha introducido para medir la capacidad de respuesta de las p&aacute;ginas web. Si quieres mejorar la clasificaci&oacute;n de tu sitio en los motores de b&uacute;squeda, es fundamental que sepas qu&eacute; es la INP y c&oacute;mo optimizarla. De lo contrario, tus p&aacute;ginas [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/co\/tutoriales\/interaction-to-next-paint\/\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":353,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"rank_math_title":"Interaction to next paint (INP): nueva m\u00e9trica de Core Web Vitals","rank_math_description":"Mejora el rendimiento de tu web con la m\u00e9trica Core Web Vitals, INP. Mide y optimiza la respuesta de tu web tras la interacci\u00f3n del usuario.","rank_math_focus_keyword":"interaction to next paint","footnotes":""},"categories":[5701],"tags":[],"class_list":["post-41095","post","type-post","status-publish","format-standard","hentry","category-desarrollo-web"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/interaction-to-next-paint\/","default":1},{"locale":"pt-BR","link":"https:\/\/www.hostinger.com\/br\/tutoriais\/interaction-to-next-paint\/","default":0},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/tutoriales\/interaction-to-next-paint\/","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/interaction-to-next-paint\/","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/interaction-to-next-paint\/","default":0},{"locale":"en-GB","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/interaction-to-next-paint\/","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/interaction-to-next-paint\/","default":0},{"locale":"en-CA","link":"https:\/\/www.hostinger.com\/ca\/tutorials\/interaction-to-next-paint\/","default":0},{"locale":"en-AU","link":"https:\/\/www.hostinger.com\/au\/tutorials\/interaction-to-next-paint\/","default":0},{"locale":"en-NG","link":"https:\/\/www.hostinger.com\/ng\/tutorials\/interaction-to-next-paint\/","default":0},{"locale":"es-AR","link":"https:\/\/www.hostinger.com\/ar\/tutoriales\/interaction-to-next-paint\/","default":0},{"locale":"es-MX","link":"https:\/\/www.hostinger.com\/mx\/tutoriales\/interaction-to-next-paint\/","default":0},{"locale":"es-CO","link":"https:\/\/www.hostinger.com\/co\/tutoriales\/interaction-to-next-paint\/","default":0},{"locale":"pt-PT","link":"https:\/\/www.hostinger.com\/pt\/tutoriais\/interaction-to-next-paint\/","default":0}],"acf":[],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-json\/wp\/v2\/posts\/41095","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-json\/wp\/v2\/users\/353"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-json\/wp\/v2\/comments?post=41095"}],"version-history":[{"count":5,"href":"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-json\/wp\/v2\/posts\/41095\/revisions"}],"predecessor-version":[{"id":46461,"href":"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-json\/wp\/v2\/posts\/41095\/revisions\/46461"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-json\/wp\/v2\/media?parent=41095"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-json\/wp\/v2\/categories?post=41095"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-json\/wp\/v2\/tags?post=41095"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}