Choose preload or preconnect

React chapter 151 · Web Perf · resource hints · preload, modulepreload, preconnect, crossorigin · source: Todd H. Gardner, Fundamentals of Web Performance, Part 2 slides 58–64 (preloading, preconnect, fonts, CSS, and waterfall timing)

The problem

A slow font is discovered late, so the page adds preconnect to the font file URL and preloads every image and script. The origin hint is malformed, the important file is still discovered late, and speculative downloads compete with the LCP image.

The pattern that fixes it

Use preconnect for a small number of critical cross-origin origins; use preload for an exact resource the current page will soon consume. Match the resource URL, as, type, and CORS mode. For ES modules use modulepreload, and remove hints the page does not use quickly.

In plain words

preconnect prepares the road to another server. preload sends one named delivery down that road early. Neither makes a resource free, so spend the browser’s early bandwidth only on the current page’s critical path.

Preconnect is opening a phone line to a supplier. Preload is placing an exact order before the kitchen asks. Calling every supplier and ordering the whole catalog only creates congestion.

Terms

preconnect
Warms an origin by doing connection work such as DNS, TCP, and TLS before its first request.
preload
Starts one known high-priority resource for the current navigation before normal discovery.
fetch destination
The as value — such as image, font, style, script, or fetch — that tells the browser how the response will be used.
modulepreload
The module-aware hint for an ES module and, where supported, its dependency graph.

Going deeper

Preconnect takes an origin, not a file

Use an origin such as https://cdn.example.com, without /fonts/brand.woff2. It is most useful when a required third-party origin is known from the HTML but the first request appears later. The document origin is normally already connected. Too many preconnects waste sockets, CPU, radio time, and battery.

Preload must match the later request

The later request must use the same URL, credentials/CORS mode, and destination. Fonts generally need crossorigin even when the URL looks same-origin. A mismatch can turn one optimization into two downloads; verify one reused request in the Network panel.

What can be preloaded

Common critical destinations are image, font, style, script, and fetch. HTML also defines destinations such as audio, video, track, and worker, but they are rarely first-paint critical. Use modulepreload rather than as="script" for an ES module graph.

Preload is not prefetch

Preload is for a resource needed by this page soon and usually receives high priority. Prefetch is a lower-priority bet for a future navigation. If the current HTML already directly references a stylesheet or hero image, it is discoverable; add a preload only when a trace shows a real discovery delay.

Keep learning

More courses

  • Jobs, linked to lessons — Browse jobs where every requirement links to the chapter that teaches it. See how ready you are, how long the gap takes to close, and which listings look stale.
  • Match a job post to courses — Paste a job post. Each skill is matched to a track here and put in learning order, foundations first.
  • Database in depth — How a query becomes work. Indexes, isolation, locks, and the plans that explain why a page is slow — not an ORM tour.
  • System Design — Eight interview case studies, from a flash sale and Tatkal to a live final and a chat model, plus JWT in separate chapters.
  • Microservices — Microservice patterns one diagram at a time: how to split a monolith, how services talk, and how data stays consistent without distributed transactions.
  • Kafka — A beginner-to-senior path through event logs, reliable delivery, production operations, and disaster recovery.
  • Frontend system design — How a UI is sliced when it is a product, not a page: ownership of state, cache, routes, and what happens when the network lies.
  • CSS in depth — See the box, then the page. Visual chapters from the box model through Flexbox surprises, Grid, selectors, and units, then backgrounds, shapes, and visual effects, each with a playground.
  • Accessibility — HTML labs first, then a full pass of WAI-ARIA 1.3: naming, every state, widget and structure roles, live regions, ariaNotify, and relationships.
  • Docker — What an image is, why layers cache, and how containers find each other on a network.
  • Redis — Fifteen Redis patterns, one picture each: cache, session, lock, counter, rate limiter, queue, and when Redis is the wrong tool.