LCP mide cuándo el usuario percibe que tu página está "casi lista". Suele ser una imagen hero, un bloque de texto grande, o un vídeo en el primer viewport.

Clasificación oficial

  • Bueno: ≤ 2,5 segundos
  • Necesita mejora: entre 2,5 y 4 segundos
  • Malo: > 4 segundos

Qué elemento es el LCP

PageSpeed Insights te lo dice exactamente. Lo más común:

  • Imagen de hero (banner)
  • Párrafo largo con H1
  • Vídeo de fondo
  • Bloque destacado tipo card grande

Optimizaciones clave

  1. Prioriza el LCP: añade fetchpriority="high" a la imagen hero y loading="eager" (por defecto, no usar lazy en el LCP)
  2. Preload del recurso crítico: <link rel="preload" as="image" href="..." />
  3. CDN para servir la imagen rápido
  4. Formato moderno: AVIF o WebP en vez de JPEG pesado
  5. Dimensiones correctas: servir 1280px cuando se muestra a 600px es desperdicio
  6. No bloqueantes: CSS crítico inline, resto de CSS diferido
  7. JS al final: scripts con defer/async salvo los imprescindibles
  8. Server rápido: TTFB (Time To First Byte) bajo, ideal < 200ms

Errores típicos

  • Imagen hero con loading="lazy" (la oculta al primer viewport y mide mal)
  • Cargar librería JS gigante antes del contenido visible (Google Tag Manager con 15 tags bloqueando)
  • Fuente personalizada que bloquea el render del texto
  • Carrusel JS que carga todas las imágenes de golpe

Herramientas

  • Chrome DevTools > Performance tab
  • PageSpeed Insights
  • WebPageTest para análisis más profundo
  • CrUX dashboard para datos de campo históricos

En NoSoloAgencia cuidamos el LCP desde el primer momento en cualquier web que construimos. Si quieres tu LCP actual, incluido en la auditoría.