Use resource hints for faster loading
SkillMediaresource-hints is a skill for AI agents that audits slow page loads, heavy assets, and rendering delays. It verifies the actual bottleneck using DevTools, Lighthouse, or field data before recommending changes, so resource hints like preload are only suggested when they will genuinely speed up loading.
Available today. Use it from your connected AI after setup.
No other account needed.
Have an agent that supports loading skills.
Then ask your AI: use the Use resource hints for faster loading skill
What your AI can do with it
- Audit slow page loads and identify heavy assets
- Investigate rendering delays related to resource hints
- Verify the actual bottleneck in DevTools before recommending changes
- Check Lighthouse results to confirm whether preload will help
- Use field data to validate loading problems before changes
Getting started
- Have an agent that supports loading skills.
- Add the resource-hints skill to the agent's available skills.
- Collect evidence of the slow page load using DevTools, Lighthouse, or field data.
- Ask the agent to audit the page and confirm whether resource hints like preload address the actual bottleneck before making changes.
What this skill tells your AI
The instructions your AI receives, as published by thedaviddias/front-end-checklist in skills/resource-hints/SKILL.md and read by ahel’s review.
Resource hints let the browser start fetching critical assets earlier—improving LCP by 100-300ms on average.
Quick Reference
- Use preload for critical above-the-fold resources (fonts, hero images)
- Use preconnect for third-party origins (CDNs, APIs, analytics)
- Use prefetch for resources likely needed on next navigation
- Use dns-prefetch as a lightweight alternative to preconnect
Check
Analyze resource hints on this page and verify critical resources use preload/preconnect for optimal loading.
Fix
Add appropriate resource hints (preload, prefetch, preconnect) for critical assets to improve loading performance.
Explain
Explain the differences between preload, prefetch, preconnect, and dns-prefetch and when to use each.
Code Review
Review the routes, assets, and loading behavior that affect Use resource hints for faster loading. Flag exact files, requests, or rendering steps that add unnecessary network, CPU, or layout cost, and describe the measurement method used to confirm the issue.
For full implementation details, code examples, and framework-specific guidance,
see references/rule.md.
Rule page: https://frontendchecklist.io/en/rules/performance/resource-hints
Signals
- GitHub stars
- 74k
- Forks
- 7k
- Last commit
- Aug 2026
Questions
- When should this skill be used?
- Use it when auditing slow page loads, heavy assets, or rendering delays related to resource hints. It verifies the actual bottleneck in DevTools, Lighthouse, or field data before recommending changes.
- Does it recommend resource hints right away?
- No. It first verifies the actual bottleneck using DevTools, Lighthouse, or field data, and only then recommends changes such as resource hints.
- What tools does it rely on for verification?
- DevTools, Lighthouse, or field data can be used to confirm the real cause of slow loading before any recommendation is made.
Advanced
- Item type
- skill
- Key
resource-hints- Source
- github.com/thedaviddias/front-end-checklist