Audit Results

// next.config.js or API route — no cache headers
// Response header: (none related to caching)

// In Next.js getServerSideProps or middleware for /collections/* pages:
export async function getServerSideProps(context) {
  context.res.setHeader(
    'Cache-Control',
    'public, s-maxage=60, stale-while-revalidate=300'
  );
  // ... fetch collection data
  return { props: { /* ... */ } };
}

<Image
  src={product.image}
  alt={product.name}
  width={384}
  height={480}
/>

<!-- In _document.js or Head for collection pages -->
<link
  rel="preload"
  as="image"
  href={firstProduct.image.replace('_384x', '_384x')}
  fetchpriority="high"
/>

<!-- First product card image -->
<Image
  src={product.image}
  alt={product.name}
  width={384}
  height={480}
  priority={index === 0}
  loading={index < 6 ? 'eager' : 'lazy'}
  fetchPriority={index === 0 ? 'high' : 'auto'}
/>

.usp-revolving_usp-revolving__SjiW5 {
  /* No reserved height */
}
.product-card_tag-container__u_4lQ {
  /* Dynamically sized */
}

.usp-revolving_usp-revolving__SjiW5 {
  min-height: 40px;
  contain: layout style;
}
.product-card_tag-container__u_4lQ {
  position: absolute;
  bottom: 12px;
  left: 12px;
  z-index: 1;
}