LCP

ELI5 — The Vibe Check

LCP measures how long it takes for the biggest thing on your page to appear. Usually it's a hero image or a big headline. If your LCP is slow, users are staring at a blank or half-loaded screen. Good LCP is under 2.5 seconds. Yes, seconds.

Real Talk

Largest Contentful Paint (LCP) measures the time from when the page starts loading to when the largest image or text block in the viewport is rendered. It is a Core Web Vital with a 'Good' threshold of ≤2.5s. Optimizations include preloading hero images, using responsive images, and optimizing server response times (TTFB).

Show Me The Code

<!-- Preload the LCP image to improve score -->
<link
  rel="preload"
  as="image"
  href="/hero.webp"
  fetchpriority="high"
/>

When You'll Hear This

Our LCP was 4.8s — the hero image wasn't preloaded.,After adding fetchpriority='high', LCP dropped to 1.9s.,LCP is usually caused by a slow hero image or render-blocking scripts.