Enhance hero image loading performance with Fetchpriority

[flixos90]

The fetchpriority attribute is a standard HTML attribute that allows annotating resources (e.g. images, scripts, stylesheets, ...) on a web page to give them a certain priority.

While the attribute can be used on different resources, this ticket is scoped to images only. Using the fetchpriority attribute is recommended with a value of “high” on the most important image on a page, which is an important performance best practice that improves ​LCP performance.

Please see the ​proposal post for additional context.

As mentioned in the post, support for fetchpriority on images should be implemented relying on similar logic as lazy-loading images uses. Yet, the two attributes need to function on their own, e.g. even sites that disable lazy-loading should be able to use Fetchpriority. Therefore the engineering effort to support the fetchpriority attribute will involve decoupling that logic from the loading attribute.

Last but not least, it should also be highlighted that, since fetchpriority can be used on other elements on images, we should consider that for the implementation. Certain parts of the implementation may be specific to images while other parts may apply to fetchpriority on any resource.

[flixos90]

Milestoning this for 6.3 and as a high priority for the performance team, given that this is part of our ​team roadmap.

Trac ticket: https://core.trac.wordpress.org/ticket/58235