Fetch Priority

Using loading="lazy" does not alter the image's request priority. Images within the initial viewport start with a Low priority before being increased to High after the Layout phase once the browser knows that the image is within the viewport.

You are able to change the default network priority using the fetchpriority attribute. This demo includes four images. The images outside of the initial viewport (image-3.jpg and image-4.jpg) contain loading="lazy". The first and third images contain fetchpriority="high".

Photograph of a table and chairs in the foreground with the sea in the background.

Photograph of a blue shallow sea with four deckchairs and an umbrella in the foreground on the rocks.

Aerial photograph of a green body of water surrounded by rocks.

If you observe the network waterfall—even if the images on the left have fetchpriority="high"—they are still requested after the images without the loading attribute. fetchpriority alters the priority of the image but does not change when the request is initiated.

Chrome DevTools Network panel showing 7 resources. The images with fetchpriority=high (rows 4 and 6) have an initial High priority.

In the network panel above, the images image-1.jpg and image-3.jpg start with an initial High priority. image-2.jpg starts with a Low priority that is increased to High as soon as the browser is aware it is within the initial viewport. image-4.jpg starts and remains with a Low priority.

View Source Code

<img
  alt="Photograph of a sandy landscape."
  width="800"
  height="600"
  src="/images/image-1.jpg"
  fetchpriority="high"
/>

Learn Performance - Defer Images

Fetch Priority