La experiencia de usuario es uno de los aspectos fundamentales de cara al posicionamiento orgánico, ya que como sabemos, Google siempre ha velado por sus usuarios y cada vez lo tienen más en cuenta.
Por esta razón, en mayo del año 2020, Google anunció lo que llaman las Core Web Vitals, una serie de métricas que tienen como objetivo fundamental ayudar a entender la experiencia de usuario de una manera objetiva, más clara y en consecuencia, mejorarla de una manera más eficiente.
Te estarás preguntando qué es exactamente lo que miden estas métricas, cómo detectamos lo que nos están indicando y por supuesto, cómo mejorarlas. Pues bien, todo esto lo veremos a continuación.
Indice del artículo
¿Qué son las Web Vitals?
Ya hemos comentado que las Web Vitals son métricas que ayudan a entender mejor la experiencia que un usuario obtiene en una página web determinada, tanto para Google como para nosotros.
La experiencia del sitio web debe de tenerse muy en cuenta, de cara a optimizarla y ofrecer la mejor a los posibles visitantes del sitio web.
En este sentido, cada una de las Core Web Vitals representa un aspecto distinto de la experiencia de usuario.
Según la información que nos llega de Google, las Core Web Vitals van evolucionando a medida que pasa el tiempo y actualmente se centran en 3 aspectos fundamentales: carga, interactividad y estabilidad visual.
- Largest Contentful Paint (LCP)
- First input Delay (FID)
- Cumulative Layout Shift (CLS)
A continuación, veremos cada una de estas métricas por separado: ¿Qué significan?, ¿Cómo podemos medirlas? ¿Cómo podemos mejorarlas?
Largest Contentful Paint (LCP)
El Largest Contentful Paint mide el tiempo de renderizado del elemento de contenido visible mayor, es decir, el elemento visible más grande dentro de la ventana gráfica. Entendiendo como ventana gráfica el primer pantallazo del sitio web cuando el usuario accede a él.
De formas más sencilla, se refiere a la velocidad con la que un sitio web aparece en pantalla, realizando una medición en concreto del punto en el que el mayor elemento de contenido aparece en pantalla cuando se está cargando la página
Por ejemplo, si tienes una landing con texto, títulos, subtítulos y una imagen grande, los elementos más grandes de la página (posiblemente la imagen), se considerarán como Largest Contentful Paint (LCP).
En ocasiones, optimizar las imágenes o los vídeos del sitio web para hacer que se carguen más rápido, tendrá como consecuencia que el sitio se optimice para Google, lo que mejorará esta métrica.
El LCP es relativamente fácil de medir e interpretar, pero es importante entender que no mide el tiempo que tarda en cargar de manera completa todo el sitio web, únicamente mide el tiempo que tarda en aparecer para los usuarios el elemento de contenido más grande, dentro de la ventana gráfica
Cómo sabemos si tenemos un LCP bueno
Normalmente la carga de un sitio web empieza por el texto y sigue por las imágenes y los vídeos. Si algún elemento del sitio web tarda mucho en cargar, puede restar a tu posicionamiento orgánico, al no proporcionar una buena experiencia de usuario.
Para que se considere bueno, el LCP debe producirse hasta los 2,5 segundos siguientes al inicio de la carga de la página
En cualquier caso, las herramientas de medición nos pueden mostrar 3 escenarios diferentes.
- Bueno: Para cargas menores a 2,5 segundos.
- Necesita mejorar: Para cargas entre 2,5 y 4 segundos.
- Pobre: Para cargas mayores a 4 segundos.
Cómo medir el LCP
El LCP se puede medir con base en datos de laboratorio o basándonos en datos de campo. Estos últimos se asemejan más a la realidad, ya que tienen en cuenta factores que pueden surgir a lo largo del tiempo, mientras que los datos de laboratorio nos dan una medida exacta.
Vamos a ver las herramientas para medir el LCP
Herramientas de campo
- Informe de experiencia de usuario de Google Chrome
- Page Speed Insights
- Google Search Console (Informe Core Web Vitals)
Herramientas de laboratorio
Cómo mejorar el LCP
Hay cuatro factores en los que pueden centrarse los propietarios de sitios web para garantizar las mejores prácticas de LCP:
- Tiempos de respuesta lentos del servidor
- Tiempos de carga de múltiples recursos
- Renderización del lado del usuario final
- Bloqueo de JavaScript y CSS
First input Delay (FID)
Esta métrica viene referida a la rapidez o interactividad con la que un sitio web reacciona ante la entrada de un nuevo usuario. Es decir, mide el tiempo que el sitio web tarda en responder cuando interactúa un usuario. En español, es más conocido como Latencia de la primera interacción
Se trata de un indicador de rendimiento clave, ya que cuanto más rápido se cargue un sitio y sea funcional para el usuario, más probable será que el usuario permanezca en la página.
Cómo sabemos si tenemos un buen FID
Según la información que nos proporciona Google, para tener un buen FID, esta métrica tiene que estar por debajo de 100ms y al igual que el LCP, esta métrica también se muestra por intervalos.
- Bueno: Hasta 100ms.
- Necesita mejorar: Hasta 300ms.
- Pobre: Más de 300ms.
Cómo medir el FID
En el caso del FID, solo podemos medirlo con herramientas que usan datos de campo, y las vemos a continuación.
- Firebase Performance Monitoring (Beta)
- Informe de experiencia del usuario de Chrome
- PageSpeed Insights
- Search Console (informe Core Web Vitals)
Aspectos por los que podemos tener un FID pobre o mejorable
Existen varias razones por las que podemos tener un FID pobre o mejorable, vamos a ver algunas de ellas, las más relevantes.
Ejecución pesada de JavaScript
Si existe una ejecución excesivamente pesada de los elementos de JavaScript, el navegador no podrá responder correctamente a las interacciones del usuario, lo cual puede causarle frustración y en consecuencia una mala experiencia de usuario.
Para solucionar esto, Google recomienda comprimir los archivos JavaScript y eliminar aquellos que no estén en uso
Rotura de las Long Task
La rotura o bloqueo de una tarjeta larga de JavaScript puede producir retrasos de hasta 50ms en la respuesta del sitio web desde que el usuario realiza la acción.
Podemos solucionarlo al dividir los procesos grandes en otros más pequeños. De esta forma mejoraremos los tiempos de procesamiento y de ejecución de JavaScript.
Cumulative Layout Shift (CLS)
Esta métrica mide la suma de todos los cambios con respecto al diseño que se pueden dar en un sitio web. Es decir, se determina la estabilidad visual del sitio web, midiendo cuántas veces aparecen los elementos de diseño (texto, imágenes, archivos de audio, vídeo, etc.) durante la carga de la página.
Lo vemos con un ejemplo de un caso posible y sencillo. En algunas páginas, cuando empieza la carga, se pueden ver algunos elementos en un lugar y al terminar la carga aparecen en otro distinto. El tiempo que se tarda en que los elementos aparezcan colocados en su lugar final, es lo que conocemos como CLS.
Cómo sabemos si tenemos un buen CLS
Acorde a la información que nos proporciona Google, para que una web cumpla con las estándares de Core Web Vitals en relación con el CLS, este debe de ser menor a 1.1s
Al igual que en las métricas anteriores, podemos ver los resultados segmentados:
- Bueno: Hasta 0,1.
- Necesita mejorar: Hasta 0,25.
- Pobre: Más de 0,25.
Cómo medir el CLS
En este caso tenemos herramientas que nos proporcionan datos de campo y herramientas en las cuales podemos consultar datos de laboratorio.
Herramientas de campo
- Informe de experiencia de usuario de Google Chrome
- Page Speed Insights
- Google Search Console (Informe Core Web Vitals)
Herramientas de laboratorio
- Lighthouse
- Webpagetest
- DevTools de Chrome
¿Cómo puedo mejorar el CLS en mi sitio web?
A continuación vamos a ver algunas acciones que podemos emprender para mejorar el CLS.
- Optimizar el tamaño de las imágenes
- Dimensionar los banners y anuncios
- Evita usar contenido dinámico como sliders, o pop ups
Cómo afectan las Core Web Vital al SEO
Desde el pasado mes de mayo de 2021, Google añadió las Core Web Vitals como uno de los factores a tener en cuenta de cara al ranking.
Como hemos comentado en este post, Google siempre vela por los usuarios, y esta actualización tiene la clara intención de seguir en esta línea, más concretamente por la experiencia de usuario. Por ello las Core Web Vitals tienen un peso importante de cara al posicionamiento orgánico, es decir, el SEO.
Además, si nos fijamos en el panel de la herramienta para webmasters, Google Search Console, veremos que se ha introducido un panel en el que se muestran estas métricas. Esto nos da una pista o señal importante sobre la importancia de estas métricas para Google.
Como he comentado, actualmente se está centrando en las métricas que hemos explicado en este post, pero se pueden añadir nuevas métricas. De hecho, Google ya ha dado avisos en este sentido, que se añadirán dentro de la idea de mejorar la experiencia de página.
Conclusiones
Las acciones o nuevas actualizaciones que realiza Google, siempre o en la gran mayoría de los casos, van enfocados hacía el usuario. En este caso en concreto, las Core Web Vitals pretenden mejorar la experiencia de usuario de navegación por el sitio web.
Son un factor importante a tener en cuenta de cara a mejorar el posicionamiento orgánico, por lo que es importante conocerlas, interpretarlas, medirlas y optimizarlas correctamente.
Puedes ver aquí el vídeo:
Deja un comentario