Prefetch Critical Resources with Resource Hints
Use preconnect and prefetch hints for the next likely navigation so critical resources arrive before they are requested.
Task
Add resource hints that warm connections and fetch the next page resources early.
When to use this
A navigation feels slow because the browser only starts connecting and downloading after the click.
Prerequisites
- Control over the HTML head
- Knowledge of critical third-party origins
- A performance measurement setup
Steps
1. Preconnect to origins used on the next step.
<link rel="preconnect" href="https://cdn.example.com" crossorigin>
<link rel="preconnect" href="https://fonts.example.com" crossorigin>
<link rel="dns-prefetch" href="//analytics.example.com">Expected output: DNS and TLS setup begin before the resources are requested.
2. Prefetch the next page bundle or document.
<link rel="prefetch" href="/next-page/" as="document">Expected output: The next document is fetched at low priority during idle time.
Troubleshooting
Problem
Too many hints waste bandwidth
Solution
Limit hints to truly critical origins and pages; every hint competes for bandwidth.
Problem
Preconnect unused
Solution
Only preconnect to origins actually used soon; unused connections are dropped.
Limitations
- Hints are best-effort.
- Over-hinting degrades performance.
- Prefetch ignores user data costs.
What this recipe does
Add resource hints that warm connections and fetch the next page resources early.
A navigation feels slow because the browser only starts connecting and downloading after the click.
Prerequisites
- Control over the HTML head
- Knowledge of critical third-party origins
- A performance measurement setup
Procedure
- Preconnect to origins used on the next step.
<link rel="preconnect" href="https://cdn.example.com" crossorigin>
<link rel="preconnect" href="https://fonts.example.com" crossorigin>
<link rel="dns-prefetch" href="//analytics.example.com">Expected result: DNS and TLS setup begin before the resources are requested.
- Prefetch the next page bundle or document.
<link rel="prefetch" href="/next-page/" as="document">Expected result: The next document is fetched at low priority during idle time.
How to confirm it worked
Run the commands above and confirm every expected result in order. If a step does not produce the stated output, use the troubleshooting notes before continuing. A passing run shows measurements show connection setup and next-page start time drop for the hinted navigation.
Troubleshooting
Too many hints waste bandwidth — Limit hints to truly critical origins and pages; every hint competes for bandwidth.
Preconnect unused — Only preconnect to origins actually used soon; unused connections are dropped.
Limitations
- Hints are best-effort.
- Over-hinting degrades performance.
- Prefetch ignores user data costs.