Resource Hints Guide - Preload, Prefetch, Preconnect

Master resource hints to optimize loading priorities. Learn when to use preload, prefetch, preconnect, and dns-prefetch for better performance.

preloadprefetchperformance

Types of Resource Hints

  • preload - High priority, needed for current page
  • prefetch - Low priority, needed for future navigation
  • preconnect - Establish early connections to origins
  • dns-prefetch - DNS lookup only, lighter than preconnect

When to Use Each Hint

1

Preload LCP Resources

Preload your LCP image and critical fonts that aren't discovered early in HTML.

2

Preconnect to Critical Origins

Preconnect to domains where you'll fetch resources soon, like CDNs and API servers.

3

Prefetch Next Page Resources

If you can predict user navigation, prefetch resources for the likely next page.

Frequently Asked Questions

Yes. Preload is high-priority and can compete with other important resources. Only preload truly critical resources not discovered early.
Preconnect does DNS + TCP + TLS. dns-prefetch only does DNS lookup. Use dns-prefetch for less critical origins to reduce overhead.

Find out what is broken on your site

A free diagnostic preview shows what stops Google, social platforms and AI crawlers from understanding your site. The complete report, repair pull requests and monitoring are part of a plan.

Audit my site