What's the difference between link preload, preconnect and prefetch?

• ~300 words • 1 minute read

Lately I've been running Lighthouse audits some of my client projects as well as my own. With my own projects I typically regard it as an opportunity to dive into some nitty-gritty optimizations that I might typically ignore for a client, only because the billable hours might be better spent elsewhere.

One of those areas of optimization is resource prioritization with links tags such as these:

<link rel="preload">
<link rel="preconnect">
<link rel="prefetch">

I was generally aware of these and had even used them, but I wasn't actually aware of the difference between most of these offhand. When the Lighthouse audit recent led me to the Google Developer documentation about resource prioritization I saw a chance to get better acquainted with the differences between them.

It'll probably serve you best (Pun!) to remember them in this order:

  • preload
  • preconnect
  • prefetch

Any time you use one of these <link rel="pre*"> tags you're telling the browser about a resource that you think is more important than others on the page and should be prioritized over them, in some fashion. The order that they're presented in above is basically in order from the "most" important of the important things to the least.

How exactly are these things prioritized? Well, rather than completely plagiarize some excellent documentation (which I started to realize was going to happen as I kept writing this blog post) you can read more about the details of each of these here:

https://developers.google.com/web/fundamentals/performance/resource-prioritization

Here's my short summary of when you might use these:

  • preload: Use for fonts and super-critical assets that you absolutely know you'll be using.
  • preconnect: Use for CDNs or any resource you know you'll be loading from another domain.
  • prefetch: Any content we thnk we'll need soon after some kind of user interaction. An interesting example is to prefetch the HTML content for another page that we think the user will be navigating to.