Last updated
Resource Hints Generator Examples
The Resource Hints Generator creates HTML link tags that tell the browser about resources it will need before it discovers them naturally. Below are examples for all four hint types.
Preload — Fetch Immediately with High Priority
Preload a critical font needed for the initial render:
<!-- Preload a web font (crossorigin required for fonts) -->
<link rel="preload" href="/fonts/inter-regular.woff2" as="font" type="font/woff2" crossorigin>
<!-- Preload a hero image -->
<link rel="preload" href="/images/hero.jpg" as="image">
<!-- Preload a critical CSS file -->
<link rel="preload" href="/css/critical.css" as="style">
<!-- Preload a critical JavaScript file -->
<link rel="preload" href="/js/app.js" as="script">
Preload tells the browser to fetch the resource immediately at high priority. Use it for resources needed for the current page's initial render.
Preload — Responsive Image
Preload the correct image size for the current viewport:
<link
rel="preload"
as="image"
href="/images/hero-800.jpg"
imagesrcset="/images/hero-400.jpg 400w, /images/hero-800.jpg 800w, /images/hero-1200.jpg 1200w"
imagesizes="(max-width: 600px) 400px, (max-width: 900px) 800px, 1200px"
>
The imagesrcset and imagesizes attributes ensure the browser preloads the correct image size for the current viewport, improving Largest Contentful Paint (LCP).
Prefetch — Load Resources for Future Navigation
Prefetch resources the user is likely to need next:
<!-- Prefetch the next page's HTML -->
<link rel="prefetch" href="/products/detail">
<!-- Prefetch a JavaScript bundle for the next route -->
<link rel="prefetch" href="/js/product-detail.chunk.js" as="script">
<!-- Prefetch an image shown on the next page -->
<link rel="prefetch" href="/images/product-42.jpg" as="image">
Prefetch downloads resources during browser idle time. The resources are cached and ready when the user navigates to the next page.
Preconnect — Establish Early Connections
Preconnect to third-party origins to reduce connection latency:
<!-- Preconnect to a CDN -->
<link rel="preconnect" href="https://cdn.example.com">
<!-- Preconnect to Google Fonts (two connections needed) -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<!-- Preconnect to an API server -->
<link rel="preconnect" href="https://api.example.com">
<!-- Preconnect to analytics -->
<link rel="preconnect" href="https://www.google-analytics.com">
Preconnect performs DNS lookup, TCP connection, and TLS handshake early. This saves 100-500ms when the actual request is made.
DNS-Prefetch — Lightweight DNS Resolution
Resolve DNS for origins you're less certain will be needed:
<!-- DNS-prefetch for origins that might be needed -->
<link rel="dns-prefetch" href="https://cdn.example.com">
<link rel="dns-prefetch" href="https://fonts.googleapis.com">
<link rel="dns-prefetch" href="https://www.google-analytics.com">
<link rel="dns-prefetch" href="https://connect.facebook.net">
DNS-prefetch only resolves the DNS — no TCP or TLS. It's lighter than preconnect and appropriate for origins where you're less certain a connection will be needed.
Priority Hints
Use fetchpriority to fine-tune resource loading priority:
<!-- High priority for the hero image (improves LCP) -->
<img src="/images/hero.jpg" fetchpriority="high" alt="Hero image">
<!-- Low priority for below-the-fold images -->
<img src="/images/footer-banner.jpg" fetchpriority="low" alt="Footer banner">
<!-- High priority for a critical script -->
<script src="/js/critical.js" fetchpriority="high"></script>
<!-- Low priority for a non-critical stylesheet -->
<link rel="stylesheet" href="/css/print.css" fetchpriority="low">
Speculation Rules API (Modern Prefetch)
Use the Speculation Rules API for smarter prefetching:
<script type="speculationrules">
{
"prefetch": [
{
"source": "list",
"urls": ["/products", "/about", "/contact"]
}
],
"prerender": [
{
"source": "document",
"where": { "href_matches": "/products/*" },
"eagerness": "moderate"
}
]
}
</script>
Speculation Rules provides more control than link rel="prefetch", including conditional prefetching and full page prerendering.
Complete Optimized Head Section
A fully optimized head with all relevant resource hints:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Preconnect to critical third-party origins -->
<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">
<!-- DNS-prefetch for less-certain origins -->
<link rel="dns-prefetch" href="https://www.google-analytics.com">
<!-- Preload critical resources -->
<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/images/hero.jpg" as="image" fetchpriority="high">
<link rel="preload" href="/css/critical.css" as="style">
<!-- Critical CSS -->
<link rel="stylesheet" href="/css/critical.css">
<!-- Prefetch likely next pages -->
<link rel="prefetch" href="/products">
<title>My Page</title>
</head>
Performance Impact
Expected improvements from resource hints on a typical page:
Optimization Metric Improved Typical Gain
Preload hero image LCP -300ms to -800ms
Preconnect to CDN TTFB -100ms to -400ms
Preconnect to Google Fonts FCP -200ms to -500ms
Prefetch next page Navigation time -500ms to -2000ms
DNS-prefetch for analytics Analytics load -50ms to -150ms
- Preload: fetch critical resources immediately at high priority
- Prefetch: load future navigation resources during idle time
- Preconnect: establish DNS + TCP + TLS connections early
- DNS-prefetch: lightweight DNS-only resolution for uncertain origins
- Priority hints with fetchpriority="high/low" on images and scripts
- Speculation Rules API for modern conditional prefetching
- Correct crossorigin attribute for fonts and cross-origin resources
- Responsive image preloading with imagesrcset and imagesizes