From aa6376e96fd62d31e29de7f049d6b6643f793af4 Mon Sep 17 00:00:00 2001
From: Yegor Shytikov <egorshitikov@gmail.com>
Date: Sun, 20 Jul 2025 22:52:36 -0700
Subject: [PATCH 1/2] Improve performace of the Category page

Lazy load all images except 1. Lazy load negatively impacts LCP metric you shouldn't lazy load LCP element for category it is first image if no big image in the description. We are adding global counter
---
 .../frontend/templates/product/image_with_borders.phtml  | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/app/code/Magento/Catalog/view/frontend/templates/product/image_with_borders.phtml b/app/code/Magento/Catalog/view/frontend/templates/product/image_with_borders.phtml
index ba0ab0c91f393..47ae0b90642f3 100644
--- a/app/code/Magento/Catalog/view/frontend/templates/product/image_with_borders.phtml
+++ b/app/code/Magento/Catalog/view/frontend/templates/product/image_with_borders.phtml
@@ -11,6 +11,12 @@
 $width = (int)$block->getWidth();
 $height = (int)$block->getHeight();
 $paddingBottom = $block->getRatio() * 100;
+
+if (!isset($_GET['cat_image'])) {
+    $_GET['cat_image'] = 0;
+}
+$_GET['cat_image']++;
+$isProductPage = ($block->getRequest()->getFullActionName() === 'catalog_product_view');
 ?>
 <span class="product-image-container product-image-container-<?= /* @noEscape */ $block->getProductId() ?>">
     <span class="product-image-wrapper">
@@ -19,7 +25,10 @@ $paddingBottom = $block->getRatio() * 100;
                 <?= $escaper->escapeHtmlAttr($name) ?>="<?= $escaper->escapeHtml($value) ?>"
             <?php endforeach; ?>
             src="<?= $escaper->escapeUrl($block->getImageUrl()) ?>"
+            <?php if ($_GET['cat_image'] > 1 || $isProductPage) { ?>
             loading="lazy"
+            fetchpriority="low"
+            <?php }?>
             width="<?= $escaper->escapeHtmlAttr($block->getWidth()) ?>"
             height="<?= $escaper->escapeHtmlAttr($block->getHeight()) ?>"
             alt="<?= $escaper->escapeHtmlAttr($block->getLabel()) ?>"/></span>

From 1ee76d5012da68b28cacf0aa58dcd4e3498d8e41 Mon Sep 17 00:00:00 2001
From: Yegor Shytikov <egorshitikov@gmail.com>
Date: Wed, 30 Jul 2025 13:30:23 -0700
Subject: [PATCH 2/2] Update image_with_borders.phtml

---
 .../product/image_with_borders.phtml          | 21 +++++++++++++------
 1 file changed, 15 insertions(+), 6 deletions(-)

diff --git a/app/code/Magento/Catalog/view/frontend/templates/product/image_with_borders.phtml b/app/code/Magento/Catalog/view/frontend/templates/product/image_with_borders.phtml
index 47ae0b90642f3..b8b9fac28a524 100644
--- a/app/code/Magento/Catalog/view/frontend/templates/product/image_with_borders.phtml
+++ b/app/code/Magento/Catalog/view/frontend/templates/product/image_with_borders.phtml
@@ -12,11 +12,17 @@ $width = (int)$block->getWidth();
 $height = (int)$block->getHeight();
 $paddingBottom = $block->getRatio() * 100;
 
-if (!isset($_GET['cat_image'])) {
-    $_GET['cat_image'] = 0;
+$globalBlock = $block->getLayout()->getBlock('header');
+if ($globalBlock) {
+    $catImage = $globalBlock->getData('cat_image_counter') ?? 0;
+    $catImage++;
+    $globalBlock->setData('cat_image_counter', $catImage);
+} else {
+    $catImage = 10;
 }
-$_GET['cat_image']++;
+
 $isProductPage = ($block->getRequest()->getFullActionName() === 'catalog_product_view');
+$isHomePage = ($block->getFullActionName() === 'cms_index_index');
 ?>
 <span class="product-image-container product-image-container-<?= /* @noEscape */ $block->getProductId() ?>">
     <span class="product-image-wrapper">
@@ -24,11 +30,14 @@ $isProductPage = ($block->getRequest()->getFullActionName() === 'catalog_product
             <?php foreach ($block->getCustomAttributes() as $name => $value): ?>
                 <?= $escaper->escapeHtmlAttr($name) ?>="<?= $escaper->escapeHtml($value) ?>"
             <?php endforeach; ?>
-            src="<?= $escaper->escapeUrl($block->getImageUrl()) ?>"
-            <?php if ($_GET['cat_image'] > 1 || $isProductPage) { ?>
+             src="<?=$escaper->escapeUrl($block->getImageUrl())?>"
+            <?php if ($catImage > 1 || $isProductPage || $isHomePage) { ?>
             loading="lazy"
             fetchpriority="low"
-            <?php }?>
+            <?php } else { ?>
+            loading="eager"
+            fetchpriority="high"
+            <?php } ?>
             width="<?= $escaper->escapeHtmlAttr($block->getWidth()) ?>"
             height="<?= $escaper->escapeHtmlAttr($block->getHeight()) ?>"
             alt="<?= $escaper->escapeHtmlAttr($block->getLabel()) ?>"/></span>