Mejorando su INP: El nuevo Core Web Vital

Hoy os dejamos una pònencia de Google. Mejorando su INP: El nuevo Core Web Vital Algo que puede mejorar tu SEO

Mejorando su INP: El nuevo Core Web Vital para optimizar el SEO

En una actualización clave para los desarrolladores y propietarios de sitios web, Google ha introducido la Interacción con Next Paint (INP) como una nueva métrica Core Web Vital, destinada a evaluar con mayor precisión la capacidad de respuesta de las sesiones de usuario en la web. Esta innovación promete transformar la forma en que se mide la experiencia del usuario, poniendo un énfasis especial en la velocidad y la interactividad de las páginas web.

La INP viene a reemplazar a la Primera Impresión de Demora (FID) y se centra en medir la respuesta de un sitio a las interacciones del usuario, desde clics hasta entradas de teclado, pasando por la navegación táctil. A diferencia de su predecesora, la INP ofrece una visión más holística y representativa de la experiencia real del usuario, considerando la totalidad de la sesión en lugar de un único punto de interacción.

Este cambio es significativo para los esfuerzos de optimización de motores de búsqueda (SEO) de los sitios web, ya que Google continúa privilegiando las páginas que ofrecen una experiencia de usuario superior. La INP no solo destaca la importancia de una web rápida y receptiva, sino que también establece un nuevo estándar para la evaluación de la calidad del sitio en los resultados de búsqueda.

Para los profesionales del SEO y los desarrolladores web, adaptarse a la INP implicará un enfoque renovado en la optimización del rendimiento de las páginas. Esto incluye mejoras en la carga de recursos, la reducción del tiempo de ejecución del JavaScript y la implementación de técnicas de diseño web moderno que prioricen la interactividad sin sacrificar la estabilidad visual.

La introducción de la INP como Core Web Vital es un recordatorio de la evolución constante de las mejores prácticas de SEO y la necesidad de mantener los sitios web no solo relevantes, sino también altamente accesibles y agradables para los usuarios. Con esta nueva métrica, Google reafirma su compromiso con una internet más rápida y eficiente, poniendo a disposición de los creadores de contenido las herramientas necesarias para mejorar la calidad de sus sitios web y, por ende, su posicionamiento en el buscador.

La adaptación a la INP requerirá un esfuerzo coordinado y una comprensión profunda de los factores que influyen en la capacidad de respuesta de un sitio. Sin embargo, el resultado promete ser beneficioso tanto para los usuarios como para los propietarios de sitios web, alineando los objetivos de una experiencia de usuario excepcional con los de una visibilidad óptima en los motores de búsqueda.

¿Cómo mejorar Next Paint (INP) del Core Web Vital según Google?

Para mejorar la Interacción con el Next Paint (INP) de Core Web Vitals, que es una métrica clave para evaluar la capacidad de respuesta de un sitio web, Google proporciona varias recomendaciones y mejores prácticas. Mejorar la INP implica optimizar la interactividad y la capacidad de respuesta de un sitio web, asegurándose de que las acciones del usuario sean procesadas y reflejadas en la pantalla de manera eficiente. Aquí algunas estrategias fundamentales:

1. Optimizar la carga de JavaScript: El exceso de JavaScript puede retrasar la interactividad de una página. Minimizar, diferir o hacer async la carga de scripts hasta que sea absolutamente necesario puede ayudar a mejorar la INP, ya que reduce el tiempo que el navegador necesita para procesar el contenido y responder a las interacciones del usuario.
2. Usar una división de código eficiente: Implementar la división de código permite cargar solo los scripts necesarios para el contenido visible por el usuario, mejorando el tiempo de carga inicial y la capacidad de respuesta durante la interacción del usuario.
3. Priorizar la carga de recursos críticos: Utilizar rel=preload para los recursos críticos puede asegurar que estos se carguen prioritariamente, mejorando la velocidad de carga y la capacidad de respuesta de la página.
4. Optimizar la renderización principal: Mejorar el tiempo de carga de la página mediante la optimización de CSS, imágenes y fuentes puede tener un impacto positivo en la INP. Las imágenes deben ser optimizadas, servidas en formatos modernos y dimensionadas correctamente. Los archivos CSS deben ser minimizados y críticos para la renderización inicial deben ser inline.
5. Mejorar la eficiencia del servidor: Usar una red de entrega de contenido (CDN) para reducir la latencia, implementar el caché de manera efectiva y optimizar la configuración del servidor puede mejorar significativamente el tiempo de respuesta del servidor, lo que a su vez mejora la INP.
6. Evitar grandes desplazamientos de diseño: Los cambios en el layout que ocurren después de que los elementos de la página han sido renderizados pueden afectar negativamente la INP. Evitar o minimizar estos cambios inesperados mejora la estabilidad visual y la capacidad de respuesta.
7. Monitorizar y analizar el rendimiento con herramientas específicas: Herramientas como Lighthouse, PageSpeed Insights y el Chrome DevTools pueden ayudar a identificar problemas específicos que afectan la INP y ofrecer recomendaciones personalizadas para abordar estos problemas.
8. Implementar el lazy loading: Cargar imágenes, iframes y otros recursos multimedia solo cuando están a punto de entrar en el viewport puede reducir significativamente el tiempo de carga inicial y mejorar la respuesta a la interacción del usuario.

Al implementar estas prácticas, es crucial realizar pruebas continuas y monitorizar el rendimiento de la página para asegurar que las mejoras sean efectivas y no afecten negativamente otras métricas de rendimiento. La optimización para una mejor INP no solo mejorará la experiencia del usuario sino también contribuirá positivamente al SEO del sitio web, ya que Google considera la experiencia del usuario como un factor clave en sus algoritmos de clasificación.

Los mejores trucos para mejorar Next Paint (INP) de Core Web Vitals

Para mejorar el Next Paint (INP) de Core Web Vitals, enfocándose en optimizar la capacidad de respuesta y la interactividad de una página web, se recomienda seguir varios trucos y prácticas avanzadas. Estos consejos están diseñados para asegurar que las interacciones del usuario sean manejadas de manera eficiente, resultando en una experiencia de usuario fluida y agradable. Aquí te dejo algunos de los mejores trucos:

1. Minimizar el trabajo principal del hilo: Reducir la cantidad de trabajo que realiza el hilo principal es crucial. Esto incluye minimizar la ejecución de JavaScript, optimizar las hojas de estilo (CSS), y reducir el tiempo de análisis, compilación y ejecución del código. Utilizar herramientas como Web Workers para mover operaciones costosas fuera del hilo principal puede ser de gran ayuda.
2. Optimizar la interacción con la API de la Interfaz de Usuario (UI): Asegurarse de que las llamadas a la API y las actualizaciones del DOM se realicen de manera eficiente. Usar técnicas como el debouncing o el throttling para las entradas del usuario que generan una alta frecuencia de eventos puede mejorar significativamente la INP.
3. Implementar carga condicional (Lazy loading): Cargar elementos en demanda, especialmente imágenes, videos e iframes, mejora los tiempos de carga inicial y la capacidad de respuesta durante las interacciones del usuario. Esto es particularmente útil para páginas con mucho contenido multimedia.
4. Priorizar la carga de contenido y funcionalidades: Utilizar patrones de diseño como el patrón de Rail para priorizar la carga y ejecución de recursos y funcionalidades basándose en la expectativa del usuario en cada momento de la interacción con la página.
5. Optimizar la renderización: Aprovechar las técnicas de renderización modernas como CSS Containment, que limita el alcance de los cálculos de layout y paint a partes específicas del DOM, puede mejorar la capacidad de respuesta al reducir el trabajo necesario para visualizar los cambios en la página.
6. Evitar o minimizar los desplazamientos de layout (layout shifts): Asegurarse de que el tamaño de los elementos multimedia (como imágenes y videos) esté definido en el HTML o a través de CSS para evitar desplazamientos inesperados que pueden afectar la INP.
7. Aplicar técnicas de programación asincrónica: Hacer un uso efectivo de promesas y async/await para manejar operaciones que dependen de la red o que son intensivas en recursos sin bloquear el hilo principal.
8. Utilizar herramientas de diagnóstico y monitoreo: Herramientas como Google Lighthouse, Chrome DevTools, y PageSpeed Insights pueden proporcionar análisis detallados del rendimiento de una página, incluyendo la INP, y sugerir mejoras específicas.
9. Pruebas en condiciones reales: Realizar pruebas de rendimiento en una variedad de dispositivos y condiciones de red para entender cómo las interacciones del usuario afectan la INP en escenarios del mundo real.
10. Adopción de frameworks y bibliotecas modernas: Utilizar versiones actualizadas de frameworks y bibliotecas que estén optimizados para el rendimiento puede hacer una gran diferencia. Muchos frameworks modernos vienen con optimizaciones específicas para mejorar la capacidad de respuesta y la interactividad.

Implementar estos trucos requiere un enfoque holístico hacia la optimización del rendimiento, donde cada pequeña mejora puede contribuir significativamente a la experiencia general del usuario. La clave está en priorizar las interacciones del usuario y asegurarse de que el sitio web responda a estas de manera rápida y efectiva.

Algunas de las preguntas hechas en el seminario por los usuarios son:

¿Google Search Console mostraría el verdadero problema? ¿Es decir, mostraría que mi sitio efectivamente tiene un problema de INP? ¿Sería eso confiable?

¿Qué pasa con GTM?

¿La función «atribución» también está disponible en el paquete npm de web-vitals?

Si usamos sleep o setTimeout a pedido en el código javascript, ¿afecta el INP?

¿Hay alguna manera de informar qué causa realmente el retraso de INP usando web-vitals.js como si fuera visible en Dev Tools?

https://googlechrome.github.io/lighthouse/scorecalc/

Me gustaría obtener la PUNTUACIÓN MÉTRICA para INP. Como lo puedo hacer ?

Mire https://chromewebstore.google.com/detail/web-vitals/ahfhijdlegdabablpippeagghigmibma?pli=1. Muestra datos en una superposición y también imprime los valores INP en la consola desde las herramientas de desarrollo.

https://googlechrome.github.io/lighthouse/scorecalc/
Si quiero la puntuación métrica para INP, ¿cómo puedo hacerlo?

¿Cuánta influencia tiene la lógica CMP requerida legalmente (también conocida como diálogo de cookies) para el INP? ¿Entra en el cálculo del INP?

Cómo minimizar el impacto de los scripts de terceros que tienen detectores de eventos de clic en el cuerpo adjuntos, por ejemplo: scripts gtm, scripts de píxeles, scripts de anuncios?

¿INP reemplazará la puntuación TBT o la afectará de manera diferente para SEO?

¿Mostrar una rueda giratoria después de hacer clic en algún elemento vinculado a una tarea larga es una buena forma de evitar INP?

Fuente:  https://publishersonair.withgoogle.com/events/inp-new-core-web-vital/watch?talk=improving