Core Web Vitals: cómo Google mide la experiencia del usuario en tu sitio web

Google Core Web Vitals es un conjunto de métricas que miden la experiencia real de los usuarios en cuanto al rendimiento de carga, la interactividad y la estabilidad visual de una página web. Estas métricas influyen directamente en las clasificaciones de búsqueda de Google y sirven como referencia para saber cómo perciben los visitantes el rendimiento de tu sitio web.

En este artículo, explicaremos qué son los Core Web Vitals, cómo afectan a tus posiciones en los rankings de búsqueda y qué puedes hacer para mejorarlos.

¿Qué son las Core Web Vitals?

Core Web Vitals son tres métricas específicas que Google utiliza para analizar la experiencia general del usuario en una página web. Funcionan como parte de las señales de experiencia de página de Google, que también incluyen la compatibilidad con dispositivos móviles, la navegación segura, la seguridad HTTPS y las directrices sobre intersticiales intrusivos.

Las señales de experiencia de página miden cómo perciben los usuarios la calidad de la interacción con una página web. Las puntuaciones altas en Core Web Vitals contribuyen a una mejor visibilidad en los resultados de búsqueda de Google, mientras que las puntuaciones bajas pueden impedir que tu sitio web alcance su potencial de posicionamiento.

Las tres métricas principales de Core Web Vitals son Largest Contentful Paint (LCP), Interaction to Next Paint (INP) y Cumulative Layout Shift (CLS).

Pintura con mayor contenido (LCP)

LCP mide el rendimiento de carga de una página. En concreto, realiza un seguimiento del tiempo que tarda en renderizarse el elemento de contenido más grande visible en la ventana gráfica después de que tú solicites la URL.

El elemento más grande suele ser una imagen destacada, una miniatura de vídeo o un elemento de texto grande a nivel de bloque. Este elemento es importante porque indica a los visitantes que la página se está cargando y mostrando contenido.

Umbral objetivo: el LCP debe producirse en los 2,5 segundos siguientes al inicio de la carga de la página.

Interacción con Next Paint (INP)

El INP sustituyó al First Input Delay (FID) como métrica oficial de capacidad de respuesta en marzo de 2024. Mientras que el FID solo medía el retraso antes de que el navegador pudiera procesar la primera interacción del usuario, el INP ofrece una visión más completa de la capacidad de respuesta al medir todas las interacciones a lo largo de toda la sesión del usuario.

El INP realiza un seguimiento de tres componentes de cada interacción:

• Retraso de entrada: el tiempo que transcurre entre el momento en que el usuario interactúa y el momento en que los controladores de eventos comienzan a ejecutarse.
• Tiempo de procesamiento: tiempo que tarda en ejecutarse el código del controlador de eventos.
• Retraso en la presentación: el tiempo que transcurre desde que los controladores terminan hasta que el navegador muestra la actualización visual.

La puntuación INP final informa de la interacción más larga observada durante una visita a la página, lo que te permite conocer la peor experiencia de respuesta que tienen tus visitantes.

Umbral objetivo: las páginas deben tener un INP de 200 milisegundos o menos. Las puntuaciones entre 200 y 500 ms deben mejorarse, y cualquier valor superior a 500 ms se considera deficiente.

Desplazamiento acumulativo del diseño (CLS)

CLS mide la estabilidad visual de una página mediante el seguimiento de los cambios inesperados en el diseño que se producen durante toda la vida útil de la página.

La puntuación CLS oscila entre cero y cualquier número positivo. Cero significa que no se ha producido ningún cambio inesperado en la página, mientras que los números más altos indican una mayor inestabilidad visual. Los cambios en el diseño frustran a los usuarios cuando hacen clic accidentalmente en el elemento equivocado porque el contenido se ha movido en el último momento.

Umbral objetivo: las páginas deben mantener una puntuación CLS de 0,1 o menos.

Herramientas para medir Google Core Web Vitals

Conocer tus puntuaciones actuales es el primer paso para mejorar. Google ofrece varias herramientas gratuitas para medir el rendimiento de Core Web Vitals.

PageSpeed Insights

PageSpeed Insights analiza el contenido de cualquier página web y genera un informe detallado con sugerencias de mejora. La herramienta muestra tanto datos de campo de usuarios reales de Chrome como datos de laboratorio de cargas de páginas simuladas.

Introduce cualquier URL para ver tus puntuaciones LCP, INP y CLS junto con recomendaciones prácticas. La principal limitación es que cada URL debe comprobarse manualmente.

Informe Core Web Vitals de Google Search Console

El informe Core Web Vitals de Google Search Console muestra el rendimiento de tus páginas basándose en datos de uso reales recopilados de los usuarios de Chrome.

Este informe agrupa el rendimiento de las URL por estado (bueno, necesita mejorar, deficiente), tipo de métrica y grupos de URL que contienen páginas web similares. Solo aparecen en el informe las URL indexadas, lo que lo hace muy útil para comprender los patrones de rendimiento de todo el sitio.

Informe sobre la experiencia del usuario de Chrome

El Informe sobre la experiencia del usuario de Chrome (CrUX) proporciona métricas reales sobre la experiencia de los usuarios de Chrome que han aceptado compartir datos de navegación anónimos. Este conjunto de datos alimenta los datos de campo que se muestran en PageSpeed Insights y sirve como fuente de datos oficial de Google para la evaluación de Core Web Vitals.

Puedes acceder a los datos de CrUX a través de BigQuery para realizar análisis más detallados o utilizarlos indirectamente a través de PageSpeed Insights y Search Console.

Cómo mejorar el núcleo vital de la web

Si tus puntuaciones están por debajo de los umbrales recomendados, las optimizaciones específicas pueden llevarlas a la zona verde.

Consejos para mejorar la carga (LCP)

Las causas más comunes de las bajas puntuaciones en LCP incluyen tiempos de respuesta lentos del servidor, JavaScript y CSS que bloquean la renderización, tiempos de carga de recursos lentos y cuellos de botella en la renderización del lado del cliente.

Estrategias de optimización:

• Elimina los scripts de terceros innecesarios que ralentizan la carga inicial de la página.
• Actualiza a un alojamiento web más rápido con mejores tiempos de respuesta del servidor.
• Implementa la carga diferida para que las imágenes solo se carguen cuando los usuarios se desplacen hasta ellas.
• Utiliza formatos de imagen modernos como WebP o AVIF con la compresión adecuada.
• Precarga los recursos críticos que aparecen en la parte superior de la página.
• Utiliza una red de distribución de contenidos (CDN) para servir los activos desde ubicaciones más cercanas a tus visitantes.

Actualiza a un alojamiento web más rápido. El tiempo de respuesta del servidor afecta directamente al LCP. Si tu proveedor de alojamiento actual ofrece un tiempo hasta el primer byte (TTFB) lento, ninguna optimización del front-end podrá compensarlo. Los servidores de alto rendimientoInMotion Hosting están equipados conSSD NVMe y almacenamiento en caché a nivel de servidor para que tus páginas se carguen más rápido.

Consejos para mejorar la interactividad (INP)

La ejecución intensiva de JavaScript es la causa principal de las bajas puntuaciones INP. Cuando JavaScript ocupa el hilo principal del navegador, este no puede responder a las interacciones de los usuarios.

Estrategias de optimización:

• Divide las tareas largas de JavaScript en fragmentos más pequeños que ceden al hilo principal.
• Aplaza el JavaScript no crítico hasta después de la carga inicial de la página.
• Elimina el código que no se usa mediante tree shaking y code splitting.
• Minimiza el tamaño del DOM, ya que los árboles DOM grandes ralentizan el renderizado y el procesamiento de las interacciones.
• Utiliza requestAnimationFrame para las animaciones en lugar de setInterval.
• Considera la posibilidad de utilizar Web Workers para trasladar los procesos pesados fuera del hilo principal.
• Audita los scripts de terceros y elimina todos los que no sean esenciales.
• Implementa el almacenamiento en caché del navegador para acelerar las visitas repetidas.

Consejos para mejorar la estabilidad visual (CLS)

Los cambios en el diseño suelen deberse a imágenes sin dimensiones especificadas, anuncios e incrustaciones que se cargan sin espacio reservado, contenido inyectado dinámicamente y fuentes web que provocan destellos de texto invisibles.

Estrategias de optimización:

• Incluye siempre los atributos de anchura y altura en las imágenes y los elementos de vídeo.
• Reserva espacio para los anuncios antes de que se carguen.
• Carga previamente las fuentes y utiliza font-display: optional o font-display: swap para evitar cambios en el diseño durante la carga de las fuentes.
• Evita insertar contenido encima del contenido existente después de que la página haya comenzado a renderizarse.
• Utiliza las propiedades de transformación CSS para las animaciones en lugar de las propiedades que activan los recálculos de diseño.

Por qué Core Web Vitals es importante para tu negocio

Google utiliza el percentil 75 de los datos de usuarios reales para evaluar los Core Web Vitals. Esto significa que al menos el 75 % de tus visitantes deben obtener puntuaciones dentro del umbral «bueno» para que tus páginas aprueben.

Los sitios que cumplen con los parámetros de Core Web Vitals suelen posicionarse mejor en los resultados de búsqueda, tienen tasas de rebote más bajas y registran métricas de interacción más altas. Las puntuaciones bajas crean una experiencia de usuario frustrante que lleva a los visitantes a sitios de la competencia con páginas más rápidas y estables.

Mejorar los Core Web Vitals no es un proyecto puntual. La supervisión y optimización periódicas deben formar parte de tu rutina de mantenimiento continuo del sitio web. Después de cada actualización importante del sitio, revisa tus métricas LCP, INP y CLS y soluciona cualquier regresión antes de que afecte a tus visitantes y a tu posicionamiento en los motores de búsqueda.

Para obtener orientación técnica más detallada sobre cada métrica, visita la documentación oficial de Web Vitals de Google.