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

Question

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

Answer 1

Yes

loading="eager" is the default loading behaviour of the browser -> web.dev - The loading attribute. So applying this to an image won't do anything.

The eager value is simply an instruction to load the image as usual, without delaying the load further if it is off-screen. It does not imply that the image is loaded any quicker than another image without the loading="eager" attribute.

fetchpriority="high" will make sure the image is downloaded sooner than it would normally be -> web.dev - Fetch Priority. So if you use this on your LCP (Largest Contentful Paint) you will improve the performance of the page.