Playbook
    performance
    medium

    Fix slow Largest Contentful Paint (LCP)

    Your LCP is over 2.5s and Core Web Vitals is failing. Here is the 80/20 fix list, in order of impact.

    45 minutesLast reviewed 2026-06-09

    What is happening

    LCP measures when the largest visible element (usually the hero image or main headline) finishes painting. Google considers anything over 2.5s "poor" and uses it as a ranking signal. Conversion rates drop ~7% for every 100ms of extra LCP delay.

    Fix it in order of impact

  1. Preload the LCP image. Add <link rel="preload" as="image" href="/hero.jpg" fetchpriority="high"> to the page <head>. This alone often cuts LCP by 30–50%.
  2. Serve the LCP image as AVIF or WebP. Use <picture> with AVIF source + WebP fallback + JPG fallback. Cuts file size 60–80%.
  3. Remove `loading="lazy"` from the hero image. Lazy-loading the above-the-fold image is the single most common LCP killer.
  4. Use a CDN. If your origin is in one region, visitors elsewhere pay 200–800ms in TTFB before LCP can even start. Cloudflare's free tier fixes this.
  5. Inline critical CSS. Anything that blocks render delays LCP. Move above-the-fold CSS into a <style> block in <head> and defer the rest.

    6. Identify your LCP element

    Run Lighthouse in Chrome DevTools → Performance panel. The "LCP" marker in the timeline points at the exact element. If it is a background image set in CSS, you cannot preload it the same way — set it as a regular <img> or use <link rel="preload" imagesrcset="...">.

    Common gotchas

  6. A 3rd-party script blocks render. Add async or defer to every <script> in <head>.
  7. Custom fonts cause FOIT. Add font-display: swap to every @font-face rule.
  8. Render-blocking video poster. A <video poster="huge.jpg"> counts as the LCP candidate. Compress the poster.

    9. What this doesn't do

    This playbook focuses on LCP. For CLS (layout shift) or INP (interactivity), see Web Vitals overview.

    All playbooks