Prefetching & Preloading Resources

Prefetching something is requesting it ahead of time. A good analogy would be ordering extra pizza for a birthday party in case some extra guests choose to show up. The pizza may eventually not be needed, but you still have it just in case. That’s exactly how prefetching works on websites. There are a few kinds of prefetching. Let’s discuss each.

Asset / link prefetching

Assets that may eventually be needed can be preloaded using the HTML <link> tag and the prefetch directive as follows. These are assets that may be required by the next user navigation. So, for example, they may belong to a page that is linked in the current page.

Consider the following example. The blue Educative icon is already preloaded on line 5 of the HTML. So, when you click on the actual link, it is served very quickly because it was already loaded.

Open up your network tab before hitting ‘run’. You’ll notice that a request for the icon is fired off even though it’s not actually used on this page.