Core Web Vitals: guía completa sobre qué son y cómo mejorarlos

Cómo medir y analizar los Core Web Vitals

La nueva señal de Page Experience, que incluye los Core Web Vitals, afectará a los resultados orgánicos tanto para dispositivos móviles como para PCs de escritorio y puede que tus sitio web aparecerá en las Top Stories. Con la adición de las nuevas métricas de CWV, Google está eliminando AMP como un requisito para el formato Top Stories en dispositivos móviles.

Comprender las nuevas métricas y tenerlas en cuenta es importante para el rendimiento general de tu sitio web. A continuación, encontrarás herramientas útiles para medir y probar la puntuación de los Core Web Vitals de tu sitio web.

Si, además, también quieres familiarizarte con muchos de los términos que leerás a lo largo de este artículo, como el que acabamos de ver de AMP, descárgate nuestra guía gratuita sobre posicionamiento SEO en donde 28 de los mejores expertos y expertas de España te explican cada uno de los pilares del SEO y te dan estrategias para aplicar directamente en tu web.

Herramientas de Field Data

El Field Data (datos de campo), también conocido como monitorización de usuarios reales (RUM), refleja la experiencia de navegación de los usuarios reales. Estos datos tienen en cuenta usuarios reales, varios dispositivos, diferentes conexiones de red, diferentes conexiones y datos históricos. Todos estos datos se añaden para todo el dominio o por URL. Ten en cuenta que Google está utilizando datos de campo para clasificar tu sitio. Por lo tanto, si quieres inspeccionar tu experiencia de usuario real, debes utilizar datos de campo.

Google Search Console (GSC)

Google Search Console ha lanzado un informe de Core Web Vitals que te ayuda a identificar grupos de páginas que tienen problemas similares. Debes tener en cuenta que aquí no puedes detectar problemas de páginas individuales. GSC desglosará los Core Web Vitals por sus tres métricas: LCP, FID y CLS tanto para dispositivos móviles como de escritorio. Deberás tener en cuenta que Google Search Console requiere verificación de DNS para ver el informe de tu sitio web.

Además, Google está lanzando un nuevo informe de Page Experience (experiencia de página) dentro de Google Search Console. Este incluye el Informe de Core Web Vitals junto con las señales de experiencia de la página existentes: compatibilidad con dispositivos móviles, HTTPS, estado de navegación segura y ausencia de intersticiales intrusivos. Este nuevo informe te permite evaluar rápidamente el rendimiento de tu sitio web al proporcionar un porcentaje de URLs con una buena experiencia en la página e impresiones de búsqueda a lo largo del tiempo y buscar páginas específicas que necesitan mejoras.

PageSpeed Insights

PageSpeed Insights, una herramienta de prueba de velocidad de página basada en el navegador, también incluye la puntuación de Core Web Vitals en su informe. A diferencia de Google Search Console, aquí puedes evaluar el rendimiento de tu sitio web página por página. Además, PageSpeed Insights ofrece a sus usuarios recomendaciones prácticas sobre cómo mejorar el rendimiento de su sitio. Los Core Web Vitals están señalados con una cinta azul como “Métricas web principales”.

Ten en cuenta que debes analizar las puntuaciones tanto de PC como de dispositivos móviles, ya que pueden diferir. PageSpeed Insights indica claramente si tu página cumple o no con los umbrales para una buena experiencia relacionada con las métricas de Core Web Vitals en la parte superior del informe.

Chrome UX Report (CrUX)

CrUX es un conjunto de datos de acceso público de la experiencia de usuario de Chrome en el mundo real de millones de sitios web. El informe Chrome UX se centra en el rendimiento de carga del sitio web. Mide las métricas de Core Web Vitals y métricas como Time to First Byte (TTFB) y más.

Web Vitals Chrome Еxtension

La extensión mide en tiempo real de las tres métricas de Core Web Vitals (carga, interactividad y estabilidad visual) en Chrome para uso de PC de escritorio. Es esencialmente una herramienta de diagnóstico que evalúa el rendimiento de los Core Web Vitals mientras navegas por la web.

Web.dev

Web.dev ofrece una herramienta de medición gratuita para ejecutar una auditoría de rendimiento en tu sitio. Además, puede verificar el rendimiento de tu sitio web en diferentes áreas y darte consejos para mejorar métricas como el rendimiento de la web, el estado progresivo de la aplicación web, la accesibilidad, el uso de las mejores prácticas y el SEO. También es compatible con las métricas de Core Web Vitals.

Herramientas de Lab data

El Lab Data (datos de laboratorio) se refiere a la realización de pruebas en un entorno controlado y a ver cómo un usuario potencial experimentará tu sitio web. A diferencia de los datos de campo, los datos de laboratorio funcionan con datos simulados, con dispositivos predefinidos y especificaciones de red. Es útil para reproducir y depurar posibles problemas de rendimiento del sitio web, pero no proporciona información real sobre la experiencia del usuario.

Lighthouse

Lighthouse es una herramienta de auditoría web automatizada y de código abierto que ayuda a los desarrolladores a diagnosticar problemas y mejorar la calidad de las páginas web. La última versión, Lighthouse 6.0, introduce tres nuevas métricas en el informe, que incluyen el Largest Contentful Paint (LCP) y el Cumulative Layout Shift (CLS) como implementaciones de laboratorio de las métricas de Core Web Vitals. La tercera nueva métrica es el tiempo total de bloqueo o Total Blocking Time (TBT).

Como puedes ver, una herramienta de Lab Data como Lighthouse no puede medir el First Input Delay (FID) porque requiere la interacción de un usuario real para registrarse. Sin embargo, puede monitorizar el tiempo total de bloqueo (TBT), que mide la cantidad total de tiempo entre el First Contentful Pain y el Time To Interactive. Al mejorar su TBT, lo más probable es que también mejore su FIB. Si tienes una puntuación de TBT mala, debes considerar minimizar el uso de terceros.

WebPageTest.org

Esta es una herramienta gratuita de código abierto que mide el rendimiento de la velocidad de tu sitio web. Carga tu página en un navegador real, lo que te ayuda a identificar secciones específicas de tu web que necesitan más tiempo para cargarse.

Panel Performance de Chrome DevTools

Abre Google Chrome en modo incógnito y presiona Command + Option + I (Mac) o Control + Shift + I (Windows, Linux) para abrir DevTools. Con Chrome DevTools, tienes la opción Performance que incluye los nuevos Core Web Vitals. El panel Performance también tiene una nueva sección, Experience, desde donde puedes detectar cambios de diseño inesperados. Por lo tanto, puedes identificar y corregir cualquier inestabilidad visual y mejorar la métrica de Cumulative Layout Shift.

Selecciona Layout Shift para ver tus detalles en la pestaña Summary.

Ten en cuenta que, según la herramienta que utilices (según los Lab Data o Field Data), las métricas de los Core Web Vitals pueden mostrar resultados diferentes.

Cómo mejorar los Core Web Vitals

Una vez que hayas terminado de analizar tu sitio web, es hora de actuar. La buena noticia es que la mayoría de los consejos para mejorar tus Core Web Vitals ya forman parte de las buenas prácticas para optimizar el rendimiento de tu web.

Mejorar el LCP y el FID

Elige un hosting web rápido y confiable

Una de las razones más comunes de un LCP incorrecto es un tiempo de respuesta lento del servidor. Primero, verifica tu TTFB: cuánto tiempo tarda el navegador en recibir el primer byte de contenido del servidor. Ten en cuenta que un servicio de hosting rápido puede tener un gran impacto en el rendimiento de tu sitio web. En pocas palabras, cuanto más rápido sea el tiempo de respuesta del servidor, más rápido será el rendimiento de tu sitio web.

Como proveedor de hosting, en SiteGround desarrollamos continuamente nuevas herramientas y actualizaciones de servicios que hacen que tu sitio web sea más rápido y seguro, y te ayudan a administrarlo fácilmente. Algunas de las principales ventajas que puedes disfrutar alojando tu web con nosotros son un servicio de hosting ultrarrápido con tecnología de Google Cloud, una configuración única de PHP ultrarrápida, una configuración de base de datos MySQL personalizada y un sólido sistema de seguridad contra cualquier tipo de amenazas potenciales.

Habilita la caché de página completa

Cuando habilitas el almacenamiento en caché de página completa, las páginas de tu sitio web se almacenarán en el servidor como archivos HTML después de la primera vez que se carguen. Solo el primer visitante de tu sitio cargará todo el contenido de la página desde la base de datos. Todos los demás visitantes obtendrán la salida del contenido de la página directamente desde la memoria del servidor, mejorando así el TTFB de tu sitio, haciendo que sea mucho más rápido y, en última instancia, mejorando tu métrica LCP.

Los usuarios de SiteGround aprovechan nuestra exclusiva solución de almacenamiento en caché de página completa, denominada caché dinámica, que está habilitada para todos los sitios web alojados en nuestros servidores de forma predeterminada. Dependiendo del tipo de sitio, hemos llegado a ver páginas cargando hasta 5 veces más rápido que antes de utilizar esta solución.

Difiere JavaScript

Mientras el navegador carga JavaScript (JS), los usuarios no pueden interactuar con la página web. Es por eso que a veces puedes ver el término “bloqueo del renderizado de JavaScript”. Diferir tus JavaScrips significa que el navegador procesará y cargará los archivos JS solo después de analizar el documento HTML. En otras palabras, al renderizar tu sitio web, este será mucho más rápido porque no habrá nada que bloquee el proceso.

El plugin SiteGround Optimizer de SiteGround puede encargarse fácilmente de optimizar tus archivos JavaScript. Contiene una pestaña dedicada que te permitirá evitar el bloqueo del renderizado de Javascript, minimizar y combinar JS fácilmente para obtener resultados más rápidos de tu web.

Minimiza archivos CSS y JS

Para facilitar la lectura, los desarrolladores suelen dejar caracteres como espaciado, sangría o comentarios en los archivos CSS y JS. Sin embargo, todos estos caracteres en el código no son esenciales para el navegador. Lo que la minimización hace es optimizar tu código eliminando los caracteres innecesarios, lo que da como resultado un tiempo de renderizado mejorado y sitios web más rápidos.

Una forma fácil y eficaz de administrar tus archivos CSS y JavaScript es utilizar las funciones del plugin SiteGround Optimizer dedicadas a la optimización del front-end.

Optimiza el almacenamiento en caché del navegador

El almacenamiento en caché del navegador es una forma eficaz de que los navegadores descarguen imágenes, datos y documentos de sitios web. Para ayudar a que tu página cargue más rápido, asegúrate de configurar la opción correcta para los archivos estáticos que tu navegador guarda en la caché.

Todos los sitios alojados en SiteGround pueden aprovechar nuestra exclusiva tecnología SuperCacher. Utilizamos NGINX Direct Delivery para almacenar en caché los recursos estáticos, incluidas las fechas de vencimiento adecuadas para el almacenamiento en caché del navegador. La opción Memcached también está disponible.

Usa CDN

Además del servidor en el que está alojado tu sitio web, puedes utilizar una red de entrega de contenido (CDN) para acelerar el tiempo de carga de todos tus visitantes. El CDN almacenará en caché el contenido de tu web a través de una red global de servidores y lo cargará desde el más cercano al visitante, mejorando así su experiencia con tu página.

En SiteGround estamos asociados con Cloudflare para brindar a los clientes mayor velocidad y seguridad. Cloudflare es una herramienta de CDN que acelera tu sitio web cuando tiene tráfico disperso geográficamente entre varios países y continentes.

Elimina cualquier script innecesario de terceros

Dado que las imágenes son a menudo el elemento LCP tanto para dispositivos móviles como para ordenadores de escritorio, optimizarlas mejorará el rendimiento y el rendimiento del Largest Contentful Paint.

A continuación, te mostramos algunas buenas prácticas para hacerlo:

• Comprime siempre tus imágenes: reduce el tamaño de la imagen sin perder calidad. Eso mejorará tu tiempo de carga.
• Sirve imágenes en formatos de última generación: dichos formatos son JPEG 2000, JPEG XR y WebP. Teniendo esto en cuenta, Google recomienda el formato WebP.
• Escala correctamente las imágenes
• Carga de forma diferida el contenido estático, pero excluye tu elemento LCP y muéstralo directamente en el HTML de la página.
• Use imágenes estáticas en lugar de un carruseles deslizantes o dinámicos.

Una forma eficaz de optimizar tus medios audiovisuales es aprovechar nuestro plugin SiteGround Optimizer. Tiene funciones dedicadas para la optimización de medios, desde la optimización de imágenes, compatible con el formato WebP, hasta medios de carga diferida (Iframes, videos, miniaturas, imágenes receptivas, widgets y más). También puedes excluir fácilmente imágenes de la carga diferida.

Comprime tus archivos

Utiliza aplicaciones de compresión de archivos, como Gzip y Brotli, para reducir el tamaño de tus archivos CSS, HTML y JavaScript. Como resultado, el navegador podrá cargar esos archivos más rápido, lo que te ayudará a mejorar LCP.

En SiteGround hemos implementado y habilitado de forma predeterminada Brotli, el sucesor de gzip, el algoritmo de compresión de próxima generación de Google. ¡Las webs alojadas en nuestros servidores han ganado hasta un 15-20% de velocidad con su uso!

Elimina elementos de página pesados

Puedes analizar los elementos de página que ralentizan el LCP de tu página desde Google PageSpeed Insights. Puedes ver cómo hacerlo en la sección Cómo medir y analizar los Core Web Vitals de este mismo artículo.

Mejorar el CLS

Asegúrate de que los elementos de los anuncios tengan un espacio reservado

Los anuncios tienen una naturaleza dinámica que puede dar lugar a cambios de diseño inesperados. Esto puede tener un efecto negativo en la experiencia del usuario y, por lo tanto, puede dañar tu puntuación de CLS. Si no reservas suficiente espacio para los anuncios que se cargan en tu web, pueden aparecer inesperadamente y arruinar tu experiencia de usuario.

Optimiza la entrega de fuentes

No hace falta decir que todo buen sitio web consta de fuentes web cuidadosamente seleccionadas. ¿Por qué con cuidado? Porque las fuentes mejoran la legibilidad de tu página, su accesibilidad y transmiten la imagen de su marca. Sin embargo, cada fuente que utilizas es un recurso adicional que puede ralentizar tu sitio web. Pero esto no tiene por qué pasar si las optimizas. Se recomienda pre cargar las fuentes que estás utilizando para evitar cambios de diseño y destellos de texto invisible. Al hacer esto, mejorará la puntuación de la métrica CLS.

Nuestro plugin SiteGround Optimizer también está desarrollado para ayudarte con esa área. Tiene una funcionalidad dedicada de optimización de fuentes web que mejora el tiempo de renderizado, lo que resulta en un mejor rendimiento del sitio web.

Utiliza las dimensiones de tamaño establecido para cualquier medio

Cualquier medio se refiere a videos, imágenes, GIF, infografías y más. Establecer las dimensiones del atributo de tamaño le dirá al navegador del usuario exactamente cuánto espacio necesitará ese elemento. Básicamente, esto minimizará los Cumulative Layout Shifts.

Las métricas de los Core Web Vitals y la forma en que se califican pueden cambiar con el tiempo. De hecho, no hay ninguna duda al respecto. Google ha ido cambiando las métricas utilizadas para medir la velocidad e indexar sitios web a lo largo de los años. Dar atención a la experiencia de la página no significa que Google dejará de buscar contenido de calidad en la página. Lo que vemos es que la experiencia de usuario gana importancia cada día y es mejor que estés preparado. Después de todo, todos trabajamos juntos para mejorar la web.