Core Web Vitals: mide y mejora el rendimiento web

Por qué los Core Web Vitals importan para tu sitio web

Probablemente hayas oído hablar de los Core Web Vitals (CWV), las métricas de Google para la experiencia de usuario. Pero si tu sitio se siente lento o con tirones, no estás solo. Muchos desarrolladores tienen dificultades para traducir las puntuaciones de CWV en correcciones concretas. Esta guía te acompaña en la medición y mejora de cada vital con pasos prácticos y fragmentos de código.

Los Core Web Vitals son tres métricas específicas: Largest Contentful Paint (LCP) para el rendimiento de carga, First Input Delay (FID) para la interactividad y Cumulative Layout Shift (CLS) para la estabilidad visual. Google las usa como señales de ranking, así que optimizarlas beneficia tanto a los usuarios como al SEO.

Entendiendo los tres Core Web Vitals

Antes de entrar en las correcciones, aclaremos qué mide cada métrica y los umbrales para una buena puntuación.

Nota: FID está siendo reemplazado por Interaction to Next Paint (INP) en marzo de 2024, pero los principios de optimización son similares. Aquí nos centraremos en FID, ya que todavía se referencia ampliamente.

Cómo medir los Core Web Vitals

Necesitas tanto datos de laboratorio como de campo para obtener una imagen completa. Los datos de laboratorio (pruebas sintéticas) ayudan a depurar, mientras que los datos de campo (monitorización de usuarios reales) muestran la experiencia real del usuario.

Herramientas de laboratorio

• Lighthouse en Chrome DevTools: ejecuta una auditoría en la pestaña Lighthouse.
• PageSpeed Insights: proporciona datos de laboratorio y de campo para una URL.
• WebPageTest: pruebas avanzadas con condiciones de red personalizadas.

Herramientas de campo

• Chrome User Experience Report (CrUX): conjunto de datos público de métricas de usuarios reales.
• Google Search Console: el informe de Core Web Vitals muestra el rendimiento del grupo.
• Biblioteca JavaScript web-vitals: recopila métricas de usuarios reales en tu analítica.

Para recopilar datos de campo, incluye la biblioteca web-vitals y envía las métricas a tu endpoint de analítica:

<script type="module">
import {onLCP, onFID, onCLS} from 'https://unpkg.com/web-vitals@3?module';

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

onLCP(sendToAnalytics);
onFID(sendToAnalytics);
onCLS(sendToAnalytics);
</script>

Esto te proporciona datos del mundo real para complementar las pruebas de laboratorio.

Mejorar Largest Contentful Paint (LCP)

LCP mide cuándo el elemento de contenido más grande (imagen, bloque de texto o vídeo) se vuelve visible. Para mejorarlo, céntrate en el tiempo de respuesta del servidor, la carga de recursos y los recursos que bloquean el renderizado.

1. Optimiza el tiempo de respuesta del servidor

• Usa una CDN para servir contenido más cerca de los usuarios.
• Habilita el almacenamiento en caché (cabeceras de caché HTTP, caché del lado del servidor).
• Mejora el alojamiento si el TTFB (Time to First Byte) es consistentemente alto.

2. Optimiza las imágenes

• Comprime las imágenes y usa formatos modernos como WebP o AVIF.
• Usa imágenes responsivas con srcset y sizes.
• Aplica lazy-loading a las imágenes que están por debajo del pliegue, pero evita el lazy-loading en la imagen LCP.

Para una compresión rápida de imágenes, prueba nuestro Compresor de Imágenes.

3. Elimina los recursos que bloquean el renderizado

• Incorpora el CSS crítico en línea y difiere el CSS no crítico.
• Usa async o defer para JavaScript.
• Minifica CSS y JavaScript.

4. Precarga los recursos importantes

Usa <link rel="preload"> para recursos clave como fuentes o imágenes hero:

<link rel="preload" href="/hero.webp" as="image">

Mejorar First Input Delay (FID)

FID mide el tiempo desde que un usuario interactúa por primera vez con tu página hasta que el navegador puede responder. Las tareas largas de JavaScript bloquean el hilo principal, causando retrasos.

1. Divide las tareas largas

Divide el JavaScript de larga duración en fragmentos más pequeños usando setTimeout o requestIdleCallback. Por ejemplo:

function processItems(items) {
  if (items.length === 0) return;
  const item = items.pop();
  // Procesar elemento
  setTimeout(() => processItems(items), 0);
}

2. Optimiza los manejadores de eventos

• Aplica debounce o throttle a los manejadores de entrada.
• Evita cálculos complejos en los event listeners; delégalos a Web Workers.

3. Reduce el tiempo de ejecución de JavaScript

• Divide el código con importaciones dinámicas.
• Elimina el JavaScript no utilizado (tree shaking).
• Usa loading="lazy" para iframes no críticos.

4. Usa Web Workers para tareas pesadas

Mueve el trabajo intensivo de CPU fuera del hilo principal:

const worker = new Worker('worker.js');
worker.postMessage(data);
worker.onmessage = (e) => { /* manejar resultado */ };

Mejorar Cumulative Layout Shift (CLS)

CLS mide los cambios de diseño inesperados. Las causas comunes incluyen imágenes sin dimensiones, anuncios, embeds y fuentes web.

1. Define siempre ancho y alto en los medios

Incluye los atributos width y height en imágenes y vídeos, o usa CSS aspect-ratio:

img {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
}

2. Reserva espacio para contenido dinámico

Para anuncios o embeds, reserva espacio con un elemento placeholder o establece un tamaño fijo.

3. Evita insertar contenido por encima del contenido existente

Si debes insertar un banner, usa una animación con transform o una superposición que no desplace el diseño.

4. Usa font-display: swap

Evita el texto invisible y los cambios de diseño causados por las fuentes web:

@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff2') format('woff2');
  font-display: swap;
}

Monitorización y mejora continua

Optimizar los Core Web Vitals no es una tarea única. Configura una monitorización continua con herramientas como:

• Google Search Console: alertas de regresiones de CWV.
• Lighthouse CI: ejecuta auditorías en cada pull request.
• Real User Monitoring (RUM): herramientas como New Relic, Datadog o analítica personalizada.

Revisa regularmente los datos de campo e itera en las correcciones. Prioriza primero la métrica con la peor puntuación.

Preguntas frecuentes

¿Qué son los Core Web Vitals?

Los Core Web Vitals son un conjunto de métricas que Google usa para medir la experiencia de usuario: LCP (carga), FID (interactividad) y CLS (estabilidad visual).

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

Monitoriza los datos de campo de forma continua mediante Search Console o RUM. Ejecuta pruebas de laboratorio después de cambios importantes y al menos mensualmente.

¿Mejorar los Core Web Vitals afecta al SEO?

Sí, los Core Web Vitals son una señal de ranking. Mejores puntuaciones pueden mejorar la visibilidad en búsquedas y la satisfacción del usuario.

¿Listo para optimizar tus imágenes y mejorar el LCP? Usa nuestro Compresor de Imágenes gratuito para reducir el tamaño de los archivos sin perder calidad.