vtex · renatomaurovtex · Jun 2, 2026 · Jun 2, 2026 · Jun 2, 2026
@@ -5,7 +5,6 @@ import {
   SearchProvider,
 } from '@faststore/sdk'
 import { BreadcrumbJsonLd, NextSeo } from 'next-seo'
-import Head from 'next/head'
 import { useRouter } from 'next/router'
 import { useMemo } from 'react'
 
@@ -15,12 +14,13 @@ import type {
   ServerManyProductsQueryQueryVariables,
 } from '@generated/graphql'
 import { ITEMS_PER_PAGE } from 'src/constants'
+import { getCriticalProductImagePreload } from 'src/sdk/head/getCriticalProductImagePreload'
+import useServerHeadComponents from 'src/sdk/head/useServerHeadComponents'
 import { useApplySearchState } from 'src/sdk/search/state'
 
 import type { PLPContentType } from 'src/server/cms/plp'
 
 import storeConfig from '../../../../discovery.config'
-import { faststoreLoader } from 'src/components/ui/Image/loader'
 import ProductListing from './ProductListing'
 import { getStoreURL } from 'src/sdk/localization/useLocalizationConfig'
 
@@ -131,15 +131,12 @@ export default function ProductListingPage({
   //   30vw × 412 × 2 = 247px → browser picks 320 (first step ≥ 247 in the srcset).
   // Using 320 here makes the preload URL exactly match the <img> srcset selection,
   // so the browser can reuse the preloaded response instead of fetching a second URL.
-  const rawLcpImageUrl: string | undefined =
+  const lcpImagePreload = getCriticalProductImagePreload(
     server?.search?.products?.edges?.[0]?.node?.image?.[0]?.url
-  const lcpImageUrl = rawLcpImageUrl
-    ? faststoreLoader({
-        src: rawLcpImageUrl,
-        width: 320,
-        quality: 75,
-      })
-    : undefined
+  )
+  const serverHeadComponents = useServerHeadComponents(
+    lcpImagePreload ? <link {...lcpImagePreload} /> : null
+  )
 
   return (
     <SearchProvider
@@ -148,16 +145,7 @@ export default function ProductListingPage({
       shouldResetInfiniteScroll={!storeConfig.experimental?.scrollRestoration}
       {...searchParams}
     >
-      {lcpImageUrl && (
-        <Head>
-          <link
-            rel="preload"
-            as="image"
-            href={lcpImageUrl}
-            fetchPriority="high"
-          />
-        </Head>
-      )}
+      {serverHeadComponents}
       {/* SEO */}
       <NextSeo
         title={title}

diff --git a/packages/core/src/components/ui/Logo/Logo.tsx b/packages/core/src/components/ui/Logo/Logo.tsx
@@ -7,7 +7,7 @@
   loading?: ImageProps['loading']
 }
 
-function Logo({ alt, src, loading = 'lazy' }: LogoProps) {
+function Logo({ alt, src, loading = 'eager' }: LogoProps) {
   if (!src) {
     console.error('Logo image src is required.')
     return null

diff --git a/packages/core/src/sdk/head/getCriticalProductImagePreload.ts b/packages/core/src/sdk/head/getCriticalProductImagePreload.ts
@@ -0,0 +1,27 @@
+import { faststoreLoader } from 'src/components/ui/Image/loader'
+
+export interface CriticalProductImagePreload {
+  rel: 'preload'
+  as: 'image'
+  href: string
+  fetchPriority: 'high'
+}
+
+export function getCriticalProductImagePreload(
+  imageUrl?: string
+): CriticalProductImagePreload | null {
+  if (!imageUrl) {
+    return null
+  }
+
+  return {
+    rel: 'preload',
+    as: 'image',
+    href: faststoreLoader({
+      src: imageUrl,
+      width: 320,
+      quality: 75,
+    }),
+    fetchPriority: 'high',
+  }
+}
diff --git a/packages/core/src/sdk/head/useServerHeadComponents.tsx b/packages/core/src/sdk/head/useServerHeadComponents.tsx
@@ -0,0 +1,10 @@
+import Head from 'next/head'
+import type { ReactNode } from 'react'
+
+export default function useServerHeadComponents(components: ReactNode) {
+  if (!components) {
+    return null
+  }
+
+  return <Head>{components}</Head>
+}
@@ -0,0 +1,40 @@
+import { render } from '@testing-library/react'
+
+import Logo from 'src/components/ui/Logo/Logo'
+
+const imageSpy = vi.fn()
+
+vi.mock('src/components/ui/Image', () => ({
+  Image: (props: Record<string, unknown>) => {
+    imageSpy(props)
+    return <div data-testid="logo-image" />
+  },
+}))
+
+describe('Logo', () => {
+  beforeEach(() => {
+    imageSpy.mockClear()
+  })
+
+  it('uses eager loading by default', () => {
+    render(<Logo alt="FastStore" src="/logo.svg" />)
+
+    expect(imageSpy).toHaveBeenCalledTimes(1)
+    expect(imageSpy).toHaveBeenCalledWith(
+      expect.objectContaining({
+        loading: 'eager',
+      })
+    )
+  })
+
+  it('keeps explicit loading overrides', () => {
+    render(<Logo alt="FastStore" src="/logo.svg" loading="lazy" />)
+
+    expect(imageSpy).toHaveBeenCalledTimes(1)
+    expect(imageSpy).toHaveBeenCalledWith(
+      expect.objectContaining({
+        loading: 'lazy',
+      })
+    )
+  })
+})
@@ -0,0 +1,16 @@
+import { getCriticalProductImagePreload } from 'src/sdk/head/getCriticalProductImagePreload'
+
+describe('getCriticalProductImagePreload', () => {
+  it('returns null when no image URL is provided', () => {
+    expect(getCriticalProductImagePreload()).toBeNull()
+  })
+
+  it('builds preload metadata for a valid image URL', () => {
+    expect(getCriticalProductImagePreload('/product-image.jpg')).toEqual({
+      rel: 'preload',
+      as: 'image',
+      href: '/product-image.jpg',
+      fetchPriority: 'high',
+    })
+  })
+})