[Feature]: Priority Hints

[polarathene]

Summary

The critical prop does not currently raise priority of an image asset above others such as JS or fonts. This can effectively delay an image from loading before several hundred KB of JS/JSON is loaded in the HTTP/2 stream.

Currently for Chrome users, this may be possible to resolve by using the new-ish Priority Hint attribute support.

Motivation

Developers have expressed difficulty in prioritizing image assets to load ASAP due to the JS payload of Gatsby causing up to 5x or more load time before an image would otherwise load when JS is disabled.

There are a variety of ways Gatsby could potentially assist here, but mostly it's up to the browser to define what assets should be prioritized and the server streaming the response back with what order it decides to prioritize the responses on it's end.

Priority Hints could also be used to lower the importance of preload tags in the head, via gatsby-config.js option? Or for additional browser support, prefetch might also work for users that'd prefer a working/rendered page loaded ASAP with JS progressively enhancing afterwards once it loads in. Currently Gatsby doesn't have support for this use-case as it's assumed the user either has JS disabled or expects hydration into a React app to be a priority.

The browsers NetworkInformation Web API for saveData could potentially be queried, so that mobile devices could likewise load the site visually faster as it progressively loads into a React app?

Related issues

gatsbyjs/rfcs#35
#14043