Anticiper les connexions réseau (preconnect, dns-prefetch)
Établissez vos connexions réseau plus tôt avec preconnect et dns-prefetch pour réduire la latence et accélérer la vitesse perçue des pages.
Avant même de récupérer une ressource, le navigateur doit établir une connexion : résoudre le nom de domaine en adresse IP, ouvrir la connexion au serveur, puis la chiffrer pour la sécurité. Chacune de ces étapes implique un aller-retour réseau, et le processus complet peut en compter jusqu’à trois, davantage dans les cas non optimisés.
Anticiper ce travail rend les pages bien plus rapides à l’usage. Les indices de ressources preconnect et dns-prefetch préparent la couche réseau à l’avance, ce qui réduit la latence ressentie. Pour le SEO, c’est un gain direct sur la vitesse perçue et sur des métriques sensibles comme le Largest Contentful Paint (LCP).
L’établissement d’une connexion coûte plusieurs allers-retours réseau que les internautes ne voient pas mais ressentent. Sur les pages qui dépendent de domaines tiers, anticiper avec preconnect change vraiment la vitesse perçue. Ma nuance de terrain : preconnect pour ce qui est certain et imminent, dns-prefetch pour le reste, sans ouvrir des connexions qui ne serviront pas.
Ouvrir la connexion tôt avec preconnect
Ajouter rel=preconnect à une balise link signale au navigateur que la page va se connecter à une autre origine et qu’il doit lancer le processus au plus tôt. Les ressources se chargent ensuite plus vite, car la configuration est déjà terminée quand le navigateur les demande ; pour les fichiers les plus importants, pensez aussi à les précharger. On peut ainsi gagner de 100 à 500 ms sur des origines tierces importantes.
Les indices de ressources ne sont pas des ordres : le navigateur peut choisir de les ignorer ou de les appliquer partiellement. Réservez donc preconnect aux origines tierces réellement critiques, jamais à votre propre domaine.
<head>
<link rel="preconnect" href="https://monsite.fr">
<link rel="preconnect" href="https://monsite.fr/polices" crossorigin>
</head>Résoudre le DNS à l'avance avec dns-prefetch
Quand une page doit joindre de nombreux domaines tiers, tous les préconnecter devient contre-productif. L’indice dns-prefetch est alors plus adapté : il gère uniquement la résolution DNS, première étape de la connexion, qui prend généralement de 20 à 120 ms. Comme la compatibilité des navigateurs diffère légèrement, dns-prefetch sert aussi de solution de secours à preconnect ; côté serveur, veillez en parallèle à optimiser la réponse HTML.
<link rel="preconnect" href="https://monsite.fr">
<link rel="dns-prefetch" href="https://monsite.fr">Quand anticiper la connexion
Ces indices brillent surtout quand vous savez d’où vient une ressource sans en connaître l’URL exacte. Le tableau ci-dessous présente les situations typiques.
| Situation | Indice conseillé | Bénéfice |
|---|---|---|
CDN à URL versionnée inconnue |
preconnect |
Connexion prête avant la requête |
CDN d’images au chemin variable |
preconnect |
Aller-retours réseau évités |
Contenu multimédia en streaming tiers |
preconnect |
Récupération réduite à un seul aller-retour |
Nombreux domaines tiers secondaires |
dns-prefetch |
Coût faible, résolution DNS anticipée |
Le navigateur ferme toute connexion preconnect inutilisée au bout de 10 secondes : limitez donc le nombre d’origines préconnectées. Et n’écrivez jamais rel= »preconnect dns-prefetch » dans une seule balise link : cela provoque un bug dans Safari qui annule le preconnect. Utilisez deux balises distinctes.
À faire
- preconnect pour les origines critiques
- dns-prefetch pour le reste
- deux balises distinctes pour le repli
- crossorigin sur les polices
À éviter
- preconnecter votre propre domaine
- multiplier les preconnect
- fusionner preconnect et dns-prefetch dans une même balise
Points clés à retenir
- Utilisez preconnect pour les origines tierces critiques
- Préférez dns-prefetch quand les domaines sont nombreux
- Ne préconnectez pas votre propre domaine
- Gardez des balises séparées pour le repli
- Mesurez toujours l'impact réel sur le LCP
preconnect et dns-prefetch préparent la connexion avant la requête.
Quiz : testez vos connaissances
Quiz : testez vos connaissances
-
Que prépare l'indice preconnect ?
- Il télécharge directement la ressource ciblée
- Il lance au plus tôt la connexion vers une autre origine, sans télécharger la ressource
- Il met en cache la réponse pour les visites suivantes
preconnectsignale au navigateur de lancer au plus tôt la connexion vers une autre origine. La ressource se charge ensuite plus vite, car la configuration est déjà terminée, mais le fichier n’est pas téléchargé. -
Quand préférer dns-prefetch à preconnect ?
- Quand une seule origine critique est en jeu
- Quand il faut télécharger une police le plus vite possible
- Quand la page doit joindre de nombreux domaines tiers
Préconnecter de nombreux domaines devient contre-productif. L’indice
dns-prefetchest alors plus adapté : il gère uniquement la résolution DNS, première étape de la connexion. -
Que devient une connexion preconnect inutilisée ?
- Elle reste ouverte indéfiniment
- Le navigateur la ferme au bout de 10 secondes
- Elle se transforme automatiquement en preload
Le navigateur ferme toute connexion
preconnectinutilisée au bout de 10 secondes. Mieux vaut donc limiter le nombre d’origines préconnectées.
À propos de l'auteur
Besoin d'un accompagnement SEO ?
Vous voulez savoir quelles origines tierces préconnecter sur votre site ?