EasyCore Web Vitals📖 Theory Question

What are the most common causes of poor LCP and how do you fix them?

💡

Hint

Slow TTFB, render-blocking resources, unoptimized hero image, lazy-loaded LCP element

Full Answer

LCP is the time to render the largest above-the-fold element — usually a hero image, banner, or large text block.

Common causes and fixes:

1. Slow server response (TTFB)

  • Fix: CDN, edge SSR, server-side caching, faster DB queries.

2. Render-blocking resources

  • CSS files in <head> block rendering until fully downloaded. Fix: inline critical CSS, defer non-critical CSS.

3. LCP image not preloaded

  • The browser discovers the hero image late (after parsing CSS and JS). Fix: add <link rel="preload" as="image"> in <head> or use Next.js <Image priority>.

4. LCP image is lazy-loaded

  • A common mistake: adding loading="lazy" to the hero image. Browser deliberately delays it. Fix: remove lazy from above-fold images.

5. Unoptimized image

  • Large JPEG served at full resolution. Fix: WebP/AVIF, correct srcset sizing, compression.

6. Web fonts blocking text LCP

  • Text is the LCP element but font isn't loaded. Fix: font-display: swap, preload critical fonts.

More Core Web Vitals Questions

EasyWhat are the three Core Web Vitals and what does each measure?→EasyWhat causes CLS (Cumulative Layout Shift) and how do you fix it?→EasyWhat is INP (Interaction to Next Paint) and how does it differ from FID?→EasyHow do you measure Core Web Vitals in a production React app?→

Practice this in a timed sprint →

5 free questions, no signup required

⚡ Start Sprint