Core Web Vitals

Core Web Vitals
Facebook
Twitter
LinkedIn

La apuesta de Google por Core Web Vitals para mejorar la experiencia del usuario (UX) y la velocidad de carga de todos los sitios online. Aunque esta apuesta parece futurista, está lejos de ser el primer plan de Google en esta dirección.

Agrega a eso PageSpeed Insights , Mobile-Friendly TestLighthouse, entre otros, y los movimientos más generales (el formato AMP, el Chrome UX Report y el sitio web.dev) que Google ha creado y promocionado en los últimos años.

Google quiere que el Core Web Vitals busca establecer criterios simples y unificados sobre lo que es una buena experiencia web.

No era obvio para alguien con poco conocimiento técnico entendiera de un vistazo dónde estaban exactamente los problemas con UX y Web Front-End Optimization (WPO), y cómo se iban a resolver.

¿Cuáles son los tres indicadores de Core Web Vitals?

Core Web Vitals se basa en tres métricas. Cada uno de ellos toca un aspecto fundamental para que una página sea rápida y ofrezca una buena experiencia de usuario.

google factores de ranking seo core web vitals

LCP o Largest Contentful Paint

El medidor LCP se encarga de establecer el tiempo de carga del contenido y nos señala el momento exacto en que la mayor parte del contenido (bloque de texto, imagen y video) en la parte superior del pliegue (lo que ve sin desplazarse hacia abajo) está completamente cargada.

Un buen tiempo de LCP no debe durar más de 2,5 segundos. Teniendo en cuenta las causas de un indicador LCP incorrecto, aquí están nuestras recomendaciones técnicas sobre cómo optimizar el LCP de un sitio web.

LCP o Largest Contentful Paint

  • Causa: respuesta lenta del servidor. Cuanto más tiempo tarda el servidor en leer elementos en la pantalla, más segundos aumenta la métrica LCP.
  • Solución: cambia a un servidor más rápido. En este artículo, hablo sobre los mejores hosting en España. Algunos propietarios usan los comandos de tiempo hasta el primer byte para manejar las respuestas del servidor como se desee, como hacer que se carguen primero las páginas HTML almacenadas en caché.
  • Causa: Carga lenta de grandes recursos (imagen, video, etc.) y carga lenta.
  • Solución: comprime las imágenes y cárgalas en modo de carga diferida. Esto habilitará el caché para los usuarios que vuelven a visitarnos.
  • Causa: renderizado orientado al usuario. Algunos sitios web se desarrollan en lógica JavaScript basada en la representación del lado del usuario, lo que significa que el usuario no podrá hacer nada en el sitio hasta que el contenido esté completamente cargado.
  • Solución: lo mejor para resolver este problema es la eliminación del JavaScript crítico junto con la representación previa.

FID o First Input Delay

El FID o First Input Delay es una métrica que es la encargada de medir la capacidad de respuesta del sitio online.

De manera explícita, es el tiempo que transcurre entre el momento en que el usuario realiza una acción como un clic y el momento en que el navegador responde a esta interacción.

Sin duda ha tenido la experiencia de hacer clic y ver cómo se carga la página hasta que le muestra el resultado de esa acción.

Si buscamos un buen resultado del FID, tiene que ser al menos 0,1 segundos o 100 milisegundos. Para lograr esto, evite a toda costa el uso de Web Worker, un script JS independiente de otros scripts que se ejecuta en segundo plano en una página HTML.

FID o First Input Delay

CLS o Cumulative Layout Shift

El cambio de diseño acumulativo mide la estabilidad visual. A menudo, los elementos de una página se mueven a medida que el contenido se carga y aparece en la pantalla, una experiencia bastante aburrida y que generalmente conduce a muchos clics en el lugar equivocado, arruinando claramente toda la experiencia de navegación.

De hecho, esta métrica CLS cuantifica la frecuencia y la magnitud con la que ocurren estos cambios en una página.

Si tienes un resultado de 0 a 1 (0 significa que no hay movimiento y 1 significa que hay más movimiento), tu desarrollador web podrá medir CLS para mejorar la experiencia del usuario (UX) y la referenciarían de forma natural. En resumen, un CLS débil puede considerarse una página «agradable».

CLS o Cumulative Layout Shift

¿Dónde y cómo comprobar las señales web esenciales?

Vemos cinco herramientas principales para medir y mejorar las señales web esenciales de un sitio web / página web:

Search Console Google

La declaración oficial de Core Web Vitals llevó a la actualización de Search Console . De hecho, Google realizó algunos cambios principalmente en el informe de velocidad, ahora desglosado de acuerdo con las tres métricas anteriores: LCP, FID y CLS.

Google Search Console informa el rendimiento de las URL agregadas por estado, tipo de métrica y grupo de páginas web similares). 

Si tenemos una URL que dispone de datos mínimos para cualquiera de estas métricas, el informe final las omitirá. Una vez que una URL tiene un umbral de datos para cualquier métrica, el estado de la página es el de su métrica más baja.

Search Console Google

Informe de UX de Chrome

Las mediciones del informe UX de Chrome se basan en datos reales del usuario. A su vez, los resultados representan la experiencia de usuarios reales.

En comparación con las pruebas virtuales / locales en entornos definidos y simulados, el resultado captura el conjunto de variables externas que forman y conducen a una UX final.

Por ejemplo, si más visitantes llegan al sitio con dispositivos modernos o mediante una red sólida, los resultados pueden parecer «más rápidos», incluso si el sitio web no está optimizado.

En comparación, una plataforma bien optimizada que atrae a una base de usuarios más pequeña o una comunidad de usuarios más grande en dispositivos o redes más lentos puede parecer «lenta».

Tenga en cuenta que el informe UX de Chrome está disponible como un proyecto público de Google BigQuery. Para acceder a él, además de una cuenta de Google, necesitará un proyecto de Google Cloud.

Informe de UX de Chrome

PageSpeed Insights

Las advertencias web fundamentales en PageSpeed Insights son las mismas que se detallan en Search Console, excepto que solo facilita a los individuos averiguar una página a la vez.

PageSpeed Insights examina el contenido de una sitio web y da recomendaciones para hacer mejor la agilidad. Se ha actualizado para usar Lighthouse 6.0, lo que facilita medir Core Web Vitals en el laboratorio.

PageSpeed Insights

Lighthouse

Es una plataforma para mejorar los rendimientos de sitios web. Realiza auditorías para intentar mejorar la usuabilidad. el rendimiento y las herramientas SEO.

Puedes ejecutar Lighthouse desde la línea de comandos en Chrome DevTools o como un módulo de nodo.

  • Le das a Lighthouse una URL de auditoría
  • Ejecuta una serie de auditorías en la página y luego genera un informe sobre los resultados de la página.
  • Utilice las auditorías fallidas como métricas para mejorar la página.
  • Cada auditoría va acompañada de un documento de referencia que explica por qué y cómo corregir la auditoría.

Desventaja: Lighthouse no muestra la métrica Retraso de la primera entrada.

La razón: el indicador FID no es una medición reproducida en una simulación de carga o en el laboratorio. Requiere un usuario real, pero el valor del tiempo de bloqueo total está fuertemente correlacionado con el retardo de la primera entrada y es medible por Lighthouse.

Pesos de medidas de señales web esenciales en la plataforma Lighthouse

El lanzamiento de Core Web Vitals coincidió con la llegada de Lighthouse 6.0. Por tanto, cada uno de los parámetros utilizados tiene un nuevo peso en la puntuación final. Esta versión desglosa la importancia de las métricas.

Ten en cuenta que es muy probable que estos pesos cambien en futuras versiones de Lighthouse. 

Lighthouse Google

DevTools de Chrome

Son herramientas de desarrollo web integradas directamente en el navegador web Google Chrome. Te ayudará a editar páginas sobre la marcha en la creación de sitios web en menos de dos segundos.

 Chrome DevTools también se ha actualizado para ayudar a los propietarios de sitios a solucionar problemas de fluctuación visual en una página que pueden causar un retraso de diseño acumulativo (métrica CLS).

Procedimiento: seleccione un cambio de diseño para verlo en la pestaña Resumen. Para ver dónde se ha producido el cambio en sí, coloque el mouse sobre el campo Mover a.

Chrome DevTools también prueba el tiempo de bloqueo total (TBT), que es muy útil para optimizar el valor del retardo de la primera entrada.

DevTools Chrome

Conclusión:

Destaca los criterios LCP, FID y CLS que se convertirán en señales de relevancia, aunque ya desempeñan indirectamente un papel en la relevancia de un sitio.
 

Tu objetivo es mejorar la experiencia del usuario, que desempeña un papel importante en la calidad de su sitio web. Recomiendo que te pongas en contacto con un consultor SEO freelance para optimizar el WPO de tu sitio web.

Pero, sobre todo, es importante que optimices tu sitio en los principales criterios de clasificación, si aún no lo has hecho.

Facebook
Twitter
LinkedIn

Subscríbete

2 comentarios en “Core Web Vitals”

  1. Gracias por cualquier otro artículo fantástico. Con tu permiso lo usaré para una presentación que tengo una presentación la próxima semana.Un saludo.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Ir arriba