All Docs
FeaturesCalmony Sanctions MonitorUpdated March 12, 2026

Faster Billing & Auth Flows with Preconnect Resource Hints

Faster Billing & Auth Flows with Preconnect Resource Hints

Release: v0.1.162 · Control: PERF-08 · Category: Frontend Performance

Overview

Starting with v0.1.162, the application layout declares preconnect hints for the external domains it relies on during billing and authentication. This is a low-risk, zero-dependency change that shaves meaningful latency off the first user interaction on those flows.

Background: What is a preconnect hint?

When a browser needs to fetch a resource from a domain it has never contacted before, it must first:

  1. Perform a DNS lookup to resolve the hostname to an IP address
  2. Open a TCP connection to that IP
  3. Complete a TLS handshake (for HTTPS)

This sequence can take 100 – 300 ms on a typical connection. A <link rel="preconnect"> tag tells the browser to carry out all three steps as early as possible — ideally while the main page is still being parsed — so the connection is already warm by the time the application code actually needs it.

What Was Added

The following resource hints were added to src/app/layout.tsx:

<link rel="preconnect" href="https://js.stripe.com" />
<link rel="preconnect" href="https://accounts.google.com" />
DomainUsed For
https://js.stripe.comStripe.js library loaded during checkout flows
https://accounts.google.comGoogle OAuth provider used during sign-in

Impact

  • Billing flows — Stripe's JavaScript is fetched from js.stripe.com. Preconnecting means the TLS handshake to Stripe's CDN is already complete when the checkout component mounts, reducing the time-to-interactive for payment forms.
  • Authentication flows — OAuth redirects to accounts.google.com benefit from a pre-warmed connection, reducing the perceived latency of the sign-in initiation step.

Implementation Notes

The hints are placed in the root layout so they apply globally across all pages. Next.js supports this via the links property of the Metadata API or as plain <link> elements inside the <head> of the layout component.

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

// In the <head> section:
// <link rel="preconnect" href="https://js.stripe.com" />
// <link rel="preconnect" href="https://accounts.google.com" />

Note: Preconnect hints are advisory — browsers may choose to ignore them under memory pressure or if the connection limit is reached. They have no negative side-effect if the corresponding domain is never actually contacted during a session.

No Action Required

This change is automatically active for all deployments from v0.1.162 onward. No configuration changes or environment variable updates are needed.