Should Image Prioritizer explicitly mark IMG tags which are never LCP elements as fetchpriority=low

[westonruter]

Feature Description

After reading How Does Chrome Prioritize Image Requests? from DebugBear, I was reminded that starting with v117, Chrome automatically loads the first 5 images with medium priority while everything afterward is loaded with low priority (unless loading=lazy in which case it is not loaded initially at all if not in the viewport). When Chrome determines that an IMG will be in the viewport, then it bumps the priority from medium (or low) up to high since it could be the LCP image. Image Prioritizer improves performance here by ensuring that the LCP image will have the high priority from the start so the browser doesn't have to wait for layout to bump the priority to high. However, I realized that we could consider addressing this from the reverse angle:

Should all images which are never LCP which are in the initial viewport get fetchpriority="medium" added to them explicitly?

The thing is, even though we start loading the LCP image first with the preload link, once other images enter the view then they also get high priority which could potentially add network contention for the currently-downloading LCP IMG. For example:

The LCP image is successfully downloaded first, but you can see it is still downloading after the other images finish:

So maybe by adding explicit fetchpriority=medium to the other images the LCP image could be loaded faster. Nevertheless, I did try this out and Chrome seems to ignore the hint: it still downloads images with high priority once layout places them in the viewport, even if they have fetchpriority=medium.

This being said, this issue could be a quick one to close, but I wanted to open it just to discuss.

[rijo7]

I’m interested in contributing here and wanted to get your thoughts — do you think setting fetchpriority="low" for images that are definitely not LCP candidates would help improve overall performance without unexpected side effects?

[westonruter]

@rijo7 hello! From my initial test it seemed that Chrome at least will override the explicit fetchpriority=medium (and I presume fetchpriority=low) once it determines the IMG is in the viewport. So unless I'm missing something, it doesn't seem it will help.

There is one scenario where maybe adding fetchpriority=medium will help and that is if there are more than 5 large images in the initial viewport. Chrome boosts the first five large images in the viewport, but images after these are not boosted. So by adding fetchpriority=medium to all images which appear in the initial viewport on all device form factors, then Chrome at least will avoid giving them the initial priority of low.

This needs more research.

[rijo7]

That makes sense — so the key impact might be in cases where there are more than five large images in the viewport, and the later ones would otherwise get low priority by default. I’ll look into this scenario a bit more and see if applying fetchpriority=medium helps avoid those drops in priority. Will share back what I find!