Preconnecting to API Endpoints
Use preconnect to establish early connections to API servers, reducing latency for the first API call and improving time to interactive.
Detailed Explanation
Preconnecting to API Endpoints
When your web application fetches data from an API server (especially a third-party or different-domain API), preconnect eliminates the connection setup latency from the first API call.
The Problem
Single-page applications often make API calls immediately after loading. Without preconnect, the first API request must wait for:
- DNS resolution of the API domain (~50-100ms)
- TCP handshake (~50-100ms)
- TLS negotiation (~50-200ms)
This adds 150-400ms to the time before the first byte of API data arrives.
Preconnect Solution
<link rel="preconnect" href="https://api.example.com"
crossorigin="anonymous" />
By placing this in the <head>, the browser establishes the connection while parsing HTML, so when the JavaScript makes the first fetch() call, the connection is already ready.
crossorigin for Fetch API
If your application uses the Fetch API or XMLHttpRequest with CORS, you must include crossorigin="anonymous" (or crossorigin="use-credentials" if you send cookies):
<!-- For API calls without credentials (most common) -->
<link rel="preconnect" href="https://api.example.com"
crossorigin="anonymous" />
<!-- For API calls with cookies/auth headers -->
<link rel="preconnect" href="https://api.example.com"
crossorigin="use-credentials" />
Without the matching crossorigin value, the browser creates a new connection for the CORS fetch request instead of reusing the preconnected one.
Multiple API Endpoints
If your app uses multiple API services, preconnect to the most critical ones:
<!-- Primary API: needed for initial page data -->
<link rel="preconnect" href="https://api.example.com"
crossorigin="anonymous" />
<!-- Auth service: needed for login check -->
<link rel="preconnect" href="https://auth.example.com"
crossorigin="use-credentials" />
<!-- Less critical: use dns-prefetch instead -->
<link rel="dns-prefetch" href="https://analytics.example.com" />
<link rel="dns-prefetch" href="https://logging.example.com" />
GraphQL Endpoints
For GraphQL APIs where all queries go to a single endpoint, preconnect is especially effective:
<link rel="preconnect" href="https://graphql.example.com"
crossorigin="anonymous" />
Since HTTP/2 multiplexes requests over a single connection, a single preconnect eliminates latency for all subsequent GraphQL queries.
Real-World Impact
On a 4G mobile connection:
- Without preconnect: first API response at ~600ms
- With preconnect: first API response at ~200ms
- Savings: ~400ms (67% faster first API call)
Use Case
A React dashboard application that fetches initial data from an API server at api.example.com adds preconnect with crossorigin="anonymous". The first API call (fetching user profile data) completes 350ms faster because the TLS connection is already established by the time React mounts and triggers the fetch.