Core Web Vitals: Medir y Mejorar el Rendimiento Web

Tu sitio carga, pero los usuarios siguen rebotando. Los tiempos de carga lentos, los cambios de diseño inesperados y las interacciones lentas frustran a los visitantes y perjudican tu posicionamiento en buscadores. Los Core Web Vitals (CWV) son las métricas de Google para la experiencia de usuario y afectan directamente al SEO. Esta guía te muestra cómo medirlos y mejorarlos con pasos prácticos.

¿Qué son los Core Web Vitals?

Los Core Web Vitals son tres métricas que cuantifican aspectos clave de la experiencia de usuario:

• Largest Contentful Paint (LCP): Mide el rendimiento de carga. El tiempo que tarda el elemento de contenido más grande (imagen, bloque de texto, vídeo) en hacerse visible. Bueno: ≤ 2,5 s.
• First Input Delay (FID): Mide la interactividad. El tiempo desde que el usuario interactúa por primera vez (clic, toque, pulsación de tecla) hasta que el navegador responde. Bueno: ≤ 100 ms.
• Cumulative Layout Shift (CLS): Mide la estabilidad visual. Cuantifica los cambios de diseño inesperados durante la carga de la página. Bueno: ≤ 0,1.

Estas métricas forman parte de las señales de experiencia de página de Google y afectan al posicionamiento en buscadores. También reflejan la experiencia real del usuario, por lo que mejorarlas beneficia tanto al SEO como a la satisfacción del usuario.

Cómo medir los Core Web Vitals

Necesitas datos de campo (mediciones de usuarios reales) y datos de laboratorio (pruebas sintéticas). Utiliza ambos para obtener una imagen completa.

Herramientas de datos de campo

• Chrome User Experience Report (CrUX): Conjunto de datos público de métricas de usuarios reales. Accede a través de PageSpeed Insights, Search Console o BigQuery.
• PageSpeed Insights: Muestra datos de campo (si están disponibles) y datos de laboratorio para una URL.
• Informe de Core Web Vitals de Search Console: Agrupa las URL por estado (pobre, necesita mejorar, bueno).
• Biblioteca JavaScript web-vitals: Recopila tus propios datos de campo con import {onLCP, onFID, onCLS} from 'web-vitals'; y envíalos a tu endpoint de analítica.

Herramientas de datos de laboratorio

• Lighthouse: Integrado en Chrome DevTools. Ejecuta auditorías de rendimiento, accesibilidad y SEO. Proporciona métricas de laboratorio y oportunidades de mejora.
• WebPageTest: Pruebas avanzadas con condiciones de red personalizadas y gráficos de cascada.
• Panel Performance de Chrome DevTools: Registra el rendimiento en tiempo de ejecución para identificar tareas largas y problemas de renderizado.

Mejorar Largest Contentful Paint (LCP)

LCP suele ser la métrica más impactante. Optimiza la ruta crítica de renderizado y el elemento más grande.

1. Optimiza el elemento más grande

• Si el LCP es una imagen: comprímela, usa formatos modernos (WebP, AVIF) y establece los atributos width y height para evitar cambios de diseño.
• Precarga la imagen LCP: <link rel="preload" as="image" href="#">.
• Usa imágenes responsivas con srcset y sizes.
• Si el LCP es texto: asegúrate de que las fuentes carguen rápido. Usa font-display: swap y precarga las fuentes clave.

2. Elimina los recursos que bloquean el renderizado

• Incorpora el CSS crítico en línea y difiere el CSS no crítico.
• Difiere o carga de forma asíncrona el JavaScript: <script src="#" defer></script>.
• Minifica CSS y JavaScript.

3. Mejora el tiempo de respuesta del servidor

• Usa una CDN para servir los recursos desde ubicaciones más cercanas a los usuarios.
• Habilita el almacenamiento en caché (cabeceras de caché HTTP, service workers).
• Optimiza el rendimiento del backend (consultas a bases de datos, caché del lado del servidor).

4. Reduce el tamaño de la carga útil

• Comprime las imágenes y usa lazy loading para las imágenes que están por debajo del pliegue.
• Elimina el JavaScript y CSS no utilizados.
• Usa la división de código (code splitting) para cargar solo el código necesario.

Mejorar First Input Delay (FID)

FID mide la capacidad de respuesta. Las tareas largas de JavaScript bloquean el hilo principal y retrasan la gestión de interacciones.

1. Divide las tareas largas

Usa setTimeout o requestIdleCallback para ceder el control al hilo principal. O usa scheduler.yield() donde esté soportado.

// Ejemplo: ceder el control al hilo principal después de un bloque de trabajo
async function processInChunks(items) {
  for (let i = 0; i < items.length; i++) {
    // procesar elemento
    if (i % 50 === 0) {
      await new Promise(resolve => setTimeout(resolve, 0));
    }
  }
}

2. Optimiza los manejadores de eventos

• Aplica debounce o throttle a los eventos de alta frecuencia (scroll, resize, input).
• Usa listeners de eventos pasivos para eventos táctiles y de rueda: element.addEventListener('touchstart', handler, {passive: true});.
• Evita trabajo pesado en los manejadores de eventos; delega en Web Workers.

3. Reduce el tiempo de ejecución de JavaScript

• Divide el código y carga de forma diferida el JavaScript no crítico.
• Elimina dependencias no utilizadas.
• Usa tree-shaking y minificación.

Mejorar Cumulative Layout Shift (CLS)

CLS mide la estabilidad visual. Los cambios inesperados molestan a los usuarios y provocan clics erróneos.

1. Incluye siempre atributos de tamaño

Para imágenes y vídeos, establece width y height (o usa la propiedad CSS aspect-ratio) para que el navegador reserve espacio.

2. Reserva espacio para contenido dinámico

• Para anuncios, embeds o contenido dinámico, usa un marcador de posición con dimensiones fijas.
• Evita insertar contenido encima del contenido existente a menos que sea en respuesta a una interacción del usuario.

3. Usa animaciones con transform

Prefiere transform y opacity de CSS para las animaciones; no provocan cambios de diseño.

4. Carga las fuentes con cuidado

Usa font-display: optional o swap para evitar texto invisible y cambios de diseño. Precarga las fuentes clave.

Herramientas y flujo de trabajo para la mejora continua

El rendimiento es continuo. Integra la medición en tu proceso de desarrollo.

• Usa Lighthouse CI en tu pipeline para detectar regresiones.
• Monitoriza los datos de campo mediante web-vitals y tu analítica.
• Establece presupuestos de rendimiento y alerta sobre violaciones.

Para comprobaciones rápidas, usa el Analizador de registros Nginx de TryQuickToolBox para detectar respuestas lentas del servidor que podrían afectar al LCP.

Preguntas frecuentes

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

LCP: bueno ≤ 2,5 s, necesita mejorar ≤ 4 s, pobre > 4 s. FID: bueno ≤ 100 ms, necesita mejorar ≤ 300 ms, pobre > 300 ms. CLS: bueno ≤ 0,1, necesita mejorar ≤ 0,25, pobre > 0,25. Se evalúan en el percentil 75 de las cargas de página.

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

Monitoriza los datos de campo continuamente mediante analítica y Search Console. Ejecuta pruebas de laboratorio en cada cambio de código significativo y al menos mensualmente para comprobaciones de referencia.

¿Mejorar los Core Web Vitals realmente afecta al SEO?

Sí, Google utiliza las señales de experiencia de página, incluidos los Core Web Vitals, como factor de posicionamiento. Aunque el contenido sigue siendo primordial, unos buenos CWV pueden darte una ventaja, especialmente en nichos competitivos.

¿Listo para optimizar? Empieza midiendo tus puntuaciones actuales con PageSpeed Insights y luego aborda las mayores oportunidades. Para una comprobación rápida del lado del servidor, prueba nuestro Analizador de registros Nginx para identificar respuestas lentas del backend que podrían estar perjudicando tu LCP.