DEV Community

Rahil Khan
Rahil Khan

Posted on

Your hero image is probably lazy-loaded (and that's slowing your homepage): a 10-minute LCP fix

#webdev #performance #html #smallbusiness

On most small-business homepages, the slowest thing a visitor waits for is the big hero photo at the top. Google calls this the Largest Contentful Paint (LCP) element, and it's one of the Core Web Vitals. The common mistake: a theme or plugin adds loading="lazy" to every image, including the hero, so the browser deliberately waits before fetching the one image people see first.

Here's a 10-minute fix.

1. Find your LCP element

Open Chrome DevTools, go to Lighthouse, run a mobile report, and look for "Largest Contentful Paint element". On most local-business sites it's the hero image or a background image in the first section.

2. Never lazy-load it

<!-- Bad: the browser waits until layout to fetch it -->
<img src="/img/hero.webp" loading="lazy" alt="Our bakery counter">

<!-- Good: fetched immediately, with high priority -->
<img src="/img/hero.webp" fetchpriority="high" width="1200" height="700"
     alt="Our bakery counter">
Enter fullscreen mode Exit fullscreen mode

Keep loading="lazy" for images further down the page. That's where it helps.

3. If the hero is a CSS background, preload it

The browser can't discover CSS background images until it has downloaded and parsed the stylesheet. Tell it early:

<link rel="preload" as="image" href="/img/hero.webp" fetchpriority="high">
Enter fullscreen mode Exit fullscreen mode

4. Make the file small enough to matter

Priority doesn't help a 3 MB JPEG. Export the hero as WebP or AVIF at the width it's actually displayed (around 1200 to 1600px for desktop) and use srcset so phones get a smaller one:

<img src="/img/hero-1200.webp"
     srcset="/img/hero-640.webp 640w, /img/hero-1200.webp 1200w"
     sizes="100vw" fetchpriority="high" width="1200" height="700" alt="...">
Enter fullscreen mode Exit fullscreen mode

5. Re-test

Run Lighthouse again. On the small-business sites we work on, these steps alone usually move LCP noticeably, without touching any other code.

Checklist

  • [ ] Hero image is not loading="lazy"
  • [ ] Hero has fetchpriority="high" (or a preload if it's a CSS background)
  • [ ] Hero is WebP/AVIF, sized to its display width, with srcset
  • [ ] Width and height set to avoid layout shift

If you'd rather have someone do it for you, NEXCOD builds and fixes fast websites for small businesses: nexcod.vercel.app or WhatsApp +1 289 902 5119.

Top comments (0)