HtmlHow-ToBeginner · 3 min read

How to Use Resource Hints in HTML for Faster Loading

Use <link> tags with attributes like rel="preload", rel="prefetch", and rel="dns-prefetch" in the HTML <head> to tell the browser to load resources early. These hints help the browser prepare or fetch resources before they are needed, speeding up page load times.

📐

Syntax

Resource hints use the <link> tag with different rel attribute values to tell the browser how to handle resources early.

rel="preload": Load a resource (like a font or script) early for immediate use.
rel="prefetch": Fetch a resource for future navigation or use.
rel="dns-prefetch": Resolve the DNS of a domain early to speed up requests.
rel="preconnect": Establish early connections (DNS, TCP, TLS) to a domain.

Each <link> tag should include href for the resource URL and sometimes as to specify the resource type.

html

<link rel="preload" href="style.css" as="style">
<link rel="prefetch" href="next-page.html">
<link rel="dns-prefetch" href="https://example.com">
<link rel="preconnect" href="https://fonts.googleapis.com">

💻

Example

This example shows how to preload a font and prefetch a script for a future page to improve loading speed.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Resource Hints Example</title>
  <link rel="preload" href="/fonts/myfont.woff2" as="font" type="font/woff2" crossorigin>
  <link rel="prefetch" href="/scripts/future-script.js" as="script">
</head>
<body>
  <h1>Hello, resource hints!</h1>
  <p>The font will load early, and the script will be fetched for later use.</p>
</body>
</html>

Output

A webpage with a heading 'Hello, resource hints!' and a paragraph below it.

⚠️

Common Pitfalls

Common mistakes when using resource hints include:

Using preload for resources not used immediately, which wastes bandwidth.
Forgetting the as attribute with preload, causing the browser to ignore the hint.
Using prefetch for critical resources needed right away.
Not adding crossorigin when preloading fonts or other cross-origin resources, causing loading errors.

html

<!-- Wrong: Missing 'as' attribute -->
<link rel="preload" href="style.css">

<!-- Right: Include 'as' attribute -->
<link rel="preload" href="style.css" as="style">

📊

Quick Reference

Resource Hint	Purpose	When to Use
preload	Load resource early for current page	Critical CSS, fonts, scripts
prefetch	Fetch resource for future navigation	Next page scripts or images
dns-prefetch	Resolve DNS early	External domains used later
preconnect	Establish early connection	Domains hosting important resources

✅

Key Takeaways

Use tags with rel attributes like preload and prefetch to hint browsers about resource loading.

Always include the as attribute with preload to specify resource type for correct handling.

Prefetch is for resources needed in the future, not immediately.

Add crossorigin when preloading cross-origin fonts or resources to avoid errors.

Use dns-prefetch and preconnect to speed up domain resolution and connections.