Resource Hints Explained: Prefetch, Preload, Preconnect, DNS-Prefetch

Resource Hints: Prefetch, Preload, Preconnect, DNS-Prefetch

Resource hints are HTML directives that help the browser optimize resource loading. By telling the browser what resources will be needed, you can eliminate network latency, reduce render-blocking time, and significantly improve page load performance. Understanding the difference between each hint is essential for using them correctly.

Overview of Resource Hints

DNS-Prefetch

The dns-prefetch hint tells the browser to perform DNS resolution for a domain before any resources from that domain are requested. DNS Lookup typically take 20-120ms, so resolving them early removes this delay from the critical path.

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

When to Use DNS-Prefetch

• Third-party domains used on the page (analytics, fonts, CDNs, ad networks)
• API документацию endpoints on different subdomains
• Any external domain referenced in CSS or JavaScript

Limitations

DNS-prefetch only resolves the domain name to an IP address. It does not establish a TCP connection or perform the TLS handshake. For critical resources, preconnect is more effective.

Preconnect

The preconnect hint goes further than dns-prefetch. It performs DNS resolution, establishes the TCP connection, and completes the TLS handshake — all before any resource is requested. This can save 100-500ms per connection on high-latency networks.

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preconnect" href="https://api.example.com">

The crossorigin Attribute

The crossorigin attribute is critical and often misunderstood. When a resource will be fetched with CORS (fonts, fetch API requests), you must include crossorigin on the preconnect link. Without it, the browser establishes a different connection that cannot be reused for CORS requests, wasting the preconnect entirely.

When to Use Preconnect

• Google Fonts (both googleapis.com and gstatic.com)
• Critical CDN origins
• API servers used immediately on page load
• Authentication providers

Important Warnings

• Limit to 4-6 origins: Each preconnect consumes CPU and network resources. Too many preconnects can actually hurt performance.
• Use only for origins you will fetch from immediately: Idle connections are closed after 10 seconds in most browsers, wasting the effort.

Prefetch

The prefetch hint requests a resource that will likely be needed for a future navigation. The browser downloads it at low priority during idle time and stores it in the HTTP cache for later use.

<link rel="prefetch" href="/next-page.html">
<link rel="prefetch" href="/assets/js/checkout.js">
<link rel="prefetch" href="/api/products?page=2" as="fetch">

When to Use Prefetch

• The next page in a multi-step flow (wizard, checkout)
• JavaScript bundles for likely next routes
• Data for anticipated user actions
• Resources needed after user interaction (modal content, expanded sections)

Prefetch Behavior

Prefetched resources are downloaded with the lowest priority. They will not compete with critical resources for the current page. The browser may skip prefetch entirely if the network is slow or the device is on a metered connection.

Preload

The preload hint is the most powerful resource hint. It tells the browser to immediately download a resource that is needed for the current page. Unlike prefetch, preload fetches at high priority and the resource must be used on the current page.

<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/assets/css/critical.css" as="style">
<link rel="preload" href="/assets/js/app.js" as="script">
<link rel="preload" href="/hero-image.webp" as="image">

The as Attribute

The as attribute is mandatory for preload. It tells the browser the type of resource being fetched, which determines:

• Request priority
• Correct Accept headers
• CSP policy matching
• Cache behavior

Common Preload Mistakes

• Missing as attribute: Without it, the browser fetches the resource twice.
• Preloading unused resources: If a preloaded resource is not used within 3 seconds, Chrome logs a warning. This wastes bandwidth.
• Missing crossorigin on fonts: Fonts are always fetched with CORS. Without crossorigin, the preloaded resource cannot be matched to the font request.
• Too many preloads: Preloading everything is the same as preloading nothing. Limit to 3-5 critical resources.

Decision Framework

Use this flowchart to decide which hint to apply:

1. Is the resource on a third-party domain? Start with dns-prefetch or preconnect.
2. Is the resource critical for the current page? Use preload.
3. Is the resource needed for a future page? Use prefetch.
4. Do you need the full connection immediately? Use preconnect.
5. Is it a low-priority external domain? Use dns-prefetch.

Measuring Impact

Always measure the impact of resource hints using:

• Chrome DevTools Network tab: Look for the Initiator column showing "preload" or "prefetch".
• WebPageTest waterfall: Compare before/after waterfalls to see timing improvements.
• Lighthouse: Check the "Preconnect to required origins" and "Preload key requests" audits.
• PageSpeed анализ: Monitor LCP and FCP improvements in real user metrics.

Summary

Resource hints are powerful tools for optimizing page load performance, but they require careful application. Use dns-prefetch for low-priority external domains, preconnect for critical third-party origins, preload for essential current-page resources, and prefetch for anticipated future navigations. Always measure results and avoid overusing hints, as excess hints can degrade rather than improve performance.