Use resource hints for faster loading
SkillMediaPerformance-resource-hints is a skill that guides an AI agent through diagnosing slow page loads, heavy assets, and rendering delays. It uses resource hints for faster loading as part of the workflow, and directs the agent to verify the actual bottleneck in browser performance tools before recommending any changes.
Available today. Use it from your connected AI after setup.
No other account needed.
Have access to the web page or site you want to audit and, ideally, its performance data.
Then ask your AI: use the Use resource hints for faster loading skill
What your AI can do with it
- Audits slow page loads and identifies contributing causes
- Investigates heavy assets that delay rendering
- Verifies the actual bottleneck using DevTools, Lighthouse, or field data
- Applies resource hints for faster loading where appropriate
- Recommends changes only after confirming the real cause
Getting started
- Have access to the web page or site you want to audit and, ideally, its performance data.
- Add the performance-resource-hints skill to your agent's available skills.
- Ask the agent to audit a slow page load, heavy asset, or rendering delay.
- Review the agent's findings, which should confirm the bottleneck in DevTools, Lighthouse, or field data before any changes are recommended.
What this skill tells your AI
The instructions your AI receives, as published by thedaviddias/front-end-checklist in skills/performance-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/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 and faster loading.
- Does it recommend changes right away?
- No. It verifies the actual bottleneck in DevTools, Lighthouse, or field data before recommending changes.
- What tools does it rely on?
- It uses browser performance tools such as DevTools, Lighthouse, and field data to confirm what is slowing a page down.
- What does it cover?
- Slow page loads, heavy assets, and rendering delays, with resource hints applied for faster loading once the bottleneck is confirmed.
Advanced
- Item type
- skill
- Key
performance-resource-hints- Source
- github.com/thedaviddias/front-end-checklist