preloading-resources

Preload critical resources using React 19 preloading APIs.

Updated Nov 21, 2025

Search Tags:#performance #react #prefetch #preconnect #preload

Ready to run

npx skills add https://github.com/djankies/claude-configs --skill preloading-resources

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: preloading-resources
Source: https://github.com/djankies/claude-configs/tree/main/react-19/skills/preloading-resources
Command: npx skills add https://github.com/djankies/claude-configs --skill preloading-resources

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill introduces resource preloading APIs in React 19 to improve initial load and navigation performance.

Core Features & Use Cases

prefetchDNS and preconnect to establish early network connections.
preload and preinit to fetch or execute critical assets ahead of time.
Practical use on routes and navigation to reduce perceived latency.

Quick Start

Preload a font and a critical image on app load.

Frequently Asked Questions about preloading-resources

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I reduce initial page load time in React 19?▼

Reduce initial load latency by preloading critical resources using React 19's prefetchDNS, preconnect, preload, and preinit functions. These APIs establish early network connections and fetch assets before they're needed, improving perceived performance on app load and navigation.

What's the difference between prefetchDNS, preconnect, preload, and preinit?▼

prefetchDNS resolves domain names early; preconnect establishes TCP connections; preload fetches resources without executing them; preinit fetches and executes critical assets. Choose based on resource type and timing: fonts and images use preload, scripts use preinit, and DNS and connections use their respective functions.

How do I preload fonts and images in React 19 applications?▼

Call preload from react-dom with resource attributes like as, type, and crossOrigin. Specify as="font" for fonts or as="image" for images, include the href, and optionally set precedence to control execution order. Execute before component render to ensure resources fetch early.

Can I preload resources on route navigation?▼

Yes. Trigger preloading on route hover or navigation intent using prefetchDNS, preconnect, preload, or preinit before the route loads. This reduces perceived latency when users navigate between pages by fetching critical assets in advance.

What resource attributes do I need to specify for preloading?▼

Use href for the resource URL, as to declare resource type (font, image, script, style), type for MIME type, and crossOrigin for cross-origin resources. Optional precedence controls scheduling priority. Combine these attributes with prefetchDNS, preconnect, preload, or preinit functions.

Do I need React 19 to use resource preloading APIs?▼

Yes. Resource preloading APIs—prefetchDNS, preconnect, preload, and preinit—are React 19 features available through react-dom. Earlier React versions do not expose these APIs natively.