La guía definitiva de Core Web Vitals: LCP, FID y CLS

El informe Core Web Vitals es la principal fuente de información para mejorar la velocidad de página de los sitios web que ofrece Google.

Las tres métricas clave para monitorear y mejorar la velocidad de la página son:

1. Largest Contentful Paint (LCP): Mide el rendimiento de carga. En particular, se refiere al tiempo que tarda en cargarse el contenido principal de una página. Un buen LCP indica que la página es útil para el usuario rápidamente.
2. First Input Delay (FID): Evalúa la interactividad. Es el tiempo que transcurre desde que un usuario interactúa por primera vez con una página (como hacer clic en un botón) hasta que el navegador puede responder a esa interacción. Un FID bajo muestra que la página es interactiva rápidamente.
3. Cumulative Layout Shift (CLS): Mide la estabilidad visual. Se refiere a la cantidad inesperada de movimiento de contenido en una página mientras se carga. Un CLS bajo indica que la página es visualmente estable.

Además, el índice de velocidad de la página web complementa los principales datos de la web con una métrica útil que combina muchas de las métricas basadas en Lighthouse en una única métrica compuesta.

‍Cuando se trabaja en un sitio web grande con cientos o, a veces, millones de URLs, ¿cuántos informes sobre las páginas y la multitud de problemas relacionados puedes revisar? ¿Cómo los traduces en elementos de trabajo procesables de mejora de la velocidad de la página mientras los revisa manualmente?

Para darles a los consumidores, clientes y visitantes una experiencia positiva, Google otorga un posicionamiento más alto a los sitios que dan a los consumidores contenido relevante para su búsqueda y un Customer Journey fluido en la página. Para cumplir con este requisito, los sitios deben ser receptivos, estables, rápidos y permitir que los visitantes naveguen por el sitio sin interrupciones.

¿Qué son los Core Web Vitals?

Google creó Core Web Vitals para ayudar a los sitios web a medir y monitorear la experiencia de una página web y guiar los esfuerzos de optimización de Core Web Vitals.  En palabras de Google, son un conjunto de métricas que miden la experiencia del usuario de una página web.

La experiencia de la página se mide cuantificando el tiempo de carga, la interactividad y la estabilidad visual de una página. Actualmente, Core Web Vitals incluye tres métricas: mayor pintura con contenido (LCP) , interacción con la siguiente pintura (INP) y cambio de diseño acumulativo (CLS) . Cada Core Web Vital mide un aspecto real y distinto de la experiencia del usuario, como se explica a continuación.

Las métricas de Core Web Vitals

‍Las métricas de Core Web Vital se pueden medir utilizando datos de campo, que representan experiencias de usuario reales, y datos de laboratorio, que simulan escenarios de prueba controlados. Mientras que los datos de campo reflejan el comportamiento del usuario, los datos de laboratorio permiten la experimentación y optimización controladas. Aquí hay una tabla de comparación que muestra las métricas principales de web vitals que se pueden medir usando datos de campo y laboratorio:

1.  Satisfacción del usuario: Core Web Vitals impacta directamente en cómo los usuarios perciben e interactúan con tu sitio web. Un rendimiento deficiente puede generar usuarios frustrados, mayores tasas de rebote y menores conversiones.
2. Posicionamiento en motores de búsqueda: Google considera que los Core Web Vitals son necesarios para determinar los rankings de búsqueda. Los sitios web que ofrecen mejores experiencias de usuario y tiempos de carga más rápidos tienden a posicionarse más arriba en los resultados de búsqueda.
3. Ventaja competitiva: al optimizar tu sitio web para Core Web Vitals, puedes obtener una ventaja competitiva sobre los sitios web que descuidan estas métricas. Un sitio web rápido y fluido atraerá a más visitantes y los mantendrá comprometidos.
4. Experiencia móvil: con el uso cada vez mayor de dispositivos móviles, mejorar la experiencia de la página se vuelve aún más crucial. Los usuarios móviles esperan sitios web rápidos y receptivos; cumplir con estas expectativas puede aumentar tu tráfico móvil y la interacción.
5. Retención de usuarios: cuando los usuarios tienen una experiencia positiva en tu sitio web, es más probable que se queden, exploren más y regresen en el futuro. Los Core Web Vitals juegan un papel importante para garantizar un viaje de usuario sin problemas y retener a la audiencia.

La importancia de los CWV para el SEO

L‍os Core Web Vitalas son sin duda un conjunto de elementos cruciales para posicionar una página web, por distintos motivos:

1. Factor de Ranking: En mayo de 2021, Google comenzó a considerar los Core Web Vitals como uno de los factores de ranking para la experiencia de página. Esto significa que si tu sitio cumple bien con estas métricas, podría tener una ventaja en los rankings de búsqueda sobre sitios que no lo hacen.
2. Experiencia del Usuario: Estas métricas están diseñadas para reflejar cómo un usuario real experimentaría una página web. Mejorar los Core Web Vitals de tu sitio no solo puede ayudarte con el SEO, sino que también puede aumentar la satisfacción del usuario, lo que puede llevar a una mayor retención y conversiones.
3. Evolución y Mejora Continua: Google siempre está buscando formas de mejorar la calidad de los resultados de búsqueda para sus usuarios. Los Core Web Vitals son un reflejo de este esfuerzo continuo y es probable que veamos más métricas y refinamientos en el futuro.
4. Competitividad: Con la creciente importancia de la experiencia del usuario en el SEO, aquellos sitios web que no prestan atención a métricas como los Core Web Vitals podrían encontrarse en desventaja en comparación con competidores que sí lo hacen.
5. Transparencia y Medición: Una de las ventajas de los Core Web Vitals es que son métricas cuantificables. Herramientas como Google PageSpeed Insights, Search Console y Lighthouse proporcionan informes detallados sobre estas métricas, lo que permite a los propietarios de sitios web identificar y abordar problemas específicos.

Los Core Web Vitals son esenciales para cualquier estrategia de SEO moderna. Representan un paso hacia la creación de una web más rápida, interactiva y estable, lo cual es beneficioso tanto para los propietarios de sitios web como para los usuarios.

Dicho esto, es importante saber que Google tiene más de 200 señales de clasificación. Por lo tanto, una calificación de Buena experiencia de página por sí sola no es suficiente para obtener tráfico orgánico. El trabajo de experiencia de página debe complementarse con otros factores de posicionamiento, como contenido relevante y de alta calidad.

Por ejemplo, además de la experiencia de rendimiento de la página, Google también realiza un seguimiento de la seguridad general del sitio (seguridad HTTPS), la accesibilidad del sitio, la compatibilidad con dispositivos móviles, el SEO técnico, la experiencia del usuario (CTR, tasa de rebote y tiempo de permanencia), enlaces internos y externos y No Intersticiales intrusivos (o sin anuncios emergentes) para enumerar algunos factores de clasificación importantes.

¿Cómo mejorar Core Web Vitals?

Actualmente, el proceso para rastrear y abordar problemas relacionados con Core Web Vitals y Page Experience se realiza página por página. Se usa Lighthouse, PageSpeed ​​Insights o una cualquier otra herramienta para analizar los datos de rendimiento de las páginas que se están analizando.

El problema es que la la ejecución de la aplicación Lighthouse en una sola página puede revelar más de 1000 problemas en más de 100 tipos de auditoría. Los problemas que pueden surgir incluyen «Eliminar recursos que bloquean el renderizado», «Eliminar JavaScript no utilizado» y muchas otras sugerencias para mejorar el rendimiento .

Por todo ello, mejorar los Core Web Vitals requiere una combinación de optimizaciones técnicas y de diseño que, en su conjunto, no están al alcance de una sola persona. Deben ser acometidas por un equipo multidisciplinar. A continuación, te proporciono recomendaciones específicas y básicas para cada uno de los tres Core Web Vitals. Cada uno de ellos es desarrollado de forma independiente en otros artículos en los que podrás profundizar:

1. Largest Contentful Paint (LCP): Mide el tiempo que tarda en cargarse el contenido principal de una página.
   • Optimizar imágenes: Reduce el tamaño de las imágenes sin comprometer su calidad utilizando formatos modernos como WebP.
   • Minimizar CSS y JavaScript: Usa herramientas para minimizar y comprimir tus archivos CSS y JS.
   • Carga diferida (Lazy Loading): Carga imágenes y videos sólo cuando estén a punto de visualizarse en el viewport.
   • Utiliza la caché del navegador: Almacena recursos en la caché del navegador para acelerar las cargas de página en visitas posteriores.
   • Reduce el tiempo de respuesta del servidor: Considera mejorar tu hosting o utiliza un sistema de entrega de contenido (CDN) para acelerar la distribución de recursos.
   • PROFUNDIZA AQUÍ: cómo mejorar LCP (próximamente)
2. First Input Delay (FID): Mide la interactividad de la página.
   • Reduce el JavaScript: Divide tus archivos JS en chunks más pequeños y sólo carga lo que es necesario.
   • Optimiza la ejecución de JS: Prioriza la ejecución de las funciones más críticas y retrasa o carga de forma asíncrona las menos críticas.
   • Usa un worker web: Si tienes scripts pesados, considera moverlos a un worker web para que se ejecuten en segundo plano sin bloquear el hilo principal.
   • PROFUNDIZA AQUÍ: cómo mejorar FID (próximamente)
3. Cumulative Layout Shift (CLS): Evalúa la estabilidad visual de la página.
   • Dimensiones de medios: Especifica siempre las dimensiones (ancho y alto) de imágenes, videos y otros elementos multimedia para evitar que la página se reajuste cuando se cargan.
   • Reserva espacio para anuncios: Si tu sitio tiene anuncios, asegúrate de reservar un espacio específico para ellos para evitar cambios inesperados en el diseño.
   • Evita inserciones de contenido inesperadas: No insertes contenido dinámico en la página (como banners o avisos) en posiciones que desplacen el contenido existente.
   • Fuentes web: Si usas fuentes web, asegúrate de que tengan pesos y estilos específicos o utiliza técnicas como font-display: optional para controlar su renderizado.
   • PROFUNDIZA AQUÍ:  (próximamente)