Add fetchpriority="high" when next/image has priority prop

[sanjaiyan-dev]

Eagerly load images on viewport 🖼️

When user scroll to bottom of the website so swiftly (which have lot of images) currently Next.js marks even other image also needed to be fetched which might cause delay of loading of current image which is located in user's current position.
So, we can add priority hint to the particular image element in the viewport to load in high priority.

Extremely sorry my explanation might not be good, hope you got what I am trying to say 😆

Sorry if I made any mistakes :(

[SukkaW]

According to the WICG Priority Hints draft:

With in-viewport images, a browser may automatically detect if the image is important and boost priority if it gets to layout early enough.

As the draft described, the browser could have detected the in-view image and automatically boost the fetch priority, it is probably unnecessary to dynamically set the fetchpriority.

Instead of dynamically setting fetchpriority to high when intersected and removing the fetchpriority when out of the viewport, personally I'd prefer setting a static fetchpriority.

next/image component already accepts the priority={boolean} prop. Would you like to change the implementation so that the fetchpriority="high" is set when priority={true} is specified?

[sanjaiyan-dev]

According to the WICG Priority Hints draft:

With in-viewport images, a browser may automatically detect if the image is important and boost priority if it gets to layout early enough.

As the draft described, the browser could have detected the in-view image and automatically boost the fetch priority, it is probably unnecessary to dynamically set the fetchpriority.

Instead of dynamically setting fetchpriority to high when intersected and removing the fetchpriority when out of the viewport, personally I'd prefer setting a static fetchpriority.

next/image component already accepts the priority={boolean} prop. Would you like to change the implementation so that the fetchpriority="high" is set when priority={true} is specified?

Understood :)

[styfle]

Would you like to change the implementation so that the fetchpriority="high" is set when priority={true} is specified

Let's not do that without measuring the impact on performance. The last I checked, the fetchpriority prop is not as good as the current priority preloading prop.

[sanjaiyan-dev]

Would you like to change the implementation so that the fetchpriority="high" is set when priority={true} is specified

Let's not do that without measuring the impact on performance. The last I checked, the fetchpriority prop is not as good as the current priority preloading prop.

https://web.dev/priority-hints/#increase-the-priority-of-the-lcp-image

[sanjaiyan-dev]

https://hacktoberfest.com/participation/#pr-mr-details 🥺😞

[sanjaiyan-dev]

Would you like to change the implementation so that the fetchpriority="high" is set when priority={true} is specified

Let's not do that without measuring the impact on performance. The last I checked, the fetchpriority prop is not as good as the current priority preloading prop.

Additional ref-: https://angular.io/guide/image-directive#marking-images-as-priority

[styfle]

Does the fetchPriority prop need to be added to the preload <link> in the head?

[sanjaiyan-dev]

Does the fetchPriority prop need to be added to the preload <link> in the head?

@styfle I think no need according to implementation of angular.

[styfle]

Looks like CI is failing due to missing TS types

Also, needs updated tests to ensure the prop is working correctly

[balazsorban44]

@sanjaiyan-dev is there an intention to push this forward? Currently, there are merge conflicts and there are unaddressed comments here: #40887 (comment)

[sanjaiyan-dev]

@sanjaiyan-dev is there an intention to push this forward? Currently, there are merge conflicts and there are unaddressed comments here: #40887 (comment)

Yh, I will fix it ASAP 🤝🙌

[styfle]

How does this affect performance of stylesheets? Do we need to configure fetchPriority on those too?

[sanjaiyan-dev]

How does this affect performance of stylesheets? Do we need to configure fetchPriority on those too?

Extremely sorry I am not sure about it but I created PR related loading of first party scripts and optimized way of preloading.

#41084

#41423

[sanjaiyan-dev]

Let's Start from scratch :)

[sanjaiyan-dev]

@sanjaiyan-dev is there an intention to push this forward? Currently, there are merge conflicts and there are unaddressed comments here: #40887 (comment)

I have created refined PR 🤝

#43096