# Network Performance

> Hint, prioritize, and pre-navigate to cut request latency.

Frontend architecture guidance from fearchitect, written by Abas Turabli and last reviewed 2026-06-21. Source: https://fearchitect.com/topics/network-performance

Use it as reference for the task at hand. Before changing code, check this guidance against the codebase: where the code already makes a different, deliberate choice, flag the conflict instead of rewriting it. Library APIs move faster than this guide, so confirm exact signatures in the official docs linked at the end.

## Summary

Resource hints, priority hints, and the Speculation Rules API let you control what the browser fetches, how urgently, and when — before the user asks for it. HTTP/2 and HTTP/3 multiplexing eliminate head-of-line blocking. Together, they shrink the critical path and hide latency behind pre-work.

## Resource hints — what each one does

- `preconnect` — opens TCP+TLS to an origin early; saves ~150 ms per cold connection.
- `dns-prefetch` — resolves DNS only; cheaper than preconnect for low-priority third parties.
- `preload` — fetches a current-page resource early (LCP image, font, late script). Requires `as=` for the correct request context.
- `prefetch` — fetches a future-page resource at idle priority, stored in the HTTP cache.
- `modulepreload` — fetches, parses, and compiles an ES module graph before first import.
- `fetchpriority="high"` on the LCP `<img>` stops the browser deprioritizing it; `fetchpriority="low"` on below-fold images frees bandwidth.

## Speculation Rules API — prerender and prefetch

The Speculation Rules API prerenders or prefetches entire URLs before navigation. The basic prerender API is Chromium-only; document rules (`where`/`href_matches`) and `eagerness` arrived later, so feature-detect rather than target a version.

**Speculation Rules JSON (Chromium-only)**

```html
<script type="speculationrules">
{
  "prerender": [
    {
      "where": { "href_matches": "/articles/*" },
      "eagerness": "moderate"
    }
  ],
  "prefetch": [
    {
      "urls": ["/checkout"],
      "eagerness": "conservative"
    }
  ]
}
</script>
```

`moderate` triggers prerender on hover; `conservative` waits for mousedown. Feature-detect with `HTMLScriptElement.supports('speculationrules')` before injecting.

## Diagram

```mermaid
sequenceDiagram
    participant Browser
    participant Origin
    participant CDN
    Note over Browser: HTML parse begins
    Browser->>Origin: preconnect (TCP+TLS)
    Browser->>CDN: preconnect (TCP+TLS)
    Browser->>CDN: preload /hero.avif (fetchpriority=high)
    Browser->>Origin: prefetch /next-page (idle)
    Browser->>Origin: Speculation Rules prerender /next-page
```

Hints fire in urgency order: preconnect warms origins, preload fetches the LCP asset, then idle prefetch and prerender prepare the next navigation.

## Watch out: Speculation Rules is Chromium-only

As of 2026, Firefox has not shipped Speculation Rules and Safari supports it only behind a flag (off by default). Always feature-detect before injecting the script. Treat it as progressive enhancement — pages must load correctly without it.

## Key terms

- **Critical path**: Resources that block first paint; shortening it cuts LCP.
- **preconnect**: Opens TCP+TLS to an origin before the browser needs a resource from it.
- **fetchpriority**: HTML attribute hinting high/low fetch urgency to the browser's scheduler.
- **Speculation Rules API**: Chrome API to prerender or prefetch future navigations via inline JSON.
- **modulepreload**: Fetches, parses, and compiles an ES module graph ahead of first import.

## Related topics

- [Caching Strategies](https://fearchitect.com/topics/caching-strategies.md): Layer browser, CDN, and app caches to serve responses without re-fetching.
- [Image & Asset Strategy](https://fearchitect.com/topics/image-and-asset-strategy.md): Serve the smallest correct image; preload the LCP one.
- [CDN & Edge Caching](https://fearchitect.com/topics/cdn-edge-caching.md): Serve cached responses from PoPs near users, sparing the origin.
- [Core Web Vitals](https://fearchitect.com/topics/core-web-vitals.md): Google's three user-experience metrics: LCP, INP, and CLS.
- [REST vs GraphQL vs tRPC](https://fearchitect.com/topics/rest-vs-graphql-vs-trpc.md): Three API styles with distinct fetch, type, and caching trade-offs.
- [Edge Computing & Rendering](https://fearchitect.com/topics/edge-computing-rendering.md): Run code at CDN PoPs to cut latency before origin is hit.

## Further reading

- [web.dev — Resource hints](https://web.dev/learn/performance/resource-hints)
- [web.dev — Fetch Priority API](https://web.dev/articles/fetch-priority)
- [MDN — Speculation Rules API](https://developer.mozilla.org/en-US/docs/Web/API/Speculation_Rules_API)
- [MDN — <link> rel attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/link)