¿Cómo diagnosticas y mejoras un LCP lento?

Question

IT Interview Practice · Accepted Answer

Empieza por averiguar **cuál es el elemento LCP** y **por qué llega tarde**. El LCP se descompone en cuatro subpartes; corrige la más grande. ## Diagnóstico: las cuatro subpartes del LCP ```text [ TTFB ] ─▶ [ Resource load delay ] ─▶ [ Resource load time ] ─▶ [ Render delay ] server when fetch STARTS download the image paint it ``` Chrome DevTools y PageSpeed Insights muestran qué porción domina. Culpables comunes: servidor lento (TTFB), la imagen LCP descubierta tarde, o un script/CSS render-blocking que retrasa el paint. ## Correcciones por subparte - **TTFB lento** → cachea el HTML en un CDN, usa SSG/ISR, acelera el origen/la base de datos. - **Load delay (imagen encontrada tarde)** → precárgala y eleva su prioridad para que el navegador la descargue de inmediato en lugar de después del CSS/JS: ```html

``` - **Load time (imagen demasiado grande)** → sirve AVIF/WebP, dimensiónala correctamente con `srcset`, comprime. - **Render delay** → recorta el CSS/JS render-blocking; incorpora el CSS crítico en línea; usa `defer` en los scripts. ## Trampas - Hacer lazy-load de la imagen LCP (u ocultarla tras la hidratación de JS): la herida de LCP autoinfligida número 1. - Web fonts que bloquean el texto LCP; usa `font-display: swap` y `preload` de la fuente. - Optimizar el LCP de laboratorio mientras los usuarios reales en 4G siguen lentos: confirma siempre con datos de campo. ## Por qué es importante El LCP es la métrica de carga principal y un factor de ranking de búsqueda. Poder nombrar las cuatro subpartes y mapear cada una a una corrección concreta es exactamente el enfoque estructurado y basado en evidencia que buscan los entrevistadores.

Diagnóstico: las cuatro subpartes del LCP

Correcciones por subparte

Trampas

Por qué es importante

Preguntas relacionadas