HTML Course 18.4 Preload, prefetch and other hints (overview)

18.4 Preload, Prefetch and Other Resource Hints (Overview)

1. Introduction to Resource Hints

Resource hints are declarative instructions to the browser that improve performance by adjusting the loading strategy for resources. They allow developers to:

Tell the browser which resources will be needed soon (preload).
Load low-priority resources in idle time (prefetch).
Establish connections early (dns-prefetch, preconnect).
Start full page previews (prerender).

2. Comparison of Common Resource Hints

Hint	Purpose	When It Fires	Typical Attributes
preload	Fetch critical resource ASAP	Immediately, high priority	as, href, crossorigin, fetchpriority
prefetch	Fetch future navigational resources	When browser idle	href, as
prerender	Load and render a full page	When browser idle	href
dns-prefetch	Resolve DNS early	Immediately	href
preconnect	Establish TCP & TLS	Immediately	href, crossorigin
modulepreload	Preload JavaScript modules	Immediately, module priority	href

3. Preload

preload tells the browser to fetch a given resource with high priority, even before it’s discovered in the document flow. It’s ideal for CSS, fonts, images or critical scripts.

as: resource type (script, style, image, font, document, fetch, etc.).
crossorigin: if resource is on another origin (anonymous or use-credentials).
fetchpriority: (high, low, auto) to fine-tune priority.

4. Prefetch

prefetch fetches resources that will be needed in the next page or later in the same page. It uses idle time and low priority.

5. Prerender

prerender fully renders another page in a hidden tab, complete with HTML, CSS, JS and images. Use sparingly to avoid wasted bandwidth.

6. DNS-Prefetch

dns-prefetch resolves the DNS record for a domain early, shaving off DNS lookup time before fetching resources.

7. Preconnect

preconnect establishes the TCP handshake and optionally TLS negotiation before any resource request is made, reducing latency.

8. Modulepreload

modulepreload specifically targets JavaScript modules (ESM). Modules have deferred execution by default, but this hint ensures the browser fetches them with proper priority.

9. Best Practices and Caveats

Only preload truly critical resources; overuse can waste bandwidth and harm performance.
Match as attribute to resource type to enable correct prioritization and headers (like CORS).
Test in different browsers—support and behavior vary, especially for prerender and prefetch.
Use fetchpriority (Chrome 108+) for finer control over preload requests.
Remove unused hints—mistaken prerender can consume CPU and memory.

10. SEO and Accessibility Considerations

Resource hints do not alter the DOM semantics, so they are transparent to screen readers and search engines. However, prerendered pages may be crawled—ensure proper robots directives.

Summary

Resource hints are powerful tools for critical resource management. Adopt them judiciously:

Use preload for above-the-fold CSS, fonts, essential scripts.
Use prefetch for future navigational assets.
Use preconnect and dns-prefetch to lower latency for third-party domains.
Use prerender sparingly—only for high-probability page transitions.