Core Web Vitals: Mide y Mejora el Rendimiento Web

Has creado un sitio web rápido, pero los usuarios siguen quejándose de lentitud. O quizás tus posiciones en SEO cayeron tras una actualización de Google. El culpable podrían ser las Core Web Vitals, un conjunto de métricas que cuantifican la experiencia real del usuario. Ignorarlas puede perjudicar tanto la usabilidad como la visibilidad en buscadores. Esta guía te mostrará cómo medir y mejorar cada vital, con pasos prácticos que puedes implementar hoy mismo.

¿Qué son las Core Web Vitals?

Las Core Web Vitals son tres métricas específicas que Google utiliza para evaluar la experiencia de página:

• Largest Contentful Paint (LCP): Mide el rendimiento de carga. Registra el tiempo que tarda el elemento de contenido más grande (imagen, vídeo o bloque de texto) en hacerse visible. Un LCP bueno es de 2,5 segundos o menos.
• Interaction to Next Paint (INP): Mide la interactividad. Registra la latencia de todas las interacciones (clics, toques, pulsaciones de teclas) y reporta un percentil alto. Un INP bueno es de 200 milisegundos o menos.
• Cumulative Layout Shift (CLS): Mide la estabilidad visual. Cuantifica los desplazamientos de diseño inesperados durante la carga. Un CLS bueno es de 0,1 o menos.

Estas métricas forman parte de las señales de experiencia de página de Google, pero también afectan directamente a cómo los usuarios perciben tu sitio. Un LCP lento frustra a los usuarios, un INP alto hace que la página parezca poco receptiva y el CLS provoca clics erróneos.

Cómo medir las Core Web Vitals

Necesitas datos de laboratorio y de campo para obtener una imagen completa. Las herramientas de laboratorio simulan condiciones, mientras que los datos de campo provienen de usuarios reales.

Herramientas de laboratorio

• Lighthouse: Integrado en Chrome DevTools, audita el rendimiento y proporciona puntuaciones para LCP, CLS y TBT (un proxy de INP). Ejecútalo en modo incógnito con limitación para simular condiciones móviles.
• WebPageTest: Ofrece pruebas avanzadas desde múltiples ubicaciones y dispositivos, con vistas de tira de película y gráficos de cascada.
• PageSpeed Insights: Combina datos de laboratorio y de campo (de CrUX) en un solo informe.

Herramientas de campo

• Chrome User Experience Report (CrUX): Un conjunto de datos público de métricas de usuarios reales para millones de sitios. Accede a través de PageSpeed Insights o la API de CrUX.
• Google Search Console: Muestra el estado de las Core Web Vitals de tu sitio, agrupado por URL.
• Biblioteca JavaScript web-vitals: Añádela a tu sitio para recopilar métricas de usuarios reales y enviarlas a tu analítica.

Usa las herramientas de laboratorio para depurar y los datos de campo para validar las correcciones. Un error común es optimizar solo para las puntuaciones de laboratorio e ignorar la experiencia real del usuario.

Mejorar el LCP

El LCP suele ser la métrica más impactante de corregir. Aquí tienes cómo optimizarlo:

1. Optimiza las imágenes: Comprime las imágenes sin perder calidad, 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 de los archivos.
2. Precarga recursos críticos: Usa <link rel="preload"> para imágenes principales, fuentes y archivos CSS/JS clave.
3. Elimina recursos que bloquean el renderizado: Incorpora el CSS crítico en línea, difiere el JavaScript no crítico y evita archivos CSS grandes.
4. Usa una CDN: Sirve los recursos desde ubicaciones periféricas cercanas a los usuarios para reducir la latencia.
5. Almacena en caché los recursos: Establece tiempos de caché largos para recursos estáticos con invalidación mediante nombres de archivo.
6. Optimiza el tiempo de respuesta del servidor: Usa un hosting rápido, habilita la compresión (Brotli o Gzip) y optimiza las consultas a la base de datos.

Como ejemplo detallado, considera una imagen principal. En lugar de servir un JPEG de 2 MB, comprímelo a menos de 200 KB, conviértelo a WebP y precárgalo. Solo esto puede reducir el LCP en segundos.

Mejorar el INP

El INP mide la capacidad de respuesta. Un INP alto suele deberse a tareas largas de JavaScript que bloquean el hilo principal.

1. Divide las tareas largas: Usa setTimeout o requestIdleCallback para ceder el control al hilo principal.
2. Optimiza los manejadores de eventos: Aplica debounce o throttle a eventos frecuentes como scroll o resize. Evita cálculos pesados en los manejadores.
3. Reduce la ejecución de JavaScript: Divide el código, aplica tree-shaking y carga de forma diferida el JS no crítico.
4. Usa web workers: Descarga tareas costosas a un hilo de trabajo.
5. Minimiza los scripts de terceros: Audita y elimina analíticas, anuncios o widgets sociales innecesarios.

Prueba el INP interactuando con tu página en el panel Performance de Chrome DevTools. Busca tareas largas (triángulos rojos) y optimízalas.

Mejorar el CLS

El CLS trata sobre la estabilidad visual. Los desplazamientos inesperados molestan a los usuarios y provocan clics erróneos.

1. Establece dimensiones para imágenes y vídeos: Incluye siempre los atributos width y height o usa la propiedad CSS aspect-ratio.
2. Reserva espacio para anuncios e incrustaciones: Usa marcadores de posición con tamaños fijos.
3. Evita insertar contenido encima del contenido existente: Excepto para interacciones iniciadas por el usuario.
4. Usa font-display: swap: Pero ten en cuenta que el intercambio de fuentes puede causar desplazamientos. Considera precargar fuentes o usar size-adjust.
5. Aplica transformaciones CSS para animaciones: En lugar de propiedades que provocan un nuevo diseño.

Usa la función Layout Shift Regions en Chrome DevTools para visualizar los desplazamientos.

Herramientas y flujo de trabajo

Integra la monitorización de Core Web Vitals en tu flujo de trabajo de desarrollo:

• Ejecuta Lighthouse en CI para detectar regresiones.
• Usa la biblioteca web-vitals para recopilar datos de campo y configurar alertas.
• Revisa periódicamente Search Console en busca de problemas.
• Prioriza las correcciones según su impacto y esfuerzo.

Recuerda que las Core Web Vitals son solo una parte del rendimiento. Considera siempre la experiencia general del usuario.

Preguntas frecuentes

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

Umbrales buenos: LCP ≤ 2,5 s, INP ≤ 200 ms, CLS ≤ 0,1. Necesita mejora: LCP ≤ 4 s, INP ≤ 500 ms, CLS ≤ 0,25. Malo: por encima de esos valores.

¿Con qué frecuencia debo medir las Core Web Vitals?

Monitoriza los datos de campo de forma continua y ejecuta pruebas de laboratorio tras cambios importantes. Como mínimo, revísalas mensualmente y después de los despliegues.

¿Puedo mejorar las Core Web Vitals sin un desarrollador?

Algunas correcciones como la compresión de imágenes y el almacenamiento en caché pueden hacerse mediante plugins o ajustes de CDN. Pero las optimizaciones más profundas suelen requerir cambios en el código.

¿Listo para optimizar tus imágenes y mejorar el LCP? Prueba nuestra Image Compressor gratuita para reducir el tamaño de los archivos sin perder calidad.