Preconnect
Was ist Preconnect?
Preconnect ist ein Resource Hint im HTML-Code, der den Browser frühzeitig mit einer externen Quelle verbinden lässt. Der Browser kann DNS-Auflösung, TCP-Verbindungsaufbau und bei HTTPS die TLS-Aushandlung erledigen, bevor eine Ressource angefordert wird. Das verkürzt Wartezeiten, wenn kritische Schriften, Skripte oder Bilder von einer anderen Domain stammen.
Wie Preconnect funktioniert
Preconnect, deutsch: frühzeitiger Verbindungsaufbau, bereitet den Netzwerkweg zu einer Quelle vor. Eine Quelle besteht aus Protokoll, Hostname und gegebenenfalls Port, zum Beispiel https://cdn.beispiel.de. Der Browser lädt dabei noch keine Datei. Er stellt lediglich die Verbindung her, die später für eine konkrete Ressource genutzt werden kann.
Bei einer HTTPS-Quelle umfasst der Verbindungsaufbau mehrere Schritte. Zuerst wird der Domainname per DNS in eine IP-Adresse aufgelöst. Danach folgt die TCP-Verbindung oder ein entsprechender Verbindungsaufbau des verwendeten Transportprotokolls. Anschließend handelt der Browser die verschlüsselte TLS-Verbindung aus. Preconnect verschiebt diese Schritte zeitlich nach vorn.
Preconnect im HTML einbinden
Der Resource Hint gehört möglichst früh in den <head>-Bereich der Seite. Der Browser muss die Anweisung erkennen, bevor er selbst auf die externe Ressource stößt. Eine Platzierung nach umfangreichen Stylesheets oder Skripten reduziert den möglichen Zeitgewinn, weil die Verbindung dann eventuell bereits aufgebaut wird.
<link rel='preconnect' href='https://fonts.beispiel.de' crossorigin>. Das Attribut crossorigin ist erforderlich, wenn die spätere Ressource im CORS-Modus abgerufen wird. Das betrifft häufig Webfonts von fremden Domains. Der Wert im href-Attribut muss auf die Quelle und nicht auf die vollständige Datei zeigen. Für die Datei https://cdn.beispiel.de/css/style.css wird daher https://cdn.beispiel.de angegeben. Pfade wie /css/style.css gehören nicht in den Verbindungs-Hinweis.
Preconnect für besseren Pagespeed
Preconnect verbessert den Pagespeed nur, wenn eine benötigte Ressource von einer anderen Quelle kommt und der Verbindungsaufbau den Abruf tatsächlich verzögert. Typische Kandidaten sind externe Schriftarten, Content Delivery Networks, Zahlungsdienste oder technisch erforderliche Skripte. Eine Verbindung zur eigenen Domain bringt meistens keinen zusätzlichen Nutzen, weil sie bereits für das HTML-Dokument besteht.
Der Effekt kann besonders relevant sein, wenn die externe Quelle eine Ressource für den Largest Contentful Paint, kurz LCP, liefert. Der LCP erfasst, wann das größte sichtbare Inhaltselement im Ansichtsbereich dargestellt wird. Stammt dieses Element beispielsweise aus einem externen Bild-CDN, kann eine vorbereitete Verbindung den Abruf früher beginnen lassen. Preconnect verkürzt jedoch weder die Server-Antwortzeit noch die Übertragung einer zu großen Datei.
Preconnect ist deshalb eine Ergänzung zu weiteren Maßnahmen der technischen Onpage-Optimierung. Große Bilder, blockierendes JavaScript, umfangreiches CSS und langsame Server bleiben eigenständige Ursachen langer Ladezeiten. Prüfe zuerst, welche Ressource den Seitenaufbau verzögert, und setze den Hinweis anschließend für deren Quelle.
Unterschiede zu anderen Resource Hints
Der Unterschied zwischen Preconnect und DNS-Prefetch liegt im Umfang der Vorbereitung. dns-prefetch löst lediglich den Domainnamen in eine IP-Adresse auf. Preconnect geht weiter und bereitet zusätzlich den Transportweg sowie bei HTTPS die Verschlüsselung vor. DNS-Prefetch verursacht weniger Aufwand, spart aber auch weniger Verbindungsschritte ein.
Der Unterschied zwischen Preconnect und Preload liegt im Gegenstand der Anweisung. Preconnect baut eine Verbindung zu einer Quelle auf, ohne eine Datei abzurufen. preload fordert dagegen eine konkrete Ressource frühzeitig an. Für ein Preload müssen unter anderem die Datei und ihr Ressourcentyp korrekt angegeben werden, beispielsweise eine Schriftdatei mit as='font'.
| Resource Hint | Funktion | Typischer Einsatz |
|---|---|---|
| Preconnect | Bereitet die vollständige Verbindung zu einer Quelle vor | Kritische Ressourcen von externen Domains |
| DNS-Prefetch | Löst nur den Domainnamen auf | Wahrscheinlich benötigte externe Domains |
| Preload | Lädt eine konkrete Ressource frühzeitig | Schriften, wichtige Bilder oder kritische Stylesheets |
| Prefetch | Lädt Ressourcen mit niedriger Priorität für eine spätere Nutzung | Wahrscheinliche Folgeseiten oder spätere Interaktionen |
Typische Fehler beim Einsatz
Zu viele vorbereitete Verbindungen können den gewünschten Effekt abschwächen. Jede Verbindung beansprucht Netzwerkressourcen, Rechenleistung und gegebenenfalls eine TLS-Aushandlung. Wenn der Browser zahlreiche Quellen vorbereitet, die anschließend nicht benötigt werden, konkurrieren diese Verbindungen mit den wirklich kritischen Abrufen.
Ein weiterer Fehler ist ein fehlendes crossorigin-Attribut bei Ressourcen, die anonym im CORS-Modus geladen werden. Der Browser kann die vorbereitete Verbindung dann unter Umständen nicht für den späteren Abruf wiederverwenden. Prüfe das Attribut besonders bei extern eingebundenen Webfonts.
Preconnect für SEO, SEA und GEO
Preconnect ist kein eigenständiger Rankingfaktor. Der Resource Hint kann jedoch eine schnellere Darstellung kritischer Inhalte unterstützen und damit auf die technische Nutzererfahrung einzahlen. Für SEO zählt das Ergebnis im Browser: Eine korrekt vorbereitete Verbindung ist nur dann relevant, wenn sie die reale Lade-Performance verbessert.
Bei SEA kann eine schnellere Landingpage verhindern, dass Nutzer vor dem sichtbaren Seitenaufbau abspringen. Preconnect ist besonders für Zielseiten interessant, die externe Schriften, Produktbilder oder Funktionen von Drittanbietern benötigen. Die technische Maßnahme ersetzt jedoch keine Optimierung von Anzeigenbezug, Inhalt und Conversion-Prozess.
Für GEO, also Generative Engine Optimization, entsteht kein direkter Effekt. KI-Systeme wählen Quellen nicht aufgrund eines Preconnect-Tags aus. Gute technische Erreichbarkeit und schnell nutzbare Inhalte unterstützen jedoch dieselbe Website-Qualität, auf der SEO und GEO aufbauen.
Wirkung gezielt prüfen
Messbar ist das zum Beispiel so: Führe vor der Änderung mehrere Tests durch, ergänze den Resource Hint und wiederhole die Messung unter vergleichbaren Bedingungen. Prüfe dabei die Ladezeit der betroffenen externen Ressource und den LCP. Der kostenlose Ladezeiten-Check zeigt technische Potenziale und hilft dir, weitere Ursachen langsamer Seiten zu erkennen.
Prüfe die Lade-Performance deiner Seite direkt im Artikel:
Ein belastbarer Vergleich braucht mehr als einen einzelnen Testlauf, weil Netzwerk, Serverauslastung und Teststandort das Ergebnis beeinflussen. Dokumentiere die Änderung und vergleiche mehrere Messungen. Wenn sich weder der Start der externen Anfrage noch ein nutzerbezogener Ladezeitwert verbessert, benötigt die Quelle wahrscheinlich keinen vorbereiteten Verbindungsaufbau. Ein umfassender technischer SEO-Audit ordnet solche Einzelmaßnahmen in die gesamte Website-Technik ein.
Häufige Fragen zu Preconnect
Wann sollte ich Preconnect verwenden?
Preconnect eignet sich für externe Quellen, die früh beim Seitenaufbau benötigt werden. Dazu gehören häufig Schriftanbieter, Bild-CDNs oder technisch notwendige Dienste. Für selten genutzte oder erst nach einer Interaktion geladene Quellen ist der Hinweis meistens ungeeignet.
Wie viele Preconnect-Hinweise sind sinnvoll?
Es gibt keine feste Zahl, die für jede Website passt. Beschränke die Hinweise auf wenige kritische Quellen und prüfe ihre Wirkung durch vergleichbare Ladezeitmessungen. Jede ungenutzte Verbindung erzeugt zusätzlichen Aufwand.
Braucht Preconnect immer das Attribut 'crossorigin'?
Das Attribut 'crossorigin' wird benötigt, wenn die spätere Ressource im entsprechenden CORS-Modus abgerufen wird. Das ist häufig bei externen Webfonts der Fall. Ohne passendes Attribut kann der Browser die vorbereitete Verbindung möglicherweise nicht wiederverwenden.
Kann Preconnect die Core Web Vitals verbessern?
Preconnect kann einen Core-Web-Vitals-Wert verbessern, wenn eine kritische externe Ressource früher geladen wird. Ein möglicher Anwendungsfall ist ein LCP-Element von einem externen Bildserver. Der Effekt hängt von der Seite, der Quelle und der Netzwerkverbindung ab.
Ist Preconnect dasselbe wie Preload?
Nein. Preconnect bereitet nur die Verbindung zu einer Quelle vor. Preload lädt bereits eine konkret angegebene Ressource und benötigt zusätzliche Angaben wie den Ressourcentyp.
Funktioniert Preconnect auch bei internen Ressourcen?
Technisch kann ein Verbindungs-Hinweis auch auf die eigene Quelle zeigen. Meistens entsteht daraus kein Vorteil, weil der Browser die Verbindung zur Website bereits für den Abruf des HTML-Dokuments aufgebaut hat.
Du möchtest technische Ladezeitpotenziale systematisch erfassen und dokumentieren? Lege einen kostenlosen Account an und starte mit einer Analyse deiner Website.
Sie haben noch Fragen?
