• Blog
  • Marketing
  • Core Web Vitals: ¿qué son estas métricas y cómo mejoran el rendimiento web?

Core Web Vitals: ¿qué son estas métricas y cómo mejoran el rendimiento web?

4min

Desde mayo de 2021, el algoritmo de Google recoge en sus Core Web Vitals tres pilares básicos para medir la experiencia de una sitio web : rendimiento, capacidad de respuesta y estabilidad visual. Con estas métricas, los desarrolladores cuentan con datos suficientes para mejorar las páginas y hacer que los usuarios cuenten con una buena experiencia web, ayudando mucho al posicionamiento SEO. Por ello, es muy importante tener en cuenta estas métricas a la hora de crear una web profesional o crear una tienda online.

Índice

Qué son los Core Web Vitals

Los Core Web Vitals se encargan de medir la experiencia de usuario y calculan el tiempo que tardamos en interactuar con una página. Las tres columnas que sostienen la experiencia de la página son:

  • Rendimiento de carga: velocidad a la que carga una Web para que se muestre todo en pantalla.
  • Capacidad de respuesta: agilidad en la reacción de la página cuando un usuario entra en ella.
  • Estabilidad visual: indica si los elementos que componen la Web se mueven mientras carga.

Para calcular todo esto, Google ha definido tres métricas principales, que ya son conocidas como Core Web Vitals.

Las tres métricas principales y sus valores  ideales

LCP

LCP (Largest Contentful Paint). Mide el tiempo que tarda en aparecer el contenido más grande en la pantalla. Puede ser una imagen o un bloque de texto. Una puntuación alta indica que el sitio es rápido en cargar.

Para esta métrica, el valor ideal estaría dentro de los primeros 2.5 segundos de la carga de la página. Con un valor superior a 2.5, pero inferior a 4 segundos, necesitaríamos mejorar, mientras todo lo que esté por encima se considera un rendimiento deficiente.

FID

FID (First Input Delay). Calcula el tiempo que emplea un sitio en reaccionar a la primera interacción del usuario. Por ejemplo, un clic en un botón de la página. Se obtiene una buena puntuación si reacciona de manera rápida.

Para Google, la respuesta a la interacción del usuario (clics, pulsaciones de teclas, etc.) debería de estar por debajo de 100ms. Por debajo de 300ms se contempla una mejora y todo lo que supere esa cantidad es un mal resultado.

CLS

CLS (Cumulative Layout Shift). Comprueba la estabilidad visual de una web, o lo que es lo mismo, observa y mide la frecuencia con la que los elementos de la web se mueven mientras carga.

La métrica de la estabilidad visual conviene que esté por debajo de 0.1. Se considera un resultado para mejorar por debajo de 0.25 y todo lo que sea por encima, uno malo.

Otras métricas que debemos comprobar

Además de las tres métricas anteriores, deberemos tener en cuenta algunos factores adicionales que nos ayudarán a diagnosticar un problema específico y obtener mejores resultados, haciendo que nuestros usuarios cuenten con una mejor experiencia en la web. A continuación, hablamos de ellas:

Speed Index (SI) 

Esta métrica calcula el tiempo en el que se dibuja el contenido de la página. Para hacerlo capturará un video de la web cargándose en el navegador y lo medirá fotograma a fotograma. Cuanto más rápido cargue el contenido mejor será la puntuación, por lo que una cifra de 3,4 segundos o inferior, se considerará un buen resultado.

First Contentful Paint (FCP)

Es la métrica que calcula el tiempo que tarda el navegador en mostrar cualquier contenido del modelo de objetos del documento (DOM), a diferencia con LCP, que mide el tiempo de renderización del contenido que más ocupa en la página. Esto contiene: imágenes, textos y lienzos que no estén en blanco. Una buena experiencia de usuario sitúa una puntuación FCP en 1,8 segundos o menos.

Time to Interactive (TTI)

La métrica Time to Interactive (TTI) es el tiempo que transcurre desde que se comienza la carga de la página, hasta que se obtienen los recursos suficientes para que la haga interactiva. Google la considera interactiva si:

  • Muestra contenido que podemos utilizar
  • Responde a las interacciones de los usuarios en 50 ms
  • Los controladores de eventos se registran para casi todos los elementos de página visibles

Una puntuación ideal para TTI es de 3,8 segundos o menos.

Total Blocking Time (TBT)

El tiempo total de bloqueo (TBT) es la cantidad de tiempo en el que las tareas largas (más de 50 ms) bloquean la página y repercute en su usabilidad. 

Para calcular el TBT hace falta primero calcular el tiempo de bloqueo de cada tarea y sumar sus resultados.

Sólo se sumarán los tiempos superiores a 50 ms (tiempo que se considera de bloqueo). Es decir, si una tarea tiene una duración de 250 ms, habrá que restarle 50 ms, y si una tarea tiene 20 ms, no se contabilizará. 200 ms para TTI es una buena puntuación.

Time to First Bye (TTFB) 

La métrica TTFB es la que mide el tiempo que va desde la solicitud de un recurso hasta cuando comienza a llegar el primer byte de la respuesta. O lo que es lo mismo, si el navegador tarda en recibir los datos del servidor, más lento se mostrará la página.

La suma de estas fases de solicitud determina el TTFB:

  • Tiempo de redirección
  • Tiempo de arranque del service worker (si es que lo hay)
  • Búsqueda de DNS
  • Conexión y negociación del TLS
  • Tiempo entre la solicitud y la llegada del primer byte de la respuesta

Se recomienda que el servidor responda a las solicitudes hasta el primer byte en 0,8 segundos o menos.

Interaction to Next Paint (INP) 

Interaction to Next Paint (INP) es una métrica que evalúa la capacidad de respuesta o el retraso de interacción de una página. Mide la latencia de todas las interacciones que un usuario ha realizado con la página.  Si el INP es bajo, la página puede responder rápidamente a la mayoría de las interacciones de los usuarios.

Herramientas para medir Web Vitals

Existen multitud de herramientas que sirven para monitorear Web Vitals y mejorar el rendimiento de nuestra Web. Veamos las más destacadas:

  • PageSpeed ​​Insights. Google ofrece esta herramienta como un servicio completo de medición y además nos ofrece consejos sobre cómo mejorar los resultados.
  • Lighthouse. Aunque de inicio se creó para auditar las PWA (Progressive Web Apps), ahora es una extraordinaria herramienta para monitorear el rendimiento. Dispone de auditorías que la anterior no tiene, e incluso realiza algunas revisiones de SEO.
  • Informe de Search Console Core Web Vitals. Con el propio Search Console podremos obtener directamente un informe sobre nuestro sitio Web y conocer su rendimiento. Desde la versión 88, Chrome ya dispone de herramientas para generar informes Core Web Vital. Por su parte, las sucesivas versiones han ido e irán añadiendo nuevas funcionalidades al respecto.
  • WebPageTest. Es una herramienta de código abierto que proporciona información sobre el rendimiento de una página web en una variedad de condiciones. Los test los podremos ejecutar online, desde diferentes ubicaciones y en navegadores reales. Dispone de un plan gratuito que cubre perfectamente nuestras necesidades y otro Premium cargado de más opciones.
  • TREO Site Speed. Especialmente enfocada a la experiencia y a los usuarios, TREO es otra excelente herramienta que nos ayuda a comprender cómo responde nuestro sitio web a las consultas reales de los usuarios. De esta forma obtendremos una garantía de que lo que muestra se acerca a la realidad.
  • Cumulative Layout Shift Debugger. El propósito de Cumulative Layout Shift Debugger es mostrar los cambios de diseño acumulativos de una web para que sea más sencillo identificar qué necesitamos mejorar en la carga inicial de nuestra página, tanto en su versión de escritorio, como en la de móvil.
Alberto Blanch

Artículos relacionados

Productos relacionados: