TryQuickToolBox

Core Web Vitals: Mide y mejora el rendimiento web

Web2026-10-31TryQuickToolBox

Has creado un sitio web rápido, pero los usuarios aún se quejan de lentitud. O tal vez tus rankings de SEO cayeron después de una actualización de Google. El culpable podrían ser las Core Web Vitals—las métricas de Google para la experiencia de usuario. En esta guía, aprenderás qué son, cómo medirlas y pasos concretos para mejorarlas.

¿Qué son las Core Web Vitals?

Las Core Web Vitals son tres métricas específicas que cuantifican aspectos clave de la experiencia de usuario: carga, interactividad y estabilidad visual. Forman parte de la señal Page Experience de Google para el ranking.

Google también utiliza otras métricas como Time to First Byte (TTFB) y First Contentful Paint (FCP) como diagnósticos, pero LCP, FID y CLS son las tres principales.

Cómo medir las Core Web Vitals

Puedes medir estas métricas de dos formas: en el laboratorio (pruebas sintéticas) y en el campo (monitoreo de usuarios reales). Ambas son valiosas.

Medición en laboratorio

Herramientas como Lighthouse (integrada en Chrome DevTools) y WebPageTest simulan una carga de página y proporcionan puntuaciones. Son excelentes para depurar porque ofrecen diagnósticos detallados.

// Ejecuta Lighthouse en Chrome DevTools: Abre DevTools → pestaña Lighthouse → Generar informe.
// O usa la CLI:
// npm install -g lighthouse
// lighthouse https://example.com --view

Medición en campo

Las métricas de usuarios reales provienen de visitantes reales. El Chrome User Experience Report (CrUX) proporciona datos anonimizados para sitios públicos. También puedes usar APIs de JavaScript para recopilar tus propios datos de campo.

// Ejemplo: Usar la librería web-vitals para registrar métricas
import {onLCP, onFID, onCLS} from 'web-vitals';

onLCP(console.log);
onFID(console.log);
onCLS(console.log);

Envía estas métricas a tu endpoint de analítica para rastrear el rendimiento a lo largo del tiempo.

Mejorar LCP

LCP suele ser la métrica más impactante. Para mejorarla, enfócate en el elemento más grande—generalmente una imagen principal o un encabezado.

  1. Optimiza las imágenes: Comprime las imágenes, usa formatos modernos como WebP o AVIF y especifica dimensiones para evitar cambios de diseño. Herramientas como el compresor de imágenes pueden ayudar a reducir el tamaño del archivo sin pérdida de calidad.
  2. Precarga recursos críticos: Usa <link rel="preload"> para la imagen o fuente del LCP.
  3. Reduce el tiempo de respuesta del servidor: Usa una CDN, habilita el almacenamiento en caché y optimiza el código del backend. TTFB es un componente del LCP.
  4. Elimina recursos que bloquean el renderizado: Difiere CSS y JavaScript no críticos.

Ejemplo: Precarga tu imagen principal:

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

Mejorar FID

FID mide la capacidad de respuesta. Un FID alto significa que el hilo principal está ocupado cuando el usuario intenta interactuar.

  1. Divide las tareas largas: Divide JavaScript en fragmentos más pequeños usando setTimeout o requestIdleCallback.
  2. Optimiza los manejadores de eventos: Aplica debounce o throttle a operaciones costosas.
  3. Reduce el tiempo de ejecución de JavaScript: Elimina código no utilizado, divide el código y difiere scripts no críticos.
  4. Usa web workers: Descarga cálculos pesados a un hilo de trabajo.

Ejemplo: Diferir JavaScript no crítico:

<script src="#" defer></script>

Mejorar CLS

CLS se trata de estabilidad visual. Los cambios inesperados molestan a los usuarios y causan clics erróneos.

  1. Incluye siempre atributos de ancho y alto en imágenes y videos.
  2. Reserva espacio para anuncios e incrustaciones: Usa CSS aspect-ratio o contenedores de tamaño fijo.
  3. Evita insertar contenido encima del contenido existente a menos que sea en respuesta a una interacción del usuario.
  4. Usa transformaciones CSS para animaciones en lugar de propiedades que activen el layout.

Ejemplo: Reserva espacio para una imagen:

<img src="#" width="800" height="600" alt="...">

Herramientas y flujo de trabajo

Comienza con herramientas de laboratorio para identificar problemas, luego valida con datos de campo. Aquí tienes un flujo de trabajo simple:

  1. Ejecuta Lighthouse en Chrome DevTools para obtener una línea base.
  2. Soluciona los problemas más impactantes (generalmente LCP).
  3. Implementa los cambios y monitorea los datos de campo a través de CrUX o tu propio RUM.
  4. Itera: el rendimiento es continuo.

Para verificaciones rápidas, usa herramientas en línea como PageSpeed Insights, que combina datos de laboratorio y de campo.

Preguntas frecuentes

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

Actualmente, Google considera LCP ≤ 2.5s, FID ≤ 100ms y CLS ≤ 0.1 como "buenos". Estos umbrales pueden evolucionar, así que consulta la documentación oficial de Google para actualizaciones.

¿Las Core Web Vitals afectan directamente los rankings de SEO?

Sí, son parte de la señal Page Experience de Google. Sin embargo, la relevancia y la calidad del contenido siguen siendo más significativas. Las Core Web Vitals son un desempate o un factor cuando otras señales son iguales.

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

Mide después de cambios importantes y monitorea los datos de campo continuamente. Las pruebas de laboratorio son rápidas, pero los datos de campo reflejan experiencias reales de usuarios en diferentes dispositivos y redes.

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