Core Web Vitals: Mide y mejora el rendimiento web

Has construido una aplicación web moderna, pero los usuarios se quejan de que va lenta. Las clasificaciones en los buscadores bajan. Revisas tu código y no encuentras nada obvio. El problema podrían ser las Core Web Vitals (CWV), las métricas de Google para la experiencia de usuario. Esta guía te muestra cómo medirlas y mejorarlas de forma práctica.

¿Qué son las Core Web Vitals?

Las Core Web Vitals son tres métricas que cuantifican la experiencia de usuario en el mundo real:

• Largest Contentful Paint (LCP): Tiempo hasta que se carga el contenido principal. Objetivo: ≤2.5s.
• First Input Delay (FID): Tiempo desde la primera interacción del usuario hasta la respuesta. Objetivo: ≤100ms.
• Cumulative Layout Shift (CLS): Estabilidad visual: cuánto se mueven los elementos inesperadamente. Objetivo: ≤0.1.

Estas métricas forman parte de las señales de experiencia de página de Google e impactan directamente en el SEO. Pero, más importante aún, reflejan la frustración real de los usuarios.

Cómo medir las Core Web Vitals

Necesitas datos de laboratorio y de campo. Los datos de laboratorio ayudan a depurar; los datos de campo reflejan a los usuarios reales.

Herramientas de laboratorio

• Lighthouse (en Chrome DevTools o en línea) – auditoría rápida con puntuaciones y oportunidades.
• WebPageTest – análisis avanzado de cascada y filmstrip.
• Panel Performance de Chrome DevTools – inmersión profunda en el runtime.

Herramientas de campo

• Chrome User Experience Report (CrUX) – conjunto de datos público de métricas de usuarios reales.
• PageSpeed Insights – combina datos de laboratorio y de campo.
• Informe de Core Web Vitals de Search Console – agrupa las URL por estado.
• Biblioteca JavaScript web-vitals – recopila tus propios datos de campo.

Empieza con PageSpeed Insights para obtener una línea base. Luego usa la biblioteca web-vitals para instrumentar tu sitio y enviar métricas a tu analítica.

import {onLCP, onFID, onCLS} from 'web-vitals';

function sendToAnalytics(metric) {
  const body = JSON.stringify(metric);
  navigator.sendBeacon('/analytics', body);
}

onLCP(sendToAnalytics);
onFID(sendToAnalytics);
onCLS(sendToAnalytics);

Mejorar LCP

LCP suele ser el mayor culpable. Optimiza la ruta crítica:

1. Identifica el elemento LCP – normalmente una imagen hero, un encabezado o un póster de video.
2. Optimiza las imágenes – comprime, usa formatos modernos (WebP/AVIF) y establece dimensiones explícitas.
3. Precarga el recurso LCP – usa <link rel="preload"> para imágenes o fuentes.
4. Reduce el tiempo de respuesta del servidor – usa caché, CDN y un backend eficiente.
5. Elimina los recursos que bloquean el renderizado – difiere CSS/JS no críticos.

Para las imágenes, herramientas como Image Compressor pueden ayudarte a reducir el tamaño de los archivos sin pérdida de calidad.

Mejorar FID

FID mide la capacidad de respuesta a la entrada. Las tareas largas de JavaScript bloquean el hilo principal.

• Divide las tareas largas – usa setTimeout o requestIdleCallback para ceder el control.
• Divide el código – carga solo el JS necesario.
• Optimiza los manejadores de eventos – aplica debounce o throttle a operaciones costosas.
• Usa web workers para trabajo intensivo de CPU.

// Ejemplo: ceder el control al hilo principal
function yieldToMain() {
  return new Promise(resolve => {
    setTimeout(resolve, 0);
  });
}

async function processItems(items) {
  for (const item of items) {
    // procesar elemento
    await yieldToMain();
  }
}

Mejorar CLS

Los cambios de diseño molestan a los usuarios. Evítalos reservando espacio:

• Establece ancho/alto en imágenes y videos – o usa aspect-ratio de CSS.
• No inyectes contenido por encima del contenido existente – a menos que sea en respuesta a una interacción del usuario.
• Usa animaciones con transform en lugar de propiedades que desencadenan layout.
• Precarga fuentes y usa font-display: swap para evitar texto invisible.

Comparación de métricas y herramientas

Flujo de trabajo práctico

1. Mide – Ejecuta PageSpeed Insights en páginas clave. Anota los datos de campo (si están disponibles) y las puntuaciones de laboratorio.
2. Prioriza – Céntrate en las métricas que están mal y afectan a más usuarios.
3. Corrige – Aplica las técnicas anteriores, empezando por las mayores victorias (por ejemplo, optimización de imágenes).
4. Verifica – Vuelve a ejecutar pruebas de laboratorio y monitoriza los datos de campo con web-vitals.
5. Itera – El rendimiento es continuo; establece presupuestos y monitoriza regresiones.

Recuerda: los datos de campo son la verdad absoluta. Las herramientas de laboratorio te ayudan a depurar, pero pueden no reflejar las condiciones reales de los usuarios.

Preguntas frecuentes

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

Monitoriza continuamente en producción usando la biblioteca web-vitals. Ejecuta auditorías de laboratorio antes de lanzamientos importantes y periódicamente (por ejemplo, mensualmente) para páginas clave.

¿Mejorar las Core Web Vitals realmente afecta al SEO?

Sí, la experiencia de página es una señal de clasificación, pero la relevancia del contenido sigue siendo primordial. Unas buenas CWV mejoran la experiencia de usuario, lo que indirectamente ayuda al SEO.

¿Cuál es la diferencia entre datos de laboratorio y de campo?

Los datos de laboratorio se recopilan en un entorno controlado con condiciones simuladas; los datos de campo provienen de usuarios reales en diversos dispositivos y redes. Usa ambos: laboratorio para depurar, campo para la verdad.

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