What Is Resource Hints and How to Use Them

Short answer

Resource hints are HTML attributes that tell the browser how to prioritize and fetch resources. They improve perceived and actual performance.

How it works

• rel="preload" fetches a critical resource early in the current page load.
• rel="prefetch" fetches resources likely needed for the next navigation.
• rel="preconnect" establishes early connections to required origins.
• rel="dns-prefetch" resolves domain names ahead of time.

Example

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preload" as="image" href="/hero.webp">

Why it matters

Resource hints reduce waiting time for critical assets. Preconnecting to third-party domains can shave hundreds of milliseconds off requests.