Cómo reducir los Core Web Vitals y el LCP
¿Qué son los Core Web Vitals?
Los Core Web Vitals son tres métricas de rendimiento fundamentales definidas por Google para medir la experiencia del usuario: LCP (Largest Contentful Paint, el tiempo que tarda en aparecer en pantalla el elemento de contenido más grande), INP (Interaction to Next Paint, la velocidad de respuesta a la interacción del usuario) y CLS (Cumulative Layout Shift, la cantidad de desplazamiento visual que se produce mientras se carga la página). Estas tres métricas se miden basándose en datos reales de usuarios (datos de campo); es decir, no se calculan a partir de pruebas de laboratorio (por ejemplo, una comprobación puntual), sino a partir de datos recopilados en las condiciones reales de los dispositivos y las redes de los visitantes.
Estas tres métricas representan diferentes dimensiones de la experiencia del usuario: el LCP transmite la «sensación de rapidez con la que se carga la página», el INP responde a la pregunta «¿con qué rapidez reacciona la página a la interacción?», mientras que el CLS mide si «la página se desplaza ante mis ojos». Si las tres no son buenas, la experiencia general del usuario no puede considerarse plenamente «buena».
En esta guía nos centramos especialmente en el LCP, ya que suele ser la métrica sobre la que más se puede intervenir y en la que se pueden lograr mejoras más tangibles; una imagen principal de gran tamaño o un vídeo pueden, por sí solos, retrasar el LCP varios segundos.
¿Por qué es importante?
Estas métricas reflejan directamente la experiencia del usuario: una página que tarda en cargarse, que responde con retraso a las interacciones o que se desplaza constantemente aleja al usuario del sitio web. Google utiliza los Core Web Vitals como una de sus señales de posicionamiento; el impacto de estas métricas puede ser especialmente notable en las búsquedas desde dispositivos móviles, ya que estos dispositivos y las redes suelen tener más limitaciones que los ordenadores de sobremesa.
Según los umbrales actuales, para que el LCP se considere «bueno», debe estar por debajo de 2,5 segundos, y este valor debe cumplirse en al menos el 75 % de los usuarios reales. Un sitio web que supere este umbral, aunque funcione técnicamente, entra en la categoría de «lento» desde el punto de vista de la experiencia del usuario, lo que puede afectar negativamente tanto a la tasa de conversión como al posicionamiento en los resultados de búsqueda.
La causa de la lentitud del LCP puede variar de un sitio a otro: en algunos casos, el culpable es una imagen grande y sin comprimir, mientras que en otros la causa principal es una respuesta lenta del servidor (TTFB) o scripts de terceros que bloquean el renderizado (por ejemplo, redes publicitarias o herramientas de análisis). Por eso, antes de empezar a optimizar, es importante identificar qué elemento se ha marcado como LCP.
¿Cómo solucionarlo?
- Optimiza la imagen que constituye el elemento LCP (normalmente la imagen principal o «hero»): tamaño adecuado, formato moderno (WebP/AVIF) y compresión.
- Añade
<link rel="preload">para que el navegador la detecte cuanto antes; esto garantiza que la imagen se descargue de forma prioritaria, en lugar de al mismo tiempo que otros recursos. - Reduce el tiempo de respuesta del servidor (TTFB): almacenamiento en caché, alojamiento rápido, uso de CDN.
- Reduce o aplaza (defer/async) los archivos CSS/JS que bloquean el renderizado; el navegador puede retrasar el renderizado de la página hasta que descargue y ejecute estos archivos.
- Reduce la latencia geográfica distribuyendo los recursos estáticos a través de una CDN; responder desde el servidor más cercano al usuario acorta la latencia.
Ejemplo
<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">Mal ejemplo: configurar la imagen LCP <img src="hero.jpg" loading="lazy"> con carga diferida (lazy load): esto impide que el navegador descargue la imagen inmediatamente mientras se carga la página y alarga considerablemente el tiempo de LCP.
Errores comunes
- Servir la imagen LCP con un tamaño mayor de lo necesario y sin comprimir.
- Combinar todo el CSS o JS en un único archivo grande y bloquear así el renderizado.
loading="lazy"Aplicar por error la propiedad a la imagen LCP (la imagen que aparece en la primera pantalla): esto retrasa el LCP porque el navegador pospone la descarga hasta que ve la imagen.- Ignorar el tiempo de respuesta del servidor y optimizar únicamente la interfaz de usuario.
- Cuando la medición de LCP en el informe de Seoraporu.co supere los 2,5 segundos, hay que identificar primero qué elemento se ha marcado como LCP y darle prioridad; una intervención específica es más eficaz que un enfoque general de «optimizarlo todo».
- Revisa periódicamente cómo afectan los scripts de terceros (publicidad, análisis, widget de chat) al orden de carga de la página; con el tiempo, pueden acumularse y reducir lentamente el rendimiento.
- Centrarse únicamente en el LCP y pasar por alto el CLS puede provocar que, al cargarse la página, el contenido se desplace repentinamente debido a espacios de imágenes o anuncios de tamaño indefinido.