Improve LCP on product miniature with fetchpriority

[buggyzap]

Questions	Answers
Description?	In a Category listing page, if we set all miniature product images with loading=lazy we got an LCP issue because for sure the LCP is a miniature product image, in most cases. If we load first 4 images with fetchpriority=high we just tell to browser to load these images first and we fix the LCP issue and improve Web Vitals.
Type?	improvement
BC breaks?	no
Deprecations?	no

[Hlavtox]

Well, this depends. If you have long category position, LCP element is the description, then why to load some miniatures below the fold?

Also, it would be maybe better to use smarty loop counter for this, maybe the category position property can be malfuctioned or something.

[buggyzap]

Well, this depends. If you have long category position, LCP element is the description, then why to load some miniatures below the fold?

Also, it would be maybe better to use smarty loop counter for this, maybe the category position property can be malfuctioned or something.

Hi @Hlavtox , I think in an e-commerce website is nice to have, and well considered by developers, to have on a listing page some products in first viewport height and not only just menu + category name and subcategories/description, if we have to scroll because we don't see products from 0 to ~800px it's a problem.

The $position coming from productlist.tpl

{foreach from=$products item="product" key="position"}
       {include file="catalog/_partials/miniatures/product.tpl" product=$product position=$position productClasses=''}
   {/foreach}

I think is the array index so it start from zero everytime, or it refers to product position in current category so it changes and can be different from zero? In this case we need to pass a smarty loop count as you say on this snippet.

Thank you for your revision and your time.