Core Web Vitals: Mide y Mejora el Rendimiento Web
Has construido un sitio web moderno y rápido, pero los usuarios siguen quejándose de la lentitud y tu posicionamiento SEO está bajando. El culpable podrían ser las Core Web Vitals (CWV), las métricas de Google para la experiencia de usuario. En esta guía, aprenderás a medir y mejorar LCP, INP y CLS con pasos prácticos y accionables.
¿Qué son las Core Web Vitals?
Las Core Web Vitals son tres métricas que cuantifican la experiencia de usuario en el mundo real:
- Largest Contentful Paint (LCP): Con qué rapidez se carga el contenido principal. Objetivo: ≤ 2,5 segundos.
- Interaction to Next Paint (INP): Qué tan receptiva es la página a la interacción del usuario. Objetivo: ≤ 200 milisegundos.
- Cumulative Layout Shift (CLS): Cuánto se desplaza el diseño de forma inesperada. Objetivo: ≤ 0,1.
Estas métricas forman parte de las señales de experiencia de página de Google e impactan directamente en el SEO y la satisfacción del usuario.
Cómo medir las Core Web Vitals
La medición se divide en dos categorías: datos de campo (monitorización de usuarios reales) y datos de laboratorio (pruebas sintéticas). Ambos son valiosos.
Herramientas de campo (datos de usuarios reales)
- Chrome User Experience Report (CrUX): Conjunto de datos público con métricas de usuarios reales. Accede a través de PageSpeed Insights o la API de CrUX.
- Google Search Console: El informe de Core Web Vitals muestra el rendimiento a nivel de grupo para tu sitio.
- Biblioteca web-vitals: Una pequeña biblioteca de JavaScript para capturar métricas en tu propia analítica.
Herramientas de laboratorio (pruebas sintéticas)
- Lighthouse: Integrado en Chrome DevTools, audita el rendimiento y ofrece oportunidades de mejora.
- PageSpeed Insights: Combina datos de laboratorio y de campo para una única URL.
- WebPageTest: Pruebas avanzadas con condiciones de red personalizadas y emulación de dispositivos.
Usa los datos de campo para entender la experiencia real del usuario y los datos de laboratorio para depurar e iterar.
Mejorar LCP: Haz que el contenido principal cargue más rápido
LCP suele ser la métrica con mayor impacto. Así puedes optimizarla:
- Optimiza las imágenes: Comprime las imágenes, usa formatos modernos (WebP, AVIF) y sirve tamaños responsivos con
srcset. Herramientas como Image Compressor pueden ayudar a reducir el tamaño de archivo sin pérdida visible de calidad. - Precarga los recursos críticos: Usa
<link rel="preload">para imágenes hero, fuentes y CSS clave. - Reduce el tiempo de respuesta del servidor: Usa una CDN, activa el almacenamiento en caché y optimiza las consultas del backend.
- Elimina los recursos que bloquean el renderizado: Incluye el CSS crítico en línea, aplaza el JavaScript no crítico y carga el CSS de forma asíncrona.
- Usa una red de distribución de contenido (CDN): Sirve los recursos desde ubicaciones cercanas a los usuarios.
Mejorar INP: Haz que las interacciones se sientan instantáneas
INP mide el tiempo desde la interacción del usuario (clic, toque, pulsación de tecla) hasta la siguiente actualización visual. Para mejorarlo:
- Divide las tareas largas: Usa
setTimeoutorequestIdleCallbackpara ceder el hilo principal. - Optimiza los manejadores de eventos: Aplica debounce o throttle a eventos rápidos como scroll y resize.
- Reduce el tiempo de ejecución de JavaScript: Divide el código, aplica tree-shaking y carga de forma diferida los scripts no críticos.
- Usa web workers: Descarga los cálculos pesados en un hilo en segundo plano.
- Minimiza los scripts de terceros: Audita y elimina analíticas, anuncios o widgets innecesarios.
Mejorar CLS: Mantén el diseño estable
El CLS ocurre cuando los elementos se desplazan de forma inesperada. Evítalo así:
- Establece siempre el ancho y la altura en imágenes y vídeos: Esto reserva espacio y evita el reflujo.
- Reserva espacio para anuncios e incrustaciones: Usa CSS
aspect-ratioo contenedores de tamaño fijo. - Evita insertar contenido por encima del contenido existente: Salvo en respuesta a una interacción del usuario.
- Usa
font-display: swap: Asegura que el texto siga visible durante la carga de la fuente, pero ten en cuenta que puede causar pequeños desplazamientos; considerafont-display: optionalpara texto crítico. - Precarga las fuentes: Reduce la probabilidad de desplazamiento del diseño por fuentes que cargan tarde.
Comparación de las métricas de Core Web Vitals
| Métrica | Qué mide | Objetivo bueno | Causas comunes de malos resultados |
|---|---|---|---|
| LCP | Rendimiento de carga | ≤ 2,5 s | Servidor lento, recursos que bloquean el renderizado, imágenes grandes |
| INP | Capacidad de respuesta | ≤ 200 ms | Tareas largas, JavaScript pesado, manejadores de eventos ineficientes |
| CLS | Estabilidad visual | ≤ 0,1 | Imágenes sin dimensiones, inyección de contenido dinámico, fuentes web |
Herramientas y flujo de trabajo para la mejora continua
Optimizar las CWV no es una tarea única. Integra estas prácticas en tu flujo de trabajo:
- Configura la monitorización de usuarios reales: Usa la biblioteca
web-vitalspara enviar métricas a tu plataforma de analítica. - Ejecuta Lighthouse en CI: Usa Lighthouse CI para detectar regresiones antes del despliegue.
- Monitoriza con Search Console: Revisa el informe de Core Web Vitals con regularidad.
- Prueba en dispositivos reales: Los emuladores son útiles, pero los dispositivos reales revelan el rendimiento verdadero.
- Itera y mide: Haz un cambio a la vez y mide su impacto.
Recuerda que mejorar las Core Web Vitals a menudo implica optimizar los recursos. Para las imágenes, considera usar un Image Compressor para reducir el tamaño de archivo antes de subirlas.
Preguntas frecuentes
¿Qué son las Core Web Vitals y por qué importan?
Las Core Web Vitals son tres métricas (LCP, INP, 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 medir las Core Web Vitals?
De forma continua. Configura la monitorización de usuarios reales para obtener datos constantes y ejecuta pruebas de laboratorio (p. ej., Lighthouse) durante el desarrollo y antes de los lanzamientos para detectar regresiones.
¿Puedo mejorar las Core Web Vitals sin un desarrollador?
Algunas mejoras, como comprimir imágenes o activar el almacenamiento en caché mediante plugins, pueden hacerlas personas sin perfil técnico. Sin embargo, las optimizaciones más profundas (p. ej., reducir JavaScript, optimizar la ruta crítica de renderizado) suelen requerir la intervención de un desarrollador.
¿Listo para optimizar tus imágenes y mejorar el LCP? Prueba nuestro Image Compressor gratuito para reducir el tamaño de archivo sin perder calidad.