Core Web Vitals y la importancia de la velocidad web

Google sigue persiguiendo con ahínco, la manera de ofrecer a los webmasters las herramientas necesarias para optimizar el tiempo de carga de las páginas web. No sólo porque es beneficioso por el coste que supone el rastrear y cachear los recursos no optimizados, sino también para mejorar la experiencia del usuario al navegar por la web.

Es en esto último donde Google pone el foco y desde hace unos años lleva ofreciendo a los webmasters diferentes herramientas de optimización de velocidad de carga. Ahora se ha vuelto a sacar de la manga 3 métricas que aúnan los problemas más comunes que se encuentra al renderizar los HTML. Las Core Web Vitals no sabemos si han nacido para quedarse, pero hoy por hoy debemos conocerlas y profundizar en su optimización. Todos queremos tener la mejor cara cuando nos visita «el jefe».?

La finalidad de este artículo es dar a conocer qué son las Core web Vitals, cuál es su funcionamiento y la importancia que tienen en la velocidad y los tiempos de carga de un sitio web. ¡Vamos allá!

IMPORTANTE (actualizado el 10 de Noviembre de 2020): Google acaba de actualizar que a partir de Mayo de 2021, las Core Web Vitals serán un factor muy importante de posicionamiento junto con el de experiencia de usuario. Artículo en el blog de Google

¿Qué son las Core Web Vitals?

Las Core Web Vitals son métricas creadas por Google para mejorar la experiencia del usuario en los sitios web. La gran variedad de herramientas que existen para analizar la velocidad de carga, han sido uno de los factores que Google tuvo en cuenta para unificar todas estas métricas, y poder así, simplificar un poco la complejidad que supone una optimización de los tiempos de carga. Esta iniciativa persigue que nos centremos en estas «señales de calidad» tan importantes para lograr una óptima experiencia del usuario.

Google resume en pocas palabras en qué se centran las Core Web Vital:

• Experiencia de carga
• Interactividad
• Estabilidad visual del contenido de la página

Large Content Paint o LCP

El LCP o Large Content Paint es una métrica que nos indica el tiempo de carga para que el contenido «más grande», que puede ver el usuario, esté disponible y sea útil. En otras palabras, Google está diciendo que los elementos dispuestos en lo que conocemos como «Above the Fold»  tienen que cargar rápido y ser legibles, y de esta forma estar a la disposición del usuario para que interactúe con ellos.

Hay que aclarar que los elementos que aparecen cuando el usuario hace clic en la pantalla o scroll, no afectan al LCP. El contenido más grande puede ser un bloque de texto, un vídeo, una imagen, etc…

Clasificación del status de LCP de acuerdo a los tiempos. Imagen © web.dev

¿Qué tiempo considera Google óptimo?

Como vemos en el gráfico, Google considera que el tiempo máximo para cargar el LCP y ofrecer una buena experiencia de usuario, se sitúa antes de 2,5 segundos. Es importante matizar que durante la carga el elemento LCP puede cambiar.

¿Cómo puedo saber cuál es el LCP de una URL?

En el propio navegador Chrome, tenemos a través de la realización de una auditoria de Lighthouse, la opción de conocer qué considera Google como el contenido más grande a cargar. Te lo mostramos:

¿Qué factores pueden influir en la carga del LCP?

Varias acciones influyen en que la carga del LCP sea superior a la esperada, estos elementos o acciones son:

• Respuesta del servidor
• Consultas a la BBDD
• Respuestas a API’s que tardan en resolverse
• CSS o JS que bloquean el renderizado
• Lentitud al cargar otros recursos
• Imágenes no optimizadas
• Etc…

First Input Delay o FID

El FID o First Input Delay es una métrica que indica cuánto tiempo tarda en reaccionar la página cuando el usuario interacciona con alguno de los elementos.

Métricas extraídas de Pagespeed

En la herramienta Pagespeed, que desde hace un tiempo Google puso a disposición de todos, podemos ver la referencia a esta métrica. Los valores que se consideran buenos deben estar por debajo de los 100 ms.

Clasificación del status de First Input Delay (FID) de acuerdo a los tiempos. Imagen © web.dev

Las principales causas con problemas con esta métrica (FID) vienen dadas por la ejecución del JavaScript, por lo que habría que identificar qué parte del código está produciendo que la página tarde en reaccionar a la interacción. Particularmente he experimentado este problema con cargas de JS de publicidad.

Cumulative Layout Shift o CLS

La Cumulative Layout Shift, es una métrica que viene a poner límites a la carga de elementos que van modificando la visualización a medida que se van cargando. Hablamos de dar una estabilidad de los elementos en pantalla para que no se modifique al ir cargando otros recursos.

Google considera, (bueno Google y todo usuario?), que es muy molesto que, cuando hemos comenzado a interactuar con una página (ya sea lectura, haciendo scroll, etc..) un elemento que cargado posteriormente modifique la posición del usuario respecto al contenido, teniendo este que corregir haciendo scroll.

Este ejemplo nos ayuda a explicar mejor cómo funciona esta métrica. En un primer momento vemos el contenido cargado en la parte de la izquierda. Cuando Google habla de estabilidad se refiere a que la carga de un tercer elemento no desplace los cargados anteriormente. Como vemos en la imagen de la derecha, la carga del vídeo de YouTube ha hecho desplazarse a los dos bloques que se cargaron en un primer momento.

¿Por qué son importante las Core Web Vitals?

Desde que convivimos con los buscadores y más concretamente con Google, éste ha ido incorporando obligaciones para todo aquel que tuviera un página web y quisiera que fuera una de las opciones en los resultados de búsqueda.

Mejorar la accesibilidad desde todos los dispositivos, favorecer una navegación segura bajo un protocolo de seguridad, o penalizar aquellas webs que usaban publicidad invasiva (intersticiales), han sido alguna de las batallas del gigante tecnológico.

Estas métricas son indicativos que nos da Google para señalar qué parte de la web pueden resultar un problema para el usuario pero… ¿Eso quiere decir que es importante??

Tanto si entendemos las webs desde un punto de vista de los «robots» como de los «usuarios» estas métricas son indicadores de que nuestros sitios web no están funcionando todo lo bien que se debería. Ya hemos visto en varios estudios lo influyente que es el tiempo de carga para la conversión y para la paciencia del usuario. Actualmente no tienen influencia en los rankings, pero ¿vamos a obviar estas métricas?

Por nuestra parte, desde luego que las tendremos en cuenta.?

¿Las Core Web Vitals afectan a los rankings?

A día de hoy lo único que sabemos es que las métricas para mejorar la experiencia de usuario son cada vez más importantes y algunas de ellas, ya las está teniendo en cuenta en los resultados de búsqueda. En el artículo del 28 de Mayo del blog de Google nos adelantó que en el 2021 espera desplegar un nuevo Update para incorporar varias métricas relacionadas con la experiencia de usuario.

Solo tenemos que recordar cómo trató el Mobile First Index y los avisos previos. En este caso haciendo referencia de nuevo al artículo de mayo; avisa de que habrá una notificación previa de al menos 6 meses, por lo que… ¿Habrá actualización a final del año que viene??

Herramientas para Optimizar las Core Web Vitals

Ahora que ya hemos hablado de qué son las Core Web Vitals y la importancia que tendrán en los próximos meses, es la hora de comenzar a trabajar en la optimización de esta métricas. A través de diferentes herramientas podremos atacar los problemas que se detectan y lograr una mejora de rendimiento.

Lighthouse

Lighthouse es una potente herramienta de código abierto que encontramos en Chrome. A través de Lighthouse, podemos hacer una auditoria de nuestra página web en la que se realizan diferentes pruebas para obtener resultados de las carencias o partes de la página que necesitan ser optimizadas. Entre estas partes están las métricas de las Core Web Vitals.

Imagen extraída de los resultados de la auditoría de Lighthouse

Page Speed Insights

Page Speed Insights es otra opción que nos facilita Google para obtener los datos de rendimiento de nuestra página web. En esta herramienta incluso nos muestra unas gráficas de las métricas más importantes y de su estado. Page Speed Insights se basa en un informe de experiencia de usuario cuyo objetivo es obtener unos datos en comparación con otras webs.

Métricas que nos ofrece Page Speed Insights

Chrome UX

Chrome User Experience Report es un conjunto de datos que facilita Google sobre el comportamiento de los usuarios por todo el mundo a través de Chrome. Para acceder a estos datos hay que utilizar Big Query, además de disponer de una cuenta de Google Cloud.

A través de Google Data Studio, nos han facilitado este acceso y nos lo dejan todo semi-preparado en este Dashboard

Chrome Dev Tools

No sólo con Lighthouse podemos analizar las métricas de Core Web Vitals, si nos adentramos con las herramientas de desarrollador de Chrome, podemos llegar a sacar las mismas conclusiones. Por ejemplo en la pestaña «Performance» si hacemos una grabación o una nueva carga, podemos obtener información valiosa de cómo se está comportando nuestra URL.

Captura realizada en la opción Performance de Chrome Dev Tools

Web.Dev

Siempre hay una forma más sencilla de hacer las cosas, por lo menos en lo que se refiere a conocer nuestra Core Web Vitals. En la web oficial, disponemos de una página que nos detallada cada métrica y nos da una explicación de qué es y prácticas para mejorarla.

Además, en la Chrome Store tenemos una extensión que nos da dicha información al entrar en cada URL:

Con una indicación de color rojo o color verde podemos ver el estado de nuestra URL respecto a estas métricas:

Captura de los resultados que nos da la extensión de Web Vitals

Search Console

Search Console es una herramienta indispensable para cualquier webmaster. En ella se ha incorporado una opción que nos ayuda a ver qué urls presentan problemas con estas 3 métricas (LCP, PID y CLS). En la parte izquierda donde se encuentra el menú, tenemos la opción de «Métricas Web Principales» . Cuando elegimos esta opción, nos saldrá dos gráficas que ofrecen los resultados de las URL’s por dispositivos, si elegimos el dispositivo (ordenador o móvil), veremos en detalles qué URL’s presentan problemas.

No te asustes si ves un número de URL’s alto a la derecha, esto es relativamente normal, ya que los problemas suelen darse por tipos de página (por ejemplo las entradas del blog) y trabajando sobre una de ellas obtendremos la mejora en todas.

Conclusiones

Este recorrido por las Core Web Vitals, tienen como objetivo adentrarnos en unas métricas que cada vez más irán adquiriendo protagonismo y nosotros, ya seamos SEO’s o Webmasters, vamos a convivir con ellas. Desde SEO Alive queremos recomendarte que te sirvas de todas estas herramientas que te hemos proporcionado y que sin duda te ayudarán a mejorar el rendimiento WPO de tu sitio web.?

¿Aceptas el desafío de mejorar la velocidad de tu web? Haz un test con cualquiera de las herramientas que te hemos comentado y envíanos un mensaje con una captura de pantalla. ¡Te daremos un consejo para mejorarla de forma totalmente gratuita!