TryQuickToolBox

Core Web Vitals: Mide y mejora el rendimiento web

Web2026-10-08TryQuickToolBox

Tu sitio web carga, pero los usuarios siguen abandonándolo. Las interacciones lentas frustran a los visitantes, y los motores de búsqueda lo notan. Core Web Vitals son las métricas de Google para la experiencia de usuario en el mundo real: Largest Contentful Paint (LCP), Interaction to Next Paint (INP) y Cumulative Layout Shift (CLS). En esta guía, te mostraremos cómo medirlas con precisión y mejorarlas con técnicas prácticas a nivel de código.

¿Qué son Core Web Vitals?

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

Estas métricas forman parte de la señal de Page Experience de Google, pero lo más importante es que reflejan la frustración real de los usuarios. Mejorarlas beneficia tanto al SEO como a las tasas de conversión.

Cómo medir Core Web Vitals

Necesitas datos de laboratorio y de campo. Las herramientas de laboratorio simulan condiciones; los datos de campo provienen de usuarios reales.

Herramientas de laboratorio

Herramientas de campo

Empieza consultando PageSpeed Insights para tus páginas clave. Después, configura la monitorización de usuarios reales con la librería web-vitals para hacer seguimiento del rendimiento a lo largo del tiempo.

Mejorar LCP

LCP suele ser la métrica más impactante de corregir. El elemento más grande normalmente es una imagen hero o un bloque de texto grande.

1. Optimiza la ruta crítica

2. Optimiza las imágenes

3. Mejora la respuesta del servidor

Ejemplo: preload y fetchpriority para la imagen LCP:

<link rel="preload" as="image" href="#" fetchpriority="high">
<img src="#" alt="Hero" width="1200" height="600" fetchpriority="high">

Mejorar INP

INP mide con qué rapidez responde tu página a la entrada del usuario. Un INP alto significa interacciones lentas.

1. Divide las tareas largas

2. Optimiza los manejadores de eventos

3. Reduce la ejecución de JavaScript

Ejemplo: ceder el hilo principal en una tarea larga:

async function processLargeArray(items) {
  for (let i = 0; i < items.length; i++) {
    // Process item
    if (i % 50 === 0) {
      await new Promise(resolve => setTimeout(resolve, 0));
    }
  }
}

Mejorar CLS

CLS mide los cambios de diseño inesperados. Causas comunes: imágenes sin dimensiones, anuncios, embeds y contenido inyectado dinámicamente.

1. Define siempre las dimensiones

2. Reserva espacio para contenido dinámico

3. Optimiza la carga de fuentes

Ejemplo: reservar espacio con aspect-ratio:

.video-container {
  aspect-ratio: 16 / 9;
  width: 100%;
}

Herramientas y flujo de trabajo

Integra las comprobaciones de rendimiento en tu flujo de desarrollo:

Recuerda: el rendimiento es una característica. Trátalo como cualquier otra métrica de calidad.

Preguntas frecuentes

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

LCP: bueno ≤ 2,5s, necesita mejorar ≤ 4,0s. INP: bueno ≤ 200ms, necesita mejorar ≤ 500ms. CLS: bueno ≤ 0,1, necesita mejorar ≤ 0,25. Estos umbrales se basan en datos de usuarios reales.

¿Con qué frecuencia debo medir Core Web Vitals?

Monitoriza los datos de campo de forma continua mediante herramientas como CrUX y tu propia RUM. Ejecuta pruebas de laboratorio en cada cambio significativo de código y al menos mensualmente para las páginas clave.

¿Puedo mejorar Core Web Vitals sin un desarrollador?

Algunas correcciones, como la compresión de imágenes y la caché, se pueden hacer mediante plugins o ajustes de CDN. Sin embargo, las optimizaciones más profundas (división de código, CSS crítico) normalmente requieren la intervención de un desarrollador.

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