node.jsgoogle-chromeexpresschromiumetherpad

How do I properly set link prefetch headers in Express 4?

According to MDN the correct approach is to send the header:

Link: </images/big.jpeg>; rel=prefetch

So my express syntax is:

res.header('Link', '</images/big.jpeg>; rel=prefetch');

and I see it land in my browser as:

Link:</images/big.jpeg>; rel=prefetch

But chrome never attempts to download the image.. The meta and link approaches work fine..

Am I setting the header wrong or is the browser failing to process the header value?

UDPATE: Okay so it looks like I'm doing things right but Chrome 43 & Chromium 43 on Linux/Ubuntu doesn't have support for this yet. This is working fine in Firefox 38..

Could it be that Chromium is just not showing the prefetching in the Network tab?

UPDATE 2: So it does look like Chrome/Chromium is hiding the file transfers from the Network tab. If someone can confirm this I'd appreciate it..

Solution

  • To set prefetch for one file in Express 4+..

    res.set('Link', '<static/js/file1.js>; rel=prefetch');

    For multiple files.

    res.set('Link', '<static/js/file1.js>; rel=prefetch, <static/js/file2.js>; rel=prefetch');

    Do NOT attempt to test this in Chrome, Chrome will lie to you and show it as not working if you investigate under Network tab. Always test with Firefox.

    You can see me implementing this in a larger project in context here.