-
Notifications
You must be signed in to change notification settings - Fork 26.9k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add fetchpriority="high"
when next/image has priority
prop
#40887
Add fetchpriority="high"
when next/image has priority
prop
#40887
Conversation
writing explainable code
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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 :) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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 |
Additional ref-: https://angular.io/guide/image-directive#marking-images-as-priority |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Does the fetchPriority
prop need to be added to the preload <link>
in the head?
fetchpriority=high
when next/image has priority prop
@styfle I think no need according to implementation of angular. |
Looks like CI is failing due to missing TS types Also, needs updated tests to ensure the prop is working correctly |
fetchpriority=high
when next/image has priority propfetchpriority="high"
when next/image has priority
prop
@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 🤝🙌 |
How does this affect performance of stylesheets? Do we need to configure fetchPriority on those too? |
df8579c
to
47e5ebe
Compare
Let's Start from scratch :) |
I have created refined PR 🤝 |
Eagerly load images on viewport 🖼️
Extremely sorry my explanation might not be good, hope you got what I am trying to say 😆
Sorry if I made any mistakes :(