gatsby-plugin-netlify enhancement idea: Add preloaded resources automatically to http headers to speed up visual siteload

[quansenB]

Motivation

Gatsby sites should visually load as fast as possible. I will describe a performance enhancement, that is currently already doable manually, yet very cumbersome to do and error prone which could be automated inside gatsby-plugin-netlify and other HTTP header generating plugins.

Potential

In my test, even though I'm already using gatsby-plugin-preload-fonts, I could save 50-200ms on 4G loading fonts when manually implementing this by specifying the used fonts in the plugin config like this:

`
{

  resolve: `gatsby-plugin-netlify`,

  options: {

    headers: {

      "/": [

        "Link: </static/rubik-latin-400-normal-c60ea76cc216df040231d5351a254c11.woff2>; rel=preload; as=font",

      ],

    }, 

  },

},
`

This as you can imagine would be a nightmare to setup for larger projects and the performance gains would be lost whenever a file hash changes.

I would expect most devs not implementing this manually so performance gains are lost either way.

You can view the loading speed difference here: https://www.webpagetest.org/result/201215_DiY5_7996ac6366bd8348d8211af49c40a48f/

In the future, if this issue was to be resolved, the proposed approach could also speed up the loading of critical images. Images are, to my understanding, stored in folders, that use hashes as names, so the manual performance gain would be lost whenever a image route changes.

My proposed approach would also automatically speed up every other resource, which should be preloaded.

Proposal

gastby-plugin-netlify (and other HTTP header generating plugins) should automatically read all <Link rel="preload"/> resources specified in the built html files and add them as HTTP headers not just the gatsby-specifiy resources.
A config option could be introduced to conserve backwards compatibility.

Downsides

Can't think of any.

Input appreciated :)

[vladar]

CC @wardpeet