Preconnect & Prefetch: Speed Secrets

Preconnect establishes an early connection to a third-party origin, including DNS lookup, TCP handshake, and TLS negotiation. This reduces latency when the browser eventually requests resources from that origin. Prefetch, on the other hand, downloads and caches a resource (like a script or stylesheet) that will be needed for the next navigation or a later point in the current page. Prefetch is about fetching the actual file, while preconnect is about warming up the connection.

• Preconnect: Use for critical third-party origins like fonts, analytics, or CDNs that will be used soon.
• Prefetch: Use for resources that are likely to be needed on subsequent pages or later in the user journey.

Both are resource hints but serve different stages of the loading pipeline.

Implementing these hints is straightforward with link tags in your HTML head. For preconnect, add: <link rel="preconnect" href="https://example.com">. For prefetch, use: <link rel="prefetch" href="script.js" as="script">. Always include the as attribute for prefetch to ensure correct priority and caching. Limit preconnect to 4-6 origins to avoid wasting resources. For critical resources, consider preload instead of prefetch if they are needed immediately.

• Place preconnect tags early in the head.
• Use prefetch for resources needed on next pages.
• Test with Lighthouse to avoid over-optimization.

The biggest mistake is overusing preconnect. Each preconnect consumes CPU and memory, and too many can delay critical requests. Another error is prefetching resources that are never used, wasting bandwidth and potentially slowing down the current page. Avoid prefetching large files or resources on slow connections. Also, don't use prefetch for critical resources needed immediately—use preload instead. Finally, not testing with real-user metrics can lead to misguided optimizations.

• Over-preconnecting to non-critical origins.
• Prefetching unused resources.
• Confusing prefetch with preload.