What are preload, prefetch, fetchpriority preconnect?

Matthew Edgar | March 3, 2025

What are preload, prefetch, preconnect, dns-prefetch, and fetchpriority? When should they be used?

All of these tell the browser to prioritize and fetch resources in advance, but they differ in when and how they do this.

preload: This tells the browser the specified resource should be downloaded with a higher priority. This is not a hint. So, using this incorrectly can waste bandwidth and even harm performance.  It should only be used for critical items that are essential when loading the page (such as loading the main stylesheet, a critical font or a key JavaScript file). For example, here is how to preload main-stylesheet.css:

<link rel="preload" href="main-stylesheet.css" as="style">

fetchpriority: This attribute gives the browser a hint that a specific resource should be moved up or down the priority order. For example, there may be a particular image that should be given a high priority because of how important it is to the page’s content. Keep in mind that fetchpriority is only a hint. Here is how you would set the fetchpriority of an image:

<img src="main-page-image.png" fetchpriority="high">

prefetch: This tells the browser to fetch resources that might be needed at some point but are not needed now. However, this is considered a low priority and the resource may not be loaded at all if bandwidth is limited. For example, you might prefetch page 2 from page 1 so that page 2 is ready when people click to it, as shown in the code below:

<link rel="prefetch" href="/category?page=2">

preconnect: This opens a connection to another domain. You do not need to use this for your own domain. A preconnect tells the browser to prepare a network connection to that other domain but it will not fetch the requested resource. For example, this can be used to connect to third-party resources, such as Google Fonts:

<link rel="preconnect" href="https://fonts.googleapis.com">

dns-prefetch: This is similar to preconnect but only resolves the DNS information (translating the domain name into an IP address). It does not make a full connection to the domain. This is a lighter version of preconnect so should be used when you know you’ll need to connect to a domain, but the connection isn’t as critical. This might be useful for connecting to a third-party resource visitors may click to next (like a third-party payment system).

<link rel="dns-prefetch" href="//somedomain.com">

Recap

• preload: Use this for critical resources for the current page. Highest priority.  
• fetchpriority: Influences the fetch order of individual resources. Use for fine-tuning.
• prefetch: Resources for future pages or user actions. Lowest priority.
• preconnect: Establishes a connection to a server. Good for third-party resources.
• dns-prefetch: Only performs DNS lookup. Good for less critical third-party resources.