How do you diagnose and improve a slow LCP?

Question

IT Interview Practice · Accepted Answer

Start by finding **what the LCP element is** and **why it's late**. LCP breaks into four sub-parts — fix the biggest one. ## Diagnose: the four LCP sub-parts ```text [ TTFB ] ─▶ [ Resource load delay ] ─▶ [ Resource load time ] ─▶ [ Render delay ] server when fetch STARTS download the image paint it ``` Chrome DevTools and PageSpeed Insights show which slice dominates. Common culprits: slow server (TTFB), the LCP image discovered late, or a render-blocking script/CSS delaying paint. ## Fixes by sub-part - **Slow TTFB** → cache HTML at a CDN, use SSG/ISR, speed up the origin/database. - **Load delay (image found late)** → preload it and raise its priority so the browser fetches it immediately instead of after CSS/JS: ```html

``` - **Load time (image too big)** → serve AVIF/WebP, size it right with `srcset`, compress. - **Render delay** → cut render-blocking CSS/JS; inline critical CSS; `defer` scripts. ## Pitfalls - Lazy-loading the LCP image (or hiding it behind JS hydration) — the #1 self-inflicted LCP wound. - Web fonts blocking the LCP text; use `font-display: swap` and `preload` the font. - Optimizing lab LCP while real users on 4G stay slow — always confirm with field data. ## Why it matters LCP is the headline loading metric and a search ranking factor. Being able to name the four sub-parts and map each to a concrete fix is exactly the structured, evidence-driven approach interviewers look for.

Diagnose: the four LCP sub-parts

Fixes by sub-part

Pitfalls

Why it matters

Related questions