vtex · renatomaurovtex · Jun 2, 2026 · Jun 2, 2026 · Jun 2, 2026
@@ -167,7 +167,7 @@ function Navbar({
                 title={logo.link ? logo.link.title : homeLabel}
                 prefetch={false}
               >
-                <Logo src={logo.src} alt={logo.alt} />
+                <Logo src={logo.src} alt={logo.alt} loading="eager" />
               </Link>
             </>
           )}

@@ -76,7 +76,7 @@ function NavbarSlider({
           title={logo.link ? logo.link.title : homeLabel}
           onClick={fadeOut}
         >
-          <Logo alt={logo.alt} src={logo.src} />
+          <Logo alt={logo.alt} src={logo.src} loading="eager" />
         </Link>
       </NavbarSliderHeader.Component>
       <NavbarSliderContent.Component {...NavbarSliderContent.props}>

@@ -15,12 +15,12 @@ import type {
   ServerManyProductsQueryQueryVariables,
 } from '@generated/graphql'
 import { ITEMS_PER_PAGE } from 'src/constants'
+import { getCriticalProductImagePreload } from 'src/components/ui/Image/getCriticalProductImagePreload'
 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,9 @@ 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
+  )
 
   return (
     <SearchProvider
@@ -148,14 +142,9 @@ export default function ProductListingPage({
       shouldResetInfiniteScroll={!storeConfig.experimental?.scrollRestoration}
       {...searchParams}
     >
-      {lcpImageUrl && (
+      {lcpImagePreload && (
         <Head>
-          <link
-            rel="preload"
-            as="image"
-            href={lcpImageUrl}
-            fetchPriority="high"
-          />
+          <link {...lcpImagePreload} />
         </Head>
       )}
       {/* SEO */}

@@ -0,0 +1,27 @@
+import { faststoreLoader } from './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',
+  }
+}
@@ -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 lazy loading by default', () => {
+    render(<Logo alt="FastStore" src="/logo.svg" />)
+
+    expect(imageSpy).toHaveBeenCalledTimes(1)
+    expect(imageSpy).toHaveBeenCalledWith(
+      expect.objectContaining({
+        loading: 'lazy',
+      })
+    )
+  })
+
+  it('keeps explicit loading overrides', () => {
+    render(<Logo alt="FastStore" src="/logo.svg" loading="eager" />)
+
+    expect(imageSpy).toHaveBeenCalledTimes(1)
+    expect(imageSpy).toHaveBeenCalledWith(
+      expect.objectContaining({
+        loading: 'eager',
+      })
+    )
+  })
+})
@@ -0,0 +1,29 @@
+import { getCriticalProductImagePreload } from 'src/components/ui/Image/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',
+    })
+  })
+
+  it('transforms VTEX IDs image URLs using the expected preload sizing', () => {
+    expect(
+      getCriticalProductImagePreload(
+        '/ids/1557582/image-6.jpg?v=638808503053270000'
+      )
+    ).toEqual({
+      rel: 'preload',
+      as: 'image',
+      href: '/ids/1557582-320-auto/image-6.webp?v=638808503053270000&quality=8',
+      fetchPriority: 'high',
+    })
+  })
+})