They prefetched the LCP image and wondered why it was slow

They prefetched the LCP image and wondered why it was slow

A fashion store added resource hints to fix a slow hero. Six weeks later LCP was still 3.9s in the field, CWV 'Poor', -9% on category queries that had been climbing.

The investigation found the wrong hint on the right resource. They'd used rel=prefetch on the hero image. Prefetch is low-priority — 'maybe needed for a future navigation.' The browser fetched it lazily, after render-blocking JS. The hero, the actual LCP element, queued behind scripts that didn't matter.

Turns out preload and prefetch sound like synonyms and behave like opposites. Preload says 'I need this for the current page now, high priority.' Prefetch says 'I might need this for the next page, whenever.' For an LCP element, only preload is correct.

They swapped to rel=preload with fetchpriority=high and dropped the prefetch.

LCP: 3.9s → 1.9s in four weeks; CWV flipped to 'Good', category queries recovered +13% in eight weeks. One wrong word in a link tag cost them two seconds and a quarter of climbing. Preload the now. Prefetch the next.