Hoy traemos un tema verdaderamente interesante en el mundo del SEO y respecto a Google y su constante evolución. Los Core Web Vitals de Google han surgido como métricas críticas para el SEO. Estas métricas te ayudan a optimizar tus sitios web para una experiencia de usuario superior. Un nuevo elemento está destacando entre estas métricas vitales: Interaction to Next Paint (INP).
La actualización de Google Interaction to Next Paint (INP) es una innovación significativa que mide la responsividad de las páginas web a través de la observación de la latencia en todas las interacciones de clic, toque y teclado a lo largo de la vida útil de una página. Un aspecto clave de INP es que busca minimizar el tiempo desde que el usuario inicia una interacción hasta que se pinta el siguiente cuadro, proporcionando así una medida más fiable de el responsive general de la página.
INP ha reemplazado a First Input Delay (FID) como una métrica esencial de Core Web Vitals, reconociendo la necesidad de una métrica que capture mejor la interactividad en la web. Al considerar todas las interacciones de la página y medir desde el retraso de entrada hasta que se ejecutan los manejadores de eventos y finalmente hasta que el navegador ha pintado el próximo cuadro, INP ofrece una perspectiva más completa sobre la experiencia del usuario. Este artículo te explicará en qué consiste la INP, su importancia y cómo mejorar el rendimiento de tu sitio para mejorar tu posicionamiento web.
- ALGO DE HISTORIA: INP reemplazó al First Input Delay (FID) como métrica de Core Web Vitals el 12 de marzo de 2024. Google adelantó por primera vez que podría reemplazar FID con INP en Google I/O en mayo de 2022, y el anuncio oficial se produjo un año después, en mayo de 2023.
Esencia de la Interaction to Next Paint (INP)
La “Interaction to Next Paint” (INP) mide la capacidad de respuesta de una página web a las acciones del usuario, como clics, toques y pulsaciones de teclas. Representa el tiempo desde que un usuario interactúa con tu página hasta que ve una respuesta en la pantalla.
A diferencia de su predecesor, el Retraso del primer clic, que solo contabilizaba el primer clic, la INP ofrece una visión más amplia al capturar la capacidad de respuesta a lo largo de la vida de la página.
Google está muy enfocado, casi obsesionado, en mejorar la experiencia de usuario ofrecida por las páginas web y todo tipo de proyectos digitales en Internet. Y para validar esta experiencia de usuario, introduce ahora métricas más sutiles y completas.
En este caso, ahora introduce la Interaction to Next Paint en los Core Web Vitals. La INP mide un aspecto crítico de la experiencia del usuario: la capacidad de respuesta de una página a la interacción del usuario.
Al integrar la INP en los Core Web Vitals, Google tiene como objetivo proporcionar a los desarrolladores una imagen mucho más completa sobre el rendimiento de sus propias páginas. Además, fomenta mejoras que realmente mejoren la experiencia de los usuarios.
Google califica la latencia INP de la siguiente manera:
- 🟢 Bueno: menos de 200 milisegundos
- 🟡 Necesita mejorar: entre 200 y 500 milisegundos
- 🔴 Deficiente: más de 500 milisegundos
Definición de “interacciones”
En lo que respecta a la métrica INP, las interacciones incluyen:
- 🖱️ Hacer clic con el ratón
- 🖱️ Tocar un dispositivo con pantalla táctil
- 🖱️ Presionar una tecla en un teclado físico o en pantalla
Las acciones de desplazamiento y desplazamiento no están incluidas en INP.
⚠️ Sin embargo, desplazarse con un teclado (p. ej., barra espaciadora, avanzar página, avanzar página) implica pulsar teclas, lo que puede desencadenar otros eventos que el INP sí mide.
Por qué importa la INP
Una experiencia de usuario fluida es la piedra angular del éxito en el SEO. La Interaction to Next Paint influye directamente en cómo perciben los usuarios la eficiencia y usabilidad de una página web.
Las páginas que responden rápidamente a las interacciones de los usuarios tienen más probabilidades de captar la atención de los visitantes. Un mejor rendimiento puede reducir tasas de rebote y, en última instancia, mejorar como no, los rankings en los resultados de búsqueda ofrecidos por Google.
A medida que se produce la transición de FID a INP, los webmasters y expertos en SEO estamos obligados abrazar esta métrica más amplia. Comprender y optimizar para la INP será crucial para mantener y mejorar los rankings en las búsquedas.
“El INP se calcula cuando el usuario abandona la página, lo que da como resultado un valor único que es representativo de la capacidad de respuesta general de la página durante todo su ciclo de vida. Un INP bajo significa que una página responde de manera segura a la entrada del usuario. ”
- Jeremy Wagner, redactor técnico senior de Google
Mejoras en el mundo real
A pesar de los desafíos en la optimización para la INP, nuestro equipo en ProfesionalNet ha mejorado notablemente la capacidad de respuesta.
Al centrarnos en una ejecución eficiente del código y minimizar los recursos que bloquean la representación, hemos mejorado significativamente el rendimiento de cada uno nuestros clientes.
Google Search Console ya proporciona informes de INP, dividiéndolos en problemas de móviles y de escritorio.
En ProfesionalNet, hemos utilizado estos para guiar nuestras optimizaciones. Además, la herramienta Screaming Frog ahora incluye INP aprobado/fallido dentro de sus informes de rastreo, lo que también ayuda.
Pero recuerda, aunque siempre es genial no tener errores, no te obsesiones con recortar milisegundos para llegar allí.
Si hay problemas de rendimiento significativos, resuélvelos lo antes posible. ¡Pero siempre ten en cuenta, no gastes horas para ahorrar segundos!
Concéntrate en la experiencia general de la página; las cosas progresarán naturalmente desde allí.
Mejorar la Interaction to Next Paint
El cambio a INP requiere un enfoque fresco para medir y mejorar el rendimiento web.
Herramientas como Lighthouse de Google, PageSpeed Insights y el Informe de Experiencia del Usuario de Chrome (F12) ofrecen información valiosa sobre las puntuaciones de INP y oportunidades de optimización.
Puedes utilizar las siguientes herramientas para evaluar su INP:
- Google Search Console : GSC puede proporcionarle un informe INP general (o a nivel de carpeta) y también puede usarlo para verificar correcciones.
- PageSpeed Insights : aunque la información aquí es limitada (probablemente no suficiente para solucionar problemas de INP), PageSpeed Insights es útil porque le indica si hay un problema para empezar y qué tan cerca (o lejos) está de un “buen” rendimiento.
- Informe de experiencia de usuario de Chrome (CrUX) : puede recopilar datos INP de usuario reales para sus páginas e integrarlos en un panel de Looker Studio para facilitar el análisis y la toma de decisiones.
- Lighthouse en Chrome Dev Tools : este método es particularmente útil si desea probar la capacidad de respuesta de elementos específicos.
- Extensión Web Vitals para Chrome : esta extensión del navegador muestra si una página determinada pasa CWV de un vistazo, así como métricas específicas para cada CWV, lo que la hace conveniente para evaluar página por página.
Estrategias prácticas para mejorar tu puntuación de INP
Es importante no olvidar que mejorar tu puntuación de Interaction to Next Paint beneficia la experiencia del usuario de tu sitio. Es una parte importante para mantenerse competitivo en SEO.
Aquí tienes consejos prácticos para ayudarte a mejorar tu puntuación de INP:
• OptimizaR las devoluciones de llamada de eventos
Las devoluciones de llamada de eventos son el corazón de las interacciones de los usuarios. Reducir el tiempo que estas devoluciones de llamada tardan en procesarse puede mejorar significativamente tu puntuación de INP. Evalúa la complejidad de tus controladores de eventos y simplifica su código para garantizar una ejecución rápida.
• OptimizaR la ejecución de JavaScript
JavaScript puede tener un gran impacto en la capacidad de respuesta de tu página. Optimizar cómo se carga y ejecuta el JavaScript en tu página puede mejorar las puntuaciones de INP. Las técnicas incluyen diferir JavaScript no crítico, usar scripts asíncronos y eliminar código no utilizado.
• EvitaR bloquear el hilo principal
El hilo principal es donde el navegador procesa los eventos de usuario, ejecuta JavaScript y renderiza actualizaciones en la pantalla. Mantenerlo desbloqueado asegura que la página pueda responder a las acciones del usuario de manera rápida. Evita cálculos pesados o tareas que requieren mucho tiempo en el hilo principal para evitar retrasos en la capacidad de respuesta.
• ANALIZAR EL RENDIMIENTO DE INP
Analiza el rendimiento de INP de manera detallada: ten en cuenta que un bajo rendimiento puede ser causado por páginas o dispositivos determinados por lo que es importante analizar la puntuación de INP en distintas páginas, dispositivos y navegadores para detectar donde puede estar la fuente del problema.
• DividIR las tareas largas
Las tareas que tardan más de 50 milisegundos pueden interferir en la capacidad de la página para responder eficazmente a las acciones del usuario.
Dividir estas tareas largas en partes más pequeñas permite que el navegador intercale el manejo de la entrada entre estas tareas, mejorando la capacidad de respuesta general.
• MinimizaR las tareas innecesarias
Evalúa las tareas en tu página e identifica aquellas que no son esenciales para la experiencia de usuario inmediata. Posponer o eliminar tareas innecesarias.
• UTILIZAR LAZY LOADING
Utiliza el Lazy Loading: Retrasa la carga de partes no esenciales de tu sitio web hasta que los usuarios las necesiten.
• USAR SERVIDORES CDN
Considera el uso de servidores CDN: Piensa en formas de acelerar la carga de contenido desde el servidor utilizando servidores CDN.
¿Qué dice Google?
Google recomienda utilizar datos del Chrome User Experience Report (CrUX) a través de PageSpeed Insights para obtener una visión general de INP y otros Core Web Vitals. Sin embargo, para un análisis más detallado y contextual, se sugiere emplear un proveedor de monitoreo de usuarios reales (RUM) o implementar su propia solución RUM.
El enfoque de INP en la responsividad general y la interactividad promete conducir a una web más reactiva y agradable para los usuarios, animando a los desarrolladores a centrarse no solo en la carga inicial de la página sino también en cómo se manejan las interacciones a lo largo de toda la visita del usuario (Dev) (Dev) (Dev).
Desde ProfesionalNet…
Ha sido un placer acompañarte en tu búsqueda de información hoy. Esperamos haber iluminado un poco tu camino con las respuestas que buscabas.
Recuerda que estamos aquí para ayudarte con cualquier otra pregunta que puedas tener en el futuro. ¡No dudes en volver! Que tengas un día maravilloso, lleno de aprendizaje y descubrimientos. ¡Hasta la próxima! 😉
