Core Web Vitals

¿Qué son las Core Web Vitals?

Las Core Web Vitals son un conjunto de métricas que ha establecido Google para mejorar la experiencia de usuario en las páginas web. Dicho de otra forma, son factores que el motor de búsqueda tiene en cuenta para puntuar la experiencia en la página, y que se corresponden con distintas facetas de la misma.

A través de las Core Web Vitals se intenta responder a tres preguntas:

  • ¿Con qué rapidez se carga una página?
  • ¿Cuánto tarda una web en ser interactiva?
  • ¿Qué tiempo pasa hasta que un website se estabiliza?

Pues bien, Google ha señalado que las Core Web Vitals irán evolucionando con el paso del tiempo. Pero en estos momentos se centra en tres aspectos que tratan de dar respuesta a los interrogantes anteriores.

vitales de la red central

 

Largest Content Paint (LCP)

Se refiere al tiempo que tarda en cargarse el contenido más grande que el usuario puede ver. Google ha señalado que los elementos dispuestos en lo que se conoce como “Above the Fold” (refiriéndose al contenido que el usuario puede ver sin hacer scoll) deben estar disponibles rápidamente, y ser legibles.

Los elementos que se le muestran al usuario una vez que hace clic en la pantalla no afectan al LCP. Al hablar del mayor contenido podemos referirnos por ejemplo a una imagen o un bloque de texto.

Para Google el tiempo máximo que debería tardar en cargar el LCP para poder hablar de una buena experiencia de usuario sería menos de 2.5 segundos.

 

First Input Delay (FID)

Hace referencia a la interactividad, es decir, cuánto tarda la página en responder cuando el usuario interacciona con alguno de los elementos que esta contiene. Es decir, se trata de la rapidez con la que actúa el navegador y produce un resultado a partir del momento en que un usuario hace un clic.

El motor de búsqueda considera que un buen FID debe ser de menos de 100 milisegundos. De 100 a 300 milisegundos es necesario realizar mejoras, y un valor superior a 300 milisegundos podría resultar alarmante.

 

Cumulative Layout Shift (CLS)

Esta métrica va referida a la carga de elementos que modifican la visualización de la página según esta va reaccionando. Lo que se busca en este caso es que asegurarse de que los contenidos en pantalla tengan una estabilidad y no se modifiquen a medida que otros recursos se cargan.

Google estima (y con razón) que resulta de lo más molesto que cuando unos elementos de la página se cargan, hagan que otros se muevan. El resultado muchas veces es que el usuario termina haciendo clic en un sitio que no quería. Y el motor de búsqueda considera un buen CLS el que se sitúa por debajo de 0,1 segundos.

 

¿Por qué son importantes?

Ya en mayo de 2020 Google nos ponía sobre aviso: llegaría el momento en que diferentes señales que miden la experiencia del usuario en la página serían tenidas en cuenta a la hora de ordenar los resultados de búsqueda. Lo cual supondría un gran impacto a nivel de SEO.

Sin entrar en detalle empezaba a hablarnos de las Core Web Vitals, que ya en estos momentos son fundamentales por una razón: porque Google comunicó en noviembre de 2020 que para mayo de 2021 empezarán a ser un factor de posicionamiento sustancial.

El buscador había prometido anunciar con seis meses de antelación la actualización de la experiencia de la página, y así lo hizo en su blog oficial el 10 de noviembre del año pasado.

Por ello aquellas páginas en las que no se cumplan los valores que se consideran adecuados en estas métricas lo tendrán muy difícil para aparecer en las primeras posiciones de la SERP.

Ante un escenario como este, el motor de búsqueda recomienda prepararse con tiempo para comprobar que estas métricas se cumplen en los sitios web, para cuando llegue el momento de que el algoritmo de Google las aplique.

De forma que en un futuro ya muy cercano, las Core Web Vitals en conjunto con otras métricas definirán la experiencia en la página y tendrán un papel decisivo en el posicionamiento SEO.

experiencia del usuario

Ahora bien, ¿las Core Web Vitals son importantes solo porque Google las considerará un factor de posicionamiento dentro de poco tiempo? En realidad si el motor de búsqueda ha tomado esta decisión es porque estos aspectos resultan fundamentales por tres razones:

  • Mejoran el engagement y la experiencia del usuario.
  • Sirven para que los editores evalúen el rendimiento de una página.
  • Dan continuidad a la experiencia en la página a través de distintos dispositivos: Pc’s, móviles y tablets. 

 

Cómo medir Core Web Vitals

Puedes medir estas métricas a través del informe Core Web Vitals de Google Search Console (GSC), que indica qué URLs necesitan mejoras. A partir de ahí, puedes investigar lo que requiere tu atención, y debes optimizarlo.

Ahora, con FandangoSEO, también puedes monitorizar los Core Web Vitals. Detecta rápidamente cualquier área de tu sitio que necesite ser mejorada. Para acceder a esta función, una vez que abras tu proyecto, sólo tienes que ir a Page Info > Core Web Vitals.

Para acceder al Informe Experiencia de Usuario en Google Chrome, en primer lugar hay que entrar en GSC. A la izquierda hay una barra que contiene un apartado llamado “Mejoras”. Una vez ahí tenemos que pulsar en “Core Web Vitals”, y veremos unos gráficos en los que se muestra la opción “Abrir informe”. Ahí podemos ver en profundidad el análisis de estas métricas. 

Los informes de SGC van vinculados a otros de Page Speed Insights, que posiblemente sea le herramienta más eficaz a la hora de saber qué es lo que falle en una web con respecto a las Core Web Vitals. 

A su vez, Page Speed Insights se nutre de Lighthouse, que consiste en una serie de métricas de rendimiento. Para algunas personas, su uso puede ser un poco complicado porque requiere conocimientos técnicos. Si ese es tu caso, tendrás que contratar los servicios de un experto con conocimientos de Web Vitals.

 

Cómo optimizar los Core Web Vitals

Una vez has analizado el rendimiento de tus Web Vitals, es el momento de mejorarlos. Veamos cómo puedes optimizar tus Core Web Vitals en detalle.

Rendimiento del sitio web

Optimización de Largest Contentful Paint

En primer lugar, para optimizar la LCP, comprueba las causas más comunes que pueden conducir a un mal resultado. De este modo, podrás saber qué hacer en cada caso.

Tiempo de respuesta del servidor lento

Para mejorar el tiempo de respuesta de su servidor, puedes realizar las siguientes acciones.

  • Optimiza tu servidor
  • Utiliza una CDN
  • Configura el servidor caché
  • Sirve páginas HTML completas o parciales en caché

Bloqueo de la renderización de JavaScript y CSS

El JavaScript y el CSS que bloquean el renderizado impiden que los sitios muestren una página antes de cargar estos archivos. Para solucionar este problema, recomendamos minificar el CSS. Además, difiere el CSS no crítico y alinee el CSS crítico.

Tiempos de carga de recursos lentos

  • Para reducir el tiempo de carga de los recursos, puedes tomar las siguientes medidas
  • Optimiza y comprime imágenes
  • Precarga de recursos importantes
  • Comprimir archivos de texto
  • Utiliza un service worker

Renderización del lado del cliente

Si utilizas un gran paquete de Javascript sin optimizarlo en un sitio mayoritariamente renderizado en el lado del cliente, perjudicarás el rendimiento de tu LCP. Para evitar este problema, minifique el Javascript, difiera el Javascript no utilizado y minimice los polyfills no utilizados.

 

Optimización de First Input Delay

Un FID deficiente suele ser el resultado de una ejecución intensa de JavaScript. En otras palabras, necesitas optimizar la forma en que JavaScript analiza, compila y ejecuta en tu página. Para ello, puede realizar las siguientes acciones.

  • Dividir las tareas largas en otras más pequeñas y asíncronas
  • Optimizar la preparación para la interacción, como la carga progresiva del código
  • Investigar el código de terceros y priorizar la carga
  • Utilizar un web worker (Comlink, Workway, Workerize)
  • Reducir el tiempo de ejecución de JS

 

Optimización de Cumulative Layout Shift

Veamos cuatro elementos que son los más propensos a dañar el rendimiento de tu CLS. Comprueba cada uno de ellos y toma las medidas necesarias para mejorar tu CLS.

  • Anuncios, incrustaciones e iframes sin dimensiones especificadas: Siempre debes reservar espacio para los anuncios, los embeds y los iframes. No coloque anuncios cerca de la parte superior de la ventana gráfica.
  • Imagen sin dimensiones especificadas: Asegúrate de incluir atributos de tamaño de ancho y alto en tus elementos de imagen y vídeo.
  • Contenido inyectado dinámicamente: Recuerde evitar la inserción de nuevos contenidos por encima de los existentes.
  • Web Fonts that cause FOIT/FOUT: Use font-display, font Loading API, or <link rel=” preload”> for key web fonts.

 

Otros datos vitales de la web que también debe tener en cuenta

Hemos visto que las Core Web Vitals serán un factor de posicionamiento con un peso importante desde mayo de este año. Sin embargo no serán las únicas Web Vitals que Google tendrá en consideración. En concreto debes no perder de vista las siguientes: 

 

Reduce server response times (TTFB)

Se trata del tiempo que pasa desde que el navegador pide la primera pieza de información a un servidor hasta que lo recibe. Esto puede retrasar el proceso que desarrolla el navegador para mostrar una página. Una demora entre la petición del navegador y la respuesta hace que aumente el tiempo de TTFB.

 

First Contentful Paint (FCP)

Esta métrica se refiere al tiempo que transcurre desde que la web comienza a cargarse hasta que cualquier parte del contenido de la web se muestra en la pantalla (texto, imágenes, etc.). La diferencia entre el FCP y el LCP es que este último mide el tiempo que tarda en cargarse el contenido principal de la página, no cualquier contenido. Para optimizar tu FCP, necesitas acelerar la carga de las fuentes. Para ello, precarga las fuentes web para mejorar la velocidad de carga.

 

Total Blocking Time (TBT)

Mide la capacidad de respuesta de carga de la página cuando entra el usuario. Es decir, se refiere al tiempo total que ha estado bloqueda la web, impidiendo al usuario interactuar con la misma.

 

Time to Interactive (TTI)

A través de esta métrica se mide el tiempo que transcurre desde que empieza a cargarse la página hasta que lo hacen sus recursos secundarios más importantes, y cuándo puede responder rápidamente a la entrada del usuario de forma confiable.

Arrow-up