¿Qué son los Core Web Vitals?

Mejora tu UX y potencia tu SEO

Te enseñaremos cómo usar los Web Vitals para mejorar la experiencia de usuario de tu web. ¿Necesitas ayuda con tu posicionamiento SEO? ¡Solicita una reunión gratuita!

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 <link
    rel=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

Somos rápidos y eficientes

Tu página web en 72hs

¿Necesitas una landing page? Nuestros sitios de página única son ideales para posicionarse en búsquedas de productos, servicios o realizar campañas publicitarias.

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 tí!.

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.

Dejar un comentario

Tu dirección de correo electrónico no será publicada.

¿Quieres ampliar más tus conocimientos?

Estos artículos podrían interesarte

Marketing Digital

Tendencias Instagram 2022

Tendencias Instagram 2022 ¿Cómo cambiará Instagram? Año nuevo, vida nueva. Instagram se lo ha tomado en serio y en 2022 implementará grandes cambios, que debes

Leer más »
Marketing Digital

Email MKT

E-mail marketing para negocios ¿Qué es el Email marketing? Los correos electrónicos fueron fundamentales en cualquier estrategia de marketing exitosa este 2021, principalmente en E-commerce.

Leer más »

Nuestros servicios de marketing en linea

Con una plan de marketing a medida, lograremos que cumplas tus objetivos.

Llevamos años creando webs óptimas para cada rubro, con el fin de que obtengas nuevos clientes y hagas mas ventas.

 Cómo agencia de marketing, nos dedicamos a la gestión de redes sociales, copywritting, publicidad en Google y redes, e-mail marketing y SEO.

Creamos una apariencia profesional para tu negocio, mediante diseño online y offline, fotografía y video ¡Se el centro de atención!

¡Hablemos!

Rompe el hielo

agosto 2022
Lun Mar Mié Jue Vie
12345
89101112
1516171819
2223242526
29303112

Escoge el día y la hora

Nos reuniremos 30 minutos para que puedas contarnos todo acerca de tu proyecto y así darte una solución

¡A TÚ MEDIDA!

 

TIP: ¡Anótate todas las preguntas antes de comenzar!

Escoge el día
y la hora

Nos reuniremos 30 minutos para que puedas contarnos todo acerca de tu proyecto y así darte una solución

¡A TÚ MEDIDA!

TIP: ¡Anótate todas las preguntas antes de comenzar!

agosto 2022
Lun Mar Mié Jue Vie
12345
89101112
1516171819
2223242526
29303112