Core Web Vitals: Mide y Mejora para un Mejor SEO
Por qué Core Web Vitals importa para tu sitio web
Has creado un sitio web rápido y lleno de funciones, pero los usuarios siguen quejándose de lentitud y tu posicionamiento en buscadores está cayendo. El culpable podrían ser las Core Web Vitals: el conjunto de métricas de Google que cuantifican la experiencia real del usuario. Desde 2021, estas métricas son un factor de posicionamiento confirmado y afectan directamente a la tasa de rebote y las conversiones. Ignorarlas significa perder tráfico e ingresos.
En esta guía, aprenderás qué significa cada métrica, cómo medirlas con precisión y mejoras paso a paso que puedes implementar hoy mismo.
¿Qué son las Core Web Vitals?
Las Core Web Vitals son tres métricas específicas que capturan la carga, la interactividad y la estabilidad visual:
- Largest Contentful Paint (LCP): Mide el rendimiento de carga. Marca el momento en que el elemento de contenido más grande (imagen, bloque de texto, vídeo) se hace visible. Un LCP bueno es de 2,5 segundos o menos.
- Interaction to Next Paint (INP): Mide la capacidad de respuesta. Registra la latencia de todas las interacciones (clics, toques, pulsaciones de teclas) y reporta un único valor. Un INP bueno es de 200 milisegundos o menos. INP reemplazó a First Input Delay (FID) en marzo de 2024.
- Cumulative Layout Shift (CLS): Mide la estabilidad visual. Cuantifica los desplazamientos de diseño inesperados durante la carga de la página. Un CLS bueno es de 0,1 o menos.
Estas métricas se basan en datos de campo, es decir, provienen de datos de usuarios reales, no de pruebas de laboratorio. Por eso herramientas como Chrome User Experience Report (CrUX) y PageSpeed Insights las utilizan.
Cómo medir las Core Web Vitals
Necesitas datos tanto de laboratorio como de campo para obtener una visión completa. Las herramientas de laboratorio te ayudan a depurar, mientras que los datos de campo muestran la experiencia real del usuario.
Herramientas de campo (datos de usuarios reales)
- PageSpeed Insights: Introduce una URL para ver datos de laboratorio y de campo. La sección de campo se nutre de CrUX.
- Search Console: El informe de Core Web Vitals agrupa las URL por estado (Poor, Needs Improvement, Good).
- Chrome UX Report (CrUX): Accede a través de BigQuery o la API de CrUX para obtener datos sin procesar.
- Librería JavaScript web-vitals: Añade este ligero script a tu sitio para recopilar métricas de usuarios reales y enviarlas a tu analítica.
Herramientas de laboratorio (pruebas sintéticas)
- Lighthouse: Integrado en Chrome DevTools. Ejecútalo para obtener puntuaciones de laboratorio y oportunidades de mejora.
- WebPageTest: Pruebas avanzadas con filmstrips, gráficos waterfall y limitación de ancho de banda personalizada.
- Panel Performance de Chrome DevTools: Graba y analiza el rendimiento en tiempo de ejecución.
Para empezar rápido, usa PageSpeed Insights. Combina datos de laboratorio y de campo en un solo informe.
Paso a paso: mejorar el LCP
El LCP suele ser el más fácil de mejorar con estos pasos:
- Optimiza las imágenes: Comprime las imágenes sin perder calidad. Usa formatos modernos como WebP o AVIF. Herramientas como Image Compressor pueden ayudarte.
- Precarga el elemento LCP: Añade
<link rel="preload">para la imagen principal o la fuente. - Reduce el tiempo de respuesta del servidor: Usa una CDN, activa el almacenamiento en caché y optimiza el código del backend. Para Nginx, revisa tus logs con Nginx Log Analyzer para detectar peticiones lentas.
- Elimina los recursos que bloquean el renderizado: Inserta el CSS crítico en línea, aplaza el JavaScript no crítico y usa los atributos
asyncodefer. - Usa una CDN: Sirve los recursos desde ubicaciones cercanas a los usuarios.
Paso a paso: mejorar el INP
El INP mide la capacidad de respuesta. Un INP alto suele provenir de tareas largas de JavaScript.
- Divide las tareas largas: Usa
setTimeoutorequestIdleCallbackpara ceder el hilo principal. - Optimiza los manejadores de eventos: Aplica debounce o throttle a las operaciones costosas.
- Reduce el JavaScript: Elimina código no usado, divide el código (code-splitting) y carga de forma diferida los scripts no críticos.
- Usa web workers: Mueve los cálculos pesados fuera del hilo principal.
- Evita tamaños de DOM grandes: Mantén el DOM por debajo de 1500 nodos cuando sea posible.
Paso a paso: mejorar el CLS
El CLS trata de la estabilidad visual. Evita desplazamientos inesperados con estas tácticas:
- Establece atributos de tamaño en imágenes y vídeos: Incluye siempre
widthyheight. - Reserva espacio para anuncios e incrustaciones: Usa CSS
aspect-ratioo contenedores de tamaño fijo. - Evita insertar contenido por encima del contenido existente: Si es imprescindible, usa un marcador de posición o anima el desplazamiento.
- Usa font-display: swap: Evita el texto invisible durante la carga de fuentes (aunque esto puede causar pequeños desplazamientos; considera
font-display: optionalpara fuentes críticas). - Precarga las fuentes: Reduce los desplazamientos de diseño por fuentes que cargan tarde.
Comparación de las métricas de Core Web Vitals
| Métrica | Qué mide | Umbral bueno | Solución principal |
|---|---|---|---|
| LCP | Rendimiento de carga | ≤ 2,5 s | Optimizar imágenes, precarga, CDN |
| INP | Capacidad de respuesta | ≤ 200 ms | Dividir tareas largas, reducir JS |
| CLS | Estabilidad visual | ≤ 0,1 | Definir dimensiones, reservar espacio |
Monitorización y mejora continua
El rendimiento no es una solución puntual. Configura la monitorización de usuarios reales (RUM) para hacer seguimiento de las Core Web Vitals a lo largo del tiempo. Usa la librería web-vitals para enviar las métricas a tu plataforma de analítica. Configura alertas para regresiones. Audita periódicamente con Lighthouse en tu pipeline de CI/CD para detectar problemas antes de que lleguen a producción.
Preguntas frecuentes
¿Cuáles son los umbrales actuales de Core Web Vitals?
Para LCP, bueno es ≤ 2,5 s, necesita mejorar es ≤ 4,0 s y pobre es > 4,0 s. Para INP, bueno es ≤ 200 ms, necesita mejorar es ≤ 500 ms y pobre es > 500 ms. Para CLS, bueno es ≤ 0,1, necesita mejorar es ≤ 0,25 y pobre es > 0,25.
¿Con qué frecuencia debo medir las Core Web Vitals?
Monitoriza de forma continua con datos de usuarios reales. Ejecuta pruebas de laboratorio tras cambios significativos en el código y al menos una vez al mes. Los datos de campo en Search Console se actualizan a diario, pero reflejan una ventana móvil de 28 días.
¿Puedo mejorar las Core Web Vitals sin un desarrollador?
Algunas correcciones, como la compresión de imágenes y el almacenamiento en caché, se pueden hacer con plugins o herramientas. Sin embargo, optimizaciones más profundas como la reducción de JavaScript y el ajuste del servidor suelen requerir la intervención de un desarrollador.
¿Listo para acelerar tu sitio? Empieza comprimiendo tus imágenes con nuestro Image Compressor gratuito para dar un impulso rápido a tu LCP.