How to fix the console warning "The resource ... was preloaded using link preload but not used within a few seconds from the window's load event"?

Asked 8/1, 2020 at 1:15 Answered 19/4 at 6:33

javascript reactjs progressive-web-apps gatsby

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.com/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?

Washcloth answered 8/1, 2020 at 1:15 Comment(2)

i'm running into a similar issue, how you found a solution to this? – Luminance 2/9, 2020 at 16:9

Just ran into the problem today. – Plattdeutsch 8/4, 2022 at 3:59

The 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.org/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.

Exophthalmos answered 27/2, 2023 at 8:12 Comment(0)

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.com/preload-style.css" as="style"/>

<!-- async loading screen styles including automatically set version parameter -->
<link rel="stylesheet" href="https://example.com/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.

Seel answered 19/4 at 6:33 Comment(0)

-1

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

Jerky answered 8/6, 2022 at 10:47 Comment(1)

Gatsby apps aren't the same as CRA apps, and don't have an index.html. – Victor 1/8, 2022 at 10:0

Possible Solution

Recommended topics

Hot tags