![\"\"](\"https:\/\/blog.hostinger.io\/co-tutoriales\/wp-content\/uploads\/sites\/40\/2022\/12\/eBook-Speed-Up-your-website-ES-1024x283.png\")
<\/a><\/figure>\n
¿Qué es la Interaction to Next Paint (INP)?<\/h2>\n
Interaction to Next Paint (INP) es una métrica de Core Web Vitals que mide el tiempo de respuesta de las páginas web. Determina lo rápido que se actualiza una página web después de que un usuario interactúe con ella, por ejemplo, haciendo clic en un enlace o pulsando un botón.<\/p>\n <\/div><\/p>
Cómo funciona la Interaction to Next Paint (INP)<\/h2>
Como métrica de capacidad de respuesta, la INP se centra en el retardo de la interacción con el usuario. Mide la rapidez con la que responderá un elemento de una página web después de que realices una determinada acción sobre él.<\/p>
Así es como funciona la INP:<\/p>
- \n
- Un usuario interactúa con una página web, por ejemplo haciendo clic en un botón.<\/li>\n\n\n\n
- El navegador envía una petición al servidor web para obtener el nuevo contenido.<\/li>\n\n\n\n
- El servidor web envía el nuevo contenido al navegador.<\/li>\n\n\n\n
- El navegador muestra el nuevo contenido en la página.<\/li>\n\n\n\n
- El navegador mide el tiempo que tarda en renderizar el nuevo contenido y lo comunica como puntuación INP.<\/li>\n<\/ol>
Un valor de INP bajo significa que la página es muy receptiva a la interacción del usuario.<\/p>
Como parte de Core Web Vitals<\/a>, INP es importante por las siguientes razones:<\/p>
- \n
- Mejora de la experiencia del usuario: <\/strong>un valor INP alto significa que los usuarios tienen que esperar mucho tiempo a que la página web reaccione a sus interacciones, lo que puede resultar frustrante.<\/li>\n\n\n\n
- Optimización de motores de búsqueda (SEO)<\/a>: <\/strong>la INP <\/strong>y otras Core Web Vitals forman parte de las señales de experiencia de página<\/a> de Google, que determinan el rango de un sitio web en sus páginas de resultados. Esto hace que la métrica INP SEO sea especialmente importante.<\/li>\n\n\n\n
- Menor tasa de rebote: <\/strong>un tiempo de carga lento puede hacer que los usuarios abandonen la página, perjudicando los resultados de tu negocio.<\/li>\n<\/ul>
![\"\"](\"https:\/\/blog.hostinger.io\/co-tutoriales\/wp-content\/uploads\/sites\/40\/2023\/02\/ES-Web-hosting_in-text-banner-1024x300.png\")
<\/a><\/figure>Interaction to Next Paint (INP) como Core Web Vital<\/h3>
La INP sustituyó a la métrica First Input Delay (FID)<\/a> en marzo de 2024. INP y FID son similares, pero funcionan de forma diferente.<\/p>
La FID mide la capacidad de respuesta de carga de la página sólo cuando se abre el sitio web por primera vez. Por otro lado, la métrica INP de Google tiene en cuenta todos los retrasos en la interacción del usuario a lo largo de toda la visita, después de que la página se haya cargado.<\/p>
Según los datos de Google, la mayor parte del tiempo que un usuario pasa en una página web es después de que se cargue. Por ello, la INP puede medir la interactividad de la página de forma mucho más eficaz que la FID.<\/p>
INP también difiere de otras Core Web Vitals como Cumulative Layout Shift (CLS) y Large Contentful Paint (LCP)<\/a>. CLS evalúa cuánto puede desplazarse inesperadamente un sitio web, mientras que LCP determina la rapidez con que una página web muestra sus elementos más grandes.<\/p>
Cómo medir la Interaction to Next Paint (INP)<\/h2>
Antes de iniciar la medición de Interaction to Next Paint, veamos qué significan los valores INP.<\/p>
El INP se mide en milisegundos (ms). Un valor de referencia Bueno <\/strong>es inferior a 200 ms y todo lo que esté entre ese valor y 500 ms se considera que Necesita mejorar<\/strong>. 500 ms o más se considera Deficiente<\/strong>.<\/p>
![\"Cómo](\"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-content\/uploads\/sites\/32\/2024\/07\/inp.png\")
<\/figure>Varios factores pueden afectar a un valor INP, como el tamaño y la complejidad de una página web, así como el número de archivos JavaScript y CSS cargados.<\/p>
Puedes medir el valor INP de un sitio web utilizando herramientas de prueba de velocidad de sitios web<\/a>. Este tipo de aplicación puede proporcionar información sobre el rendimiento de tus métricas de Core Web Vitals y sobre cómo optimizarlas.<\/p>
Google PageSpeed Insights<\/a> es una opción popular para medir la INP y el rendimiento del sitio web. Realizará una auditoría de un sitio y proporcionará detalles sobre las mejores prácticas que se deben aplicar. También puedes ver la velocidad de tu sitio cuando se carga en dispositivos móviles y de escritorio.<\/p>
PageSpeed Insights muestra dos tipos de resultados. La sección superior muestra las métricas de Core Web Vitals de un sitio a partir del informe Chrome UX<\/a>, una recopilación de datos de rendimiento reales de usuarios de Chrome.<\/p>
![\"Informe](\"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-content\/uploads\/sites\/32\/2024\/07\/informe-pagespeed-insights.png\")
<\/figure>El siguiente informe muestra las mismas métricas, pero proceden de un entorno de laboratorio controlado que se ejecuta en Google Lighthouse. Estos datos pueden ser útiles para probar nuevas funciones antes de publicarlas en directo.<\/p>
![\"Informe](\"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-content\/uploads\/sites\/32\/2024\/07\/PageSpeed-Insights.png\")
<\/figure>Si los datos INP del sitio no están disponibles, comprueba su Tiempo Total de Bloqueo (TBT). Esta métrica mide un tipo diferente de capacidad de respuesta. Se centra en el tiempo que una página está bloqueada para responder a la interacción durante la carga de la página.<\/p>
Hacia la parte inferior, hay sugerencias sobre cómo mejorar las métricas de Core Web Vitals, así:<\/p>
![\"Sugerencias](\"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-content\/uploads\/sites\/32\/2024\/07\/sugerencias-PageSpeed-Insights.png\")
<\/figure>Los clientes de Hostinger pueden utilizar la integración de PageSpeed Insights<\/a> en hPanel. Abre el panel de tu cuenta de Panel<\/strong> → Rendimiento <\/strong>→ Velocidad de página <\/strong>para acceder a ella.<\/p>
![\"Velocidad](\"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-content\/uploads\/sites\/32\/2024\/07\/velocidad-de-pagina-hpanel.png\")
<\/figure>Cómo optimizar la Interaction to Next Paint (INP)<\/h2>
Hablemos de cómo realizar la optimización INP en tu sitio web.<\/p>
¡Importante!<\/strong> La mayoría de estos métodos requieren ciertos conocimientos técnicos de JavaScript. Antes de realizar cambios en tu sitio web, asegúrate de hacer una copia de seguridad<\/a> por si se producen errores.<\/p><\/div><\/p>
1. Optimiza la ejecución de JavaScript<\/h3>
JavaScript es<\/a> un componente importante de muchas páginas web. Añade varios elementos interactivos, pero también puede ralentizar el rendimiento del sitio.<\/p>
Cuando se ejecuta, JavaScript se ejecuta en el hilo principal, el responsable de renderizar una página web. Si el código es ineficiente, puede bloquear el hilo e impedir que la página responda a la interacción del usuario.<\/p>
La clave para acelerar la capacidad de respuesta es optimizar tu JavaScript, lo que puedes hacer de la siguiente manera:<\/p>
- \n
- Minificar archivos JavaScript<\/a>: reducirá el tamaño del JavaScript, haciendo que se carguen más rápido.<\/li>\n\n\n\n
- Activar la compresión GZip: <\/strong>otro método popular para hacer más pequeños los archivos y datos del sitio.<\/li>\n\n\n\n
- Utilizar un framework de JavaScript:<\/strong> esta herramienta puede ayudar a organizar tu código JavaScript para hacerlo más eficiente. AngularJS y jQuery<\/a> son algunos ejemplos bien conocidos.<\/li>\n\n\n\n
- Usar una CDN<\/a>:<\/strong> abreviatura de red de entrega de contenidos, esta función entregará tus archivos JavaScript desde servidores cercanos a tu público objetivo, mejorando los tiempos de carga. Para utilizar la CDN interna de Hostinger, los usuarios deben contratar un plan de alojamiento web<\/a> Business o superior.<\/li>\n<\/ul>
![\"Optimización](\"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-content\/uploads\/sites\/32\/2024\/07\/optimizacion-web-hpanel.png\")
<\/figure>2. Utiliza Web Workers<\/h3>
Los Web Workers son un servicio que permite que JavaScript se ejecute independientemente del hilo principal. Son útiles para ejecutar operaciones complejas en segundo plano.<\/p>
Digamos que tienes un sitio web de WordPress lleno de imágenes, vídeos y datos. Los Web Workers pueden descargar estos pesados cálculos de JavaScript a un subproceso en segundo plano para evitar que se congele tu interfaz.<\/p>
Para utilizar web workers, necesitarás crear dos archivos JavaScript. Uno es el main.js <\/strong>para iniciar las tareas del script web worker:<\/p>
\/\/ 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>Otro es worker.js<\/strong>, que contiene las tareas del web worker. Aquí un ejemplo simplificado:<\/p>
\/\/ 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>Para incluir estos scripts en tu sitio web, consulta la documentación de tu tecnología o plataforma específica y sigue el proceso estándar.<\/p>
Para los usuarios de WordPress, utiliza la función wp_enqueue_script<\/a> para incluir scripts de web worker en el archivo functions.php de tu tema.<\/p>
3. Divide las tareas largas<\/h3>
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ónico. <\/p>
Sin dividir las tareas largas, el subproceso principal tiene que obtener, procesar y procesar grandes cantidades de datos de productos e imágenes simultáneamente, lo que consume mucho tiempo y recursos.<\/p>
Mientras ocurre este proceso, el hilo principal está ocupado. Esto hace que el sitio web se cargue lentamente y no pueda responder a la siguiente interacción del usuario.<\/p>
Dividir las tareas largas permite al navegador web manejar trozos más pequeños cada vez. Como resultado, el hilo principal queda libre para realizar tareas más esenciales.<\/p>
Puedes utilizar dos tipos de código para separar las tareas largas:<\/p>
- \n
- setTimeout<\/strong>: función incorporada en JavaScript que programa una tarea específica para que se ejecute tras un cierto retardo en milisegundos. Puede aplazar la ejecución a un momento posterior, evitando que el hilo principal quede bloqueado durante un periodo prolongado.<\/li>\n\n\n\n
- requestIdleCallback<\/a>: <\/strong>esta API proporciona un enfoque más eficiente, ya que garantiza que las funciones se ejecuten durante los periodos de tiempo inactivo. También ofrece un parámetro de fecha límite, que te permite controlar cuánto tiempo puede durar la tarea sin afectar a procesos importantes.<\/li>\n<\/ul>
4. Prioriza la preparación de las entradas<\/h3>
La disponibilidad de entrada se refiere a cuándo una página web está preparada para responder a la interacción del usuario. Cuando no lo está, suele significar que el hilo principal del navegador está ocupado realizando otras tareas.<\/p>
Acá cómo priorizar la preparación de la entrada para mejorar la INP:<\/p>
- \n
- Aplazar JavaScript no crítico<\/strong>: <\/strong>algunos JavaScript no son esenciales para la carga inicial de la página y pueden ejecutarse despué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ágina.<\/li>\n\n\n\n
- Estrangulamiento:<\/strong> esta técnica controla la frecuencia de ejecución de una función. Por ejemplo, cuando los usuarios se desplazan hacia abajo, ese evento puede disparar el mismo código cientos de veces por segundo. El throttling permite que sólo se ejecute una vez cada milisegundo aproximadamente, independientemente de cuántas veces se dispare realmente el evento.<\/li>\n\n\n\n
- Rebote: <\/strong>esto impide que una función vuelva a ejecutarse hasta que haya transcurrido cierto tiempo. Por ejemplo, cuando los usuarios cambian el tamaño de la ventana del navegador, este evento puede activar el mismo proceso repetidamente. El rebote puede retrasar su ejecución hasta que el usuario deje de cambiar el tamaño durante un tiempo determinado.<\/li>\n\n\n\n
- Escuchadores de eventos pasivos: <\/strong>los escuchadores de eventos son construcciones de programación que detectan eventos específicos, como desplazamientos y toques. Hacerlos pasivos le dirá al navegador que no espere a que una determinada función termine de ejecutarse y continúe con otras tareas mientras tanto.<\/li>\n<\/ul>
5. Proporciona retroalimentación inmediata<\/h3>
Algunas interacciones pueden provocar retrasos notables en la respuesta, como el envío de un formulario con varias entradas de datos.<\/p>
Ahí es donde entra en juego la respuesta inmediata. Esta táctica proporciona a los usuarios una indicación visual de que el sitio web ha recibido y está procesando su solicitud.<\/p>
Con una respuesta inmediata, los usuarios no se preguntarán si el sitio web ha registrado su entrada. Puede dar la impresión de un rendimiento más rápido, aunque no reduzca el tiempo real de procesamiento.<\/p>
Echa un vistazo a algunos ejemplos de señales de respuesta inmediata:<\/p>
- \n
- Indicadores de carga:<\/strong> muestra un spinner o una barra de progreso cuando un proceso esté en marcha, especialmente al mostrar datos o pasar a una nueva página.<\/li>\n\n\n\n
- Ventanas emergentes de confirmación:<\/strong> para acciones como añadir un artículo al carrito, es bueno mostrar un mensaje que confirme que la acción se ha realizado correctamente.<\/li>\n\n\n\n
- Validación de campos de formulario:<\/strong> por ejemplo, si un usuario ha introducido una dirección de correo electrónico con un formato incorrecto, muestra un mensaje de error inmediatamente en lugar de esperar a que envíe el formulario.<\/li>\n<\/ul>
¿Qué significa Interaction to Next Paint (INP) para los propietarios de sitios web?<\/h2>
La INP y la clasificación del sitio web tendrán una fuerte correlación. Si no se optimiza, la velocidad del sitio web, la experiencia del usuario y, a su vez, el rendimiento del tráfico orgánico pueden ser deficientes.<\/p>
De hecho, Economic Times<\/a> ha demostrado que mejorar la INP tiene importantes beneficios para el negocio. Han reducido su tasa de rebote en un 50%<\/strong>, lo que significa que es más probable que los visitantes se queden y exploren su contenido.<\/p>
Identificar qué hace que la capacidad de respuesta de tu sitio web sea lenta es clave para optimizarlo para la INP. Realiza pruebas de producción, examina cómo maneja tu sitio web las entradas del usuario y consulta con un desarrollador web si es necesario.<\/p>
Conclusión<\/h2>
Abreviatura de Interaction to Next Paint, INP es una métrica de Core Web Vitals que sustituyó a FID. Mide el tiempo que tarda un sitio web en responder a la interacción del usuario. Cuanto más baja sea la puntuación, más rápida es la capacidad de respuesta de tu sitio.<\/p>
La diferencia entre INP y FID es que la primera mide todos los retrasos en la interacción del usuario en toda una sesión. La segunda métrica se centra en el mismo elemento sólo cuando se abre el sitio web por primera vez.<\/p>
Utiliza PageSpeed Insights para medir el INP de tu sitio web. Si los datos no están disponibles, también puedes consultar la métrica TBT de tu sitio.<\/p>
Optimizar para INP implica varios métodos: desde hacer más eficiente la ejecución de tu JavaScript y utilizar web workers hasta priorizar la preparación de la entrada. <\/p>
Independientemente del proceso, haz una copia de seguridad de tu sitio web para anticiparte a cualquier error al hacer cambios.<\/p>
- Ventanas emergentes de confirmación:<\/strong> para acciones como añadir un artículo al carrito, es bueno mostrar un mensaje que confirme que la acción se ha realizado correctamente.<\/li>\n\n\n\n
- Estrangulamiento:<\/strong> esta técnica controla la frecuencia de ejecución de una función. Por ejemplo, cuando los usuarios se desplazan hacia abajo, ese evento puede disparar el mismo código cientos de veces por segundo. El throttling permite que sólo se ejecute una vez cada milisegundo aproximadamente, independientemente de cuántas veces se dispare realmente el evento.<\/li>\n\n\n\n
- requestIdleCallback<\/a>: <\/strong>esta API proporciona un enfoque más eficiente, ya que garantiza que las funciones se ejecuten durante los periodos de tiempo inactivo. También ofrece un parámetro de fecha límite, que te permite controlar cuánto tiempo puede durar la tarea sin afectar a procesos importantes.<\/li>\n<\/ul>
- Activar la compresión GZip: <\/strong>otro método popular para hacer más pequeños los archivos y datos del sitio.<\/li>\n\n\n\n
- Optimización de motores de búsqueda (SEO)<\/a>: <\/strong>la INP <\/strong>y otras Core Web Vitals forman parte de las señales de experiencia de página<\/a> de Google, que determinan el rango de un sitio web en sus páginas de resultados. Esto hace que la métrica INP SEO sea especialmente importante.<\/li>\n\n\n\n
- Mejora de la experiencia del usuario: <\/strong>un valor INP alto significa que los usuarios tienen que esperar mucho tiempo a que la página web reaccione a sus interacciones, lo que puede resultar frustrante.<\/li>\n\n\n\n