¿Qué son los Core Web Vitals?

que son los core web vitals

Web Vitals fue una iniciativa de Google que concede una guía de indicadores que ayudan a los creadores de contenido y páginas web a lograr una mejor experiencia a los espectadores cuando entran en su sitio. A pesar de que puede ser complicado mantenerse actualizado con todas las herramientas y métricas existentes en la actualidad, el objetivo de Web Vitals no es más que el de simplificar y ayudar a
estos sitios web a enfocarse en lo primordial; los Core Web Vitals.

Pero ahora sí ¿Qué son los Core Web Vitals? Es el conjunto de varias Web Vitals que se deben aplicar y medir en cada página web, representan las diferentes etapas del recorrido del comprador en la página y cuyo objetivo principal es equilibrar la carga de un sitio web, tú sitio web, en cuanto a rapidez y accesibilidad para crear una experiencia más agradable y garantizar que los que necesiten del contenido
que tu creas te tengan en cuenta en primer lugar.

En el año 2020 se centraron en tres aspectos primordiales; la carga de contenido (LCP), la estabilidad visual (CLS) y la interactividad con la página (FID). Entonces, y más resumidamente, para poder comprender las Core Web Vitals debemos familiarizarnos con las métricas de nuestra página basada en esos tres aspectos.

Core Web Vitals: Sus tres aspectos

Largest Contentful Paint (LPC):

Se refiere al tiempo para el despliegue del contenido más largo, mide el rendimiento de carga que tuvo tu sitio web. Para brindar una buena experiencia el LCP debe darse dentro de los 2,5 segundos desde que tu página comience a cargarse; lo mejor para el posicionamiento de páginas web es que estos tiempos sean lo más cortos posible. Te vamos a dar algunos consejos para que puedas implementar y así mejorar tu LCP:

  • Permitir el almacenamiento caché: Si habilitas la posibilidad que se almacene el Caché, los usuarios que hayan ingresado recientemente notarán una gran diferencia de los tiempos de carga entre tú página y las demás.
  • Elegir la carga diferida: Esto hará que las imágenes y demás archivos se irán cargando conforme el usuario vaya descendiendo por la página.
  • Comprimir las imágenes: Algo que debe saber es que las imágenes en muchos casos son lo más pesado en un sitio web, utilizar una herramienta que te ayude a comprimirla sin quitarle calidad es una gran opción para tu página.

Cumulative Layout Shift (CLS):

Se refiere al cambio acumulativo en el diseño, mide la estabilidad visual que tiene el cliente en la página y ayuda a cuantificar la frecuencia con la que los usuarios experimentan cambios de diseño; un CLS bajo ayuda a garantizar y a medir que estos cambios se den de forma natural y no tan brusca en el diseño a la hora de entrar en tu página web. Para entregar una buena experiencia tu página debe tener un CLS menor a 0,1. Te damos unos tips para mejorarlo en caso de que lo necesites:

  • No quieras añadir un contenido por sobre el que ya está creado, exceptuando que sea en respuesta a un comentario que te hayan dejado ya estos cambios son esperados por los clientes.
  • Cambiar el tamaño de las imágenes usando la relación entre el ancho y la altura. Esto nos permitirá que el navegador calcule más   precisamente el espacio necesario para mostrar la imagen y reducir así el riesgo de algún movimiento inesperado de contenido.
  • Cuando el usuario descarga las fuentes, a menudo se muestra un espacio en blanco hasta que se carga el contenido de tu sitio web; Hasta a veces luego de descargar y mostrar la fuente el diseño se suele mover bastante. Para que esto no pase o que los cambios sean menos notorios podes utilizar valores font: display como auto, fallback, swap, block u optional. Pero si quieres un
    resultado aún más prolijo también puedes precargar las fuentes usando <linkrel=preload> de forma tal que el archivo será descargado como prioritario antes que el usuario vea el contenido de tu página.

First Input Delay (FID):

Se refiere al tiempo de tardanza de la primera entrada al sitio web, mide la interactividad y ayuda a mejorar la primera impresión según la interactividad y capacidad de respuesta de tu sitio web, las primeras impresiones en el mundo del marketing son importantes y muchas veces ellas dependen de la velocidad de respuesta que tiene cada página, si tarda en cargarse entonces lo más probable es que el tránsito de usuarios disminuya. Para entregarle una experiencia positiva a los usuarios que entren en tu página ésta debe tener un FID menor a 100 milisegundos. Para poder mejorar el FID de tu sitio web a continuación te damos algunos consejos:

  • Las tareas de JavaScript suelen ser la principal causa de que la aplicación del FID no se esté dando correctamente, esto bloquea el hilo principal del navegador durante un tiempo prolongado y en consecuencia no permite interactuar al usuario. Una solución a esto puede ser dividir los procesos grandes en tareas más pequeñas o generar todo el contenido estático posible, eso generará que se libre una carga de JavaScript.
  • Mover las operaciones que no se efectúan en la conexión con el usuario hacia un subproceso del trabajo principal, pueden reducir el tiempo de bloqueo del subproceso principal y mejorar el FID. Para esto puedes utilizar Web Workers o utilizar bibliotecas para facilitar el uso de trabajadores web, te dejamos algunos ejemplos: Comlink, Workerize, Workway.

Algunas herramientas que puedes utilizar para medir estos tres aspectos son:

  • Herramientas de campo:
    • Chrome user experience report
    • Pagespeed Insights
    • Search Console (Core Web Vitals report)
    • Biblioteca JavaScript
  • Herramientas de laboratorio:
    • Chrome DevTools
    • Lighthouse
    • WebPageTest

Medir Core Web Vitals: Genera informes sobre el rendimiento de tu web.

Google cree que las Web Vitals son fundamentales para el desarrollo y la experiencia de una página web; por esto mismo decidieron hacer surgir métricas en sus herramientas más populares y muchas de ellas son compatibles con los Core Web Vitals. A continuación te enseñamos cuáles:

  • Informe de experiencia del usuario de Chrome: Este recopila datos de usuarios reales y anónimos para cada Core Web; lo que logra que puedas evaluar el rendimiento que tu sitio web está teniendo de forma más rápida.
    Pero no siempre proporcionan la telemetría específica por página vista que es necesaria para diagnosticar y reaccionar a las regresiones con precisión. Además incrementa herramientas como PageSpeed Insights y el informe de Core Web Vitals de la Search Console.
  • JavaScript: Una forma sencilla de medir el rendimiento de los Core Web Vitals es utilizando la biblioteca de JavaScript de Web-Vitals, la cual mide las métricas de manera coincidente con la forma en que son informadas por todas las herramientas de Google. Una vez que agregas los datos de tus Core Webs a un punto de análisis, lo que sigue es crear un reporte que incluya esos datos para saber si tus páginas cumplen con el porcentaje estimado para alrededor de un 75% de visitas o interacciones con tu página.
    Dentro de esta herramienta existe el Web Vitals Report, la cual te da la posibilidad de medir tus Core Webs por medio de Google Analytics y temes gráficos precisos de tu rendimiento y el de tu página.
  • Herramientas de laboratorio: Si bien la mayoría de las Core Webs se miden en el campo y con métricas más precisas, varias de ellas pueden medirse en un “laboratorio”. Esta clase de medición es la más conveniente para probar el rendimiento de una función durante su desarrollo, es decir, antes de ser publicada y compartida; también sirven para medir las regresiones que podría tener antes de que estas sucedan realmente. Las siguientes herramientas pueden medir los Core Webs en un laboratorio: DevTools de Chrome y Lighthouse (aunque solo se pueden utilizar cuando queremos medir LCP y CLS). Pero también recuerda que la medición de laboratorio no sustituye a la de campo y hasta puede verse afectada por varios factores (la condición de la red del usuario, si está o no realizando otra actividad en el dispositivo, la interacción con la página, etc). Es por esto que la medición de campo es imprescindible para tener una visión precisa de los datos.
  • PageSpeed Insights: Concede datos sobre el rendimiento de páginas tanto en celulares como en ordenadores y ofrece consejos para perfeccionarla. Integra los datos dentro del informe de Experiencia del Usuario de Chrome
    (CrUX) que enseña las estadísticas de cada sitio web y se facilitan datos de las métricas First Contentful Paint (FCP) y DOMContentLoaded (DCL). Y además compara la media de cada una de ellas con los datos incluidos en el informe CrUX y una vez hecho esto se asignan a una de estas categorías:

    • Rápida: la media de la métrica se encuentra en el tercio más rápido de todas las cargas de páginas.
    • Lenta: la media de la métrica se encuentra en el tercio más lento de todas las cargas de páginas.
    • Normal: la media de la métrica se encuentra en el tercio intermedio de todas las cargas de páginas.

Y luego se calcula una puntuación de velocidad general teniendo en cuenta la categoría de que tuvo cada métrica anteriormente:

    • Rápida: todas las métricas de una página se encuentran en el tercio más
      rápido.
    • Lenta: alguna métrica de una determinada página está en el tercio más lento.
    • Normal: engloba el resto de los casos.

Algunas recomendaciones para mejorar sus puntuaciones…

Cuando hayas medido e identificado las áreas de Core Web Vitals en ascenso, lo que resta es optimizar. Las guías que te dejamos acá abajo van a ayudarte a saber cómo optimizar dependiendo el tipo de Core Web Vital.

Optimizar LCP
Optimizar FID
Optimizar CLS

Web Vitals para SEO: Más herramientas para seguir optimizando.

Más allá de los Core Web Vitals que te enseñamos y explicamos a lo largo de este artículo, existen varios otras métricas viables que cumplen con su función de forma correcta. Aunque debemos decir que en su mayoría estas Web Vitals sirven como complementos para las originales; para ayudar a detectar un problema específico y resolverlo con mayor eficiencia o para contribuir a mejorar la experiencia de los usuarios que se pasen por tu sitio web.

Las métricas First Contentful Paint y Time to First Byte son aspectos fundamentales de la experiencia de carga y son útiles para detectar conflictos con LCP (como tiempo de carga de sitios web lentos). Otro ejemplo son métricas como Total Blocking Time y Time To Interactive son métricas de laboratorio indispensables para detectar y resolver problemas relacionados a la interactividad que afectan de forma directa al FID.

Efectos de los Core Web Vitals en el SEO: ¿Cómo afectarán el posicionamiento orgánico de tu web?

Los Core Web Vitals están en un plano inferior respecto a la relevancia de una web para responder a cierta consulta, esto quiere decir, si el contenido de un sitio web es de calidad y contesta justo a lo que el usuario está buscando, posicionará mejor a esa página que una que tenga los indicadores de experiencia en página óptimas pero que muestre un contenido pobre a su audiencia. Estos indicadores funcionan
como un umbral mínimo al que llegar y, a partir de ahí, rebajar milésimas de segundo en el tiempo que los usuarios ingresan a tu página web. Piénsalo así, si ofreces una buena primera impresión a aquellos que ingresen en tú página las visitas claramente subirán y con ellas las calificaciones positivas, el algoritmo de Google te posicionará cada vez más arriba en sus buscadores y tu público crecerá a
medida que eso suceda.

El equilibrio entre las tres herramientas de Core Web Vitals tendrá una gran influencia en el posicionamiento de tu página de ser utilizado y ejecutado de forma adecuada; cuanto mejor sea este posicionamiento, más arriba aparecerá tu sitio web en las SERPS (Search Engine Results Page) en inglés, se refiere a las páginas de resultados mostradas por un buscador específico y donde querrás que tu página se posicione para así tener más visitas). Un modelo de desarrollo responsive, accesible y orientado a la adaptación móvil siempre será considerado como la mejor alternativa al momento de querer lograr una experiencia que para el usuario resulte satisfactoria y lo ayude a encontrar lo que está buscando y además ¡Gracias a ti!.

Conclusión

A pesar de que las Web Vitals, especialmente Core Web Vitals, son los mejores indicadores de calidad y contenido que se conocen en la actualidad y que su aparición en el mundo del Marketing Digital es bastante reciente esto no significa que sean perfectos o inmejorables; es más, estamos emocionados por saber que otra función se les adherirá en sus próximas actualizaciones. Sin embargo llevará un
tiempo en realizarse y los desarrolladores de esto sistemas deben esperar a que los Core Web Vitals sean estables y tengan un período de actualización entre cada uno por el tiempo de prueba que lleva cada uno, si bien son herramientas de campo también llevan una gran investigación de trasfondo para poder comprender como funciona el mercado; con el resto de Web Vitals, como los que te mencionamos antes, la situación cambia y se tornan más experimentales y cambiantes que los Core, debido a que suelen ser en la mayoría de los casos un acompañamiento de la herramienta principal.

Deja un comentario

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