Merge pull request #5674 from magento-performance/MC-23383

[Performance] Introduce image lazy loading mechanism

Author: naydav

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

@@ -8,5 +8,9 @@
 <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>
+        <!-- Variable to enable lazy loading for catalog product images without borders.
+        If you enable this setting your small size images without borders may be stretched in template.
+        So be sure you have correct image sizes. -->
+        <var name="enable_lazy_loading_for_images_without_borders">0</var>
     </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,16 @@
 <?php
 /** @var $block \Magento\Catalog\Block\Product\Image */
 /** @var $escaper \Magento\Framework\Escaper */
+/**
+ * Enable lazy loading for images with borders and if variable enable_lazy_loading_for_images_without_borders
+ * is enabled in view.xml. Otherwise small size images without borders may be distorted. So max-width is used for them
+ * to prevent stretching and lazy loading does not work.
+ */
+$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 +29,12 @@
             <?php endforeach; ?>
             src="<?= $escaper->escapeUrl($block->getImageUrl()) ?>"
             loading="lazy"
-            width="<?= $escaper->escapeHtmlAttr($block->getWidth()) ?>"
-            height="<?= $escaper->escapeHtmlAttr($block->getHeight()) ?>"
+            <?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>