Preconnect and prefetch hints are configured for critical third-party origins

Every new third-party origin a marketing page connects to requires a TCP handshake plus TLS negotiation before any bytes are received — typically 100–300ms per origin at 4G speeds. This is a pure latency overhead measured under ISO-25010 time-behaviour that <link rel="preconnect"> eliminates by establishing the connection during browser idle time, before the resource is actually requested. A marketing page loading fonts from fonts.gstatic.com and data from an API domain without preconnect hints adds two sequential connection costs to FCP, each 100–300ms. The fix requires three lines of HTML. The absence of preconnect on high-frequency origins is the lowest-effort, highest-impact optimisation frequently left unconfigured.

Add preconnect hints in the root layout <head> for every third-party origin loaded on the critical rendering path — typically fonts, your API domain, and any image CDN.

// app/layout.tsx
export default function RootLayout({ children }) {
  return (
    <html>
      <head>
        {/* Establishes connection before browser discovers the resource */}
        <link rel="preconnect" href="https://fonts.googleapis.com" />
        <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="" />
        <link rel="preconnect" href="https://your-api-domain.com" />

        {/* Less critical — just DNS, no TLS */}
        <link rel="dns-prefetch" href="https://analytics.example.com" />
      </head>
      {children}
    </html>
  )
}

Limit preconnect to 3–4 origins — the browser allocates a connection slot for each, and too many preconnects compete for connection pool resources, cancelling the benefit.