Feature/pdp fetch priority

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+### Added
+
+- Added `fetchpriority: 'high'` for the first product image to prioritize loading of the main image and improve page load performance.
+
 ## [3.175.1] - 2024-09-11
 
 ### Fixed

react/components/ProductImages/Wrapper.js

@@ -16,6 +16,8 @@ const ProductImagesWrapper = props => {
     showPaginationDots,
     contentOrder,
     placeholder,
+    thumbCustomWidth,
+    thumbCustomHeight,
   } = useResponsiveValues(
     pick(
       [
@@ -25,6 +27,8 @@ const ProductImagesWrapper = props => {
         'showPaginationDots',
         'contentOrder',
         'placeholder',
+        'thumbCustomWidth',
+        'thumbCustomHeight',
       ],
       props
     )
@@ -93,6 +97,8 @@ const ProductImagesWrapper = props => {
       ModalZoomElement={props.ModalZoom}
       contentType={props.contentType}
       showImageLabel={props.showImageLabel}
+      thumbCustomWidth={thumbCustomWidth}
+      thumbCustomHeight={thumbCustomHeight}
       // Deprecated
       zoomProps={props.zoomProps}
       displayMode={props.displayMode}

react/components/ProductImages/components/Carousel/ThumbnailSwiper.js

@@ -22,7 +22,15 @@ const CSS_HANDLES = [
 ]
 
 const Thumbnail = props => {
-  const { alt, isVideo, thumbUrl, handles, aspectRatio = 'auto' } = props
+  const {
+    alt,
+    isVideo,
+    thumbUrl,
+    handles,
+    aspectRatio = 'auto',
+    thumbCustomWidth,
+    thumbCustomHeight,
+  } = props
 
   return (
     <>
@@ -39,7 +47,14 @@ const Thumbnail = props => {
           )} w-100 h-auto db`}
           itemProp="thumbnail"
           alt={alt}
-          src={imageUrl(thumbUrl, THUMB_SIZE, THUMB_MAX_SIZE, aspectRatio)}
+          src={imageUrl(
+            thumbUrl,
+            THUMB_SIZE,
+            THUMB_MAX_SIZE,
+            aspectRatio,
+            thumbCustomWidth,
+            thumbCustomHeight
+          )}
         />
       </figure>
       <div
@@ -67,6 +82,8 @@ const ThumbnailSwiper = props => {
     thumbnailAspectRatio,
     thumbnailMaxHeight,
     displayThumbnailsArrows,
+    thumbCustomWidth,
+    thumbCustomHeight,
     ...swiperProps
   } = props
 
@@ -151,9 +168,6 @@ const ThumbnailSwiper = props => {
         touchRatio={1}
         threshold={8}
         navigation={navigationConfig}
-        /* Slides are grouped when thumbnails arrows are enabled
-         * so that clicking on next/prev will scroll more than
-         * one thumbnail */
         slidesPerGroup={displayThumbnailsArrows ? 4 : 1}
         freeMode={false}
         mousewheel={false}
@@ -183,6 +197,8 @@ const ThumbnailSwiper = props => {
                 alt={slide.alt}
                 thumbUrl={slide.thumbUrl || thumbUrls[i]}
                 aspectRatio={thumbnailAspectRatio}
+                thumbCustomWidth={thumbCustomWidth}
+                thumbCustomHeight={thumbCustomHeight}
               />
             </SwiperSlide>
           )

react/components/ProductImages/components/Carousel/index.js

@@ -249,6 +249,8 @@ class Carousel extends Component {
       showNavigationArrows = true,
       thumbnailVisibility,
       displayThumbnailsArrows = false,
+      thumbCustomWidth,
+      thumbCustomHeight,
     } = this.props
 
     const hasSlides = slides && slides.length > 0
@@ -325,6 +327,8 @@ class Carousel extends Component {
         displayThumbnailsArrows={displayThumbnailsArrows}
         slides={slides}
         position={position}
+        thumbCustomWidth={thumbCustomWidth}
+        thumbCustomHeight={thumbCustomHeight}
       />
     )
 
@@ -414,6 +418,8 @@ Carousel.propTypes = {
     THUMBS_VISIBILITY.VISIBLE,
     THUMBS_VISIBILITY.HIDDEN,
   ]),
+  thumbCustomWidth: PropTypes.number,
+  thumbCustomHeight: PropTypes.number,
 }
 
 export default withCssHandles(CSS_HANDLES)(Carousel)

react/components/ProductImages/components/ProductImage.tsx

@@ -107,6 +107,7 @@ const ProductImage: FC<Props> = ({
             alt={alt}
             title={alt}
             loading={index === 0 ? 'eager' : 'lazy'}
+            {...((index === 0 ? { fetchpriority: 'high' } : {}) as any)}
             // WIP
             // The value of the "sizes" attribute means: if the window has at most 64.1rem of width,
             // the image will be of a width of 100vw. Otherwise, the

react/components/ProductImages/index.js

@@ -35,6 +35,8 @@ const ProductImages = ({
   zoomFactor,
   ModalZoomElement,
   contentType = 'all',
+  thumbCustomWidth,
+  thumbCustomHeight,
   // Deprecated
   zoomProps,
   displayMode,
@@ -152,6 +154,8 @@ const ProductImages = ({
         thumbnailsOrientation={thumbnailsOrientation}
         displayThumbnailsArrows={displayThumbnailsArrows}
         thumbnailVisibility={thumbnailVisibility}
+        thumbCustomWidth={thumbCustomWidth}
+        thumbCustomHeight={thumbCustomHeight}
         // Deprecated
         zoomProps={zoomProps}
       />

react/components/ProductImages/utils/aspectRatioUtil.tsx

@@ -44,30 +44,33 @@ export const imageUrl = (
   src: string,
   size: number,
   maxSize: number,
-  aspectRatio?: AspectRatio
+  aspectRatio?: AspectRatio,
+  customWidth?: number,
+  customHeight?: number
   // eslint-disable-next-line max-params
 ) => {
-  let width = size
-  let height: number | string = 'auto'
-
-  if (aspectRatio && aspectRatio !== 'auto') {
-    // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
-    height = size * (parseAspectRatio(aspectRatio) || 1)
-
-    if (width > maxSize) {
-      height /= width / maxSize
-      width = maxSize
+  let width = customWidth || size
+  let height: number | string = customHeight || 'auto'
+
+  if (!customWidth || !customHeight) {
+    if (aspectRatio && aspectRatio !== 'auto') {
+      height = size * (parseAspectRatio(aspectRatio) || 1)
+
+      if (width > maxSize) {
+        height /= width / maxSize
+        width = maxSize
+      }
+
+      if (height > maxSize) {
+        width /= height / maxSize
+        height = maxSize
+      }
+
+      width = Math.round(width)
+      height = Math.round(height)
+    } else {
+      width = Math.min(maxSize, width)
     }
-
-    if (height > maxSize) {
-      width /= height / maxSize
-      height = maxSize
-    }
-
-    width = Math.round(width)
-    height = Math.round(height)
-  } else {
-    width = Math.min(maxSize, width)
   }
 
   return changeImageUrlSize(src, width, height)