Core Web Vitals: Mide y mejora el rendimiento web

Tus usuarios esperan experiencias rápidas y fluidas. Si tu sitio se siente lento, se van, y los motores de búsqueda lo notan. Core Web Vitals son las métricas que cuantifican la experiencia del usuario en el mundo real: velocidad de carga, interactividad y estabilidad visual. Esta guía te muestra cómo medirlas y hacer mejoras prácticas.

¿Qué son Core Web Vitals?

Core Web Vitals son un conjunto de tres métricas definidas por Google para capturar aspectos clave de la experiencia del usuario:

• Largest Contentful Paint (LCP): mide el rendimiento de carga. Marca el tiempo cuando el elemento de contenido más grande (a menudo una imagen principal o un encabezado) se vuelve visible. Apunta a un LCP inferior a 2.5 segundos.
• Interaction to Next Paint (INP): mide la capacidad de respuesta. Registra el tiempo desde una interacción del usuario (clic, toque, pulsación de tecla) hasta la siguiente actualización visual. 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. Apunta a un CLS inferior a 0.1.

Estos umbrales se basan en datos de campo de usuarios reales (percentil 75). Los datos de laboratorio ayudan a diagnosticar problemas, pero los datos de campo reflejan la experiencia real.

Cómo medir Core Web Vitals

Necesitas tanto datos de campo como de laboratorio. Los datos de campo muestran el rendimiento de usuarios reales; los datos de laboratorio te permiten depurar y probar cambios.

Herramientas de datos de campo

• Chrome UX Report (CrUX): datos agregados de usuarios reales para millones de sitios. Accede a través de PageSpeed Insights, Search Console o la API de CrUX.
• Biblioteca JavaScript web-vitals: recopila tus propios datos de campo enviando métricas a tu endpoint de análisis.

Herramientas de datos de laboratorio

• Lighthouse: integrado en Chrome DevTools, ejecuta auditorías y proporciona oportunidades de mejora.
• WebPageTest: pruebas avanzadas con limitación de red y filmstrips.
• Panel Performance de Chrome DevTools: análisis profundo del rendimiento en tiempo de ejecución.

Comienza con PageSpeed Insights: muestra datos de campo y de laboratorio para una URL. Luego usa Lighthouse localmente para iterar.

Mejorar LCP

LCP suele ser la métrica más impactante de corregir. El elemento más grande suele ser una imagen o un bloque de texto. Optimiza estas áreas:

1. Optimiza la imagen LCP: comprímela, sirve formatos modernos como WebP o AVIF y establece dimensiones explícitas.
2. Precarga el recurso LCP: usa <link rel="preload"> para imágenes o fuentes usadas en la parte superior de la página.
3. Elimina recursos que bloquean el renderizado: inserta CSS crítico en línea, difiere CSS y JavaScript no críticos.
4. Usa una CDN: sirve activos desde ubicaciones cercanas a los usuarios.
5. Reduce el tiempo de respuesta del servidor: optimiza el backend, usa caché y considera el renderizado en el edge.

Ejemplo: precargar una imagen principal:

<link rel="preload" as="image" href="/hero.webp" imagesrcset="/hero-480.webp 480w, /hero-800.webp 800w" imagesizes="(max-width: 600px) 480px, 800px">

Mejorar INP

INP mide la capacidad de respuesta. Las tareas largas bloquean el hilo principal y retrasan la retroalimentación visual. Soluciones comunes:

• Divide tareas largas: usa setTimeout o scheduler.yield() para ceder al hilo principal.
• Optimiza los manejadores de eventos: aplica debounce o throttle a eventos rápidos, evita trabajo síncrono pesado.
• Reduce JavaScript: divide el código, elimina código no utilizado (tree-shaking) y difiere scripts no críticos.
• Usa web workers para tareas intensivas en CPU.
• Evita actualizaciones grandes del DOM: agrupa cambios del DOM y usa requestAnimationFrame.

Mide INP con la biblioteca web-vitals e identifica interacciones lentas en el panel Performance.

Mejorar CLS

Los cambios de diseño ocurren cuando los elementos cambian de posición inesperadamente. Prevenlos con:

• Establecer atributos de tamaño en imágenes y videos (ancho y alto).
• Reservar espacio para anuncios e incrustaciones con CSS aspect-ratio o contenedores fijos.
• Evitar insertar contenido encima del contenido existente a menos que sea en respuesta a una interacción del usuario.
• Usar font-display: swap y precargar fuentes para minimizar cambios por FOIT/FOUT.
• Animar con transform en lugar de propiedades que desencadenan diseño.

Comparación rápida: Métricas y objetivos

Monitorear e iterar

El rendimiento no es una solución única. Configura monitoreo continuo:

• Usa la biblioteca web-vitals para enviar métricas a tu análisis.
• Configura alertas para regresiones en tu pipeline de CI/CD usando Lighthouse CI.
• Revisa regularmente los datos de campo en Search Console.

Recuerda que las mejoras deben validarse con datos de usuarios reales, no solo con puntuaciones de laboratorio.

Preguntas frecuentes

¿Qué son Core Web Vitals y por qué importan?

Core Web Vitals son métricas de rendimiento centradas en el usuario (LCP, INP, CLS) que miden carga, interactividad y estabilidad visual. Importan porque se correlacionan con la experiencia del usuario y son usadas como señal de clasificación por Google.

¿Con qué frecuencia debo revisar Core Web Vitals?

Revisa los datos de campo mensualmente y después de lanzamientos importantes. Usa herramientas de laboratorio durante el desarrollo para detectar regresiones temprano. El monitoreo continuo con métricas de usuarios reales es lo ideal.

¿Puedo mejorar Core Web Vitals sin reconstruir mi sitio?

Sí. Muchas mejoras, como la optimización de imágenes, la precarga de recursos clave, la postergación de scripts y el establecimiento de dimensiones de elementos, se pueden aplicar de forma incremental sin un rediseño completo.

¿Necesitas comprimir imágenes rápidamente para un mejor LCP? Prueba nuestro Compresor de Imágenes gratuito para reducir el tamaño de archivo sin perder calidad.