¿Qué son las Core Web Vitals (CWV)?

¿Qué son las Core Web Vitals (CWV)?

Las Core Web Vitals (CWV) son un conjunto de tres métricas de rendimiento web. El motor de búsqueda de Google mide estas tres métricas para ayudar a determinar los sitios web que se deben mostrar después de que un usuario realice una búsqueda. Aunque el tiempo de carga de la página ha sido durante mucho tiempo una parte importante de la optimización del motor de búsqueda (SEO), Google se ha centrado específicamente en las CWV como parte de sus algoritmos de clasificación desde mediados de 2021.

Las CWV son:

1. Largest Contentful Paint (LCP), que mide la velocidad de carga
2. First Input Delay (FID), que mide la interactividad de la página
3. Cumulative Layout Shift (CLS), que mide la estabilidad visual

¿Cómo afectan las Core Web Vitals a la SEO?

Todos los motores de búsqueda usan bots, conocidos como rastreadores web o arañas web, para analizar los sitios web. Estos bots determinan de qué trata el contenido de cada sitio web, y ayudan a determinar cuándo se debe mostrar ese sitio web en respuesta a una consulta de búsqueda. El rendimiento web es uno de los aspectos de un sitio web que comprueban los bots de Google.

No se sabe con exactitud en qué medida afectan el LCP, el FID y el CLS a la SEO, debido a que Google mantiene en secreto sus algoritmos de clasificación. Pero las CWV sí afectan en gran medida a la SEO. Google anunció la introducción de CWV en su algoritmo en junio de 2021. Y muchos observadores del sector han realizado estudios de caso que demuestran mejoras o pérdidas en las clasificaciones de búsqueda en función de los cambios en las CWV de un sitio web.

¿Cómo sucede esto en la realidad? Supongamos que Google tiene que elegir entre poner el sitio web A y el sitio web B en la parte superior de los resultados de búsqueda para la consulta de búsqueda "¿Qué es ARPANET?" Tanto el sitio web A como el sitio web B tienen una potente reputación por proporcionar datos sobre la historia de Internet, y ambos proporcionan información igualmente detallada sobre el tema ARPANET. En igualdad de condiciones, si el sitio web A se carga más rápido, responde más rápido y da menos saltos en la carga que el sitio web B, el algoritmo de Google probablemente decidirá mostrar el sitio web A en la parte superior de los resultados de la búsqueda, aunque los sitios web ofrezcan un calibre similar de información.

(Las clasificaciones de los motores de búsqueda son más complejas de lo que se muestra en este ejemplo, y hay decenas de factores que afectan al lugar en el que aparecerá en la búsqueda un sitio web).

¿Por qué Google tiene en cuenta el rendimiento web?

Los motores de búsqueda como Google quieren proporcionar a los buscadores la información más relevante lo más rápido que sea posible. Los retrasos en el tiempo de carga tienden a frustrar a los usuarios, por el contrario, las páginas de carga rápida aumentan las probabilidades de que vuelvan los usuarios. Aunque Google cuenta con la gran mayoría del mercado de búsquedas en inglés, una mala experiencia de usuario puede hacer que los buscadores recurran a otras fuentes de información.

Por razones similares, es posible que otros motores de búsqueda, como DuckDuckGo y Bing, también tengan en cuenta el rendimiento web, aunque, como pasa con Google, no se sabe con seguridad cómo funcionan sus algoritmos de clasificación de páginas.

¿Qué es Largest Contentful Paint (LCP)?

La LCP mide el tiempo que se tarda en cargar la parte más grande de una página web, que suele ser una imagen o un bloque de texto.

La LCP no mide el tiempo que tarda en cargarse una página web al completo, pero ofrece un buen punto de referencia para indicar lo rápido que se carga una página web. Y normalmente el elemento más grande de una página web es su contenido principal, así que el tiempo en que se carga suele estar bien alineado con el tiempo en que el usuario percibe que la página se ha cargado.

Los expertos sugieren que la LCP debería tardar un máximo de 2,5 segundos. Sin embargo, cuanto más rápido mejor.

¿Qué es el Retraso de primera entrada (FID)?

El FID es una medida del tiempo que transcurre entre el primer intento de interacción de un usuario con una página web y el momento en que esta responde. En otras palabras, el FID cuantifica el momento en que una persona hace clic por primera vez en la pantalla y se produce algo. Lo ideal es que el FID de una página web sea de 100 milisegundos o menos.

Supongamos que Alan visita una página web con el nombre de "Cómo limpiar tus zapatos." Ve un carrusel de fotos de productos de limpieza de zapatos en la parte superior de la página y hace clic en la flecha de la derecha para pasar a la siguiente foto. El FID es el tiempo que transcurre desde que hace clic en la flecha hasta que se carga la siguiente foto.

El FID no mide el tiempo que tarda en producirse realmente el evento solicitado, es decir, el tiempo que tarda el navegador de Alan en terminar de cargar la siguiente foto. Solo mide el tiempo que transcurre entre la solicitud y el momento en que empieza a producirse.

¿Qué es el Cumulative Layout Shift (CLS)?

El CLS mide cuánto "salta" una página web durante su carga. En concreto, mide la mayor "ráfaga" de desplazamientos en el diseño de la página.

Un cambio de estructura es cuando el contenido de la página se mueve hacia arriba, hacia abajo o en cualquier otra dirección desde donde aparecía originalmente. En el contexto de esta métrica, una ráfaga es un grupo de cambios de estructura que se producen con un segundo de diferencia. Una ráfaga puede durar hasta cinco segundos y incluir un número indeterminado de cambios de estructura.

Imaginemos que después de que Alan cargue la página "Cómo limpiar los zapatos", intenta hacer clic en la flecha de la derecha para ver la siguiente imagen del carrusel. Sin embargo, el carrusel de imágenes se desplaza repentinamente hacia abajo y Alan acaba haciendo clic en el texto que se está cargando por encima del carrusel. La página web se ha desplazado porque no se ha cargado toda al mismo tiempo, y Alan queda confundido con el resultado.

Es probable que una página web de este tipo tenga una mala puntuación en de CLS. Se ha movido bastante, desplazando el carrusel de fotos hacia abajo decenas o cientos de píxeles.

Cómo se mide el CLS

Google calcula las puntuaciones de CLS con la siguiente ecuación:

fracción de impacto * fracción de distancia = puntuación de desplazamiento de la estructura

• La fracción de impacto es el porcentaje de la pantalla que cambia cuando se produce un cambio de estructura.
• La fracción de distancia mide la distancia a la que se mueve un elemento en la pantalla, también como porcentaje de la pantalla.

Si una página web se carga en una pantalla que tiene 400 píxeles de altura, y luego 200 de esos píxeles se desplazan cuando se carga un nuevo elemento, la fracción de impacto es 200/400, o el 50 %. Si el nuevo elemento desplaza a otro elemento 50 píxeles hacia abajo, la fracción de distancia es 50/400, o el 12,5 %.

Para calcular la puntuación del cambio de estructura, coge esos dos porcentajes y escríbelos como decimales, luego multiplícalos:

0,50 * 0,125 = 0,0625

Si esta es la mayor cantidad de movimiento que tiene la página web, la puntuación de CLS de la página web es de 0,0625.

Aunque lo ideal es que una página web no se desplace en absoluto al cargarse, esta sigue siendo una puntuación decente. Los expertos recomiendan que las páginas web tengan una puntuación de CLS de 0,10 o menos.

¿Cómo pueden optimizar los desarrolladores los sitios web para estas tres métricas?

Cómo mejorar la LCP

• Usar una red de entrega de contenido (CDN): las CDN almacenan en caché el contenido en lugares de todo el mundo para que el contenido llegue a los usuarios más rápido.
• Optimizar las imágenes: las imágenes suelen ser el elemento más grande de una página. Reducir el tamaño del archivo de imagen puede ayudar a acelerar el tiempo de carga de la misma.

Cómo mejorar FID

• Reducir el tamaño de las funciones de JavaScript: las páginas web dinámicas con mucho código pueden causar retrasos en la entrada, ya que el navegador tiene que esperar a que se cargue todo el código antes de poder ejecutarlo. La minificación de JavaScript puede ayudar a acelerar este proceso.
• Crear páginas web estáticas: las páginas web HTML estáticas se cargan mucho más rápido que las dinámicas, especialmente cuando se distribuyen mediante CDN. Más información sobre los generadores de sitios estáticos o Jamstack, una filosofía de desarrollo que hace hincapié en el contenido estático.

Cómo mejorar el CLS

• Minimizar los elementos de terceros de la página: los elementos de terceros de una página se cargan desde lugares distintos al resto de la página. Por ello, se pueden cargar en un momento ligeramente diferente, lo cual cambia la estructura de la página mientras se cargan. Minimizar el uso de estos elementos de terceros reduce el número de cambios de estructura.
• Reservar espacio para contenido incrustado: muchos elementos de terceros, como los anuncios, son fundamentales para la funcionalidad o el modelo de negocio de un sitio web y no pueden ser eliminados. Los desarrolladores pueden reservar espacio en la página web para que estos elementos se carguen antes de que el navegador tenga acceso al elemento real.
• Asegurarse de que las imágenes se carguen en el tamaño óptimo: este es un proceso ligeramente diferente al de la optimización de imágenes en general. Tanto los ordenadores de escritorio, como las tablets y los teléfonos inteligentes necesitan imágenes de tamaños ligeramente diferentes, ya que sus pantallas tienen diferentes tamaños. Si un navegador carga primero la imagen grande optimizada para ordenadores de escritorio y luego necesita obtener la imagen optimizada para móviles porque se utiliza un teléfono inteligente, puede hacer que el contenido de la página salte cuando se cargue la imagen de tamaño diferente.
• Incluir la altura y la anchura para imágenes y vídeos: las propiedades de altura y anchura indican a los navegadores el tamaño de una imagen para que puedan reservar ese espacio antes de que se cargue la imagen o el vídeo. Nuestro artículo de vídeo de HTML5 ofrece más información sobre cómo hacer esto para vídeos.
• Utilizar cuadros de relación de aspecto de CSS: hay una serie de técnicas de CSS que pueden usar los desarrolladores para preservar el espacio de un elemento de la página mediante el uso de relaciones de aspecto. Más información aquí.

Cloudflare también ofrece varios servicios específicos para mejorar Core Web Vitals. Consulta este artículo para más información: Cómo utilizar Cloudflare para optimizar tu sitio web para Core Web Vitals.

¿Qué otras métricas de rendimiento son importantes?

Hay otros "Web Vitals" además de los CWV. First Contentful Paint (FCP), DOMContentLoaded (DCL), Time to Interactive (TTI) y Time to First Byte (TTFB) no tienen el mismo impacto en el SEO, pero pueden ayudar a los desarrolladores a identificar los problemas que afectan a los CWV.

(Por sí misma, TTFB no es una métrica especialmente útil. Pero puede ser un indicador de problemas adicionales que los desarrolladores deben solucionar).

Aquellos que quieran saber más, pueden descargarse esta documentación técnica, que contiene un glosario en el que se definen una serie de métricas de rendimiento.