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".

[MadaShindeInai]

Same situation. 14 warnings. Is there a way to fix it and generally should it be fixed?

[fivetwelve]

I'm experiencing similar warnings. I'm on Gatsby 4.6.2 and loading my fonts from @fontsource

[fivetwelve]

Update, FWIW: I added gatsby-plugin-preload-fonts and created the font cache as per its guide; and I don't see any further warnings. I'm glad it resolved itself but I don't see this necessarily as a good solution for medium to large-scale sites unless it can be automated as part of the build process.

[AnnieTaylorCHEN]

I got those warning on prod site. Not sure where/how to fix...and mine aren't related to fonts.

[Christian-Garrison]

Same warnings around preloaded links

• current versions of gatsby related dependencies

"gatsby": "^4.14.0",
"gatsby-plugin-breadcrumb": "^12.3.1",
"gatsby-plugin-image": "^2.14.0",
"gatsby-plugin-manifest": "^4.14.0",
"gatsby-plugin-netlify": "^4.3.1",
"gatsby-plugin-offline": "^5.14.0",
"gatsby-plugin-react-helmet": "^5.14.0",
"gatsby-plugin-sass": "^5.14.0",
"gatsby-plugin-sitemap": "^5.14.0",
"gatsby-source-sanity": "^7.4.2",

• gatsby-plugin-preload-fonts this was considered or used above, is this the recommended fix? Seems like a band-aid approach and introduces another dependency to worry about

Other Production Errors

[LanguageXange]

I have the same issues as @kimbaudi mentioned above did you find a solution to make those warnings go away ?

Any updates on this ?

[emekaorji]

This issue is not closed as it has not been resolved, the solutions for the fonts are okay, but this solution does not address the remaining issues.

[kcanamar]

I have been receiving the same warnings when working through the Gatsby tutorial.

[Waqas-Jani]

i'm receiving same warnning on safari, and working fine on chrome

[beicnet]

Same over here too, any solution or fix for it soon?!

[andykimchris]

There is a chance this isn't really a constraining bug https://wordpress.org/support/topic/the-resource-url-was-preloaded-using-link-preload-but-not-used-within/

[openmindculture]

There is a chance this isn't really a constraining bug https://wordpress.org/support/topic/the-resource-url-was-preloaded-using-link-preload-but-not-used-within/

Thats's the reason to close the issue? This is not only WordPress related. I keep getting those unhelpful warnings on many sites, cluttering my devtools without adding any value. Still reproducible with the latest Chromium on Linux.

Is there a Chromium bug ticket as a follow-up maybe?

[uxjulia]

This is definitely still an issue.

[amirshnll]

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! 💪 💜

work it.

[theCompanyDream]

Any word on if this was fixed I upgraded to gatsby v5 and am still having this issue?

[s7aks]

Going nuts.

[meenakshi-negi]

I am seeing the same issue .But I am not seeing any network call. Could you please help us out it will busy the server with so much resource calls. Or its just waring no impact on performance

[juliannehalversen]

Same issue here

[just-a-devguy]

same issue but using next js

[MS3300studios]

Same issue for GatsbyJS

[nicitaacom]

I see same issue (don't understand why this issue closed?)