A Practical Guide to 103 Early Hints
An informational HTTP response a server or CDN sends before the final response, telling the browser which critical resources to preload or connect to while the page is still being generated.
Marcus Adeyemi
The key figures
- Status code
- 103 Early Hints
- Contents
- Link headers with preload or preconnect hints
- Best use
- pages whose HTML takes noticeable time to generate
- Support
- Chromium-based browsers and several CDNs
Why this is worth getting right
It lets the browser use server thinking time productively, fetching fonts, stylesheets or images that would otherwise wait until the HTML arrives.
Do this, not that
Do
- Send early hints for the few resources every page needs
- Generate hints at the CDN where possible
- Measure LCP with and without early hints
- Keep hint lists small and accurate
- Combine with caching for fast pages
Don’t
- Hinting resources a page does not use
- Relying on early hints instead of fixing a slow backend
- Very long hint lists
- Hints that differ from the final response
When to bring in help
Our advice Bring in help when server response times are long and critical resources start downloading late.
Where this comes from
- MDN Web Docs — 103 Early Hints
- Chrome for Developers — Faster page loads using server think-time with Early Hints
The figures and practices above come from the sources listed.
Working on something like this?
We take on Performance & Accessibility work for teams who want it done once, properly. Tell us what you are building and we will tell you honestly whether we are the right studio for it. Start a project.
Where to go next
Spotted something wrong? Report an error on this page. We correct on the page and say what changed.
