Préconnexion aux domaines externes : preconnect et dns-prefetch

preconnect dit au navigateur d’ouvrir à l’avance la connexion vers un autre domaine dont la page aura besoin très tôt : résolution DNS, poignée TCP, négociation TLS. Il ne télécharge pas le fichier. dns-prefetch s’arrête au DNS, ce qui est moins coûteux et moins utile. Aucun des deux n’est un preload : le préchargement d’une police ou d’une image de votre site est un autre mécanisme, décrit dans préchargement des ressources.

Deux balises, deux portées

``html <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="dns-prefetch" href="https://fonts.gstatic.com"> ``

preconnect économise, sur une origine que vous allez vraiment appeler, le temps de connexion avant le premier octet du fichier tiers. Sur un domaine neuf, ce temps se voit dans la cascade : barres DNS, puis connexion, puis TLS, puis attente du fichier.

dns-prefetch ne fait que la résolution du nom. Il sert de repli léger, et pour une origine dont vous n’êtes pas certain qu’elle sera contactée dans la première seconde (un pixel qui part seulement après un clic, par exemple). Il ne remplace pas un preconnect vers l’origine qui sert la police affichée tout de suite.

Le schéma et l’hôte comptent : https://cdn.exemple.net et https://www.exemple.net sont deux origines. Préconnecter le mauvais hôte ne sert à rien.

crossorigin : le détail qui annule le gain

Les fichiers de police sont demandés en CORS, de même que certains scripts de type module. La connexion doit être ouverte avec le même mode, d’où crossorigin sur le preconnect vers l’origine de la police (fonts.gstatic.com dans le cas de Google Fonts, pas seulement fonts.googleapis.com qui ne sert que la feuille CSS).

Sans cet attribut, le navigateur peut établir une connexion « simple », puis en ouvrir une autre quand la police part en CORS. Vous avez ajouté une balise et payé deux poignées de main.

crossorigin n’est pas nécessaire pour une image tierce affichée dans un <img> classique, qui n’est pas une requête CORS. Mettez-le quand la requête suivante l’exige, pas par réflexe sur toutes les lignes.

Quelles origines, et pas plus

Ouvrez l’onglet Réseau sur la page d’accueil et sur un modèle interne. Repérez les domaines qui ne sont pas le vôtre et qui bloquent l’affichage du premier écran : police, image LCP hébergée sur un CDN, script indispensable au rendu.

Ignorez pour le preconnect :

• les tags qui ne partent qu’après le consentement (ils ne doivent pas partir avant, et ouvrir la connexion quand même est contradictoire) ;
• un chat, une heatmap, un A/B test chargé après l’affichage ;
• un domaine « au cas où » copié depuis un modèle de thème.

Deux à quatre preconnect suffisent. Chaque connexion anticipée occupe le réseau et des sockets. Une longue liste dans le <head> retarde le HTML utile et le CSS de votre propre origine, qui n’a pas besoin de preconnect : le navigateur y est déjà connecté.

Preconnecter ne rend pas un script tiers léger. S’il exécute 200 Ko de JavaScript sur le fil principal, la poignée TLS économisée ne change pas l’interaction. Le tri des scripts est dans scripts tiers et performance.

Poser la balise et contrôler la cascade

1. Choisissez une origine réellement contactée dans la première seconde, sur le modèle de page concerné. La fiche produit n’a pas les mêmes tiers que l’accueil.
2. Ajoutez le preconnect dans le <head>, avant les balises qui utilisent cette origine.
3. Ajoutez crossorigin si la requête suivante est une police ou un fetch CORS.
4. Rechargez en privé, onglet Réseau. La connexion vers cette origine doit démarrer avant la requête du fichier, et le fichier ne doit pas montrer une seconde négociation TLS.
5. Retirez la balise si l’origine n’apparaît plus (tag supprimé, police auto-hébergée). Un preconnect vers un domaine muet est du travail inutile à chaque visite.

Auto-héberger la police supprime le besoin de preconnect vers le domaine de polices. C’est souvent plus propre qu’une balise supplémentaire, à condition de ne servir que les graisses utilisées.

Le preconnect ne corrige pas un DNS lent vers votre domaine, ni un certificat, ni un serveur qui met deux secondes à répondre. Il raccourcit uniquement l’aller vers une origine tierce déjà identifiée comme précoce.