Use when reviewing templates, rendered HTML, or shared components related to Add resource hints (preload, prefetch, dns-prefetch). Validate the final browser-facing markup, not just the source framework abstraction.
Installs into .claude/skills of the current project.
Are you the author of Html Resource Hints?
Add the live security badge to your README. It updates with every re-scan.
[](https://www.skillsdirectory.com/skills/thedaviddias-html-resource-hints)
---
name: html-resource-hints
description: "Use when reviewing templates, rendered HTML, or shared components related to Add resource hints (preload, prefetch, dns-prefetch). Validate the final browser-facing markup, not just the source framework abstraction."
metadata:
category: html
priority: high
difficulty: intermediate
estimatedTime: "20"
source: frontendchecklist.io
url: https://frontendchecklist.io/en/rules/html/html-resource-hints
---
# 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
