I'm developing a gatsby theme/starter for PWA's, but I can't seem to get rid of the following console warning:
The resource .json
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.
On first load everything works fine; the service worker registers like it should and there is no warning. However, after reloading, this warning shows up. This makes no sense since the as value is set to 'fetch'.
I'm assuming it has something to do with the configuration of gatsby-plugin-offline or maybe gatsby-plugin-manifest.
The source code is at ,
and it's deployed to /.
Does anyone have any idea what is causing this?
I'm developing a gatsby theme/starter for PWA's, but I can't seem to get rid of the following console warning:
The resource https://davidde.github.io/gatsby-starter-simpwa/page-data/offline-plugin-app-shell-fallback/page-data.json
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.
On first load everything works fine; the service worker registers like it should and there is no warning. However, after reloading, this warning shows up. This makes no sense since the as value is set to 'fetch'.
I'm assuming it has something to do with the configuration of gatsby-plugin-offline or maybe gatsby-plugin-manifest.
The source code is at https://github./davidde/gatsby-starter-simpwa,
and it's deployed to https://davidde.github.io/gatsby-starter-simpwa/.
Does anyone have any idea what is causing this?
Share Improve this question asked Jan 8, 2020 at 1:15 David DeprostDavid Deprost 5,1095 gold badges22 silver badges27 bronze badges 2- 1 i'm running into a similar issue, how you found a solution to this? – trextomcat Commented Sep 2, 2020 at 16:09
- Just ran into the problem today. – Esko Commented Apr 8, 2022 at 3:59
3 Answers
Reset to default 2The warning simply means that the resource is getting downloaded with a higher priority but it is not getting used with the same urgency with which it was downloaded.
The expectation of browser when it sees a link with rel=preload is that the resource is critical for the page to render properly. But when that is not the case, it is warning you to may be defer the download so that it can do something else (like downloading CSS or rendering layout) that is more important than downloading this no-so-important resource. More here -
https://developer.mozilla/en-US/docs/Web/HTML/Attributes/rel/preload
Possible Solution
You can check if the offline-plugin takes options to defer the resource download and/or move it to <body> instead of adding to <head> when bundling and injecting link to scripts into the HTML.
Late, but for what it is worth - for me, it was due to an automatically applied version parameter:
<!-- preloading without version parameter -->
<link rel="preload" href="https://example./preload-style.css" as="style"/>
<!-- async loading screen styles including automatically set version parameter -->
<link rel="stylesheet" href="https://example./preload-style.css?ver=123" media="print" onload="this.media='all'; this.onload=null;" />
Removing the version parameter, which I did not need for those styles, got rid of the warning.
Applying the same version paramter to the preload href seems to work just as well. From my test it seems, that the preloading already works, just the warning fires, if it is not the exact same string.
Verified in Firefox and Chrome.
In public folder in react app here is an index.html paste this line inside index.html and try again to run react app
<link rel="preload" href="fonts/cicle_fina-webfont.woff2" as="font" type="font/woff2" crossorigin="anonymous">