MC-15440: Product Page Gallery Load Optimization

Author: vzabaznov

app/code/Magento/Catalog/Block/Product/View/Gallery.php

@@ -207,8 +207,8 @@ public function isMainImage($image)
      */
     public function getImageAttribute($imageId, $attributeName, $default = null)
     {
-        $attributes =
-            $this->getConfigView()->getMediaAttributes('Magento_Catalog', Image::MEDIA_TYPE_CONFIG_NODE, $imageId);
+        $attributes = $this->getConfigView()
+                ->getMediaAttributes('Magento_Catalog', Image::MEDIA_TYPE_CONFIG_NODE, $imageId);
         return $attributes[$attributeName] ?? $default;
     }
 
@@ -239,23 +239,4 @@ private function getGalleryImagesConfig()
 
         return $this->getData('gallery_images_config');
     }
-
-    /**
-     * Get main product image
-     *
-     * @param string $size
-     * @return string
-     */
-    public function getMainProductImage($size = 'medium_image_url')
-    {
-        foreach ($this->getGalleryImages() as $image) {
-            $image = $image->getData($size);
-
-            if (!$image) {
-                return $this->_imageHelper->getDefaultPlaceholderUrl('image');
-            }
-
-            return $image;
-        }
-    }
 }

app/code/Magento/Catalog/Helper/Image.php

@@ -6,6 +6,7 @@
 namespace Magento\Catalog\Helper;
 
 use Magento\Framework\App\Helper\AbstractHelper;
+use Magento\Framework\View\Element\Block\ArgumentInterface;
 
 /**
  * Catalog image helper
@@ -14,7 +15,7 @@
  * @SuppressWarnings(PHPMD.TooManyFields)
  * @since 100.0.2
  */
-class Image extends AbstractHelper
+class Image extends AbstractHelper implements ArgumentInterface
 {
     /**
      * Media config node

app/code/Magento/Catalog/view/frontend/layout/catalog_product_view.xml

@@ -121,7 +121,11 @@
                         </arguments>
                     </block>
                 </container>
-                <block class="Magento\Catalog\Block\Product\View\Gallery" name="product.info.media.image" template="Magento_Catalog::product/view/gallery.phtml"/>
+                <block class="Magento\Catalog\Block\Product\View\Gallery" name="product.info.media.image" template="Magento_Catalog::product/view/gallery.phtml">
+                    <arguments>
+                        <argument name="imageHelper" xsi:type="object">Magento\Catalog\Helper\Image</argument>
+                    </arguments>
+                </block>
                 <container name="skip_gallery_after.wrapper" htmlTag="div" htmlClass="action-skip-wrapper">
                     <block class="Magento\Framework\View\Element\Template" after="product.info.media.image" name="skip_gallery_after" template="Magento_Theme::html/skip.phtml">
                         <arguments>

app/code/Magento/Catalog/view/frontend/templates/product/view/gallery.phtml

@@ -13,10 +13,28 @@
  */
 ?>
 
+<?php
+    $images = $block->getGalleryImages()->getItems();
+    $mainImage = current(array_filter($images, function ($img) use ($block) {
+        return $block->isMainImage($img);
+    }));
+
+    if (!empty($images) && empty($mainImage)) {
+        $mainImage = $block->getGalleryImages()->getFirstItem();
+    }
+
+    $helper = $block->getData('imageHelper');
+    $mainImageData = $mainImage ?
+        $mainImage->getData('medium_image_url') :
+        $helper->getDefaultPlaceholderUrl('image');
+
+?>
+
 <div class="gallery-placeholder _block-content-loading" data-gallery-role="gallery-placeholder">
     <img
+        alt="main product photo"
         class="gallery-placeholder__image"
-        src="<?= /* @escapeNotVerified */ $block->getMainProductImage() ?>"
+        src="<?= /* @noEscape */ $mainImageData ?>"
     />
 </div>