Gatsby: Fix "resource preloaded but not used" warning in Chrome

[hogyster]

I am keep getting the warning message at chrome

https://www.selectchu.com

"The resource was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate as value and it is preloaded intentionally."

The resource https://www.selectchu.com/component---src-pages-index-js-e3609fd82d452154463c.js was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate as value and it is preloaded intentionally.
The resource https://www.selectchu.com/google-fonts/s/roboto/v19/KFOmCnqEu92Fr1Mu4mxK.woff2 was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate as value and it is preloaded intentionally.
The resource https://www.selectchu.com/app-97f530f3e5a7162dfd06.js was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate as value and it is preloaded intentionally.
The resource https://www.selectchu.com/webpack-runtime-c108f36890d85c65bb96.js was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate as value and it is preloaded intentionally.
The resource https://www.selectchu.com/google-fonts/s/roboto/v19/KFOlCnqEu92Fr1MmWUlfBBc4.woff2 was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate as value and it is preloaded intentionally.
The resource https://www.selectchu.com/google-fonts/s/notosanskr/v11/Pby7FmXiEBPT4ITbgNA5CgmOalv45bIR.woff2 was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate as value and it is preloaded intentionally.
The resource https://www.selectchu.com/google-fonts/s/opensans/v16/mem8YaGs126MiZpBA-UFVZ0b.woff2 was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate as value and it is preloaded intentionally.
The resource https://www.selectchu.com/google-fonts/s/opensans/v16/mem5YaGs126MiZpBA-UN7rgOUuhp.woff2 was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate as value and it is preloaded intentionally.
The resource https://www.selectchu.com/styles-c23128a881c72b69f101.js was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate as value and it is preloaded intentionally.
The resource https://www.selectchu.com/google-fonts/s/notosanskr/v11/PbykFmXiEBPT4ITbgNA5CgmG237t.woff2 was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate as value and it is preloaded intentionally.
The resource https://www.selectchu.com/1-41a7a9b6ed6c2c325059.js was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate as value and it is preloaded intentionally.

what can be the main problem? and how to solve it?

these are plugins i use

plugins: [
    `gatsby-plugin-react-helmet`,
    `gatsby-plugin-styled-components`,
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sass`,
    `gatsby-plugin-sharp`,
    `gatsby-plugin-transition-link`,
    {
      resolve: `gatsby-plugin-prefetch-google-fonts`,
      options: {
        fonts: [
          {
            family: `Noto Sans KR`,
            subsets: [`latin`, 'korean'],
            variants: [`400`, `700`]
          },
          {
            family: `Open Sans`,
            variants: [`400`, `700`]
          },
          {
            family: `Roboto`,
            variants: [`400`, `700`]
          },
        ],
      },
    },
    'gatsby-transformer-remark',

[freiksenet]

Sorry to hear you are having an issue! Could you try if upgrading Gatsby fixes this?

[hogyster]

Sorry to hear you are having an issue! Could you try if upgrading Gatsby fixes this?

Have upgraded to the latest gatsby and the warning still come up :(

[freiksenet]

The issue is that somehow crossorigin="" is added to the links. This is a bug. We'll investigate it.

Thanks a lot for reporting this! :muscle: :purple_heart:

[superhawk610]

@hogyster keep an eye on #14608, I'm working on a plugin that will add <link preload> to each route as needed for each font used on that page. It allows the crossorigin attribute to be configured per-route if needed!

[hogyster]

The issue is that somehow crossorigin="" is added to the links. This is a bug. We'll investigate it.

Thanks a lot for reporting this! 💪 💜

Thanks! hope the warning goes away soon.
:)

[hogyster]

preload

great! will look up to it, else, not only to the fonts maybe it will be good if it adds to all the links. The warning I get seems to be happening on other scripts too.

[m-allanson]

Hey @hogyster this seems like it's expected behaviour for gatsby-plugin-prefetch-google-fonts. The plugin is making each font be preloaded, but the fonts aren't necessarily used on each page. Check out #14608 for another approach to this. Closing this as I think it it's a warning that can be fixed. Thanks!

[AlexMachin1997]

Hmm I've just across this issue after deploying my site.

The only difference is I'm using gatsby-plugin-google-fonts instead.

Anyone know how to remove this warning ?

[superhawk610]

@AlexMachin1997 gatsby-plugin-google-fonts simply adds a preload for _all fonts_ to _all routes_ in your app, which will cause the (harmless) warnings you're seeing. This is the simplest approach with the least friction, but those warnings are unavoidable if you're not using every font on every route.

If you'd like to remove those warnings, you'll need to switch to gatsby-plugin-preload-fonts, which preloads fonts _per route_, thus only preloading exactly the fonts that are required by each page. However, this plugin does require that you manually update the route-font mapping periodically, so it's up to you whether it's worth the extra effort.

If you need any further help choosing or getting setup, check out the community page for support links!

[kimbaudi]

This warning is happening on my site built w/ Gatsbty because the <link rel="preload" /> tag is missing crossorigin="anonymous". I get 8 warnings a few seconds after the page loads. Looking at the source shows the warnings are related to <link> element missing crossorigin="anonymous".