All Docs
FeaturesCalmony Sanctions MonitorUpdated March 12, 2026

Faster Billing Flows with Stripe Preconnect Hints

Faster Billing Flows with Stripe Preconnect Hints

Release: v0.1.118 · Performance · PERF-23

Overview

Starting with v0.1.118, the platform includes a preconnect hint for https://js.stripe.com in the root layout. This is a low-level network optimisation that reduces latency the first time a user reaches any billing flow — for example, when purchasing screening credits.

Background

Browsers must complete a TCP connection and TLS handshake before they can fetch any resource from a third-party origin. For payment flows this matters a lot: Stripe's JS library is loaded from js.stripe.com, and without a preconnect hint the browser only begins that handshake when a payment component mounts — which may be several seconds into the page lifecycle.

The platform already benefits from automatic font preloading via next/font. However, no equivalent hint existed for Stripe or OAuth providers, leaving a gap on the most revenue-sensitive user journey.

What Was Added

A single <link> element is now rendered in the <head> of every page via the root layout (src/app/layout.tsx):

<link rel="preconnect" href="https://js.stripe.com" crossOrigin="" />

In Next.js App Router this is expressed using the metadata object's other property or a custom head component inside the root layout, so it applies globally without duplicating markup on individual pages.

What This Means for Users

BeforeAfter
TCP + TLS handshake to js.stripe.com starts when a payment component mountsHandshake starts as soon as the root layout is parsed
Added latency on first billing page loadConnection is already warm when the Stripe JS library is requested

The improvement is most noticeable on first visit or after a hard reload, where the browser has no cached connection to Stripe's servers.

Technical Notes

  • The crossOrigin="" attribute (equivalent to crossorigin="anonymous") is required for preconnect hints to third-party origins that serve resources with CORS headers.
  • This hint is safe to include globally — browsers that never reach a billing flow will simply open and quickly close an idle connection, with negligible cost.
  • OAuth provider preconnect hints may be added in a future release using the same pattern.

Affected File

  • src/app/layout.tsx