Consider preload for images

[adamsilverstein]

See https://web.dev/preload-responsive-images/

https://web.dev/priority-hints/
https://caniuse.com/?search=resource%20hints
related "Automatic link preload of first user-entered image (hero image)" (suggested by Aymen Loukil)

related trac ticket: https://core.trac.wordpress.org/ticket/42438 (focused on scripts so far, could include images)

Open Question: when is preloading images helpful?

[dainemawer]

@adamsilverstein - this is an interesting scenario. The case for preloading responsive images makes sense and has the potential to better Largest Contentful Paint however, if everything is a priority then nothing is a priority. That means we should ideally be able to determine what image (if it is in fact an image) is the Largest Contentful Paint and preload that image, rather than attempting to resource hint every image on the page. Images are not render-blocking in nature so its not going to hold up the Critical Rendering Path, but if we wanted to keep LCP scores in the green, we'd most certainly have to deliver that image to the browser faster.

That opens up another can of worms...how do we determine what image that is? LCP is a front-end metric, so its probably not going to be identifiable before the page loads...some ideas could be:

1. Using the featured image of a post / page.
2. Collecting all the images on the page and identify which image has the largest dimensions and that would come first in the DOM aka above the fold.
3. A combination of both

We have come across this scenario on a few 10up projects recently and implemented a fix or two, but nothing very robust. Food for thought!

[westonruter]

The problem with preloading responsive images is that the imagesrcset and imagesizes attributes on link[rel=preload] are supported in Chromium-based browsers.

Therefore, it's probably safer for now to use priority hints, adding importance=high to the featured image of a post.

That means we should ideally be able to determine what image (if it is in fact an image) is the Largest Contentful Paint and preload that image, rather than attempting to resource hint every image on the page.

Identifying the LCP images has generally been addressed by WordPress/wordpress-develop#1580 which omits loading=lazy from images that are likely to be in the first viewport. I don't think all of these images should then also get importance=high, but of all these images I think we could work out a prioritized list of images of which the first should get that priority hint, for example:

1. Featured Image
2. First Image in Content
3. Header Image
4. Custom Logo

Naturally all of this would need to be theme-overridable. Block-based themes should make it even easier to identify important images.

[erikyo]

Open Question: when is preloading images helpful?

Yes and it's very helpful with the featured image (or with the largest image of the above the fold)

I've tested on my blog that improvement seems to give a reasonable advantage for LCP but I found some difficulties because the image that is loaded must be the same and of the same resize of the one that is used in the featured image and for this you should know in the head the size of this one.
this is the snippet I've used (but you need to set the size accordingly)

Imho preloading images is profitable when the featured image is very large, preloading small or a lot of images has bad results at least with my blog. Preloading is also useful for fonts since some of them size >100kb (also in this case i got also some issues to get the real font url because preloading the stylesheet with the @import fonts has a limited effect)

test result: https://imgur.com/a/T4VJZsP

related to: #117

[felixarntz]

With fetchpriority="high" available in core, I think it's reasonable to close this issue (see https://core.trac.wordpress.org/ticket/58235).