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.

Ready to audit your website?

Get instant performance, SEO, and accessibility scores for your website.

Start Free Audit