Contenidos
El nuevo tutorial de Google puede ayudarle a identificar y resolver problemas de interacción con Next Paint (INP).
Google ha publicado un vídeo tutorial sobre cómo identificar y resolver problemas de interacción con Next Paint (INP) en sitios web.
El tutorial es oportuno ya que INP reemplazó recientemente el retardo de la primera entrada (FID) como Core Web Vital, lo que indica un cambio en la forma en que Google evalúa la experiencia del usuario.
Evaluación y optimización del rendimiento del INP
El tutorial recomienda evaluar el rendimiento INP actual de su sitio web utilizando herramientas como PageSpeed Insights y el Informe de experiencia del usuario de Chrome.
Lo mejor sería apuntar al umbral «bueno», que representa el rendimiento en el percentil 75 de cargas de página.
Los desarrolladores pueden mejorar las puntuaciones INP de un sitio web diagnosticando y solucionando problemas como tareas de JavaScript de larga duración, actividad excesiva del hilo principal o estructuras DOM demasiado complejas.
Tutorial tutorial
El vídeo guía a los espectadores a través del uso de Chrome DevTools para identificar problemas de INP.
Aquí hay un desglose detallado de los pasos cubiertos en el tutorial:
- Abra Chrome DevTools: comience abriendo el panel Chrome DevTools en su navegador. Puede hacerlo haciendo clic derecho en la página y seleccionando «Inspeccionar» o usando el método abreviado de teclado Ctrl+Shift+I (Windows) o Cmd+Opción+I (Mac).
- Simule un dispositivo móvil más lento: en el panel DevTools, haga clic en el ícono «Alternar dispositivo» (que parece un teléfono y una tableta) para activar la emulación de pantalla móvil.
- Luego, haga clic en la pestaña «Red» y seleccione «Móvil de nivel medio» en el menú desplegable de aceleración para simular una conexión móvil más lenta.
- Registre las interacciones del usuario: navegue a la pestaña «Rendimiento» en DevTools y haga clic en el botón «Grabar» (el círculo negro sólido).
- Interactuar con el sitio web como lo haría un usuario, haciendo clic en botones o enlaces que desencadenan acciones.
- Una vez que haya completado la interacción, haga clic en el botón «Detener» (el círculo rojo sólido) para finalizar la grabación.
- Analiza el rendimiento: después de detener la grabación, verás un gráfico de rendimiento. Haga clic en la pista «Interacciones» para expandirla. Esta pista marca el tiempo desde que hizo clic hasta que se mostró una respuesta en la pantalla.
- Alinee la interacción con la actividad del hilo «Principal» para identificar tareas largas que causan interacciones lentas.
- Identifique el código problemático: en el panel «Resumen», encontrará un enlace a la fuente de la página. Al hacer clic en este enlace accederá al código responsable de la interacción lenta. Desde aquí, puede comenzar a diagnosticar y solucionar el problema.
- Luego, haga clic en la pestaña «Red» y seleccione «Móvil de nivel medio» en el menú desplegable de aceleración para simular una conexión móvil más lenta.
- Interactuar con el sitio web como lo haría un usuario, haciendo clic en botones o enlaces que desencadenan acciones.
- Una vez que haya completado la interacción, haga clic en el botón «Detener» (el círculo rojo sólido) para finalizar la grabación.
- Alinee la interacción con la actividad del hilo «Principal» para identificar tareas largas que causan interacciones lentas.
Implicaciones para los profesionales de SEO
El momento de este tutorial es relevante, ya que la adopción de INP como Core Web Vital tiene implicaciones para el SEO.
La decisión de Google de publicar este tutorial subraya la importancia de adaptarse a la transición INP.
A medida que el motor de búsqueda continúa perfeccionando sus métodos para evaluar la experiencia del usuario, los profesionales de SEO y los desarrolladores web pueden garantizar el éxito manteniéndose informados sobre las últimas herramientas y mejores prácticas.
Relacionado: Prepárese para la métrica INP de Google con estas 5 herramientas
En resumen
El nuevo vídeo tutorial de Google sobre cómo identificar problemas de INP es valioso para los profesionales de SEO y los desarrolladores web que buscan navegar por esta transición y ofrecer sitios web optimizados.
Seguir los pasos descritos en el tutorial y mantenerse informado sobre los últimos desarrollos puede ayudar a garantizar que su sitio web siga siendo competitivo y brinde una experiencia de usuario óptima.
Preguntas más frecuentes
¿Cuáles son algunas de las causas comunes de las malas puntuaciones del INP y cómo se pueden abordar?
Las puntuaciones deficientes de interacción con la siguiente pintura (INP) pueden deberse a varios problemas técnicos en un sitio web Algunas causas comunes y sus soluciones incluyen:
- Tareas de JavaScript de larga duración: divida las tareas largas en otras más pequeñas y asincrónicas para evitar bloquear el hilo principal.
- Actividad excesiva del hilo principal: optimice los elementos de la página que requieren una potencia de procesamiento significativa, como secuencias de comandos o animaciones complejas.
- Estructuras DOM demasiado complejas: simplifique HTML, combine selectores CSS similares y reduzca la profundidad de su árbol DOM siempre que sea posible.
Los profesionales de SEO y los desarrolladores web pueden mejorar la puntuación INP del sitio abordando estos factores.
¿Qué medidas prácticas deberían tomar los editores para garantizar que sus sitios web cumplan con el umbral «bueno» del INP?
Los profesionales de SEO que deseen alcanzar o superar el umbral «bueno» de puntuaciones INP (que refleja el rendimiento en el percentil 75 de cargas de página) deben seguir los siguientes pasos:
- Utilice herramientas como PageSpeed Insights y Chrome User Experience Report para medir el rendimiento actual de INP.
- Siga el tutorial de Google sobre cómo identificar problemas de INP utilizando Chrome DevTools para obtener un análisis detallado.
- Implemente correcciones prescritas, como optimizar la ejecución de JavaScript y reducir la carga del hilo principal.
Imagen de portada: RYO Alexandre/Shutterstock
Leer el articulo original en Search Engine Journal.
