TryQuickToolBox

Core Web Vitals: mide y mejora el rendimiento web

Web2026-11-10TryQuickToolBox

Por qué importan los Core Web Vitals

Has construido un sitio rápido, pero los usuarios siguen quejándose de lentitud. O quizás Google Search Console te advierte sobre Core Web Vitals deficientes. Estas métricas afectan directamente a la experiencia de usuario y al posicionamiento en buscadores. Ignorarlas significa perder visitantes y tráfico. En esta guía aprenderás qué son los Core Web Vitals, cómo medirlos y pasos prácticos para mejorar cada uno.

¿Qué son los Core Web Vitals?

Los Core Web Vitals son un conjunto de métricas definidas por Google para cuantificar la experiencia de usuario en la web. Se centran en la carga, la interactividad y la estabilidad visual:

Estas métricas forman parte de las señales de experiencia de página de Google e influyen en el posicionamiento en buscadores. También reflejan la experiencia real del usuario, no solo pruebas de laboratorio.

Cómo medir los Core Web Vitals

Puedes medir los Core Web Vitals en laboratorio (pruebas sintéticas) o en campo (monitorización de usuarios reales). Ambos enfoques son valiosos.

Herramientas de laboratorio

Herramientas de campo

Empieza con herramientas de laboratorio para depurar y luego valida con datos de campo para asegurar mejoras en el mundo real.

Mejorar Largest Contentful Paint (LCP)

LCP suele ser la métrica más desafiante. Para mejorarla, céntrate en la ruta crítica de renderizado.

  1. Optimiza las imágenes: comprime las imágenes, usa formatos modernos como WebP o AVIF y sirve imágenes responsivas con srcset.
  2. Precarga el recurso LCP: si el elemento LCP es una imagen o una fuente, añade <link rel="preload"> para empezar a cargarlo antes.
  3. Elimina los recursos que bloquean el renderizado: aplaza el CSS y JavaScript no críticos. Inserta el CSS crítico en línea.
  4. Usa una CDN: sirve los recursos desde ubicaciones cercanas a los usuarios para reducir la latencia.
  5. Almacena en caché los recursos: establece tiempos de caché largos para recursos estáticos con cabeceras Cache-Control.

Por ejemplo, precarga tu imagen principal:

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

Además, asegúrate de que tu servidor responda rápido. Usa herramientas como el Analizador de logs de Nginx para detectar solicitudes lentas y optimizar el rendimiento del servidor.

Mejorar First Input Delay (FID)

FID mide la capacidad de respuesta. Las tareas largas de JavaScript bloquean el hilo principal y retrasan las interacciones.

  1. Divide las tareas largas: fragmenta el JavaScript grande en trozos más pequeños usando setTimeout o requestIdleCallback.
  2. Minifica y comprime JavaScript: reduce el tamaño de los archivos con minificación y compresión gzip/brotli.
  3. Aplaza el JavaScript no crítico: usa los atributos async o defer.
  4. Elimina el código no utilizado: usa tree shaking y code splitting.
  5. Optimiza los scripts de terceros: cárgalos de forma asíncrona y considera alojarlos tú mismo.

Usa el panel Performance de DevTools para identificar tareas largas.

Mejorar Cumulative Layout Shift (CLS)

El CLS se produce cuando los elementos se desplazan de forma inesperada. Causas habituales: imágenes sin dimensiones, anuncios, embeds y fuentes web.

  1. Establece atributos de tamaño: incluye siempre width y height en imágenes y vídeos.
  2. Reserva espacio para anuncios y embeds: usa aspect-ratio de CSS o contenedores de tamaño fijo.
  3. Evita insertar contenido encima del contenido existente: salvo que lo active una interacción del usuario.
  4. Usa font-display: swap: pero ten en cuenta que el intercambio de fuentes puede causar desplazamientos; considera font-display: optional o precargar las fuentes.
  5. Aplica animaciones con transform: en lugar de propiedades que provocan repintado de diseño.

Prueba con la Layout Instability API en DevTools.

Comparación de umbrales de Core Web Vitals

Métrica Bueno Necesita mejorar Deficiente
LCP ≤ 2,5 s 2,5 s – 4,0 s > 4,0 s
FID ≤ 100 ms 100 ms – 300 ms > 300 ms
CLS ≤ 0,1 0,1 – 0,25 > 0,25

Estos umbrales se basan en las recomendaciones de Google.

Flujo de trabajo práctico para la mejora continua

Mejorar los Core Web Vitals no es una tarea puntual. Sigue este flujo de trabajo:

  1. Mide: usa herramientas de laboratorio y de campo para establecer una línea base.
  2. Identifica: encuentra las mayores oportunidades con Lighthouse y CrUX.
  3. Optimiza: implementa correcciones para LCP, FID y CLS.
  4. Monitoriza: configura la monitorización de usuarios reales con la biblioteca web-vitals y haz seguimiento de los cambios.
  5. Itera: audita y perfecciona con regularidad.

Integra presupuestos de rendimiento en tu pipeline de CI/CD para evitar regresiones.

Preguntas frecuentes

¿Qué son los Core Web Vitals y por qué importan?

Los Core Web Vitals son métricas (LCP, FID, CLS) que cuantifican la experiencia de usuario. Importan porque afectan al posicionamiento en buscadores e influyen directamente en cómo perciben los usuarios la velocidad y estabilidad de tu sitio.

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

Mide tras cambios importantes y de forma continua mediante datos de campo. Revisa las métricas de laboratorio durante el desarrollo y monitoriza los datos de campo mensualmente para detectar regresiones.

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

Sí. Muchas mejoras como la optimización de imágenes, la precarga y el establecimiento de atributos de tamaño pueden aplicarse sin un rediseño completo. Empieza con correcciones de bajo esfuerzo y alto impacto.

¿Listo para analizar el rendimiento de tu servidor? Usa el Analizador de logs de Nginx para identificar solicitudes lentas y optimizar tu backend, lo que mejora indirectamente el LCP y la experiencia de usuario general.