What's the difference between preload and preconnect?

Preload fetches a specific resource early (like a font file). Preconnect establishes an early connection to an origin (like fonts.googleapis.com) but doesn't fetch anything yet. Use preload for critical resources, preconnect for third-party origins.

Do I need crossorigin for fonts?

Yes, if loading fonts from a different origin (like Google Fonts), you need crossorigin='anonymous' for both the preload/preconnect hint and the actual font link tag.

Can I use preload for everything?

No. Preload should only be used for critical, above-the-fold resources. Overusing it wastes bandwidth and can slow down your page. Use it sparingly for fonts, critical CSS, or blocking JavaScript.

What's the difference between prefetch and preload?

Preload is for resources needed on the current page. Prefetch is for resources likely needed on the next page navigation. Preload has higher priority and is more aggressive.

Generate preload and preconnect tags – Free Resource Hints Generator

Learn more

Need resource hints? Generate preload, preconnect, prefetch, and dns-prefetch tags to speed up your website loading.

Preload Hints

Need preload/preconnect tags? Generate resource hints fast

Resource Hints

preload: Fetch resources early (fonts, CSS, JS)
preconnect: Establish early connections to origins
prefetch: Fetch resources for next navigation
dns-prefetch: Resolve DNS early (lightweight)

No resource hints added yet

Best Practices

Use preload for critical resources (fonts, above-the-fold CSS)
Use preconnect for third-party origins (fonts, APIs, CDNs)
Use prefetch for likely next-page resources
Use dns-prefetch as a lightweight alternative to preconnect
Don't overuse—only hint resources you actually need

Resource Hints

preload: Fetch resources early (fonts, CSS, JS)
preconnect: Establish early connections to origins
prefetch: Fetch resources for next navigation
dns-prefetch: Resolve DNS early (lightweight)

No resource hints added yet

Best Practices

Use preload for critical resources (fonts, above-the-fold CSS)
Use preconnect for third-party origins (fonts, APIs, CDNs)
Use prefetch for likely next-page resources
Use dns-prefetch as a lightweight alternative to preconnect
Don't overuse—only hint resources you actually need

No output generated yet. Use the tool to generate content.