Set up resource prefetching and preloading
✓Works with OpenClaudeYou are a web performance engineer. The user wants to set up resource prefetching and preloading to improve page load times and perceived performance.
What to check first
- Inspect
<head>section of your HTML to see existing<link>tags - Run Chrome DevTools Network tab to identify which resources are critical path blockers
- Check your bundle size with
webpack-bundle-analyzeror similar to prioritize what to prefetch
Steps
- Add
<link rel="preload">tags for critical resources in the<head>withasattribute matching resource type (e.g.,as="font",as="script",as="style") - Use
<link rel="prefetch">for non-critical resources that the user will likely need on next navigation - Add
<link rel="dns-prefetch">for third-party domains (e.g., analytics, CDN) to resolve DNS early - Use
<link rel="preconnect">for domains where you'll fetch resources to establish TCP connection and TLS handshake - Implement resource hints with
crossoriginattribute when fetching cross-origin resources to match CORS requirements - Use
<link rel="preload">withonload="this.onload=null;this.rel='stylesheet'"to load stylesheets without blocking render - Add
<link rel="prefetch">in a service worker or JavaScript for dynamic route prefetching - Test with DevTools Coverage tab to ensure prefetched resources are actually used
Code
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Preload critical font with crossorigin -->
<link rel="preload" href="/fonts/inter-var.woff2" as="font" type="font/woff2" crossorigin>
<!-- Preload critical CSS -->
<link rel="preload" href="/css/critical.css" as="style">
<!-- Preload hero image -->
<link rel="preload" href="/images/hero.webp" as="image" media="(min-width: 1024px)">
<!-- DNS prefetch for third-party analytics -->
<link rel="dns-prefetch" href="//cdn.example.com">
<!-- Preconnect to API server -->
<link rel="preconnect" href="https://api.example.com" crossorigin>
<!-- Prefetch next page resources (for SPA navigation) -->
<link rel="prefetch" href="/js/about-page.js">
<link rel="prefetch" href="/js/products-page.js">
<!-- Load stylesheet without blocking render -->
<link rel="preload" href="/css/main.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="/css/main.css"></n
Note: this example was truncated in the source. See the GitHub repo for the latest full version.
Common Pitfalls
- Treating this skill as a one-shot solution — most workflows need iteration and verification
- Skipping the verification steps — you don't know it worked until you measure
- Applying this skill without understanding the underlying problem — read the related docs first
When NOT to Use This Skill
- When a simpler manual approach would take less than 10 minutes
- On critical production systems without testing in staging first
- When you don't have permission or authorization to make these changes
How to Verify It Worked
- Run the verification steps documented above
- Compare the output against your expected baseline
- Check logs for any warnings or errors — silent failures are the worst kind
Production Considerations
- Test in staging before deploying to production
- Have a rollback plan — every change should be reversible
- Monitor the affected systems for at least 24 hours after the change
Related Performance Skills
Other Claude Code skills in the same category — free to download.
Bundle Analyzer
Analyze and reduce JavaScript bundle size
Image Optimization
Optimize images for web (format, size, lazy load)
Code Splitting
Implement code splitting and dynamic imports
Caching Strategy
Design and implement caching strategy
Database Query Perf
Optimize database query performance
Render Optimizer
Optimize React re-renders and component performance
Lighthouse Fixer
Fix issues found in Lighthouse audit
Tree Shaking Fix
Fix tree-shaking issues and reduce dead code
Want a Performance skill personalized to YOUR project?
This is a generic skill that works for everyone. Our AI can generate one tailored to your exact tech stack, naming conventions, folder structure, and coding patterns — with 3x more detail.