Preconnect

TL;DR

Preconnect baut frühzeitig Verbindungen zu externen Domains auf. Das spart mehrere Hundert Millisekunden pro Request – ideal für CDNs und APIs.

Was ist Preconnect?

Preconnect weist den Browser an, eine vollständige Verbindung zu einer Domain aufzubauen, bevor sie gebraucht wird: DNS-Auflösung, TCP-Handshake und TLS-Verhandlung.

Was Preconnect spart

• DNS-Lookup: 20-120ms
• TCP-Handshake: 50-100ms
• TLS-Verhandlung: 100-200ms
• Gesamt: 200-400ms pro Domain!

Wann Preconnect verwenden

• Font-Provider (fonts.googleapis.com)
• CDNs für Assets
• APIs für dynamische Daten
• Analytics-Services

Syntax

<link rel="preconnect" href="https://fonts.googleapis.com">

Für Fonts auch: <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Preconnect vs. dns-prefetch

• Preconnect: Volle Verbindung (DNS + TCP + TLS)
• dns-prefetch: Nur DNS-Auflösung

Preconnect und Nachhaltigkeit

Spart Zeit, nicht Daten:

• Verbindung wird aufgebaut, aber nichts geladen
• Nur für wirklich genutzte Domains
• Max. 2-4 Preconnects sinnvoll

Fazit

Preconnect ist einer der effektivsten Resource Hints. Es kostet fast nichts, spart aber spürbar Ladezeit bei externen Ressourcen.