Why are preload link not working for JSON requests

Question

The JavaScript on my website loads several JSON to initialize itself.

I would like to preload them so, when the JavaScript will launch an Ajax request on it, they will be loaded instantaneously.

A new link tag exists for that.

I tried to use it to load a JSON like that :

<link rel="preload" href="/test.json">

However, Chrome seems to load it twice and present a warning in the console :

The resources test.json was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it wasn't preloaded for nothing.

So it seems that preload doesn’t work for JSON. Indeed, I haven’t found reference to JSON in the specification.

Is that correct or am I doing it wrong ?

Answer 1

Hii @kartik,

You have to add as="fetch" for JSON files. So your code becomes

<link rel="preload" href="/test.json" as="fetch">

It's supported by all modern browsers and you get a warning message if this resource is not used within a few seconds because it is counterproductive to "preload" it in a such case (delay, double load etc.)

It's different from <link rel="prefetch" ...> which is to anticipate future navigation and not supported widely.

Hope this is helpful!!

Thank You!!