Resource Hints

Speed up pages with preload, prefetch, preconnect, and dns-prefetch link hints.

Overview

Resource hints are <link> elements in <head> that tell the browser to fetch or connect to resources it will need soon before it discovers them during normal parsing. This eliminates latency by preparing connections and downloads in parallel. Four key resource hints: - preload: fetch a resource the current page needs urgently (fonts, hero images, critical scripts) - prefetch: fetch resources the next page will likely need (low priority, uses idle time) - preconnect: establish TCP/TLS connection to a third-party origin (CDN, API) - dns-prefetch: just resolve the DNS for an origin (cheaper than preconnect) Used correctly, these can shave hundreds of milliseconds off page load times.

Key Points

•preload: fetches a high-priority resource for the current page as attribute specifies type
•prefetch: fetches a low-priority resource for future navigation
•preconnect: opens TCP/TLS connection to a domain use for critical third parties
•dns-prefetch: resolves DNS only fallback for non-critical third parties
•crossorigin attribute is required on preload for CORS resources (fonts, cross-origin scripts)
•Preloading resources that are not used wastes bandwidth only preload critical resources

Examples

Preloading critical resources

<head>
  <!-- Preload critical CSS (normally discovered late) -->
  <link rel="preload" href="/css/critical.css" as="style">

  <!-- Preload hero image to reduce LCP (Largest Contentful Paint) -->
  <link rel="preload" href="/images/hero.webp" as="image" type="image/webp">

  <!-- Preload a custom font crossorigin required -->
  <link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin>

  <!-- Preload a critical JavaScript module -->
  <link rel="preload" href="/js/checkout.js" as="script">
</head>

as attribute tells the browser the resource type for correct prioritization.

Preconnect and dns-prefetch for third parties

<head>
  <!-- Preconnect: full connection (DNS + TCP + TLS) -->
  <!-- Use for resources you will definitely load from that origin -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link rel="preconnect" href="https://cdn.example.com">

  <!-- dns-prefetch: just DNS resolution (fallback for less critical) -->
  <link rel="dns-prefetch" href="https://analytics.example.com">
  <link rel="dns-prefetch" href="https://ads.example.com">
</head>

Limit preconnects to 2-3 origins each one uses system resources.

Prefetch for next page navigation

<!-- User is on /products page, likely to go to /checkout -->
<link rel="prefetch" href="/checkout" as="document">
<link rel="prefetch" href="/js/checkout.js" as="script">
<link rel="prefetch" href="/images/payment-icons.png" as="image">

Prefetch uses the browser's idle time and is lowest priority won't compete with current page.

Common Mistakes

Preloading everything creates bandwidth competition and can hurt performance
Missing crossorigin on font preloads fonts require CORS, the preload is ignored without it
Preloading resources not used on the current page Chrome DevTools shows a warning

Note

Focus preload on LCP (Largest Contentful Paint) elements the hero image, critical fonts, and above-the-fold CSS. Use Chrome DevTools Coverage tab to identify what's critical vs. unused.

Resource Hints

Overview

Key Points

Examples

Common Mistakes

Note

Exercises

Knowledge Check

What is the difference between preload and prefetch?