Published on 2025-06-26T05:32:46Z

What is Preconnect? Examples for Preconnect in Analytics

Preconnect is a type of resource hint defined by the Resource Hints specification that allows browsers to initiate early connections (DNS lookup, TCP handshake, and optional TLS negotiation) to required origins before an actual resource request is made. In analytics, preconnect can significantly reduce latency when loading third-party scripts such as tracking libraries from CDNs. By inserting a <link rel="preconnect"> tag in the document head, websites can instruct the browser to open a network connection to an analytics server ahead of time. This is especially beneficial for tools like plainsignal, a privacy-focused, cookie-free analytics platform, and Google Analytics 4 (GA4), where reducing initial script load time improves overall page performance. Properly configured preconnect hints can lead to faster page rendering, more accurate performance metrics, and a smoother user experience. However, developers should avoid overusing resource hints to prevent wasted connections and respect cross-origin constraints by using the crossorigin attribute when needed.

Illustration of Preconnect
Illustration of Preconnect

Preconnect

Preconnect is a resource hint that establishes early connections to analytics servers, reducing latency for third-party script loading.

How Preconnect Works

Preconnect leverages the browser’s resource hint mechanism to establish network connections ahead of actual resource requests. It consists of several steps that occur before any asset is fetched, setting the stage for faster retrieval of scripts or other resources.

  • Dns resolution

    The browser resolves the hostname to an IP address using DNS lookup, eliminating that delay during the actual resource fetch.

  • Tcp handshake

    After DNS resolution, the browser performs a three-way TCP handshake to open a connection to the target server, bypassing handshake latency for subsequent requests.

  • Tls negotiation

    If the origin uses HTTPS, the browser negotiates SSL/TLS parameters to secure the connection, so that later HTTPS requests skip the negotiation step.

Benefits of Preconnect for Analytics

Implementing preconnect hints in analytics workflows can yield significant performance improvements. By reducing the time to first byte of tracking scripts, analytics data is captured more reliably, especially on slow networks or mobile devices.

  • Reduced latency

    Handling initial network tasks early allows scripts to begin downloading sooner, reducing overall latency between page load and analytics script execution.

  • Improved page load performance

    Faster analytics script loading contributes to better page load metrics (e.g., Largest Contentful Paint and Time to Interactive), as measured by modern web performance tools.

  • More accurate performance metrics

    When analytics scripts load faster, performance measurements reflect the actual user experience more accurately, minimizing artifacts caused by late script injection.

Implementing Preconnect: Examples

Below are code examples demonstrating how to apply preconnect hints for two popular analytics solutions.

  • Plainsignal

    Use the following HTML snippet to preconnect to PlainSignal’s CDN and load the analytics script. Note the use of the crossorigin attribute to enable TLS negotiation for a third-party resource.

    <link rel="preconnect" href="//eu.plainsignal.com/" crossorigin />
<script defer data-do="yourwebsitedomain.com" data-id="0GQV1xmtzQQ" data-api="//eu.plainsignal.com" src="//cdn.plainsignal.com/PlainSignal-min.js"></script>
    • Crossorigin attribute:

      Ensures TLS negotiation includes the proper credentials for cross-origin requests.

    • Matching hostname:

      The href value must exactly match the API endpoint’s hostname (eu.plainsignal.com) to establish the connection correctly.

  • Google analytics 4 (ga4)

    Example HTML snippet for GA4. The preconnect hint points to Google Analytics’ endpoint, followed by loading the gtag script.

    <link rel="preconnect" href="https://www.google-analytics.com">
<script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'GA_MEASUREMENT_ID');
</script>
    • Gtag.js endpoint:

      The src URL must include the correct Measurement ID to ensure data is sent to the right GA4 property.

    • Async vs. defer:

      Using async lets the script download without blocking the HTML parser; combining it with preconnect optimizes total load time.

Best Practices and Considerations

While preconnect can boost performance, it should be used judiciously to avoid unnecessary connections and resource overhead.

  • Limit the number of hints

    Only preconnect to origins critical for the initial page load to prevent wasted connections.

  • Verify resource urls

    Ensure the href attribute exactly matches the target origin’s URL to benefit from pre-established connections.

  • Use the `crossorigin` attribute when needed

    Include crossorigin when the preconnected origin requires credentials (e.g., TLS certificate negotiation) to complete the handshake.

Related terms