Improving LCP on large frontends

Largest Contentful Paint (LCP) is the web vital that hurts most e-commerce frontends. Customers don’t care if your scripts are bundled nicely — they care if the hero image and product tiles load fast. On large sites with global traffic, personalization, and dozens of third-party scripts, LCP can easily creep past the 2.5s threshold. Here are 10 fixes we’ve actually implemented at scale.

1. Serve the right image format
On one project, simply moving PLP hero banners from JPEG → AVIF cut 400KB per request. Combined with responsive <img srcset> and sizes, mobile LCP improved by ~350ms.

2. Load hero images via <link rel="preload">
The main hero is almost always the LCP candidate. Preloading it in the HTML head ensures the browser starts fetching it before the rest of the layout.

3. Push heavy assets closer with a CDN
Use a CDN that supports image optimization at the edge (Akamai Image Manager, Cloudflare Polish, Fastly Image Optimization). This avoids shipping a 2000px image to a 375px viewport.

4. Inline only the CSS you need above-the-fold
Critical CSS doesn’t mean “inline everything.” For us, inlining header + hero styles (2–3KB) cut LCP by 200ms without bloating HTML.

5. Lazy-load carousels and non-critical sections
On e-commerce homepages, below-the-fold sliders are notorious. Deferring their JavaScript initialization kept the main thread clear and reduced render delay.

6. Optimize server response (TTFB)
A 1s backend delay will kill your LCP no matter how well you optimize the frontend. Caching API responses for PLP and PDP headers in Redis dropped TTFB from 900ms → 120ms on average.

7. Use signed exchanges (SXG)
If you rely on SEO traffic, SXG can make Google serve a pre-rendered copy of your page directly from their cache. We saw ~20% faster LCP on organic search landings.

8. Reduce web font impact
Self-host fonts and preload the body font only. Everything else should use font-display: swap. On one storefront, this dropped CLS while improving LCP by ~150ms.

9. Audit and kill third-party scripts
Each tag manager pixel, heatmap, or chat widget delays your hero render. On a campaign page, removing a single unused A/B testing script shaved ~400ms from LCP.

10. Monitor real users, not just lab data
Tools like New Relic, SpeedCurve, or CrUX let you track LCP across geographies and devices. We caught a regression where EU mobile users had LCP 800ms slower because an image CDN wasn’t regionally distributed.

---

Example: Preloading the hero image in Nuxt 3

export default defineNuxtConfig({
  app: {
    head: {
      link: [
        { rel: 'preload', as: 'image', href: '/images/homepage-hero.avif' }
      ]
    }
  }
})

---

The main takeaway: improving LCP is less about one magic trick, and more about a hundred small, deliberate changes. Every ms you shave off the hero render is money in the bank — we’ve seen conversion rates move when LCP dropped just 300ms.