Core Web Vitals

Las Core Web Vitals: métricas esenciales en el SEO de nuestros sitios web

05/04/2021
Número de visualizaciones

¿Qué son las core web vitals?

Las Core Web Vitals son unas métricas que nos ofrece Google que nos van a proporcionar información sobre la calidad de nuestros sitios web.

Su enfoque principal es medir aspectos técnicos que afectan a la experiencia del usuario, más concretamente se centra en los primeros segundos de la experiencia de los visitantes en nuestro sitio web.

Para ello, Google recoge y evalúa los datos del navegador Chrome y crea un informe de experiencia de usuario, evaluando los datos de dispositivos móviles y de ordenadores por separado.

A partir de mayo de este 2021 Google va a dar mucha importancia a estas métricas. Aquellos sitios cuyos valores no obtengan un buen resultado, se verán afectados en su posicionamiento web.

¿Qué métricas esenciales debemos tener en cuenta según Google?

Medir las métricas más importante de una web

Seguramente las Core Web Vitals irán evolucionando con el tiempo y aumentando en número, pero a día de hoy debemos de centrarnos en tres aspectos fundamentales:

LCP (Largest Contentful Paint)

¿Cuánto tarda en cargarse el componente más pesado de nuestra página (imagen, vídeo, …)?

Esta primera métrica está íntimamente relacionada con la velocidad de carga de nuestro sitio para que éste proporcione una buena experiencia al usuario.

Se entiende que el LCP de nuestro sitio web debe producirse dentro de los primeros 2.5 segundos desde que la página empieza a cargarse.

Dado que el elemento más grande de nuestra página suele cargarse al final, y habitualmente es el contenido principal, Google puede hacerse una idea del tiempo que tardan los usuarios en leer la página.

FID (First Input Delay)

¿Cuánto tiempo tienen que esperar los usuarios para interactuar con nuestra página?

Esta segunda métrica, tiene en cuenta la interactividad de la página.

Para ofrecer un tiempo de interacción atractivo para el usuario, nuestra página debe ofrecer una experiencia de interactividad inferior a los 100 milisegundos.

La primera interacción de un usuario puede ser un intento de inicio de sesión, o un clic en un enlace, por poner dos ejemplos muy comunes.

Para que la web tenga una buena experiencia de usuario, debemos tener en cuenta no sólo la velocidad del servidor, sino que también son muy importantes los navegadores de los usuarios.

Si el navegador está ocupado con otras tareas, no podrá procesar la entrada. Aquí entran en juego los archivos JavaScript de gran tamaño, ya que éstos mantienen al navegador ocupado mucho tiempo.

CLS ( Cumulative Layout Shift)

¿Qué desplazamiento tiene nuestro contenido cuando se carga la página?

La tercera métrica toma su valor de la estabilidad visual de la página.

Esta métrica debe situarse en menos de 0,1.

A veces, algunas páginas web se cargan de forma escalonada para que los visitantes puedan interactuar antes de que aparezca el último elemento en el navegador.

Esto tiene grandes ventajas, pero puede hacer que nuestro diseño se desplace. Los saltos de los distintos elementos de nuestra página pueden provocar que los usuarios se confundan al leer o que hagan clic involuntariamente en el elemento equivocado.

Para calcular el valor CLS, Google mide los cambios en el diseño de la página. Sólo tiene en cuenta los movimientos de los elementos que suceden de forma inesperada, excluyendo aquellos cambios intencionados a través de las interacciones de los usuarios.

Google no sólo observa cuántos elementos se mueven y con qué frecuencia, sino que también registra la distancia a la que se mueven. Con todos estos parámetros se calcula el Cumulative Layout Shift.

¿Qué herramientas podemos usar para medir las Core Web Vitals?

Estas son las herramientas que nos pueden ayudar a mejorar estas métricas:

Herramientas para medir los parámetros más importantes de una web

Para mejorar nuestros valores en LCP:

  • Optimizar el tiempo de respuesta de nuestro servidor, usando por ejemplo los cachés de servidor.
  • Utilizar una CDN (Content Delivery Network) para que la ubicación del usuario no afecte a su acceso a nuestro sitio.
  • Optimizar la carga de las hojas de estilo CSS comprimiéndolas o aplazando el CSS que no sea crítico para el buen funcionamiento de la página.
  • Reducir la cantidad de código JavaScript a la necesaria para una buena interacción con el usuario.
  • Reducir el tamaño de las imágenes para que el peso de los archivos sea menor y se reduzca el tiempo de carga.
  • Más info: https://web.dev/optimize-lcp/

 Para mejorar nuestros valores en FID:

  • Dividir los procesos grandes en otros más pequeños. De esta forma mejoraremos los tiempos de procesamiento y de ejecución de JavaScript.
  • Cargar los procesos de interacción más importantes primero, así los usuarios podrán interactuar más rápido y no esperar a la carga del resto de la página.
  • Más info: https://web.dev/optimize-fid/

 Para mejorar nuestros valores en CLS:

  • Especificar las dimensiones de las imágenes en el código fuente de la web, así el navegador podrá reservar el espacio requerido para el diseño.
  • Precargar las fuentes desde la web, para evitar así desplazamientos innecesarios.
  • Más info: https://web.dev/optimize-cls/

En resumen:

Los Core Web Vitals son hoy uno de los factores más importantes a tener en cuenta en nuestra estrategia SEO para optimizar nuestro sitio web.

Es muy difícil conocer todos los factores que influyen en el ranking que usa Google para sus resultados de búsqueda. Aprovechemos que esta vez Google ha presentado valores concretos que podemos poner en práctica en nuestra estrategia de posicionamiento.

0
Categorizado en: Desarrollo de Aplicaciones

Deja un comentario

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

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Descubre MasterClass de INESEM. Una plataforma en la que profesionales enseñan en abierto

Profesionales enseñando en abierto