Contenidos
Mejorar las puntuaciones de Interacción con Next Paint (INP) del sitio web es fácil con cualquiera de estas herramientas gratuitas
Interaction to Next Paint (INP) es una nueva métrica de Core Web Vital centrada en la capacidad de respuesta que está programada para reemplazar el retraso de la primera entrada el 12 de marzo de 2024. Optimizar INP es más fácil con las herramientas adecuadas para monitorearlo y rastrearlo.
¿Qué es la interacción con la siguiente pintura (INP)?
INP mide la cantidad de tiempo que espera un visitante del sitio después de hacer algo como hacer clic en un botón o escribir y el tiempo que le toma al sitio web proporcionar una retroalimentación visual. INP es una métrica que muestra la cantidad de tiempo que se bloquea la retroalimentación visual después de la interacción del usuario.
La idea detrás de esta métrica es que una página web que no responde es una mala experiencia de usuario. Por ejemplo, agregar un producto a un carrito de compras debería producir inmediatamente una respuesta de retroalimentación visual que muestre al visitante del sitio a qué se respondió la interacción. En ese ejemplo específico, INP no mide el tiempo que lleva agregar un producto al carrito de compras, solo mide cuánto tiempo se bloquea la retroalimentación visual de esa acción.
Puntuaciones INP más bajas significan tiempos de respuesta rápidos, que es el objetivo Las buenas puntuaciones de INP son aquellas que están por debajo de 200 milisegundos.
JavaScript y CSS son los objetivos principales a considerar para la optimización de INP.
INP mide las siguientes interacciones del usuario:
- Clics del mouse
- Toca dispositivos que tienen pantalla táctil.
- Presionar en un teclado (tanto físico como virtual)
Herramientas de medición y optimización de INP
No existe ninguna herramienta que pueda solucionar por sí sola los problemas de INP porque los problemas se originan en JavaScript y CSS utilizados por los temas, complementos, características y funcionalidades adicionales utilizadas en una página web.
Por ejemplo, instalar y usar un carrusel de imágenes o efectos de animación cargará código JavaScript y CSS adicional que puede afectar negativamente las puntuaciones INP. Minimizar JavaScript y CSS no siempre es la solución, lo que significa que un paso clave para optimizar Interaction To Next Paint es auditar el código e identificar cualquier cosa que no ayude a la página web y al usuario a lograr su propósito.
Por lo tanto, la funcionalidad clave de una herramienta de optimización INP es identificar qué está bloqueando o retrasando la retroalimentación visual de la interacción del usuario.
Cinco interacciones con las siguientes herramientas de diagnóstico de pintura
1 Kit de sitio de Google: Analytics, Search Console, AdSense, velocidad WordPress Plugin By Google
Site Kit de Google, con más de 4 millones de instalaciones de WordPress, es una de las formas más poderosas de integrar datos de búsqueda de Google en un panel de WordPress para acceder fácilmente desde dentro de WordPress.
Esta herramienta muestra datos de PageSpeed Insights y Search Console, incluidos consejos prácticos sobre qué mejorar.
2 Interacción de DebugBear con la herramienta Next Paint (versiones gratuitas y de pago) Free INP Debugger
DebugBear es una popular herramienta de monitoreo de velocidad de página que tiene una versión pro que ofrece pruebas programadas, notificaciones de eventos, pruebas de rendimiento que obtienen una vista previa de los impactos antes de la implementación en vivo, otros beneficios.
Pero también ofrece herramientas gratuitas como esta excelente herramienta de Interacción con Next Paint que rastreará una página web, diagnosticará problemas y brindará consejos prácticos para solucionar problemas de Interacción con Next Paint.
3 Extensión de Chrome Web Vitals 3. Web Vitals Chrome Extension
Esta extensión de Chrome ofrece métricas básicas de web vitals, incluido INP Una característica útil de esta extensión es la pantalla frontal (HUD) única que se superpone a la página web y que puede resultar útil al desarrollar o realizar cambios en una página web.
4 Velocidad del sitio TREO 4. TREO Site Speed
La herramienta de velocidad del sitio Treo ofrece herramientas de velocidad de página increíblemente rápidas con una interfaz de usuario atractiva que es fácil de leer y comprender.
Una característica útil de Treo es que los usuarios pueden ajustar la selección para ver métricas en países específicos.
5 Biblioteca de Chrome Web Vitals 5. Chrome Web Vitals Library
Existe una herramienta avanzada para medir las métricas principales de Web Vitals de los visitantes reales del sitio que los editores individuales pueden implementar en sus propios servidores web. Esta herramienta puede permitir a los editores ver puntuaciones reales de Web Vitals que son útiles para solucionar problemas reales de páginas web. Una descripción general y una explicación están disponibles aquí. overview and explainer is available here
Herramientas adicionales
Estudio Looker
Looker Studio, anteriormente conocido como Google Data Studio, es una herramienta de visualización de datos que permite a los usuarios conectarse a fuentes de datos y visualizar la información con informes y paneles fáciles de entender. Simplemente navegue aquí para encontrar el conector Chrome UX Report que puede transformar los datos de origen de Chrome UX (CrUX) en un informe que facilita ver las tendencias CWV del mundo real. Chrome UX Report connector
Google ha publicado una explicación en las páginas de Chrome para desarrolladores que muestra cómo configurar un panel CrUX en Looker. Compruébalo, ¡es fácil ser una superestrella del SEO con esta herramienta! how to set up a CrUX Dashboard on Looker
Las plataformas de creación de sitios web están listas
La plataforma de creación de sitios web Duda anticipó la interacción con Next Paint y ya ha trabajado para asegurarse de que los sitios que utilizan su plataforma obtengan una buena puntuación en la nueva métrica.
Según Russ Jeffery, director de estrategia de plataforma:
“Website performance is important to the agencies and SaaS companies that rely on Duda for their clients’ sites. Helping their clients rank better in search, deliver better conversions & user experiences, and ultimately drive better results.
As of writing, about 75% of all websites built on Duda are already within the “good” range for INP.
Websites built on Duda can also track and optimize for these metrics using third-party tools like WooRank, which is built into the Duda App Store. Clients can set up custom Google Analytics/Google Tag Manager events to send these metrics into GA4.”
“El rendimiento del sitio web es importante para las agencias y empresas SaaS que confían en Duda para los sitios de sus clientes. Ayudar a sus clientes a obtener una mejor clasificación en las búsquedas, ofrecer mejores conversiones y experiencias de usuario y, en última instancia, generar mejores resultados.
Al momento de escribir este artículo, alrededor del 75% de todos los sitios web creados en Duda ya se encuentran dentro del rango «bueno» para INP.
Los sitios web creados con Duda también pueden rastrear y optimizar estas métricas utilizando herramientas de terceros como WooRank, que está integrado en la App Store de Duda. Los clientes pueden configurar eventos personalizados de Google Analytics/Google Tag Manager para enviar estas métricas a GA4”.
Prepárese para el INP
Si bien es posible que el INP no sea un factor de clasificación directo, el INP sigue siendo una métrica útil para crear la experiencia de página más rápida porque se sabe que la velocidad del sitio mejora las ventas, los clics y las vistas de anuncios y se alinea con las señales que utiliza Google para la clasificación.
Imagen destacada de Shutterstock/Kues
Leer el articulo original en Search Engine Journal.
