¿Qué es el LCP (Largest Contentful Paint)?

Definición

El LCP (Largest Contentful Paint) es una de las tres métricas de los Core Web Vitals. Mide el tiempo que tarda en renderizarse el elemento de contenido más grande visible en el viewport del usuario.

Este elemento suele ser:

• La imagen hero de la página
• Un bloque de texto grande (título H1)
• Un video poster o imagen de fondo

Umbrales de Google

| Calificación | Tiempo | |:---|:---| | ✅ Bueno | ≤ 2.5 segundos | | ⚠️ Necesita mejora | 2.5 – 4.0 segundos | | ❌ Deficiente | > 4.0 segundos |

Causas comunes de LCP lento

1. Imágenes sin optimizar: Fotos de 5MB servidas en PNG en lugar de WebP/AVIF
2. Servidor lento (TTFB alto): Hosting compartido en lugar de CDN global
3. CSS/JS bloqueante: Archivos CSS y JavaScript que bloquean el renderizado
4. Fonts no preconectados: Tipografías de Google Fonts sin preconnect
5. Sin lazy loading inteligente: Cargar todas las imágenes al inicio

Cómo optimizar el LCP

• Servir imágenes en AVIF/WebP con dimensiones correctas
• Usar CDN (Vercel Edge Network, Cloudflare) en lugar de hosting local
• Precargar la imagen hero con <link rel="preload">
• Eliminar CSS no utilizado y cargar solo lo necesario
• Server-Side Rendering (SSR) con Next.js para que el HTML llegue completo

En NexgenPixels logramos un LCP promedio de 0.8 segundos usando Next.js con Image Optimization y Vercel Edge, muy por debajo del umbral de Google.