Core Web Vitals

¿Qué Son los Core Web Vitals? #

Los Core Web Vitals son un conjunto de tres métricas de rendimiento definidas por Google que miden la experiencia real del usuario en páginas web. Impactan directamente en los rankings de búsqueda y representan lo que Google considera los aspectos más importantes de la experiencia de página.

Como ingeniero QA, entender estas métricas es esencial porque:

• Afectan los rankings SEO (visibilidad en búsquedas)
• Correlacionan con el engagement del usuario y las tasas de conversión
• Proporcionan criterios objetivos y medibles para testing de aceptación de rendimiento
• Se incluyen cada vez más en presupuestos de rendimiento y criterios de release

Los Tres Core Web Vitals #

LCP — Largest Contentful Paint #

Qué mide: El tiempo desde que la página comienza a cargar hasta que el elemento de contenido más grande en el viewport se renderiza.

Umbral bueno: Menos de 2.5 segundos

Qué cuenta como “elemento más grande”:

• Imágenes (<img>, <image> dentro de SVG)
• Imágenes de poster de video
• Imágenes de fondo cargadas vía url()
• Elementos de texto a nivel de bloque (<h1>, <p>, etc.)

Causas comunes de LCP deficiente:

• Tiempo de respuesta del servidor lento (TTFB alto)
• JavaScript y CSS que bloquean el renderizado
• Tiempos de carga de recursos lentos (imágenes grandes, fuentes no optimizadas)
• Delays de renderizado del lado del cliente (frameworks SPA)

INP — Interaction to Next Paint #

Qué mide: La responsividad de la página ante interacciones del usuario (clics, taps, teclas) durante todo su ciclo de vida. INP es la peor latencia de interacción, ignorando outliers.

Umbral bueno: Menos de 200 milisegundos

Cómo funciona:

1. El usuario hace clic en un botón
2. El navegador procesa el event handler (JavaScript)
3. El navegador actualiza la visualización
4. INP mide el tiempo total del paso 1 al paso 3

Causas comunes de INP deficiente:

• Tareas JavaScript de larga ejecución bloqueando el hilo principal
• Tamaño excesivo del DOM (>1500 elementos)
• Event handlers complejos sin optimización
• Scripts de terceros compitiendo por el hilo principal

CLS — Cumulative Layout Shift #

Qué mide: El total de todos los cambios de layout inesperados durante toda la vida de la página. Un layout shift ocurre cuando un elemento visible cambia su posición de un frame al siguiente sin interacción del usuario.

Umbral bueno: Menos de 0.1

Cálculo de CLS:

Puntaje de Layout Shift = Fracción de Impacto × Fracción de Distancia

• Fracción de impacto: El área del viewport afectada por el cambio
• Fracción de distancia: Qué tan lejos se movió el elemento relativo al viewport

Causas comunes de CLS deficiente:

• Imágenes y anuncios sin dimensiones explícitas de ancho/alto
• Contenido inyectado dinámicamente encima del contenido existente
• Web fonts causando redimensionamiento del texto (FOIT/FOUT)
• Embeds de terceros que cargan tarde

Midiendo Core Web Vitals #

Datos de Laboratorio (Desarrollo/Testing) #

Los datos de laboratorio se recolectan en un entorno controlado. Son reproducibles pero no representan condiciones de usuarios reales.

Datos de Campo (Usuarios Reales) #

Los datos de campo provienen de usuarios reales visitando tu sitio. Reflejan condiciones reales pero requieren volumen de tráfico.

Usando la Pestaña Performance de DevTools #

1. Abre DevTools > pestaña Performance
2. Haz clic en el ícono de engranaje y habilita Web Vitals
3. Haz clic en Record y recarga la página
4. Detén la grabación cuando la página cargue completamente
5. Busca la línea Web Vitals mostrando marcadores de LCP, CLS
6. El panel Summary muestra desgloses de tiempos

Verificación Rápida con PageSpeed Insights #

Navega a pagespeed.web.dev e ingresa tu URL. El reporte muestra:

• Datos de campo (si están disponibles): Core Web Vitals reales de los últimos 28 días
• Datos de laboratorio: Rendimiento simulado desde un dispositivo móvil de gama media en 4G
• Diagnósticos: Problemas específicos con correcciones recomendadas
• Auditorías aprobadas: Lo que ya funciona bien

Estrategias de Testing para Core Web Vitals #

Checklist de Testing LCP #

• Medir LCP en la landing page, páginas de producto y artículos del blog
• Probar con red limitada (Slow 3G, Fast 3G, 4G)
• Probar con limitación de CPU (4x, 6x slowdown)
• Verificar que el elemento LCP sea la imagen/texto hero deseado, no un elemento inesperado
• Verificar que LCP no retroceda después de nuevos deployments
• Probar con caché vacío y caché cargado

Checklist de Testing INP #

• Hacer clic en cada elemento interactivo y notar si alguno se siente lento
• Probar envíos de formularios, menús desplegables y apertura de modales
• Probar mientras la página aún está cargando (estado parcialmente cargado)
• Usar DevTools Performance para identificar tareas largas (>50ms)
• Probar con limitación de CPU para simular dispositivos de gama baja

Checklist de Testing CLS #

• Observar la carga de la página de inicio a fin — notar saltos visuales
• Hacer scroll por toda la página observando cambios de layout
• Probar con red lenta para ver cambios de layout durante carga progresiva
• Verificar que todas las imágenes tengan atributos explícitos de ancho y alto
• Probar con bloqueadores de anuncios deshabilitados (los anuncios son causa común de CLS)
• Verificar la carga de fuentes — ¿el texto cambia de tamaño cuando cargan las web fonts?

Ejercicio: Auditoría de Core Web Vitals #

Realiza una auditoría de Core Web Vitals en un sitio web de tu elección (el sitio de tu empresa, un proyecto personal o un sitio público conocido).

Paso 1: Recolectar Datos de Laboratorio #

Abre el sitio en Chrome con DevTools:

1. Ve a la pestaña Performance
2. Habilita Web Vitals en configuración
3. Configura throttling: CPU 4x slowdown, red Fast 3G
4. Graba una carga de página nueva (limpia caché primero con Ctrl+Shift+Delete)
5. Registra los siguientes valores:

Paso 2: Identificar el Elemento LCP #

En la grabación de Performance:

1. Encuentra el marcador LCP en la línea de Web Vitals
2. Haz clic en él para ver qué elemento activó el LCP
3. Documenta: ¿Cuál es el elemento LCP? ¿Es el contenido hero deseado?

Paso 3: Encontrar Layout Shifts #

1. En la grabación, busca barras rosadas en la fila Experience
2. Haz clic en cada layout shift para ver qué elementos se movieron
3. Documenta cada shift: ¿Qué elemento? ¿Cuánto se movió? ¿Qué lo causó?

Paso 4: Probar Interacciones #

1. Graba una nueva sesión de performance
2. Haz clic en 5-10 elementos interactivos (botones, links, menús, campos de formulario)
3. Busca tareas largas (bloques amarillos >50ms) activadas por tus interacciones
4. Documenta cualquier interacción que tome más de 200ms en responder visualmente

Monitoreo Automatizado de Core Web Vitals #

Para aseguramiento de calidad continuo, integra Core Web Vitals en tu pipeline de CI/CD:

# Usando Lighthouse CI
npm install -g @lhci/cli

# Ejecutar Lighthouse con assertions
lhci autorun --config=lighthouserc.json

Ejemplo de lighthouserc.json con umbrales de Core Web Vitals:

{
  "ci": {
    "assert": {
      "assertions": {
        "largest-contentful-paint": ["error", {"maxNumericValue": 2500}],
        "cumulative-layout-shift": ["error", {"maxNumericValue": 0.1}],
        "total-blocking-time": ["error", {"maxNumericValue": 200}]
      }
    }
  }
}

Esto falla el build si los Core Web Vitals exceden los umbrales, previniendo regresiones de rendimiento de llegar a producción.

Puntos Clave #

• Core Web Vitals consiste en tres métricas: LCP (carga), INP (interactividad) y CLS (estabilidad visual)
• INP reemplazó a FID en marzo 2024 y mide la responsividad durante todo el ciclo de vida de la página
• Usa tanto datos de laboratorio (DevTools, Lighthouse) como datos de campo (CrUX, Search Console) para un panorama completo
• Cada métrica tiene estrategias de testing específicas — no revises solo el puntaje agregado
• Integra umbrales de Core Web Vitals en CI/CD para prevenir regresiones
• Core Web Vitals deficientes impactan directamente los rankings SEO y el engagement del usuario