Preconnect

Was ist Preconnect?

Preconnect ist ein Resource Hint im HTML, der den Browser frühzeitig eine Verbindung zu einer externen Origin vorbereiten lässt. Dabei können DNS-Auflösung, TCP-Verbindungsaufbau und TLS-Aushandlung vorgezogen werden. Die eigentliche Datei wird noch nicht geladen. Das verkürzt Wartezeit, wenn später kritische Ressourcen wie Webfonts, Skripte oder Bilder von dieser Origin benötigt werden.

Preconnect, auf Deutsch Vorabverbindung, verlagert mehrere technische Verbindungsschritte an einen früheren Zeitpunkt des Seitenaufrufs. Der Browser beginnt mit diesen Schritten, sobald er den Hinweis im <head> des HTML-Dokuments erkennt. Wenn die Seite später eine Ressource von derselben Origin anfordert, kann sie eine bereits vorbereitete Verbindung verwenden.

Wie funktioniert Preconnect?

Für den Abruf einer HTTPS-Ressource von einer externen Origin muss der Browser zunächst die Domain über das Domain Name System, kurz DNS, in eine IP-Adresse auflösen. Anschließend baut der Browser eine Transportverbindung auf und handelt die verschlüsselte TLS-Verbindung aus. Erst danach kann die eigentliche HTTP-Anfrage beginnen. Preconnect zieht diese vorbereitenden Schritte vor.

Die Einbindung erfolgt mit einem Link-Element im Dokumentenkopf:

Ein typischer Hinweis lautet: <link rel='preconnect' href='https://static.example.com' crossorigin>. Das Attribut href enthält nur die Origin aus Protokoll, Domain und gegebenenfalls Port. Ein Dateipfad gehört nicht in den Preconnect-Hinweis.

Preconnect lädt keine Schriftart, kein Bild und kein JavaScript. Der Hinweis bereitet ausschließlich die Verbindung zur angegebenen Origin vor. Diese Abgrenzung ist relevant, weil ein erfolgreich ausgeführter Preconnect weder den Download einer Ressource garantiert noch deren Priorität erhöht. Der Browser entscheidet weiterhin anhand seiner Ressourcenplanung, wann eine Datei tatsächlich angefordert wird.

Wann verbessert Preconnect den PageSpeed?

Preconnect kann den PageSpeed verbessern, wenn eine früh benötigte Ressource von einer anderen Origin stammt und der Browser diese Abhängigkeit erst spät im Seitenaufbau entdeckt. Typische Anwendungsfälle sind externe Webfonts, zentrale Skripte, Bilder von einem Content Delivery Network oder technisch notwendige Dienste, die den sichtbaren Seiteninhalt beeinflussen.

Besonders relevant ist Preconnect für den Largest Contentful Paint, kurz LCP. Diese Kennzahl misst, wann das größte sichtbare Inhaltselement gerendert wurde. Stammt ein LCP-Bild von einer externen Bild-Domain, kann eine vorbereitete Verbindung dessen Anfrage beschleunigen. Preconnect verbessert den LCP jedoch nur, wenn der Verbindungsaufbau tatsächlich auf dem kritischen Ladepfad liegt.

Die externe Origin liefert eine Ressource, die früh für den sichtbaren Seitenbereich benötigt wird.
Die Origin ist beim Einlesen des HTML-Dokuments bereits bekannt.
Zwischen dem Preconnect-Hinweis und dem Ressourcenabruf liegt genug Zeit für den Verbindungsaufbau.
Die vorbereitete Verbindung wird verwendet, bevor der Browser sie wegen Inaktivität schließt.

Preconnect ist kein eigener Ranking-Faktor. Der Resource Hint kann SEO indirekt unterstützen, wenn er messbar die Ladezeit oder einen Core Web Vital verbessert. Eine vollständige technische Bewertung umfasst deshalb neben Resource Hints auch Bildgrößen, Caching, JavaScript-Ausführung und Server-Antwortzeiten. Weitere Prüfpunkte findest du in den wichtigsten Maßnahmen der technischen SEO.

Preconnect richtig einbinden

Ein Preconnect-Hinweis gehört möglichst früh in den <head> der Seite. Der Browser sollte den Hinweis erkennen, bevor Parser, Stylesheets oder Skripte die externe Ressource anfordern. Wird Preconnect erst über spät ausgeführtes JavaScript ergänzt, bleibt häufig zu wenig Zeit, um den Verbindungsaufbau sinnvoll vorzuziehen.

Das Attribut crossorigin ist insbesondere bei Verbindungen für CORS-abhängige Ressourcen relevant. Bei extern bereitgestellten Webfonts sollte der Preconnect-Hinweis in der Regel crossorigin enthalten, damit die vorbereitete Verbindung zum späteren Abrufmodus passt. Stimmen Verbindungsmodus und Ressourcenanforderung nicht überein, kann der Browser eine weitere Verbindung aufbauen müssen.

Preconnect sollte nur für Origins eingesetzt werden, deren Ressourcen auf der jeweiligen Seite mit hoher Wahrscheinlichkeit früh benötigt werden. Jeder zusätzliche Hinweis kann DNS-Abfragen, Verbindungen, Arbeitsspeicher und Rechenzeit beanspruchen. Eine lange Liste vorsorglich vorbereiteter Domains kann deshalb Ressourcen binden, ohne den Seitenaufbau zu beschleunigen.

Abgrenzung zu anderen Resource Hints

Der Unterschied zwischen Preconnect, DNS-Prefetch, Preload und Prefetch liegt darin, welcher Arbeitsschritt vorgezogen wird. Die Hinweise sind keine austauschbaren Schreibweisen. Ein falscher Resource Hint kann wirkungslos bleiben oder Bandbreite für Dateien reservieren, die der Nutzer noch nicht benötigt.

Resource Hint	Vorbereitete Aktion	Typischer Einsatz
`preconnect`	Bereitet DNS, Transportverbindung und Verschlüsselung vor	Früh benötigte Ressourcen einer externen Origin
`dns-prefetch`	Löst ausschließlich den Domainnamen auf	Wahrscheinlich benötigte externe Domains mit geringerer Priorität
`preload`	Lädt eine konkret angegebene Ressource frühzeitig	Kritische Schriftarten, Bilder, Stylesheets oder Skripte
`prefetch`	Lädt eine Ressource für eine voraussichtlich spätere Nutzung	Folgende Navigationen oder nachgelagerte Seitenzustände

Preload geht damit deutlich weiter als Preconnect. Während Preconnect nur eine Verbindung zur Origin öffnet, fordert Preload bereits eine konkrete Datei an. Für ein LCP-Bild kann Preload geeignet sein, wenn die genaue Bild-URL früh feststeht. Preconnect ist sinnvoller, wenn mehrere kritische Dateien von derselben externen Origin stammen oder die konkrete Datei erst später ermittelt wird.

Preconnect messen und prüfen

Messbar ist Preconnect durch einen Vergleich des Ladeverlaufs vor und nach der Einbindung. Prüfe im Netzwerkprotokoll des Browsers, wann DNS-Auflösung, Verbindungsaufbau, TLS-Aushandlung und Ressourcenanfrage beginnen. Ein wirksamer Preconnect verkürzt bei der späteren Anfrage die Verbindungsphase oder lässt sie vollständig entfallen. Vergleiche mehrere Seitenaufrufe unter denselben Netzwerk- und Cache-Bedingungen.

Ein einzelner PageSpeed-Wert reicht für die Bewertung nicht aus, weil der Wert zwischen Messungen schwanken kann. Entscheidend ist, ob sich das Timing der betroffenen Ressource und eine damit verbundene Kennzahl wie der LCP reproduzierbar verbessert. Fragen zur Messung und Verbesserung der Website-Ladezeit gehören zu den häufigsten Themen rund um technische SEO.

Mit dem kostenlosen Ladezeiten-Check kannst du PageSpeed-Scores für Mobilgeräte und Desktop sowie weitere technische Hinweise abrufen.

Mit Nutzung dieses PageSpeed-Checks erklären Sie, dass Sie die Datenschutzerklärung zur Kenntnis genommen haben und damit einverstanden sind, dass die von Ihnen angegebenen Daten elektronisch erhoben und gespeichert werden. Ihre Daten werden dabei nur streng zweckgebunden zur Bearbeitung des PageSpeed-Checks benutzt. Mit der Nutzung dieses PageSpeed-Checks erklären Sie sich mit der Verarbeitung einverstanden.

Ladezeiten-Score: N/A von 100

i Ladezeiten (Desktop):	N/A
i Ladezeiten (Mobile):	N/A
i PageSpeed (Desktop):	N/A
i PageSpeed (Mobile):	N/A
i CMS:
i Gehosted bei:
i WordPress Theme:

Ladezeiten (Desktop)

Ladezeiten (Mobile)

Typische Fehler bei Preconnect

Ein häufiger Fehler ist die Angabe einer vollständigen Datei-URL. Preconnect arbeitet auf Ebene der Origin. Bei https://static.example.com/css/style.css gehört deshalb nur https://static.example.com in das href-Attribut. Der Browser bereitet damit eine Verbindung vor, die anschließend für mehrere Ressourcen derselben Origin genutzt werden kann.

Die angegebene Origin wird auf der betreffenden Seite gar nicht verwendet.
Der Hinweis steht so spät im Quellcode, dass die Ressourcenanfrage bereits begonnen hat.
Für Webfonts fehlt das erforderliche crossorigin-Attribut.
Zu viele externe Origins werden ohne Priorisierung vorbereitet.
Preconnect wird eingesetzt, obwohl die Ressource von derselben Origin wie das HTML-Dokument stammt und die Verbindung bereits besteht.

Preconnect sollte nicht allein anhand einer allgemeinen Empfehlung eingebaut werden. Prüfe zuerst den kritischen Ladepfad und priorisiere die Origin, die tatsächlich eine frühe Darstellung blockiert oder verzögert. Ein strukturierter technischer SEO-Audit verbindet solche Einzelmaßnahmen mit Serverleistung, Rendering und Core Web Vitals.

Wenn du Ladezeitpotenziale und den technischen Aufbau deiner Website prüfen lassen möchtest, kannst du einen unverbindlichen Potenzialcheck anfragen.

Kostenloser Potenzialcheck

Häufige Fragen zu Preconnect

Wo wird Preconnect eingefügt?

Preconnect wird als Link-Element möglichst früh im Head-Bereich des HTML-Dokuments eingefügt. Der Browser muss den Hinweis erkennen, bevor die betreffende externe Ressource angefordert wird.

Wie viele Preconnect-Hinweise sind sinnvoll?

Es gibt keine feste Zahl, die für jede Website gilt. Beschränke Preconnect auf wenige, früh benötigte Origins und prüfe den Nutzen anhand des Netzwerkverlaufs und der Core Web Vitals.

Braucht Preconnect immer crossorigin?

Crossorigin ist nicht bei jeder Verbindung erforderlich. Bei externen Webfonts und anderen CORS-abhängigen Ressourcen sollte das Attribut gesetzt werden, damit die vorbereitete Verbindung zum späteren Abrufmodus passt.

Kann Preconnect die Ladezeit verschlechtern?

Zu viele ungenutzte Preconnect-Hinweise können Netzwerkverbindungen, Rechenzeit und Arbeitsspeicher beanspruchen. Setze den Hinweis deshalb nur für Origins ein, deren Ressourcen früh und mit hoher Wahrscheinlichkeit benötigt werden.

Ist Preconnect auch für die eigene Domain sinnvoll?

Für die Origin des HTML-Dokuments besteht bereits eine Verbindung. Ein zusätzlicher Preconnect-Hinweis für dieselbe Origin liefert deshalb normalerweise keinen messbaren Vorteil.

Was ist der Unterschied zwischen Preconnect und Preload?

Preconnect bereitet lediglich die Verbindung zu einer Origin vor. Preload lädt bereits eine bestimmte Datei und benötigt dafür neben der URL weitere Angaben zum Ressourcentyp.