Prefetch

Prefetch (<link rel="prefetch">) is a browser optimization which allows us to fetch resources that may be needed for subsequent routes or pages before they are needed. Prefetching can be achieved in a few ways. It can be done declaratively in HTML (such as in the example below), via a HTTP Header (Link: </js/chat-widget.js>; rel=prefetch), Service Workers or via more custom means such as through Webpack.

When to Use

• Use this when you know users will likely navigate to certain routes or need certain resources soon
• This is helpful for reducing perceived loading time on subsequent navigations

When NOT to Use

• For resources unlikely to be needed — unnecessary prefetching wastes bandwidth and competes with critical requests
• On low-bandwidth or metered connections where prefetching consumes the user's data budget
• When the prefetched resources change frequently and would be stale by the time they're used

Instructions