Resource Hints
Overview
Resource hints are advanced performance micro-optimizations placed in the <head>. They allow you to mentally 'step ahead' of the browser's parser and give it instructions on what it should do during idle time. For example, if you know the user is highly likely to click the 'Checkout' button next, you can explicitly tell the browser to pre-fetch the Javascript and images for the Checkout page in the background right now. When the user finally clicks the button, the page load feels entirely instant.
Syntax
<head>
<!-- 1. DNS Prefetch: Resolve a domain name's IP address early -->
<!-- Low cost. Great for third-party CDNs. -->
<link rel="dns-prefetch" href="https://fonts.googleapis.com">
<!-- 2. Preconnect: Resolve DNS AND perform the SSL handshake early -->
<!-- Higher cost. Use only for critical third-party connections. -->
<link rel="preconnect" href="https://api.stripe.com" crossorigin>
<!-- 3. Preload: Force the browser to download a specific file NOW (High Priority) -->
<!-- Mandatory for critical resources like Hero Images or main Web Fonts. -->
<link rel="preload" href="/fonts/Inter-Bold.woff2" as="font" type="font/woff2" crossorigin>
<!-- 4. Prefetch: Download a file in the background (Low Priority) -->
<!-- Great for downloading assets for the *next* page the user might visit. -->
<link rel="prefetch" href="/js/checkout-bundle.js">
</head>Common Pitfalls
- Overusing
<link rel="preload">. Preload forces the file to the absolute front of the browser's download queue, blocking other critical tasks. If you preload 20 different images, you have defeated the purpose and created a massive bottleneck. - Forgetting the
crossoriginattribute when preloading Fonts. Due to strict browser security rules, Web Fonts are ALWAYS requested using anonymous CORS requests. If you omitcrossorigin, the preloaded font is dumped, and the browser wastes time downloading it a second time.
Interview Questions
preload and prefetch?preload is mandatory and high-priority for resources needed on the CURRENT page right now. prefetch is optional and low-priority for resources the user MIGHT need on the NEXT page they navigate to.
Real-World Example
Aggressively preloading a massive Hero Image so it renders instantly, drastically improving the LCP (Largest Contentful Paint) Core Web Vital score.
<head>
<!-- Tell the browser to prioritize this image above almost everything else -->
<link
rel="preload"
as="image"
href="/hero-banner-desktop.webp"
media="(min-width: 768px)"
>
</head>Check Your Knowledge
Test your understanding of Resource Hints with these quick questions.