Core Web Vitals: mide y mejora el rendimiento web
Has creado un sitio web rápido, pero los usuarios siguen quejándose de cargas lentas o interacciones con tirones. O quizá tus posiciones en SEO han bajado y sospechas que la experiencia de página es la culpable. Las Core Web Vitals son las métricas de Google para cuantificar la experiencia de usuario y afectan directamente al posicionamiento en buscadores. Esta guía te mostrará cómo medirlas y mejorarlas con pasos prácticos y accionables.
¿Qué son las Core Web Vitals?
Las Core Web Vitals son un conjunto de tres métricas que Google utiliza para evaluar la experiencia de usuario de una página web:
- Largest Contentful Paint (LCP): mide el rendimiento de carga. Marca el momento en que el elemento de contenido más grande (por ejemplo, una imagen, un vídeo o un bloque de texto) se hace visible. Un buen LCP es de 2,5 segundos o menos.
- First Input Delay (FID): mide la interactividad. Registra el tiempo desde que un usuario interactúa por primera vez con tu página (por ejemplo, hace clic en un enlace) hasta que el navegador puede responder. Un buen FID es de 100 milisegundos o menos.
- Cumulative Layout Shift (CLS): mide la estabilidad visual. Cuantifica los desplazamientos de diseño inesperados durante la carga de la página. Un buen CLS es de 0,1 o menos.
Estas métricas forman parte de la señal Page Experience de Google, así que optimizarlas puede mejorar tanto la satisfacción del usuario como el posicionamiento en buscadores.
Cómo medir las Core Web Vitals
Antes de mejorar, necesitas medir. Existen dos tipos principales de herramientas: herramientas de laboratorio (pruebas sintéticas) y herramientas de campo (monitorización de usuarios reales).
Herramientas de laboratorio
Las herramientas de laboratorio simulan la carga de una página en un entorno controlado. Son ideales para depurar y probar cambios antes del despliegue.
- Lighthouse: integrada en Chrome DevTools, audita el rendimiento, la accesibilidad y el SEO. Proporciona puntuaciones y oportunidades concretas de mejora.
- WebPageTest: te permite probar desde múltiples ubicaciones y dispositivos, con métricas avanzadas y filmstrips.
Herramientas de campo
Las herramientas de campo recopilan datos de usuarios reales, ofreciéndote una imagen real del rendimiento en distintos dispositivos y redes.
- Chrome User Experience Report (CrUX): un conjunto de datos público de métricas de usuarios reales de Chrome. Puedes consultar los datos de CrUX en PageSpeed Insights o BigQuery.
- Google Search Console: ofrece un informe de Core Web Vitals que muestra cómo rinden tus páginas según los datos de CrUX.
- Biblioteca JavaScript Web Vitals: puedes instrumentar tu sitio para enviar datos de Core Web Vitals a tu plataforma de analítica.
Empieza comprobando las Core Web Vitals de tu sitio en Search Console o PageSpeed Insights. Después, usa Lighthouse para depurar páginas concretas.
Mejorar el Largest Contentful Paint (LCP)
El LCP suele ser la métrica más impactante de optimizar. Así puedes mejorarlo:
1. Optimiza las imágenes
- Comprime las imágenes sin perder calidad. Usa herramientas como el Image Compressor para reducir el tamaño de los archivos.
- Utiliza formatos modernos como WebP o AVIF, que ofrecen mejor compresión que JPEG o PNG.
- Implementa imágenes responsivas con los atributos
srcsetysizespara servir imágenes con el tamaño adecuado. - Aplica lazy-loading a las imágenes que están por debajo del pliegue, pero evita el lazy-loading de la imagen del LCP.
2. Elimina los recursos que bloquean el renderizado
- Minifica CSS y JavaScript.
- Difiere el JavaScript no crítico con los atributos
deferoasync. - Incrusta el CSS crítico y carga el resto de forma asíncrona.
3. Mejora el tiempo de respuesta del servidor
- Usa una red de distribución de contenido (CDN) para servir los recursos desde ubicaciones más cercanas a los usuarios.
- Habilita el almacenamiento en caché de los recursos estáticos y las respuestas de API.
- Optimiza las consultas a la base de datos y el código del lado del servidor.
4. Precarga los recursos importantes
Usa <link rel="preload"> para recursos críticos como fuentes, imágenes clave o scripts que se descubren tarde.
Mejorar el First Input Delay (FID)
El FID mide la capacidad de respuesta. Un FID alto significa que el hilo principal está ocupado y no puede responder con rapidez a la entrada del usuario.
1. Divide las tareas largas
Las tareas largas de JavaScript bloquean el hilo principal. Divídelas en tareas más pequeñas usando setTimeout o requestIdleCallback.
2. Optimiza la ejecución de JavaScript
- Elimina el JavaScript que no se usa (tree shaking).
- Divide tus bundles (code splitting) para que solo se cargue inicialmente el código necesario.
- Usa web workers para cálculos pesados.
3. Evita los scripts de terceros grandes
Los scripts de terceros, como los de analítica o publicidad, pueden bloquear el hilo principal. Cárgalos de forma asíncrona y considera usar un gestor de etiquetas para controlar cuándo se ejecutan.
4. Reduce el tiempo de arranque de JavaScript
Minimiza la cantidad de JavaScript que debe analizarse y ejecutarse en la carga de la página. El renderizado del lado del servidor o la generación de sitios estáticos pueden ayudar.
Mejorar el Cumulative Layout Shift (CLS)
El CLS mide la estabilidad visual. Los desplazamientos de diseño se producen cuando los elementos cambian de posición de forma inesperada.
1. Incluye siempre atributos de tamaño para los medios
Para imágenes y vídeos, establece los atributos width y height o usa la propiedad CSS aspect-ratio para reservar espacio.
2. Reserva espacio para anuncios e incrustaciones
Si tienes contenido dinámico como anuncios o iframes, reserva espacio para ellos con un marcador de posición o dimensiones fijas.
3. Evita insertar contenido por encima del contenido existente
El contenido inyectado dinámicamente (por ejemplo, banners o notificaciones) que empuja hacia abajo el contenido existente provoca desplazamientos. Usa superposiciones o reserva espacio.
4. Usa font-display swap
Las fuentes personalizadas pueden provocar FOIT (Flash of Invisible Text) o FOUT (Flash of Unstyled Text). Usa font-display: swap para mostrar el texto de respaldo de inmediato.
Comparación de las métricas Core Web Vitals
| Métrica | Qué mide | Umbral bueno | Causas habituales |
|---|---|---|---|
| LCP | Rendimiento de carga | ≤ 2,5 s | Servidor lento, imágenes grandes, recursos que bloquean el renderizado |
| FID | Interactividad | ≤ 100 ms | Tareas largas de JavaScript, scripts de terceros pesados |
| CLS | Estabilidad visual | ≤ 0,1 | Imágenes sin dimensiones, inyección de contenido dinámico |
Ejemplo práctico: optimizar una imagen para el LCP
Supongamos que tu elemento LCP es una imagen hero. Así puedes optimizarla:
<!-- Before: Unoptimized -->
<img src="#" alt="Hero">
<!-- After: Optimized -->
<img src="#" alt="Hero" width="1200" height="600" loading="eager" fetchpriority="high">
Usa el Image Compressor para convertir y comprimir la imagen a WebP. Establece fetchpriority="high" para indicar al navegador que la cargue antes. Especifica las dimensiones para evitar desplazamientos de diseño.
Monitorizar las Core Web Vitals a lo largo del tiempo
La optimización no es una tarea única. Configura una monitorización continua:
- Usa la biblioteca
web-vitalspara enviar las métricas a tu analítica. - Configura alertas en Search Console para detectar regresiones.
- Audita con Lighthouse de forma periódica en tu pipeline de CI/CD.
Preguntas frecuentes
¿Qué son las Core Web Vitals y por qué importan?
Las Core Web Vitals son tres métricas (LCP, FID, CLS) que miden la carga, la interactividad y la estabilidad visual. Importan porque reflejan la experiencia real del usuario y Google las usa como señal de posicionamiento.
¿Con qué frecuencia debo comprobar mis Core Web Vitals?
Compruébalas después de despliegues importantes y monitorízalas de forma continua mediante datos de campo. Search Console ofrece un informe mensual, pero puedes usar la biblioteca web-vitals para hacer seguimiento en tiempo real.
¿Puedo mejorar las Core Web Vitals sin un desarrollador?
Algunas mejoras, como comprimir imágenes o usar una CDN, se pueden hacer con plugins o herramientas. Sin embargo, las optimizaciones más profundas suelen requerir cambios en el código. Empieza por la compresión de imágenes y el almacenamiento en caché.
¿Listo para mejorar tu LCP? Comprime tus imágenes con nuestro Image Compressor gratuito para reducir el tamaño de los archivos sin perder calidad.