Learn Performance - Resource Hints

fetchpriority

Chromium-based browsers also support the fetchpriority attribute. This could be added to an image, link element, or XHR request to elevate (or reduce) its request priority.

This demo assigns a fetchpriority="high" to the first, larger image, while a fetchpriority="low" to the remaining images.

Image 1
Image 1 Image 2 Image 3 Image 4

WebPageTest waterfall chart showing seven resources. The fourth resource, image-1.jpg is downloaded as it is discovered while other resources are delayed

In the waterfall above, the image-1.jpg request is initiated and downloaded much earlier than the other images that are assigned a lower priority.

Combining preload and fetchpriority can help you improve your Largest Contentful Paint. The preload will initiate the request as early as possible, while the fetchpriority will prioritize the request and download it earlier.

View Source Code 
<head>
  <link rel="preload" href="https://cdn.glitch.global/db01a8e4-9230-4c5c-977d-85d0e0c3e74c/image-1.jpg?v=1669198400523" as="image" />
</head>