Core Web Vitals: Mide y mejora el rendimiento web
Has construido un sitio web rápido, pero los usuarios aún se quejan de carga lenta o interacciones con saltos. Los motores de búsqueda también podrían posicionarte más abajo debido a unos Core Web Vitals deficientes. Estas métricas—Largest Contentful Paint (LCP), First Input Delay (FID) y Cumulative Layout Shift (CLS)—impactan directamente en la experiencia de usuario y el SEO. En esta guía, te mostraremos cómo medirlas y mejorarlas con pasos prácticos.
¿Qué son los Core Web Vitals?
Los Core Web Vitals son un conjunto de métricas definidas por Google para cuantificar aspectos clave de la experiencia de usuario: carga, interactividad y estabilidad visual. Son:
- Largest Contentful Paint (LCP): Mide el rendimiento de carga. Debe ocurrir dentro de los 2.5 segundos desde el inicio de la página.
- First Input Delay (FID): Mide la interactividad. Debe ser inferior a 100 milisegundos.
- Cumulative Layout Shift (CLS): Mide la estabilidad visual. Debe ser inferior a 0.1.
Estas métricas forman parte de las señales de Page Experience de Google y pueden afectar tus rankings de búsqueda.
Cómo medir los Core Web Vitals
Puedes medir los Core Web Vitals en el laboratorio (pruebas sintéticas) o en el campo (monitorización de usuarios reales). Ambos tienen su lugar.
Herramientas de laboratorio
- Lighthouse: Integrado en Chrome DevTools, audita el rendimiento y proporciona puntuaciones para LCP, CLS y total blocking time (TBT, un proxy para FID).
- PageSpeed Insights: Combina datos de laboratorio y de campo del Chrome User Experience Report (CrUX).
- WebPageTest: Ofrece pruebas avanzadas con ubicaciones y dispositivos personalizados.
Herramientas de campo
- Chrome User Experience Report (CrUX): Proporciona datos agregados de usuarios reales para millones de sitios.
- Biblioteca web-vitals: Una biblioteca JavaScript para capturar métricas de usuarios reales y enviarlas a tu analítica.
- Search Console: Muestra el estado de los Core Web Vitals de tu sitio basado en datos de CrUX.
Comienza con herramientas de laboratorio para depurar, luego valida con datos de campo para asegurar el rendimiento en el mundo real.
Mejorar Largest Contentful Paint (LCP)
LCP mide cuándo el elemento de contenido más grande (a menudo una imagen hero o un encabezado) se vuelve visible. Para mejorar LCP:
- Optimiza las imágenes: Comprime imágenes, usa formatos modernos como WebP o AVIF, y sirve imágenes responsivas con
srcset. - Precarga recursos críticos: Usa
<link rel="preload">para imágenes, fuentes y hojas de estilo clave. - Reduce el tiempo de respuesta del servidor: Usa una CDN, habilita el almacenamiento en caché y optimiza el rendimiento del backend.
- Elimina recursos que bloquean el renderizado: Incluye CSS crítico en línea, difiere JavaScript no crítico y evita archivos CSS grandes.
- Usa una red de entrega de contenido (CDN): Sirve activos desde ubicaciones más cercanas a los usuarios.
Para la optimización de imágenes, prueba nuestro Compresor de Imágenes para reducir el tamaño de archivo sin perder calidad.
Mejorar First Input Delay (FID)
FID mide el tiempo desde que un usuario interactúa por primera vez con tu página hasta que el navegador puede responder. Para mejorar FID:
- Minimiza la ejecución de JavaScript: Divide tareas largas, usa code splitting y difiere scripts no críticos.
- Optimiza scripts de terceros: Cárgalos de forma asíncrona o retrásalos hasta después del contenido crítico.
- Usa un web worker: Descarga cálculos pesados a un hilo worker.
- Reduce el trabajo del hilo principal: Evita scripts síncronos grandes y un tamaño excesivo del DOM.
Herramientas como la métrica TBT de Lighthouse pueden ayudarte a identificar tareas largas.
Mejorar Cumulative Layout Shift (CLS)
CLS mide cambios inesperados de diseño durante la carga de la página. Para mejorar CLS:
- Incluye siempre atributos width y height en imágenes y videos: Esto reserva espacio y previene cambios.
- Reserva espacio para anuncios e incrustaciones: Usa CSS
aspect-ratioo dimensiones fijas. - Evita insertar contenido encima del contenido existente: Excepto en respuesta a la interacción del usuario.
- Usa transformaciones CSS para animaciones: En lugar de propiedades que desencadenan layout.
- Precarga fuentes: Usa
font-display: swapy precarga para evitar cambios de texto invisible.
Comparación de umbrales de Core Web Vitals
| Métrica | Bueno | Necesita mejora | Deficiente |
|---|---|---|---|
| LCP | ≤ 2.5s | 2.5s – 4.0s | > 4.0s |
| FID | ≤ 100ms | 100ms – 300ms | > 300ms |
| CLS | ≤ 0.1 | 0.1 – 0.25 | > 0.25 |
Flujo de trabajo de optimización práctico
Sigue este enfoque paso a paso para mejorar los Core Web Vitals:
- Mide: Ejecuta Lighthouse y revisa Search Console para datos de campo.
- Identifica problemas: Enfócate en la métrica con la peor puntuación.
- Aplica correcciones: Usa los consejos anteriores para LCP, FID o CLS.
- Prueba de nuevo: Vuelve a ejecutar auditorías para confirmar mejoras.
- Monitoriza: Usa la biblioteca web-vitals para rastrear métricas de usuarios reales a lo largo del tiempo.
Recuerda que el rendimiento es continuo. Audita tu sitio regularmente a medida que agregas funciones.
Preguntas frecuentes
¿Qué son los Core Web Vitals?
Los Core Web Vitals son tres métricas—LCP, FID y CLS—que miden carga, interactividad y estabilidad visual. Google las usa como señales de ranking.
¿Con qué frecuencia debo revisar los Core Web Vitals?
Revísalos después de cambios importantes y al menos mensualmente. Usa tanto datos de laboratorio como de campo para detectar regresiones.
¿Puedo mejorar los Core Web Vitals sin un desarrollador?
Algunas correcciones como la compresión de imágenes y agregar dimensiones a las imágenes pueden hacerlas los editores de contenido. Otras pueden requerir ayuda de un desarrollador.
¿Listo para optimizar tus imágenes para un mejor LCP? Prueba nuestro Compresor de Imágenes gratuito para reducir el tamaño de archivo y acelerar tu sitio.