search

PrestaShop / hummingbird

77 stars 73 forks source link

Changed lazyloading with highest fetchpriority in category header #587

Closed buggyzap closed 7 months ago

buggyzap commented 7 months ago
Questions Answers
Description? I have changed the lazyloading with a more accurate property for this element, the fetchpriority=high.
Type? improvement
BC breaks? no
Deprecations? no
How to test? Open Chrome devtools in Performance tab and measure that image is loading first.

Common scenario

We have to load an header image, the LCP of the page depends on it, so we cannot load it in lazy loading mode but in fetchpriority=high, so in network order load of resources we get an highest priority and a fastest rendering.

Additional Resources

https://web.dev/articles/fetch-priority

ga-devfront commented 7 months ago

Interesting, does this really benefit all devices? Do we really feel a change in performance? as @kpodemski suggests I think we can mix that with loading="eager". @tblivet an opinion?

tblivet commented 7 months ago

I also agree with adding loading eager 👍

buggyzap commented 7 months ago

https://stackoverflow.com/questions/77744344/is-it-okay-to-use-both-fetchpriority-high-and-loading-eager-in-img-tag

We can also add loading eager 👍

Hi guys, loading eager is the default value so its redundant to add it: https://www.w3schools.com/tags/att_img_loading.asp

We can just add fetchpriority.