¿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 y las incorpora en sus decisiones sobre qué páginas mostrar en los resultados de búsqueda. Esto significa que los profesionales de optimización del motor de búsqueda (SEO) deben optimizar los elementos vitales de sus páginas web como parte de una estrategia holística para mejorar el posicionamiento de esas páginas.

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

¿Qué es la actualización de la experiencia de página de Google?

Mientras que el tiempo de carga de la página ha sido durante mucho tiempo una parte importante de la SEO, Google anunció en 2020 que las CWV formarían parte de su algoritmo de clasificación a mediados de 2021. Esto se conoce como la actualización de la experiencia de página de Google.

En el anuncio, Google declaró que las CWV se incluirían en las señales de experiencia de página que ayudan a determinar la clasificación de búsqueda de una página. Otros factores de la experiencia de la página son: Seguridad HTTPS, la facilidad de uso para móviles, y la ausencia o presencia de intersticiales intrusivos (como las ventanas emergentes). El objetivo de la actualización era premiar a las páginas web que proporcionaran una experiencia positiva al usuario.

¿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, ya que Google mantiene en secreto sus algoritmos de clasificación. Pero las CWV tienen un impacto significativo en la SEO. 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 incorpora el rendimiento web en las decisiones de clasificación?

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, mientras que 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)?

Largest Contentful Paint 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.

Las directrices de Google clasifican una medición de LCP como "buena" si es inferior a 2,5 segundos. Sin embargo, siempre es mejor cuanto más rápido.

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.

Una versión anterior de la métrica LCP es primer renderizado significativo (FMP), que mide el momento en que el contenido principal de una página se hace visible. Google descubrió que esta métrica no era fiable y desde entonces la ha eliminado de algunas de sus herramientas de informes.

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

First Input Delay 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 la rapidez con la que una persona puede hacer click por primera vez en la pantalla y se produce algo. Según las directrices de Google, un "buen" FID es de 100 milisegundos o menos.

Para un ejemplo de FID, supongamos que Alan visita una página web titulada "Cómo limpiar tus zapatos." Ve un carrusel de fotos de abrillantador para calzado y hace click 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 empieza a cargarse 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.

Ten en cuenta que el FID es una "métrica de campo", es decir, algo que se mide en base a la observación de usuarios reales, y no de forma hipotética o en un "laboratorio".

Algunas alternativas de "métricas de laboratorio" son Total Blocking Time (TBT) y Time to Interactive (TTI). El TBT mide el tiempo que transcurre entre First Contentful Paint (FCP) y el TTI. El FCP mide el tiempo que transcurre entre el inicio de la carga y el momento en que los elementos se cargan en la pantalla del usuario. Como su nombre indica, el TTI mide el tiempo que tardan los elementos en parecer que se han cargado y cuando un usuario puede realmente interactuar con ellos.

¿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. Las directrices de Google indican que una "buena" medición del CLS es igual o inferior a 0,1.

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 medir las Core Web Vitals

Hay muchas herramientas que se pueden utilizar para comprobar las CWV. Las siguientes las ofrece directamente Google:

• Chrome UX Report (CrUX) ofrece datos de campo proporcionados por los usuarios de Chrome, lo cual da a los propietarios de sitios web datos sobre la experiencia real de los usuarios de su sitio web.
• Google Lighthouse es una herramienta gratuita que ofrece métricas de laboratorio sobre las CWV. Ofrece información procesable para mejorar el rendimiento, la SEO, la accesibilidad y mucho más.
• Google PageSpeed Insights combina la funcionalidad de CrUX y Lighthouse, ofreciendo tanto datos de campo como de laboratorio sobre las CWV y otras web vitals. Los usuarios pueden comprobar el rendimiento de los sitios web, sean o no de su propiedad, mediante el uso de PageSpeed Insights. Aquí tienes un ejemplo de informe de PageSpeed Insights.
• Google Search Console está basado en parte en los datos de campo de CrUX, y ofrece datos de rendimiento de CWV por URL o grupos de URL.

Cómo mejorar Core Web Vitals

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.
• Implementar la carga diferida: en la carga diferida, los recursos del sitio web solo se cargan cuando el usuario los necesita. Esto hace que, hasta cierto punto, la carga del sitio web sea más eficiente, pero la investigación indica que el uso excesivo de esta función se correlaciona con una menor LCP. Por esta razón, Google sugiere limitar las imágenes de carga diferida "debajo del pliegue" o a las partes de la página web que el usuario tiene que desplazar para poder ver.

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.
• Elimina las herramientas y scripts innecesarios de terceros:
Cargar herramientas adicionales en tu sitio web también puede ralentizar el rendimiento. Reducir la cantidad de herramientas de terceros en un sitio web puede mejorar la FID y la velocidad del sitio web en general.

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í.

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

Aunque las CWV son las métricas que Google ha dicho a los profesionales de la SEO que deben priorizar, no son las únicas web vitals que existen.First Contentful Paint (FCP), DOMContentLoaded (DCL), Time to Interactive (TTI) y Time to First Byte (TTFB) no tienen el mismo impacto en la SEO, pero pueden ayudar a los desarrolladores a identificar los problemas que afectan a las 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).

Cómo puede ayudar Cloudflare a mejorar las CWV

Cloudflare ofrece una variedad de servicios que pueden ayudar a mejorar las CWV:

• La red de entrega de contenido (CDN) de Cloudflare almacena en caché contenido estático y dinámico en una red global que abarca más de 330 ciudades en más de 125 países. Esto permite que los sitios web se carguen más rápido, algo de lo que se benefician las tres CWV.
• Cloudflare Images ofrece una funcionalidad de redimensionamiento que puede comprimir las imágenes y aumentar todavía más la velocidad de carga del sitio web, especialmente para LCP.
• Cloudflare Zaraz carga recursos de terceros en la nube y fuera del navegador, lo que mejora métricas como FID y CLS.