Largest Contentful Paint measures when the biggest visible element finishes rendering. On the majority of pages that element is an image — a hero banner, a product photo, an article header — which means LCP is usually one file's problem.

Step 1: Confirm Which Element It Is

Don't guess. Chrome DevTools' Performance panel and Lighthouse both name the LCP element explicitly. Field data from the Chrome UX Report tells you what real users experience, which can differ from your fast laptop on office wifi.

Step 2: Stop Delaying It

These are the most common self-inflicted delays:

  • Lazy-loading the hero. Native lazy-loading defers the request until layout knows the image is near the viewport. For an above-the-fold image, that's pure delay. Remove loading="lazy" from anything visible without scrolling — this single change frequently cuts a second.
  • Loading it via JavaScript. An image inserted by a script can't be discovered by the browser's preload scanner until the script runs. Put the hero in the HTML.
  • CSS background images. Same problem: the browser must download and parse CSS before it knows the image exists. Use a real img element for the hero.
  • Client-side hydration gates. If the hero only appears after a framework mounts, LCP waits for JavaScript.

Step 3: Prioritize It

Browsers guess priorities and often guess wrong early on:

  • Add fetchpriority="high" to the hero image element. It's a one-attribute change with a measurable effect.
  • Optionally add a preload link in the head for the exact image URL — useful when the image is discovered late. Make sure preload and the actual request use the same URL and the same responsive attributes, otherwise you download it twice.
  • Set loading="eager" explicitly if a framework defaults to lazy.

Step 4: Make the File Smaller

Priority helps a big file arrive sooner; it doesn't make it small.

  • Serve the right dimensions. A hero displayed at 1200 px should not be a 3000 px file. Use responsive sizes so phones get phone-sized images.
  • Use a modern format. AVIF or WebP typically saves 25–50% over JPEG at the same visual quality.
  • Target under ~200 KB for a full-width hero; less on mobile.
  • Compress to a target size rather than eyeballing quality, then compare at 100% before shipping.

Step 5: Serve It Fast

  • Use a CDN so the file comes from a nearby edge.
  • Set long cache lifetimes with content-hashed filenames.
  • Avoid redirect chains on image URLs — each hop costs a round trip.
  • Preconnect to the image host if it's a different origin.

The order matters: remove the delays first (free), then prioritize (nearly free), then shrink the file (a little work), then improve delivery. Most sites find their LCP problem in the first two steps.