Preload/Prefetch Generator

Resource Hint Types

• preload: Fetch and cache critical resources needed for current page
• prefetch: Fetch and cache resources for likely next navigation
• preconnect: Establish early connection to important third-party origins
• dns-prefetch: Resolve DNS for third-party domains in advance
• modulepreload: Preload ES modules and their dependencies

Best Practices

• • Only preload critical resources needed within 3 seconds
• • Use preconnect for important third-party domains (max 4-6)
• • Prefetch resources for likely next page, not current page
• • Always specify 'as' attribute for preload to set correct priority
• • Add crossorigin for CORS resources (fonts, etc.)