rel="preconnect"
Baseline
Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis janvier 2020.
Le mot-clé preconnect pour l'attribut rel de l'élément HTML <link> indique au navigateur que l'utilisateur·ice aura probablement besoin de ressources provenant de l'origine de la ressource cible. Le navigateur peut donc améliorer l'expérience en initiant de manière anticipée une connexion vers cette origine. Le préconnect permet d'accélérer les chargements futurs depuis une origine donnée en réalisant à l'avance tout ou partie de l'établissement de la connexion (DNS+TCP pour HTTP, et DNS+TCP+TLS pour les origines HTTPS).
<link rel="preconnect"> apporte un bénéfice à toute future requête HTTP inter-origine, navigation ou sous-ressource. Il n'apporte aucun avantage pour les requêtes vers la même origine, car la connexion est déjà ouverte.
Si une page doit établir des connexions avec de nombreux domaines tiers, les préconnecter tous peut être contre-productif. L'indication <link rel="preconnect"> doit être utilisée uniquement pour les connexions les plus critiques. Pour les autres, utilisez simplement <link rel="dns-prefetch"> pour gagner du temps sur la première étape — la résolution DNS.
Exemples
<link rel="preconnect" href="https://example.com" />
Vous pouvez aussi utiliser le préconnect via l'en-tête HTTP Link, par exemple :
Link: <https://exemple.fr>; rel="preconnect"
Spécifications
| Specification |
|---|
| HTML # link-type-preconnect |
Compatibilité des navigateurs
Chargement…
Voir aussi
- Chargement spéculatif pour une comparaison entre
<link rel="preconnect">et d'autres fonctionnalités d'amélioration des performances.