Core Web Vitals: Mide y mejora el rendimiento web

Tus usuarios son impacientes. Si tu página tarda demasiado en cargar o salta mientras intentan leer, se van. Google lo sabe y su algoritmo de clasificación utiliza Core Web Vitals para medir la experiencia del usuario en el mundo real. Pero más allá del SEO, Core Web Vitals impacta directamente en las tasas de conversión y la satisfacción del usuario. En esta guía, desglosaremos qué significa cada métrica, cómo medirlas con precisión y, lo más importante, cómo mejorarlas con soluciones prácticas a nivel de código.

¿Qué son Core Web Vitals?

Core Web Vitals son un conjunto de tres métricas que cuantifican aspectos clave de la experiencia del usuario: carga, interactividad y estabilidad visual. Forman parte de las señales de Page Experience de Google.

• Largest Contentful Paint (LCP): Mide el rendimiento de carga. Marca el tiempo en que el elemento de contenido más grande (imagen, video o bloque de texto) se vuelve visible. Apunta a un LCP inferior a 2,5 segundos.
• Interaction to Next Paint (INP): Mide la capacidad de respuesta. Captura la latencia de todas las interacciones (clics, toques, pulsaciones de teclas) y reporta la más larga. Apunta a un INP inferior a 200 milisegundos.
• Cumulative Layout Shift (CLS): Mide la estabilidad visual. Cuantifica los cambios de diseño inesperados durante la carga de la página. Apunta a un CLS inferior a 0,1.

Estos umbrales se basan en datos de campo de usuarios reales, no en pruebas de laboratorio. Por eso, medir correctamente es crucial.

Cómo medir Core Web Vitals

Necesitas tanto datos de laboratorio como de campo. Las herramientas de laboratorio te ayudan a depurar; los datos de campo reflejan la experiencia del usuario real.

Herramientas de campo (monitorización de usuarios reales)

• Chrome User Experience Report (CrUX): Conjunto de datos público de Google con métricas de usuarios reales. Visualízalo en PageSpeed Insights o Search Console.
• PageSpeed Insights: Muestra datos de laboratorio (Lighthouse) y de campo (CrUX) para una URL.
• Informe Core Web Vitals de Search Console: Agrupa las URL por estado y métrica.
• Biblioteca JavaScript Web Vitals: Recopila tus propios datos de campo a través de la biblioteca web-vitals y envíalos a tu analítica.

Herramientas de laboratorio (pruebas sintéticas)

• Lighthouse: Integrado en Chrome DevTools. Proporciona métricas de laboratorio y oportunidades de mejora.
• WebPageTest: Pruebas avanzadas con filmstrips y gráficos de cascada.
• Panel Performance de Chrome DevTools: Análisis profundo del rendimiento en tiempo de ejecución.

Comienza con PageSpeed Insights para obtener una visión rápida y luego usa DevTools para depurar problemas específicos.

Mejorar LCP: haz que el contenido principal cargue más rápido

LCP suele ser la métrica más impactante de corregir. Las causas comunes de un LCP deficiente incluyen una respuesta lenta del servidor, recursos que bloquean el renderizado e imágenes no optimizadas.

1. Optimiza las imágenes: Comprime imágenes, usa formatos modernos como WebP o AVIF y sirve imágenes responsivas con srcset. Herramientas como Image Compressor pueden ayudar a reducir el tamaño del archivo sin pérdida visible de calidad.
2. Precarga la imagen LCP: Añade <link rel="preload"> para la imagen principal y comienza a cargarla antes.
3. Reduce el tiempo de respuesta del servidor: Usa una CDN, habilita el almacenamiento en caché y optimiza las consultas del backend. Para Nginx, considera fastcgi_cache o proxy_cache.
4. Elimina los recursos que bloquean el renderizado: Incluye CSS crítico en línea, difiere CSS y JavaScript no críticos.
5. Usa una red de entrega de contenido (CDN): Sirve los recursos desde ubicaciones más cercanas a los usuarios.

<!-- Precargar imagen LCP -->
<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">

<!-- Imágenes responsivas -->
<img src="#" srcset="hero-480.webp 480w, hero-800.webp 800w" sizes="(max-width: 600px) 480px, 800px" alt="Hero">

Mejorar INP: haz que las interacciones se sientan instantáneas

INP reemplazó a First Input Delay (FID) en marzo de 2024. Mide la duración completa de las interacciones, no solo el retraso antes del procesamiento. Para mejorar INP, necesitas reducir el tiempo de ejecución de JavaScript y evitar tareas largas.

1. Divide las tareas largas: Usa setTimeout o requestIdleCallback para ceder el hilo principal.
2. Optimiza los manejadores de eventos: Aplica debounce o throttle a los manejadores costosos y evita el layout thrashing.
3. Reduce el tamaño del bundle de JavaScript: Divide el código, aplica tree-shaking y carga de forma diferida los scripts no críticos.
4. Usa web workers: Mueve los cálculos pesados fuera del hilo principal.
5. Minimiza los scripts de terceros: A menudo bloquean el hilo principal. Cárgalos de forma asíncrona o difiérelos.

Usa el panel Performance en DevTools para grabar interacciones e identificar tareas largas.

Mejorar CLS: mantén tu diseño estable

CLS ocurre cuando los elementos se desplazan inesperadamente. Los culpables comunes son imágenes sin dimensiones, anuncios, embeds y contenido inyectado dinámicamente.

1. Establece siempre atributos width y height en imágenes y videos: Esto permite al navegador reservar espacio.
2. Reserva espacio para anuncios y embeds: Usa CSS aspect-ratio o contenedores de tamaño fijo.
3. Evita insertar contenido encima del contenido existente: Si debes hacerlo, hazlo en respuesta a una interacción del usuario.
4. Usa font-display: swap con cuidado: El swap puede causar cambios de diseño si las métricas de la fuente difieren. Considera font-display: optional o precargar fuentes.
5. Usa transformaciones CSS para animaciones: No provocan cambios de diseño.

<!-- Reservar espacio con aspect-ratio -->
<img src="#" width="800" height="600" alt="...">

Comparación de métricas Core Web Vitals

Monitorización y mejora continua

Mejorar Core Web Vitals no es una tarea única. Después de implementar las correcciones, monitoriza los datos de campo para asegurarte de que no se produzcan regresiones. Configura alertas en tu herramienta RUM para cuando las métricas superen los umbrales. Ejecuta Lighthouse regularmente en CI para detectar regresiones de rendimiento antes de que lleguen a producción.

Recuerda que el rendimiento es una característica. Al priorizar Core Web Vitals, ofreces una mejor experiencia que mantiene a los usuarios comprometidos y mejora tu posicionamiento en buscadores.

Preguntas frecuentes

¿Cuáles son los umbrales actuales para Core Web Vitals?

Para LCP, bueno es inferior a 2,5 segundos, necesita mejorar es 2,5–4,0 segundos, y pobre es superior a 4,0 segundos. Para INP, bueno es inferior a 200 milisegundos, necesita mejorar es 200–500 milisegundos, y pobre es superior a 500 milisegundos. Para CLS, bueno es inferior a 0,1, necesita mejorar es 0,1–0,25, y pobre es superior a 0,25.

¿Con qué frecuencia debo medir Core Web Vitals?

Los datos de campo se actualizan diariamente en CrUX, pero es un promedio móvil de 28 días. Debes monitorizar continuamente y ejecutar pruebas de laboratorio después de cada cambio significativo en el código. Configura ejecuciones automatizadas de Lighthouse en tu pipeline de CI/CD para detectar regresiones a tiempo.

¿Puedo mejorar Core Web Vitals sin un desarrollador?

Algunas correcciones como comprimir imágenes o habilitar el almacenamiento en caché se pueden hacer mediante plugins o ajustes de hosting. Sin embargo, optimizaciones más profundas como la división de código o eliminar recursos que bloquean el renderizado normalmente requieren la intervención de un desarrollador. Prioriza las métricas con mayor impacto según tus datos de campo.

¿Listo para optimizar tus imágenes para un mejor LCP? Prueba nuestro Image Compressor gratuito para reducir el tamaño de archivo sin perder calidad.