What to build
The likely LCP element on PDP and collection pages doesn't have priority, so Next emits no <link rel="preload"> for it. Browsers find the image only after parsing the surrounding markup.
product-gallery.tsx:80-89 — primary gallery image uses loading="eager" but omits priority={true}. On a product page this is the LCP element.products-content.tsx:63-65 — CollectionProductCard is rendered without any priority for the first row. The first row is above the fold on most viewports.
Add:
priority={true} on <Image> in product-gallery.tsx for the primary image (the one matching initialImage).- Pass a
priority prop down CollectionProductCard → ProductCard → <Image> for the first N cards (e.g. first row for the default grid-cols-[repeat(auto-fill,minmax(11rem,1fr))] — pick a count that covers above the fold at the smallest desktop breakpoint).
Acceptance criteria
Blocked by
None — can start immediately.
References
apps/storefront/src/components/products/product-gallery.tsx:80apps/storefront/src/app/[domain]/[locale]/products/products-content.tsx:63apps/storefront/src/components/product-card/product-card.tsx
What to build
The likely LCP element on PDP and collection pages doesn't have
priority, so Next emits no<link rel="preload">for it. Browsers find the image only after parsing the surrounding markup.product-gallery.tsx:80-89— primary gallery image usesloading="eager"but omitspriority={true}. On a product page this is the LCP element.products-content.tsx:63-65—CollectionProductCardis rendered without anypriorityfor the first row. The first row is above the fold on most viewports.Add:
priority={true}on<Image>inproduct-gallery.tsxfor the primary image (the one matchinginitialImage).priorityprop downCollectionProductCard→ProductCard→<Image>for the first N cards (e.g. first row for the defaultgrid-cols-[repeat(auto-fill,minmax(11rem,1fr))]— pick a count that covers above the fold at the smallest desktop breakpoint).Acceptance criteria
<head>includes<link rel="preload" as="image" href="<primary product image url>"><head>preloads the first row of card imagespriorityregressions — only the actually-above-the-fold images get the boostBlocked by
None — can start immediately.
References
apps/storefront/src/components/products/product-gallery.tsx:80apps/storefront/src/app/[domain]/[locale]/products/products-content.tsx:63apps/storefront/src/components/product-card/product-card.tsx