MC-23383: Introduce image lazy loading mechanism

Author: adifucan

app/code/Magento/Catalog/etc/view.xml

@@ -8,5 +8,6 @@
 <view xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/view.xsd">
     <vars module="Magento_Catalog">
         <var name="product_image_white_borders">1</var>
+        <var name="enable_lazy_loading_for_images_without_borders">0</var> <!-- variable to enable lazy loading for catalog product images without borders -->
     </vars>
 </view>

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

@@ -8,7 +8,7 @@
 /** @var $block \Magento\Catalog\Block\Product\Image */
 /** @var $escaper \Magento\Framework\Escaper */
 ?>
-
+<!--deprecated template as image_with_borders is a primary one-->
 <img class="photo image <?= $escaper->escapeHtmlAttr($block->getClass()) ?>"
     <?php foreach ($block->getCustomAttributes() as $name => $value): ?>
         <?= $escaper->escapeHtmlAttr($name) ?>="<?= $escaper->escapeHtmlAttr($value) ?>"

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

@@ -7,6 +7,8 @@
 <?php
 /** @var $block \Magento\Catalog\Block\Product\Image */
 /** @var $escaper \Magento\Framework\Escaper */
+$borders = (bool)$block->getVar('product_image_white_borders', 'Magento_Catalog');
+$enableLazyLoadingWithoutBorders = (bool)$block->getVar('enable_lazy_loading_for_images_without_borders', 'Magento_Catalog');
 ?>
 
 <span class="product-image-container"
@@ -19,7 +21,13 @@
             <?php endforeach; ?>
             src="<?= $escaper->escapeUrl($block->getImageUrl()) ?>"
             loading="lazy"
-            width="<?= $escaper->escapeHtmlAttr($block->getWidth()) ?>"
-            height="<?= $escaper->escapeHtmlAttr($block->getHeight()) ?>"
+            <!-- Enable lazy loading for images with borders and if variable enable_lazy_loading_for_images_without_borders in view.xml is enabled -->
+            <?php if ($borders || $enableLazyLoadingWithoutBorders) :?>
+                width="<?= $escaper->escapeHtmlAttr($block->getWidth()) ?>"
+                height="<?= $escaper->escapeHtmlAttr($block->getHeight()) ?>"
+            <?php else :?>
+                max-width="<?= $escaper->escapeHtmlAttr($block->getWidth()) ?>"
+                max-height="<?= $escaper->escapeHtmlAttr($block->getHeight()) ?>"
+            <?php endif; ?>
             alt="<?= $escaper->escapeHtmlAttr($block->getLabel()) ?>"/></span>
 </span>

app/code/Magento/Theme/etc/adminhtml/system.xml

@@ -9,13 +9,13 @@
     <system>
         <section id="dev" translate="label" type="text" sortOrder="920" showInDefault="1" showInWebsite="1" showInStore="1">
             <group id="js">
-                <field id="move_script_to_bottom" translate="label" type="select" sortOrder="25" showInDefault="1" showInWebsite="1" showInStore="1" canRestore="1">
+                <field id="move_script_to_bottom" translate="label" type="select" sortOrder="25" showInDefault="1" showInWebsite="0" showInStore="0" canRestore="1">
                     <label>Move JS code to the bottom of the page</label>
                     <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
                 </field>
             </group>
             <group id="css">
-                <field id="use_css_critical_path" translate="label comment" type="select" sortOrder="30" showInDefault="1" showInWebsite="1" showInStore="1" canRestore="1">
+                <field id="use_css_critical_path" translate="label comment" type="select" sortOrder="30" showInDefault="1" showInWebsite="0" showInStore="0" canRestore="1">
                     <label>Use CSS critical path</label>
                     <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
                     <comment>

app/code/Magento/Theme/view/frontend/templates/html/header/criticalCss.phtml

@@ -12,4 +12,4 @@
 
 <style type="text/css" data-type="criticalCss">
     <?= /* @noEscape */ $criticalCssViewModel->getCriticalCssData() ?>
-</style>
+</style>