CodePark/ questions / Loading scripts & resources
START PRACTICINGPRACTICE
Frontend question · Browser & web performance › Loading scripts & resources

The hero <img> is your LCP element. It is in the HTML but downloads at low priority behind other images. What is the most direct fix?

Add fetchpriority="high"

fetchpriority="high" tells the browser to raise this image's download priority. That is exactly the problem here.

<link rel="prefetch"> is the tempting wrong answer. Prefetch is low priority and is meant for future navigations, not the current page. loading="lazy" would delay the image even more. decoding="async" only affects how the image is decoded, not its download priority.