---
name: thedaviddias/html-resource-hints
source: https://app.decimal.ai/s/thedaviddias-html-resource-hints@1/SKILL.md
source_sha256: 8609d261896f
---

# Add resource hints (preload, prefetch, dns-prefetch)

The browser's HTML parser discovers resources sequentially — a font referenced in a CSS file won't be fetched until the CSS is parsed. Resource hints break this dependency chain, allowing the browser to start fetching critical resources in parallel with parsing. A single preload directive for a critical font can eliminate a 100–300ms Flash of Invisible Text.

## Quick Reference

- preload forces immediate download of resources needed by the current page
- prefetch fetches resources likely needed for the next navigation (low priority)
- dns-prefetch resolves DNS for third-party origins in advance
- preconnect does DNS + TCP + TLS for origins you'll connect to soon

## Check

Look at this HTML file for late-discovered critical resources — fonts referenced in CSS, hero images, and key scripts. Identify where preload or preconnect hints would help.

## Fix

Add appropriate preload hints for critical fonts, images, and scripts. Add preconnect for third-party domains used early in the page.

## Explain

Explain each resource hint type (preload, prefetch, preconnect, dns-prefetch), when to use each, and the consequences of misusing them.

## Code Review

Review templates, server-rendered HTML, and shared components that output markup related to Add resource hints (preload, prefetch, dns-prefetch). Flag exact elements, attributes, and routes where the rendered HTML violates the rule.

---

For full implementation details, code examples, and framework-specific guidance,
see `references/rule.md`.

Rule page: https://frontendchecklist.io/en/rules/html/html-resource-hints