Performance – Preload, Prefetch, and Preconnect

Resource Hints

Guide the browser to fetch critical assets earlier.

<!-- Preload critical CSS -->
<link rel='preload' href='styles/main.css' as='style' onload='this.rel="stylesheet"'>

<!-- Prefetch a page the user might visit next -->
<link rel='prefetch' href='/about.html'>

<!-- Preconnect to third‑party CDN -->
<link rel='preconnect' href='https://fonts.gstatic.com' crossorigin>

How they work

• preload – Loads the resource immediately and makes it available for use as soon as it’s needed; must specify the as attribute (script, style, font, image).
• prefetch – Low‑priority fetch for resources likely needed later (e.g., next article).
• preconnect – Opens early DNS resolution, TLS handshake, and TCP connection to an external origin.

Performance tips

• Use preload sparingly; over‑preloading can block other critical requests.
• Pair preload with as='font' and crossorigin for web fonts.
• Use prefetch for resources the user is highly likely to navigate to next.
• Keep the number of preconnect links low – each initiates a network round‑trip.

---

Quick checklist for resource hints

1. Critical CSS preloaded with correct as='style'? ✅
2. Future navigation assets prefetched (rel='prefetch')? ✅
3. External origins preconnected (rel='preconnect')? ✅
4. crossorigin set on fonts and other cross‑origin resources? ✅
5. No unnecessary preloads that block rendering? ✅

Tip: Verify that your hints are respected using Chrome’s Network panel or the Coverage tool.