Prefetch Types

Resource Hints

Essential performance optimization techniques to load resources ahead of time. Part of the frontend performance studies.

What are Resource Hints?

Resource hints are instructions given to the browser to optimize page loading. They allow the browser to initiate connections or download resources before they are strictly needed, reducing the perceived loading time for the user.

Main Types

1. DNS-Prefetch (<link rel="dns-prefetch">)

Resolves the domain of a resource before a request is made.

• How it works: The browser performs the DNS lookup (domain to IP translation) in the background.
• When to use: For third-party domains (e.g., Google Fonts, Analytics, CDNs) where you know you will make requests soon, but don’t know exactly which file.
• Example:

  <link rel="dns-prefetch" href="https://fonts.googleapis.com" />

2. Preconnect (<link rel="preconnect">)

Goes beyond dns-prefetch: besides resolving DNS, it also negotiates the TCP connection and TLS handshake.

• How it works: Establishes the full connection with the target server, saving connection setup time when downloading the resource.
• When to use: For critical domains that will be accessed immediately (e.g., the domain of your main API or image CDN).
• ⚠️ Trade-off: Do not abuse. Open and unused connections waste client and server resources. Use for a maximum of 3 or 4 critical domains.
• Example:

  <link rel="preconnect" href="https://api.mysite.com" crossorigin />

3. Prefetch (<link rel="prefetch">)

Downloads and caches a resource that will likely be used in the next navigation.

• How it works: The browser downloads the file with low priority, without interrupting the current page load.
• When to use: When you are sure (or highly probable) that the user will go to a specific page next (e.g., the next page of a tutorial or the assets of the route after login).
• Example:

  <link rel="prefetch" href="/js/dashboard.bundle.js" />

4. Prerender (<link rel="prerender">)

The most aggressive technique: downloads the entire page and renders it in the background (invisible).

• How it works: The browser builds the entire page, running scripts and assembling the DOM. When the user clicks the link, the display is instantaneous.
• When to use: When there is a very high probability that the user will click on a specific link.
• ⚠️ Trade-off: Costs a lot of bandwidth and processing (CPU/Memory). If the user does not click, all this work is thrown away.
• Example:

  <link rel="prerender" href="/next-page" />

5. Preload (<link rel="preload">) (Bonus)

Although not a “prefetch” in the future navigation sense, it is vital for the current page.

• How it works: Forces the browser to download a critical resource as quickly as possible, with high priority.
• When to use: For custom web fonts, hero images, or essential CSS/JS for the First Contentful Paint (FCP). Requires the as attribute.
• Example:

  <link
    rel="preload"
    href="/fonts/my-font.woff2"
    as="font"
    type="font/woff2"
    crossorigin
  />

Quick Summary

Relacionadas: react-performance · react-code-splitting · seo-on-page.