--- title: Warm up third-party connections early with preconnect description: >- Shopify already preconnects to the third-party origins of render-blocking resources in the head. Add your own preconnect hints only for origins the platform can't discover. source_url: html: >- https://shopify.dev/docs/storefronts/themes/best-practices/performance/use-preconnect md: >- https://shopify.dev/docs/storefronts/themes/best-practices/performance/use-preconnect.md api_name: liquid --- # Warm up third-party connections early with preconnect Shopify already preconnects to the third-party origins that serve render-blocking resources in your ``. Add `` yourself only for origins that the platform can't discover from the rendered HTML. **Most themes don't need preconnect hints:** Shopify inspects the rendered `` on every storefront response and automatically preconnects to the first three third-party origins that serve render-blocking scripts or stylesheets there, sending those hints in the `Link` header before the HTML reaches the browser. A hint you write in the HTML for one of those origins is redundant, and it's discovered later than the header. Add a hint only for an origin that isn't referenced by a render-blocking resource in the ``. *** ## Why When the browser parses a `preconnect` hint, it initiates the full connection handshake: DNS lookup, TCP connection, and TLS handshake. Resources from that domain can use the ready connection immediately. The impact per connection is small, but it's cumulative with multiple external domains. `preconnect` is an improvement over `dns-prefetch`, which only performs the DNS lookup. `preconnect` does the DNS lookup and the TCP and TLS handshakes. ### What Shopify does automatically On every storefront HTML response, Shopify scans the rendered `` for render-blocking resources, meaning `