How to improve performance of your site by prefetching future assets

· 2 min read June 16, 2022


Faster load times is one of the major goals of every web dev team . Faster initial loads and low First Contentfull Paint have been proven to increase user conversions and provide better user experience .

If you have proper insights about the average user navigation through your app. We can then improve the performance by prefetching the resources the user might need next . Like on a checkout page while the user is filling address data we can pefetch and cache the resources for payment page .

Link prefetching is a browser mechanism , which utilizes browser idle time to download or prefetch documents or resources that the user might visit in near future .

To prefetch resources browser looks for an HTML link tag with a prefetch relation. like :

  <link rel="prefetch" href="/images/future-image.png">

The browser looks for these hints and puts all these resources in a queue to be downloaded in idle time and stored in prefetch cache . And when the user will request for the resource in future the browser will directly serve it from the cache .

You can also use the http LINK header with prefetch relation to achieve the same

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

What resources can be Prefetched .

You can use link prefetching to either prefetch resources like Javasript, images , css , etc like :

<link rel="prefetch" href="/js/stripe.js" as="script">
<link rel="prefetch" href="/css/emoji.css" as="stylesheet">

Or you can even prefetch whole pages , that you think the user might definetly visit .

<link rel="prefetch" href="/future-page" as="document">

Prefetching with webpack

If you are using webpack as the bundler for your app . You can utilize the magic comments to tell webpack to prefetch some resources .

import(/* webpackPrefetch: true */ 'lodash.sortby')
         .then(module => module.default)

webpack will now automatically generate prefetch link for lodash.sortby .

Few things to keep in mind ..

Prefetching does not work with anchor tags . prefetching is not supported by firefox version below 3.4

Note :

Never prefetch resources mindlessly . If the user doesn’t need it . It will cost the user bandwidth and money .

Only prefetch resources that you are certain of or have high changes of being used in future

Thanks ..

More resources

Some Thing to say ?