Latest Perf, Changes

components/product/ProductCard/ProductCard.module.css

@@ -1,5 +1,7 @@
 .root {
-  @apply relative max-h-full w-full box-border overflow-hidden bg-no-repeat bg-center bg-cover transition-transform ease-linear cursor-pointer;
+  @apply relative max-h-full w-full box-border overflow-hidden
+  bg-no-repeat bg-center bg-cover transition-transform
+  ease-linear cursor-pointer;
   height: 100% !important;
 
   &:hover {
@@ -77,8 +79,8 @@
 
 .squareBg:before {
   @apply transition ease-in-out duration-500 bg-repeat-space w-full h-full block;
-  content: '';
   background-image: url('/bg-products.svg');
+  content: '';
 }
 
 .simple {
@@ -125,8 +127,12 @@
 }
 
 .imageContainer {
-  overflow: hidden;
   @apply flex items-center justify-center;
+  overflow: hidden;
+
+  & > div {
+    min-width: 100%;
+  }
 }
 
 .image {

components/product/ProductCard/ProductCard.tsx

@@ -13,8 +13,10 @@ interface Props {
   variant?: 'slim' | 'simple'
   imgWidth: number | string
   imgHeight: number | string
-  priority?: boolean
   imgLayout?: 'fixed' | 'intrinsic' | 'responsive' | undefined
+  imgPriority?: boolean
+  imgLoading?: 'eager' | 'lazy'
+  imgSizes?: string
 }
 
 const ProductCard: FC<Props> = ({
@@ -23,8 +25,10 @@ const ProductCard: FC<Props> = ({
   variant,
   imgWidth,
   imgHeight,
+  imgPriority,
+  imgLoading,
+  imgSizes,
   imgLayout = 'responsive',
-  priority,
 }) => {
   const src = p.images.edges?.[0]?.node?.urlOriginal!
   const { price } = usePrice({
@@ -46,13 +50,15 @@ const ProductCard: FC<Props> = ({
               </span>
             </div>
             <Image
+              quality="85"
+              width={imgWidth}
+              sizes={imgSizes}
+              height={imgHeight}
+              layout={imgLayout}
+              loading={imgLoading}
+              priority={imgPriority}
               src={p.images.edges?.[0]?.node.urlOriginal!}
               alt={p.images.edges?.[0]?.node.altText || 'Product Image'}
-              width={imgWidth}
-              height={imgHeight}
-              priority={priority}
-              layout={imgLayout}
-              quality="85"
             />
           </div>
         ) : (
@@ -73,13 +79,16 @@ const ProductCard: FC<Props> = ({
             </div>
             <div className={s.imageContainer}>
               <Image
-                className={s.image}
-                alt={p.name}
-                src={src}
-                width={imgWidth}
-                height={imgHeight}
-                priority={priority}
                 quality="85"
+                src={src}
+                alt={p.name}
+                className={s.image}
+                width={imgWidth}
+                sizes={imgSizes}
+                height={imgHeight}
+                layout={imgLayout}
+                loading={imgLoading}
+                priority={imgPriority}
               />
             </div>
           </>

components/ui/Grid/Grid.module.css

@@ -1,6 +1,7 @@
 .root {
-  --row-height: calc(100vh - 80px - 56px);
+  --row-height: calc(100vh - 88px);
   @apply grid grid-cols-1 gap-0;
+  min-height: var(--row-height);
 
   @screen lg {
     @apply grid-cols-3 grid-rows-2;

lib/browser.ts

@@ -1,16 +0,0 @@
-import * as Bowser from 'bowser'
-
-export function isDesktop(): boolean {
-  const browser = Bowser.getParser(window.navigator.userAgent)
-  return browser.getPlatform().type === 'desktop'
-}
-
-export function isMobile(): boolean {
-  const browser = Bowser.getParser(window.navigator.userAgent)
-  return browser.getPlatform().type === 'mobile'
-}
-
-export function isTablet(): boolean {
-  const browser = Bowser.getParser(window.navigator.userAgent)
-  return browser.getPlatform().type === 'tablet'
-}

next.config.js

@@ -1,6 +1,5 @@
 module.exports = {
   images: {
-    imagesSizes: [320, 480, 820, 1280],
     domains: ['cdn11.bigcommerce.com'],
   },
   i18n: {

pages/index.tsx

@@ -1,10 +1,9 @@
-import { useMemo } from 'react'
-import type { GetStaticPropsContext, InferGetStaticPropsType } from 'next'
 import rangeMap from '@lib/range-map'
 import { Layout } from '@components/common'
-import { Grid, Marquee, Hero } from '@components/ui'
 import { ProductCard } from '@components/product'
+import { Grid, Marquee, Hero } from '@components/ui'
 import HomeAllProductsGrid from '@components/common/HomeAllProductsGrid'
+import type { GetStaticPropsContext, InferGetStaticPropsType } from 'next'
 
 import { getConfig } from '@bigcommerce/storefront-data-hooks/api'
 import getAllProducts from '@bigcommerce/storefront-data-hooks/api/operations/get-all-products'
@@ -90,10 +89,10 @@ export default function Home({
           <ProductCard
             key={node.path}
             product={node}
-            // The first image is the largest one in the grid
             imgWidth={i === 0 ? 1080 : 540}
             imgHeight={i === 0 ? 1080 : 540}
-            priority
+            imgPriority
+            imgLoading="eager"
           />
         ))}
       </Grid>
@@ -124,7 +123,6 @@ export default function Home({
           <ProductCard
             key={node.path}
             product={node}
-            // The second image is the largest one in the grid
             imgWidth={i === 1 ? 1080 : 540}
             imgHeight={i === 1 ? 1080 : 540}
           />