Qué son los Core Web Vitals y para qué sirven

Los "Core Web Vitals" o "Métricas Web Principales" son métricas que sirven para evaluar el rendimiento de un sitio web en relación a la experiencia de usuario (UX), y de momento miden tres elementos básicos: la carga de la página, interactividad y estabilidad visual del sitio.

Algunas de estas mediciones ya están presentes en la herramienta Page Speed Insights. Lo que busca Web Vitals es entregar una visión más completa sobre la calidad de la experiencia que los usuarios tienen con un sitio web, y a la vez simplificar la manera de medirlo a través de índices.

Se espera que Google empiece a utilizar Core Web Vitals como factores para rankear los sitios en los resultados de búsqueda durante 2021, por lo que serán importantes para que nuestra web obtenga un buen posicionamiento. Los índices funcionan en base a una escala, donde se puede obtener una calificación de experiencia "Buena", "Necesita mejoras" o "Pobre".

Los índices son:

• Largest Contentful Paint (LCP): Mide el intervalo de tiempo desde que comienza a cargar el sitio hasta que el elemento más grande se cargue completamente. Actualmente para obtener una calificación "Buena" tiene que cargar en 2,5 segundos. Si se demora más de 4 segundos es "Pobre".

• First Input Delay (FID): La cantidad de tiempo que le toma a una página estar lista para que el usuario pueda interactuar con ella (que la página responda cuando se hace un click, scroll, o se usa el teclado). Para obtener una calificación "Buena" debe ser menor a 100 ms, más de 300 ms es "Pobre".

• Cumulative Layout Shift (CLS): Mide cuánto varía la estructura de una página mientras está cargando. Específicamente mide la distancia y fraccionamiento del viewport, que cambia debido a manipulación del DOM o falta de dimensiones para elementos importantes. Por ejemplo si una imagen principal no tiene dimensiones definidas, puede cargar el texto primero y cuando la persona está leyendo, el texto se mueve para abajo cuando carga la imagen principal. Los casos más dramáticos son cuando ocurre con botones o banners, donde el usuario puede hacer un click equivocado porque el botón se movió. El puntaje a obtener debe ser menor a 0,1 para obtener una calificación "Buena", más de 0,25 es "Pobre".

Cómo medir los Web Vitals

Para evaluar los Web Vitals de un sitio que ya está disponible en Internet se puede consultar Search Console, donde Google incorporó estos índices en el dashboard. Se puede ver cómo están tanto para desktop como móvil en cada URL indexada y se puede revisar página por página donde hay problemas.

Dependiendo de las condiciones, los índices pueden variar mucho, y de hecho pueden ir cambiando mientras un usuario navega un sitio web. También serán distintos los resultados entre un sitio en desarrollo o de pruebas y la versión productiva.

Existen varias herramientas que se pueden usar para evaluar un sitio:

• PageSpeed Insights: Entrega información de los web vitals y otras métricas que ayudan a mejorar sitios con problemas, particularmente enfocadas a la velocidad de carga de una página.

• Extensión Web Vitals para Chrome: Esta nueva extensión permite acceder a los índices e ir revisando cómo varían al interactuar con el sitio, para buscar problemas específicos, como por ejemplo el desplazamiento de elementos o demoras en la carga de algunos objetos.

• WebPageTest: Esta herramienta independiente desarrollada por ingenieros de Chromium permite configurar una variedad de condiciones para analizar un sitio. Incluye una API RESTful.

• Google Search Console: Si tienes tu sitio inscrito en Search Console, puedes revisar los Web Vitals desde aquí, viendo página por página cómo responde y si hay grupos de páginas con problemas similares.

Chrome Dev Tools: Chrome entrega un set de herramientas para descubrir o rastrear problemas, con información detallada con la que se pueden evaluar los diferentes elementos.