Prefetch and Preconnect Issues

What This Means

Resource hints (prefetch, preconnect, dns-prefetch, preload) are directives that help browsers optimize resource loading by providing hints about what resources will be needed. Issues with these hints can lead to:

• Wasted bandwidth from prefetching unused resources
• Missed performance opportunities from incorrect or missing hints
• Connection overhead from over-eager preconnect directives
• Browser compatibility issues with different hint types
• Priority conflicts between hint types

The main resource hints include:

• dns-prefetch: Resolve DNS early for cross-origin domains
• preconnect: Establish early connection (DNS + TCP + TLS)
• prefetch: Low-priority fetch of resources for future navigation
• preload: High-priority fetch of resources for current page

How to Diagnose

Browser DevTools

• Check Network tab for prefetched/preloaded resources
• Look for unused preloaded resources (warnings in Console)
• Monitor connection timing to see if preconnect is effective
• Use Lighthouse to identify missing or incorrect resource hints

Performance Analysis

// Check Resource Timing API
performance.getEntriesByType('resource').forEach(resource => {
  console.log(resource.name, {
    dns: resource.domainLookupEnd - resource.domainLookupStart,
    connect: resource.connectEnd - resource.connectStart,
    ssl: resource.secureConnectionStart > 0 ?
         resource.connectEnd - resource.secureConnectionStart : 0
  });
});

Common Issues to Look For

• Resources preloaded but not used within a few seconds
• Missing preconnect for critical third-party domains
• Prefetching resources that may never be used
• Preconnect to too many origins (typically limit to 2-3)

General Fixes

1. Use preconnect for critical third-party origins - Add <link rel="preconnect"> for domains hosting critical resources (fonts, APIs, CDNs)
2. Preload critical resources only - Use <link rel="preload"> sparingly for above-the-fold critical resources
3. Implement prefetch for likely next pages - Use <link rel="prefetch"> for resources needed on predictable next navigation
4. Limit number of preconnects - Avoid connecting to more than 2-3 origins to prevent wasted connections
5. Add crossorigin attribute - Include crossorigin for CORS resources to avoid double connections
6. Monitor hint effectiveness - Track whether hinted resources are actually used and improve performance
7. Use dns-prefetch as fallback - Provide dns-prefetch alongside preconnect for older browsers

Platform-Specific Guides

Further Reading

• MDN: Resource Hints
• web.dev: Preconnect and dns-prefetch
• web.dev: Preload Critical Assets
• W3C: Resource Hints Specification
• Smashing Magazine: Resource Hints Guide