Core Web Vitals: Mide y mejora el rendimiento web

Tus usuarios son impacientes. Si tu página tarda demasiado en cargar o salta mientras intentan leer, se van. Core Web Vitals (CWV) son las métricas de Google que cuantifican estas frustraciones: Largest Contentful Paint (LCP) para la velocidad de carga, Interaction to Next Paint (INP) para la capacidad de respuesta y Cumulative Layout Shift (CLS) para la estabilidad visual. En esta guía, aprenderás a medir estas métricas y aplicar soluciones prácticas que funcionan.

¿Qué son Core Web Vitals?

Core Web Vitals son un conjunto de métricas del mundo real que reflejan la experiencia del usuario. Forman parte de las señales de experiencia de página de Google y se utilizan en el ranking. Cada métrica tiene un umbral "bueno":

• LCP: Debe ser ≤ 2,5 segundos.
• INP: Debe ser ≤ 200 milisegundos.
• CLS: Debe ser ≤ 0,1.

Estos umbrales se miden en el percentil 75 de las cargas de página, lo que significa que el 75 % de las visitas deben cumplir el objetivo.

Cómo medir Core Web Vitals

Necesitas datos de laboratorio y de campo. Los datos de laboratorio te ayudan a depurar; los datos de campo muestran la experiencia real del usuario.

Datos de campo (usuarios reales)

• Chrome User Experience Report (CrUX): Proporciona datos agregados de usuarios reales para tu origen. Accede a través de PageSpeed Insights o el panel de CrUX.
• Biblioteca JavaScript web-vitals: Agrega este script ligero a tu sitio para enviar métricas a tu analítica.

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

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

onLCP(sendToAnalytics);
onINP(sendToAnalytics);
onCLS(sendToAnalytics);

Datos de laboratorio (sintéticos)

• Lighthouse: Integrado en Chrome DevTools, audita el rendimiento y otorga una puntuación.
• WebPageTest: Para un análisis más profundo con limitación de red.

Utiliza datos de laboratorio para iterar rápidamente, pero valida siempre con datos de campo.

Mejorar Largest Contentful Paint (LCP)

LCP mide cuándo el elemento de contenido más grande (normalmente una imagen principal o un encabezado) se vuelve visible. Para mejorarlo:

1. Optimiza las imágenes: Comprime las imágenes, utiliza formatos modernos como WebP o AVIF y sirve tamaños responsivos con srcset.
2. Precarga recursos críticos: Usa <link rel="preload"> para la imagen LCP y las fuentes clave.
3. Elimina recursos que bloquean el renderizado: Difiere CSS y JavaScript no críticos. Incluye CSS crítico en línea.
4. Usa una CDN: Sirve los recursos desde ubicaciones cercanas a los usuarios.
5. Habilita la compresión de texto: Usa Brotli o gzip para recursos basados en texto.

Para la compresión de imágenes, puedes usar una herramienta como Image Compressor para reducir rápidamente el tamaño de los archivos sin perder calidad.

Mejorar Interaction to Next Paint (INP)

INP mide la capacidad de respuesta de tu página a las interacciones del usuario. Un INP alto significa que el navegador está ocupado y no puede responder rápidamente. Para mejorarlo:

1. Divide las tareas largas: Divide el trabajo de JavaScript en fragmentos más pequeños usando setTimeout o requestIdleCallback.
2. Optimiza los controladores de eventos: Aplica debounce o throttle a los controladores costosos. Evita el layout thrashing.
3. Reduce JavaScript: Elimina código no utilizado, aplica code-splitting y difiere scripts no críticos.
4. Usa web workers: Descarga cálculos pesados a un hilo de trabajo.

Además, asegúrate de no bloquear el hilo principal con scripts de terceros. Audítalos regularmente.

Mejorar Cumulative Layout Shift (CLS)

CLS mide los cambios de diseño inesperados. Para mantenerlo bajo:

1. Establece atributos de tamaño: Incluye siempre width y height en imágenes y videos.
2. Reserva espacio para contenido dinámico: Usa aspect-ratio de CSS o marcadores de posición para anuncios e inserciones.
3. Evita insertar contenido encima del contenido existente: Excepto en respuesta a una interacción del usuario.
4. Usa animaciones con transform: Prefiere transform y opacity para animaciones en lugar de propiedades que activen el layout.

Herramientas y flujo de trabajo

Aquí tienes un flujo de trabajo sencillo para monitorear y mejorar CWV continuamente:

Recuerda que las mejoras deben validarse con datos de usuarios reales a lo largo del tiempo.

Preguntas frecuentes

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

LCP ≤ 2,5 s, INP ≤ 200 ms, CLS ≤ 0,1, medidos en el percentil 75 de las cargas de página.

¿Con qué frecuencia debo revisar Core Web Vitals?

Monitorea los datos de campo continuamente y realiza auditorías de laboratorio después de cambios importantes. Una revisión mensual es una buena práctica.

¿Puedo mejorar Core Web Vitals sin rediseñar mi sitio?

Sí. Muchas mejoras como la optimización de imágenes, diferir scripts y establecer atributos de tamaño se pueden hacer con cambios mínimos en el código.

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