TryQuickToolBox

Core Web Vitals: Mide y mejora el rendimiento web

Web2026-11-05TryQuickToolBox

Has construido 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. Es probable que Core Web Vitals (CWV) sea el culpable. Estas métricas miden la experiencia del usuario en el mundo real y afectan directamente los rankings de búsqueda y las tasas de conversión. En esta guía, aprenderás qué son las CWV, cómo medirlas con precisión y pasos prácticos para mejorar cada una.

¿Qué son Core Web Vitals?

Core Web Vitals son un conjunto de tres métricas que Google utiliza para cuantificar la experiencia del usuario:

Estos umbrales se basan en el percentil 75 de las cargas de página, segmentados por móvil y escritorio. Por lo tanto, debes asegurarte de que el 75% de tus usuarios experimenten valores buenos.

Cómo medir Core Web Vitals

Puedes medir CWV de dos maneras: en el laboratorio (pruebas sintéticas) y en el campo (monitoreo de usuarios reales). Ambos son valiosos, pero los datos de campo son los que Google utiliza para el ranking.

Datos de campo: Monitoreo de usuarios reales (RUM)

Los datos de campo provienen de usuarios reales. La mejor fuente es el Chrome User Experience Report (CrUX), que alimenta el informe de Core Web Vitals en Google Search Console. También puedes usar la biblioteca web-vitals para recopilar tus propios datos RUM y enviarlos a un endpoint de análisis.

Para ver los datos de CrUX de tu sitio, usa PageSpeed Insights o la API de CrUX. Estos muestran la distribución de LCP, INP y CLS para tu origen.

Datos de laboratorio: Pruebas sintéticas

Las herramientas de laboratorio simulan una carga de página en un entorno controlado. Son excelentes para depuración e integración CI/CD. Opciones populares:

Recuerda: los datos de laboratorio no incluyen la variabilidad del mundo real, así que úsalos para diagnósticos, no como predictor de ranking.

Mejorar Largest Contentful Paint (LCP)

LCP suele ser la métrica más impactante de corregir. El elemento más grande a menudo es una imagen principal, un encabezado o un póster de video. Para mejorar LCP:

  1. Optimiza imágenes: Comprime imágenes, usa formatos modernos como WebP o AVIF y sirve tamaños responsivos con srcset. Herramientas como el Compresor de Imágenes pueden ayudar a reducir el tamaño del archivo sin perder calidad.
  2. Precarga el recurso LCP: Agrega <link rel="preload"> para la imagen principal o la fuente para comenzar a cargar antes.
  3. Elimina recursos que bloquean el renderizado: Incluye CSS crítico en línea, difiere CSS no crítico y carga JavaScript de forma asíncrona.
  4. Usa una CDN: Sirve activos desde una red de entrega de contenido para reducir la latencia.
  5. Cachea agresivamente: Establece tiempos de caché largos para activos estáticos con encabezados Cache-Control.

Ejemplo de precarga de una imagen LCP:

<link rel="preload" as="image" href="/hero.webp" imagesrcset="/hero-480.webp 480w, /hero-800.webp 800w" imagesizes="(max-width: 600px) 480px, 800px">

Mejorar Interaction to Next Paint (INP)

INP mide qué tan rápido responde la página a la entrada del usuario. Un INP alto a menudo proviene de tareas largas de JavaScript que bloquean el hilo principal. Para mejorar INP:

Puedes medir INP en el campo con la biblioteca web-vitals:

import {onINP} from 'web-vitals';

onINP((metric) => {
  console.log('INP:', metric.value);
  // Enviar a tu endpoint de análisis
});

Mejorar Content Layout Shift (CLS)

CLS ocurre cuando los elementos se mueven inesperadamente durante la carga. Causas comunes: imágenes sin dimensiones, anuncios, embeds y fuentes web que causan FOIT/FOUT. Para mejorar CLS:

Ejemplo de reservar espacio con CSS aspect-ratio:

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

Herramientas y flujo de trabajo para monitoreo continuo

Mejorar CWV no es una tarea única. Configura monitoreo continuo:

Para una verificación rápida, usa la herramienta HTML a Imagen para capturar instantáneas visuales de tu página en diferentes etapas, ayudándote a detectar cambios de diseño manualmente.

Preguntas frecuentes

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

Bueno: LCP ≤ 2.5s, INP ≤ 200ms, CLS ≤ 0.1. Necesita mejorar: LCP ≤ 4s, INP ≤ 500ms, CLS ≤ 0.25. Deficiente: por encima de esos valores.

¿Con qué frecuencia se actualizan los datos de CrUX?

Los datos de CrUX se actualizan diariamente, pero la ventana móvil de 28 días significa que los cambios tardan en reflejarse. Para una retroalimentación más rápida, usa tu propio RUM.

¿Puedo mejorar Core Web Vitals sin cambiar mi diseño?

Sí. Muchas mejoras son técnicas: compresión de imágenes, precarga, diferir scripts y reservar espacio. A menudo no tienen impacto visual.

¿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 manteniendo la calidad.