Si tu web tarda en mostrar la imagen principal, el titular o el bloque hero, el visitante percibe lentitud antes de leer una sola línea. LCP (Largest Contentful Paint) mide exactamente ese momento: cuándo aparece el elemento visual más grande de la pantalla. En una web de empresa —home, landing de servicio o ficha de producto— un LCP alto suele traducirse en menos confianza y más abandono.
Este artículo explica qué mide LCP, cómo se relaciona con INP y CLS, qué umbrales vigilar en 2026 y qué cambios suelen mejorar la pintura del contenido principal sin renunciar al diseño.
Qué es LCP y qué elementos cuenta
LCP registra el tiempo hasta que el navegador pinta el mayor elemento de contenido visible dentro del viewport. Suele ser:
- Una imagen o vídeo de cabecera.
- Un bloque de texto grande (titular H1 o párrafo destacado).
- Un fondo cargado mediante CSS con imagen.
No mide todo el documento: solo el elemento dominante en la primera pantalla. La guía de web.dev sobre LCP detalla qué elementos entran en el cálculo y cuándo deja de actualizarse la métrica.
Umbrales: cuándo tu web está en zona verde
Como referencia de Core Web Vitals, muchos equipos usan:
- Bueno: 2,5 segundos o menos.
- A mejorar: entre 2,5 y 4 segundos.
- Pobre: por encima de 4 segundos.
Evalúa el percentil 75 de usuarios reales (CrUX, Search Console o Analytics con Web Vitals). Un laboratorio puntual en PageSpeed ayuda a depurar, pero no sustituye datos de campo si tu tráfico es estable.
LCP frente a INP y CLS
Core Web Vitals cubren tres frentes: LCP (carga percibida), CLS (estabilidad visual) e INP (respuesta a interacciones). Optimizar solo uno deja huecos: una home puede pintar rápido el hero y aun así frustrar al abrir el menú móvil.
Prioriza LCP cuando la queja es «tarda en cargar la página» o cuando el informe señala la imagen principal como elemento LCP en móvil.
Causas habituales en webs de empresa
- Imágenes hero demasiado pesadas sin compresión ni formatos modernos.
- Tiempo de respuesta del servidor (TTFB) alto en hosting compartido o sin caché.
- CSS o fuentes que bloquean el render antes de pintar el titular.
- JavaScript que retrasa la carga de la imagen principal (lazy mal aplicado al hero).
- CDN o caché mal configurados en la primera visita.
Los formatos WebP y AVIF y un CDN bien elegido suelen reducir el peso del elemento LCP sin cambiar el diseño.
Cómo medir LCP con herramientas accesibles
- PageSpeed Insights: identifica el elemento LCP en laboratorio y sugiere mejoras.
- Chrome DevTools → Performance: línea de tiempo con marca LCP.
- Search Console (Experiencia de página): tendencia por URL en datos reales.
- Extensiones o RUM: útiles para comparar antes y después en rutas críticas (home, contacto, producto estrella).
Define una URL crítica por objetivo de negocio y mide en móvil con red limitada: ahí suele empeorar el LCP aunque en escritorio parezca correcto.
Acciones que suelen mejorar LCP
Optimizar la imagen o el bloque hero
Sirve el hero en el tamaño real de pantalla, no en 4000 px de ancho. Usa fetchpriority="high" en la imagen LCP, evita loading="lazy" en ese recurso y aplica compresión. La optimización de imágenes es el primer paso con más retorno.
Reducir TTFB y usar caché
Un HTML lento retrasa todo lo demás. Revisa hosting, caché de página, cabeceras de caché y compresión Brotli/Gzip.
Adelantar recursos críticos
Preload de la imagen LCP, preconnect al origen de fuentes o CDN, y reducir CSS bloqueante en la parte superior. La minificación ayuda, pero eliminar CSS no usado en la home suele impactar más.
Controlar scripts de terceros
Etiquetas de marketing y widgets en el <head> compiten con el hero. Retrasa lo no esencial con la misma disciplina que en scripts de terceros.
Errores que empeoran el LCP sin que lo notes
- Aplicar lazy loading a la imagen above the fold.
- Cargar un slider con tres imágenes cuando solo una es visible.
- Usar vídeo de fondo sin poster ligero.
- Depender de una fuente web externa sin
font-display: swap.
Checklist antes de dar por cerrada una mejora
- ¿El elemento LCP en móvil es el que esperas (hero y no un logo pequeño)?
- ¿Has comparado el percentil 75 en CrUX o Search Console tras dos semanas?
- ¿La home sigue cumpliendo CLS e INP en las mismas rutas?
- ¿Has probado en 4G simulado y en un dispositivo de gama media?
Conclusión
LCP responde a una pregunta directa: «¿Cuándo veo lo importante de esta página?». En 2026, con más tráfico móvil y heroes visuales en webs corporativas, ignorarlo es regalar segundos de duda a quien ya llegó desde Google o un anuncio. Mide en tus URLs críticas, optimiza el recurso que define el LCP y alinea servidor, caché e imágenes con el mismo rigor que dedicas al copy del hero.
Si quieres priorizar mejoras de Core Web Vitals con impacto medible en conversión, en AATSOFT auditamos home y landings clave y proponemos cambios acotados a tu stack actual.
