Limit fetchpriority="high" to 2 images on desktop for improved LCP performance

[gabridevs]

What problem is this solving?

This change optimizes the fetch priority logic for product images by reducing the number of items with fetchpriority="high" on desktop from 4 to 3. This adjustment aligns with Google's recommendation for optimal Largest Contentful Paint (LCP) performance, as outlined in this article.

According to Google:

Even without lazy loading, browsers don't initially load images with the highest priority because they're not render-blocking resources. You can signal to the browser which resources are more important by using the fetchpriority attribute on resources that may benefit from higher priority:

<img fetchpriority="high" src="...">

We recommend setting fetchpriority="high" on an <img> element if you think it's the page's LCP element. However, setting a high priority on more than one or two images makes prioritization less effective at improving LCP.

By limiting the fetchpriority="high" attribute to only the most critical images (3 on desktop), we improve loading efficiency, freeing up bandwidth for other important resources.

How to test it?

You can test the change by visiting a product grid in the linked workspace and observing the load times for the images in the first 2 positions. Ensure that only the first 2 images have fetchpriority="high" on desktop and the first image on mobile. This can be verified via the browser's DevTools under the "Network" tab.

Workspace

Screenshots or example usage:

Production:

Workspace:

[vtex-io-ci-cd[bot]]

Hi! I'm VTEX IO CI/CD Bot and I'll be helping you to publish your app! 🤖

Please select which version do you want to release:

• [ ] Patch (backwards-compatible bug fixes)

• [ ] Minor (backwards-compatible functionality)

• [ ] Major (incompatible API changes)

And then you just need to merge your PR when you are ready! There is no need to create a release commit/tag.

• [ ] No thanks, I would rather do it manually 😞