Core Web Vitals: Mide y mejora el rendimiento web
Por qué importan las Core Web Vitals
Has creado un sitio web precioso, pero los usuarios se marchan porque lo perciben lento. Las Core Web Vitals son las métricas de Google para la experiencia de usuario real: Largest Contentful Paint (LCP), First Input Delay (FID) y Cumulative Layout Shift (CLS). Afectan al posicionamiento en buscadores y, más importante aún, a si los visitantes se quedan. Esta guía te muestra cómo medirlas y mejorarlas.
Entendiendo las tres métricas
Cada métrica captura un aspecto diferente de la carga, la interactividad y la estabilidad visual.
| Métrica | Qué mide | Umbral aceptable |
|---|---|---|
| LCP | Tiempo hasta renderizar el elemento de contenido más grande (imagen, bloque de texto) | ≤ 2,5 s |
| FID | Tiempo desde la primera interacción del usuario hasta la respuesta del navegador | ≤ 100 ms |
| CLS | Estabilidad visual: cambios de diseño inesperados | ≤ 0,1 |
Nota: FID está siendo reemplazada por Interaction to Next Paint (INP) en 2024, pero los principios de optimización siguen siendo similares.
Cómo medir las Core Web Vitals
Necesitas datos tanto de laboratorio como de campo. Las herramientas de laboratorio simulan condiciones; los datos de campo reflejan a usuarios reales.
- Chrome DevTools Lighthouse: Ejecuta una auditoría en la pestaña Lighthouse. Proporciona puntuaciones de laboratorio y oportunidades de mejora.
- PageSpeed Insights: Introduce tu URL para ver datos de campo del Chrome User Experience Report (CrUX) y sugerencias de laboratorio.
- Search Console: Consulta el informe de Core Web Vitals para datos de campo a nivel de grupo.
- Biblioteca JavaScript Web Vitals: Añade
web-vitalsa tu sitio para recopilar métricas de usuarios reales.
import {onLCP, onFID, onCLS} from 'web-vitals';
onLCP(console.log);
onFID(console.log);
onCLS(console.log);Usa estos datos para identificar patrones y priorizar las correcciones.
Mejorar el Largest Contentful Paint (LCP)
El LCP suele ser la métrica con mayor impacto. Optimiza estas áreas:
- Optimiza las imágenes: Comprime las imágenes, usa WebP o AVIF y sirve tamaños adaptables. Herramientas como Image Compressor pueden ayudar a reducir el tamaño del archivo sin pérdida visible de calidad.
- Precarga recursos críticos: Usa
<link rel="preload">para imágenes destacadas y fuentes. - Elimina recursos que bloquean el renderizado: Incluye el CSS crítico en línea, difiere el JavaScript no crítico.
- Usa una CDN: Sirve los recursos desde ubicaciones más cercanas a los usuarios.
- Cachea los recursos: Establece tiempos de caché largos para archivos estáticos.
Ejemplo: Precarga tu imagen LCP:
<link rel="preload" as="image" href="#">Mejorar el First Input Delay (FID)
El FID mide la capacidad de respuesta. Las tareas largas de JavaScript bloquean el hilo principal.
- Divide las tareas largas: Usa
setTimeoutorequestIdleCallbackpara ceder el control al hilo principal. - Minimiza el trabajo del hilo principal: Elimina el JavaScript no utilizado, divide el código y difiere los scripts no críticos.
- Usa web workers para cálculos pesados.
- Evita scripts síncronos grandes: Carga los scripts de terceros de forma asíncrona.
Audita con las oportunidades de Lighthouse "Minimize main-thread work" y "Reduce JavaScript execution time".
Mejorar el Cumulative Layout Shift (CLS)
El CLS ocurre cuando los elementos se mueven inesperadamente. Causas comunes y soluciones:
- Imágenes sin dimensiones: Establece siempre los atributos
widthyheighto usa CSSaspect-ratio. - Anuncios, embeds, iframes: Reserva espacio con un marcador de posición o un contenedor de tamaño fijo.
- Inyección de contenido dinámico: Evita insertar contenido por encima del contenido existente a menos que lo active una interacción del usuario.
- Fuentes web: Usa
font-display: swapy precarga las fuentes para evitar texto invisible o cambios de diseño.
Ejemplo: Reserva espacio para una imagen:
<img src="#" width="800" height="600" alt="...">Herramientas y flujo de trabajo para el monitoreo continuo
El rendimiento no es una corrección puntual. Integra el monitoreo en tu proceso de desarrollo:
- Lighthouse CI: Ejecuta auditorías en cada pull request para detectar regresiones.
- Real User Monitoring (RUM): Usa la biblioteca
web-vitalsy envía los datos a tu plataforma de analítica. - Presupuestos de rendimiento: Establece umbrales para las métricas y falla las compilaciones cuando se superen.
Consulta periódicamente PageSpeed Insights y Search Console para hacer seguimiento del progreso.
Preguntas frecuentes
¿Qué son las Core Web Vitals?
Las Core Web Vitals son un conjunto de métricas definidas por Google que miden la experiencia de usuario real: Largest Contentful Paint (carga), First Input Delay (interactividad) y Cumulative Layout Shift (estabilidad visual).
¿Con qué frecuencia debo medir las Core Web Vitals?
Monitoriza de forma continua con RUM y ejecuta auditorías de laboratorio en cada cambio de código significativo. Revisa los datos de campo mensualmente a través de Search Console o PageSpeed Insights.
¿Puedo mejorar las Core Web Vitals sin un desarrollador?
Algunas correcciones como la compresión de imágenes y el uso de una CDN se pueden hacer con plugins o herramientas, pero las optimizaciones más profundas suelen requerir cambios en el código. Empieza por las imágenes y el caché.
¿Listo para optimizar tus imágenes y mejorar el LCP? Prueba nuestro Image Compressor gratuito para reducir el tamaño de los archivos sin sacrificar calidad.