LCP
Largest Contentful Paint
El LCP mide el tiempo que tarda en renderizarse el elemento visible más grande de la página — normalmente la imagen hero o el bloque de texto principal. Es la forma en que Google cuantifica la velocidad de carga percibida por el usuario.
Qué puede ser el elemento LCP de una página
El navegador evalúa continuamente cuál es el elemento visible más grande mientras carga la página. El candidato LCP puede cambiar durante la carga. El valor final es el del elemento más grande que haya aparecido antes de que el usuario interactúe por primera vez.
imgEl elemento img —incluidas las imágenes dentro de picture— es el candidato LCP más común. Las imágenes hero de landing pages suelen ser el LCP en el 70%+ de las páginas.
video con posterEl atributo poster de un elemento video define la imagen de vista previa. El navegador la trata como candidato LCP antes de que el video cargue.
Elemento con background-image CSSElementos div u otros con url() en background-image pueden ser el LCP. El navegador los descubre más tarde que los img del HTML, lo que aumenta el tiempo.
Bloque de textoEn páginas sin imagen hero prominente —artículos de texto, páginas de precios simples— el bloque de texto más grande es el LCP. Carga muy rápido si no hay render-blocking resources.
Causas comunes de LCP lento y cómo corregirlas
TTFB alto
Impacto AltoEl Time to First Byte es el tiempo que tarda el servidor en empezar a enviar la respuesta. Si el TTFB es lento (más de 800ms), el LCP nunca puede ser bueno porque todo lo demás espera al servidor.
Fix
Usar CDN para cachear respuestas estáticas, optimizar el tiempo de respuesta del servidor de origen (TTFB objetivo menor a 200ms), habilitar compresión gzip o brotli.
Imágenes sin optimizar
Impacto AltoImágenes en JPEG o PNG sin compresión, sin formato moderno (WebP/AVIF) y sin responsive sizing cargan más lento de lo necesario. Una imagen de 2MB puede bajar el LCP 2-3 segundos en mobile.
Fix
Convertir a WebP o AVIF, comprimir al 80-85% de calidad sin pérdida visual perceptible, usar srcset para servir el tamaño adecuado a cada viewport.
CSS que bloquea el render
Impacto AltoEl navegador no puede mostrar nada hasta que descarga y parsea todos los stylesheets en el head. Un CSS de 500KB bloqueando el render puede añadir 1-2 segundos al LCP.
Fix
Extraer el critical CSS e inlinear en el head. Cargar el CSS no crítico con media='print' onload trick o con link rel='preload' as='style'.
Lazy load en el elemento hero
Impacto Altoloading='lazy' en la imagen principal (el candidato LCP) instruye al navegador a esperar hasta que el elemento esté cerca del viewport para cargarlo. En la imagen hero —que ya está en el viewport— esto es el error más común y fácil de corregir.
Fix
Eliminar loading='lazy' del elemento LCP. Agregar rel='preload' as='image' en el head para la imagen hero, especialmente si tiene srcset con imagesrcset.
JavaScript que bloquea el render
Impacto MedioScripts sin defer o async en el head bloquean el parser HTML. El navegador no puede procesar el resto del documento —incluido el elemento LCP— hasta que el script termina de ejecutarse.
Fix
Agregar defer o async a todos los scripts no críticos. Usar code splitting para cargar solo el JS necesario para el primer render. Considerar mover scripts al final del body.
Cómo medir el LCP correctamente
La diferencia entre datos de campo y laboratorio es crítica. Los datos de campo (CrUX) reflejan el percentil 75 de usuarios reales. Los de laboratorio son reproducibles pero no reflejan variaciones de red, dispositivo o caché del mundo real.
PageSpeed Insights
Campo + LabIngresa la URL en pagespeed.web.dev. La sección 'Datos de campo' muestra el LCP real de usuarios (CrUX). La sección 'Diagnóstico' muestra el elemento LCP detectado en laboratorio.
Google Search Console
CampoMenú lateral: Experiencia > Core Web Vitals. Muestra URLs agrupadas por estado (Bueno / Mejorar / Pobre) con el tipo de problema. Es la fuente que Google usa para ranking.
Lighthouse (Chrome DevTools)
LabAbre DevTools (F12) > pestaña Lighthouse > Generate report. Muestra el LCP medido en laboratorio, el elemento que lo determina y las oportunidades de mejora priorizadas por impacto.
WebPageTest
Labwebpagetest.org permite simular conexiones lentas (3G, 4G) y ubicaciones geográficas específicas. El filmstrip view muestra exactamente en qué segundo aparece el elemento LCP.
Continuar con INP o CLS
¿Tu LCP está por encima de 2.5 segundos en mobile?
Diagnosticamos el elemento LCP de tus páginas prioritarias, identificamos la causa raíz y entregamos un plan de corrección priorizado por impacto. Sin auditorías genéricas.
Última actualización: 2026-06-22 · Sistema: ATLAS D01-SEO · Autor: Andrés Castrejón