Is it okay to use both fetchpriority="high" and loading="eager" in img tag?

Issue

Is it okay to use both fetchpriority="high" and loading="eager" in img tag ?

• fetchpriority attribute not supported in firefox browser.

• If i used both, how the assets prefetching works... should it cause performance issues

Solution

Yes

Fetchpriority and loading serve different purposes and can still be used together in an img tag.

They may have similarity by definition in loading resources but they differ in terms of handling the resources.

1. Fetchpriority - It is used to indicate that the resource should be fetched as soon as possible. It is handy when you want to guarantee that some resources load faster than others by prioritizing vital content for a better user experience.

Whereas,

2. Loading - used to indicate that the resource should be immediately, without delaying the rendering of the rest of the page.

Overall, fetchpriority is concerned with the priority of fetching resources and loading is focused on the loading behavior of the resource.

By setting loading to eager, it will instruct the browser to immediately start fetching the resource.

Answered By - Ben