All Docs
FeaturesCalmony Sanctions MonitorUpdated March 11, 2026

Faster Billing & Auth Flows with Preconnect Resource Hints

Faster Billing & Auth Flows with Preconnect Resource Hints

Release: v0.1.44
Area: Frontend Performance
Control: PERF-08

Overview

As of v0.1.44, the application's root layout declares preconnect hints for the external domains used during billing (Stripe) and authentication (Google OAuth). This reduces the perceived latency of checkout and sign-in flows by allowing the browser to establish connections to these origins earlier in the page lifecycle.

Background

When a user navigates to a page that depends on a third-party domain — such as js.stripe.com for the Stripe payment widget — the browser must:

  1. Resolve the domain via DNS
  2. Open a TCP connection
  3. Complete a TLS handshake

This process can take anywhere from 100 ms to 300 ms on a typical connection. Without an explicit hint, the browser does not begin this work until the resource is encountered in the HTML or JavaScript — by which point the user may already be waiting.

A preconnect hint tells the browser to complete steps 1–3 for a given origin as soon as the page starts loading, so the connection is ready and waiting when the resource is actually needed.

What was added

Two preconnect links were added to src/app/layout.tsx:

// src/app/layout.tsx (illustrative)
export const metadata = {
  // ...existing metadata
};

// Via Next.js metadata links property or directly in <head>:
// <link rel="preconnect" href="https://js.stripe.com" />
// <link rel="preconnect" href="https://accounts.google.com" />
DomainPurpose
https://js.stripe.comStripe.js SDK — loaded on checkout/billing pages
https://accounts.google.comGoogle OAuth — used during sign-in flows

Impact

  • Billing flows: The Stripe checkout widget initialises faster because the connection to js.stripe.com is already open by the time the script is requested.
  • Auth flows: Google OAuth redirects and token exchanges benefit from a pre-warmed connection to accounts.google.com.
  • No behavioural change: Preconnect hints are advisory — they do not alter the application's logic, security model, or data flow. They only affect connection timing.

Implementation notes

The hints are placed in the root layout (src/app/layout.tsx) so they apply globally. Next.js supports declaring these via the metadata object's links property, or by rendering <link> elements directly inside the layout's <head> block.

Only preconnect (not dns-prefetch) is used, because preconnect performs both DNS resolution and the TCP/TLS handshake, providing a greater latency saving for HTTPS origins.

Note: Specifying too many preconnect hints can waste resources by opening connections that are never used. These two domains were chosen specifically because they are exercised on high-traffic, latency-sensitive flows (checkout and sign-in).