Saltar al contenido principal
SEO

Guía completa de Core Web Vitals: cómo mejorar el rendimiento de tu web

4 min de lectura
seo core-web-vitals rendimiento google lighthouse
Tabla de contenidos

Desde 2021, Google utiliza las Core Web Vitals como factor de posicionamiento. Si tu web carga lento, se mueve mientras el usuario intenta hacer clic o tarda en responder a las interacciones, estás perdiendo posiciones en los resultados de búsqueda. Y lo que es peor: estás perdiendo clientes.

En esta guía te explicamos qué son exactamente las Core Web Vitals, cómo medirlas y qué puedes hacer para mejorarlas.

¿Qué son las Core Web Vitals?

Las Core Web Vitals son tres métricas que Google considera esenciales para la experiencia de usuario:

  1. LCP (Largest Contentful Paint): mide cuánto tarda en cargarse el elemento más grande visible en la pantalla. El objetivo es que sea inferior a 2,5 segundos.
  2. INP (Interaction to Next Paint): mide la latencia de las interacciones del usuario (clics, toques, teclado). Reemplazó a FID en marzo de 2024. El objetivo es menos de 200 milisegundos.
  3. CLS (Cumulative Layout Shift): mide los cambios inesperados en el diseño mientras la página carga. El objetivo es menos de 0,1.

No confundas las Core Web Vitals con la puntuación de Lighthouse. Lighthouse mide rendimiento en un entorno simulado. Las Core Web Vitals se basan en datos reales de usuarios (Chrome UX Report). Puedes tener un 95 en Lighthouse y seguir suspendiendo en CWV si tus usuarios están en conexiones lentas.

Cómo medir las Core Web Vitals

Hay varias herramientas para medirlas:

  • PageSpeed Insights: la herramienta oficial de Google. Muestra datos de campo (usuarios reales) y de laboratorio (simulación).
  • Google Search Console: en la sección "Experiencia de página" puedes ver qué URLs tienen problemas.
  • Lighthouse: integrado en Chrome DevTools. Útil para diagnóstico, pero recuerda que son datos de laboratorio.
  • Web Vitals Extension: extensión de Chrome que muestra LCP, INP y CLS en tiempo real.

Ejemplo: medir con Lighthouse desde la terminal

Puedes ejecutar Lighthouse desde la línea de comandos para automatizar auditorías:

npx lighthouse https://tu-web.es --output=json --output-path=./informe.json

Este comando genera un informe JSON completo que puedes analizar programáticamente.

Cómo mejorar el LCP

El LCP suele estar afectado por imágenes pesadas, fuentes que bloquean el renderizado o un servidor lento. Estas son las optimizaciones más efectivas:

  • Optimiza imágenes: usa formatos modernos como WebP o AVIF, con srcset para servir tamaños adaptados al dispositivo.
  • Precarga la imagen hero: si tu LCP es una imagen grande, añade un <link rel="preload"> en el <head>.
  • Usa font-display: swap: evita que las fuentes personalizadas bloqueen el renderizado del texto.
  • Reduce el TTFB: un buen hosting y caché a nivel de CDN reducen el tiempo hasta el primer byte.

Si usas WordPress, el plugin WP Rocket con su opción de "Eliminar CSS no utilizado" puede reducir el LCP entre un 30% y un 50% en muchas webs. Combinado con un CDN como Cloudflare, los resultados son inmediatos.

Cómo mejorar el INP

INP mide la responsividad. Si tu web tarda en reaccionar cuando alguien hace clic en un botón o abre un menú, el INP será alto.

Causas habituales de un INP alto

  • JavaScript pesado que bloquea el hilo principal
  • Event listeners ineficientes
  • Renderizados complejos del DOM después de una interacción
  • Third-party scripts (analytics, chat widgets, ad trackers)
ejemplo-optimizacion.js 
// Malo: listener síncrono que bloquea el hilo principal
document.querySelector('.menu-btn').addEventListener('click', () => {
  // Procesamiento pesado síncrono
  renderizarMenuCompleto();
  calcularAnimaciones();
  actualizarEstado();
});

// Mejor: dividir el trabajo con requestAnimationFrame
document.querySelector('.menu-btn').addEventListener('click', () => {
  // Feedback visual inmediato
  toggleClaseActivo();

  // Trabajo pesado diferido
  requestAnimationFrame(() => {
    renderizarMenuCompleto();
  });
});

Cómo mejorar el CLS

El CLS se dispara cuando elementos de la página cambian de posición mientras el usuario ya está interactuando. Las causas más comunes:

  • Imágenes sin dimensiones: si no especificas width y height, el navegador no reserva espacio y el contenido "salta" cuando la imagen carga.
  • Fuentes que cambian de tamaño: al cargar una fuente personalizada, el texto puede cambiar de tamaño y desplazar el layout.
  • Contenido inyectado dinámicamente: banners de cookies, anuncios o notificaciones que se insertan sin espacio reservado.
  • iframes sin dimensiones: embeds de YouTube, Google Maps, etc.

Lista de verificación para CLS

  1. Añade width y height a todas las imágenes
  2. Usa aspect-ratio en CSS para contenedores de media
  3. Reserva espacio para anuncios y embeds con min-height
  4. Usa font-display: swap con fallback fonts similares
  5. Evita inyectar contenido por encima del fold después de la carga

Herramientas para monitorización continua

No basta con optimizar una vez. Las Core Web Vitals cambian con cada actualización de contenido, plugin o cambio de servidor. Te recomendamos:

  • Configurar alertas en Search Console para detectar regresiones
  • Ejecutar Lighthouse CI en cada deploy para prevenir problemas
  • Revisar PageSpeed Insights mensualmente como parte del mantenimiento

Servicio de optimización de rendimiento

Mejoramos tus Core Web Vitals para que Google te posicione mejor.

Conclusión

Las Core Web Vitals no son una moda pasajera. Son el estándar de Google para medir si una web ofrece buena experiencia de usuario. Optimizarlas no solo mejora tu posicionamiento: mejora la conversión, reduce el rebote y demuestra a tus visitantes que tu negocio se toma en serio su presencia digital.

¿No sabes por dónde empezar? En Desatranques WEB hacemos auditorías de rendimiento con resultados medibles. Te decimos exactamente qué falla y lo corregimos.