Le preconnect est une directive HTML qui permet au navigateur d’établir une connexion anticipée avec un serveur tiers avant même que la ressource ne soit demandée. En pratique, cela réduit la latence et accélère le chargement des pages, surtout lorsqu’elles dépendent de ressources externes comme des polices, des scripts ou des API. Dans cet article, vous apprendrez exactement ce qu’est le preconnect, comment il fonctionne, quand l’utiliser et comment l’implémenter sans erreur.
Comment fonctionne le preconnect ?
Pour comprendre le preconnect, il faut d’abord connaître les étapes d’une requête réseau. Lorsque le navigateur doit charger une ressource depuis un serveur externe, il doit :
- Résoudre le DNS (trouver l’adresse IP)
- Établir une connexion TCP
- Négocier une connexion TLS (pour HTTPS)
Sans preconnect, ces étapes se déroulent au moment où la ressource est demandée, ce qui ajoute un délai. Avec le preconnect, le navigateur effectue ces étapes en avance pendant qu’il analyse le HTML. Ainsi, lorsque le besoin de la ressource se présente, la connexion est déjà prête.
La syntaxe est simple : <link rel="preconnect" href="https://example.com"> dans le <head> de votre page.
Quand utiliser le preconnect ?
Le preconnect est utile pour les ressources provenant de domaines tiers que vous savez nécessaires rapidement. Voici les cas d’usage les plus fréquents :
- Google Fonts : Les polices hébergées chez Google nécessitent une connexion à fonts.googleapis.com et fonts.gstatic.com.
- CDN : Si vous utilisez un CDN pour vos images, scripts ou styles.
- APIs externes : Par exemple, une API de paiement ou de cartographie.
- Analytics : Google Analytics, Facebook Pixel, etc.
- Scripts publicitaires : Bien que leur chargement soit souvent différé, un preconnect peut accélérer le premier appel.
Attention : ne préconnectez pas tous les domaines possibles. Cela peut saturer les connexions et ralentir le chargement. Limitez-vous aux 2-3 domaines les plus critiques.
Différence entre preconnect, dns-prefetch et prefetch
Il existe plusieurs directives de performance. Voici un tableau comparatif :
| Directive | Action | Coût | Usage recommandé |
|---|---|---|---|
| dns-prefetch | Résout le DNS uniquement | Faible | Domaines dont vous n’êtes pas sûr d’avoir besoin |
| preconnect | DNS + TCP + TLS | Moyen | Domaines critiques et proches dans le temps |
| prefetch | Télécharge la ressource en basse priorité | Élevé (bande passante) | Ressources pour la page suivante |
: le preconnect est plus agressif que le dns-prefetch mais moins que le prefetch. Il prépare la connexion sans consommer de bande passante pour le contenu.
Comment implémenter le preconnect correctement
L’implémentation est simple, mais quelques pièges sont à éviter. Voici les bonnes pratiques :
1. Placez la balise dans le
Le preconnect doit être déclaré le plus tôt possible, idéalement juste après le <meta charset>. Exemple :
<head>
<meta charset="UTF-8">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
...
</head>2. Utilisez l’attribut crossorigin si nécessaire
Pour les ressources CORS (comme les polices), ajoutez crossorigin pour que la connexion soit utilisable. Sans cela, le navigateur peut établir une connexion non-CORS et devoir en refaire une.
Exemple correct : <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
3. Limitez le nombre de connexions
Les navigateurs limitent le nombre de connexions simultanées par domaine (généralement 6). Trop de preconnect peut bloquer d’autres ressources. N’en utilisez que pour les 2-3 domaines les plus importants.
4. Testez l’impact
Utilisez des outils comme Lighthouse ou WebPageTest pour mesurer l’effet. Un preconnect inutile n’aura aucun bénéfice et pourra même ralentir légèrement le chargement.
Erreurs fréquentes à éviter
- Préconnecter trop de domaines : Cela dilue l’effet et peut saturer les connexions.
- Oublier l’attribut crossorigin : Pour les ressources CORS, la connexion sera inutilisable.
- Utiliser preconnect pour des ressources non critiques : Par exemple, un script de chat qui se charge en bas de page n’a pas besoin de preconnect.
- Ne pas tester : Sans mesure, vous ne saurez pas si l’optimisation est efficace.
Checklist pour implémenter le preconnect
- Identifiez les ressources tierces critiques (polices, CDN, API).
- Limitez-vous à 2-3 domaines maximum.
- Ajoutez l’attribut crossorigin si la ressource utilise CORS.
- Placez les balises dans le , le plus tôt possible.
- Testez avec Lighthouse avant et après.
- Surveillez les performances réelles via analytics.
Questions fréquentes sur le preconnect
Le preconnect est-il compatible avec tous les navigateurs ?
Oui, tous les navigateurs modernes le supportent (Chrome, Firefox, Safari, Edge). Pour les anciens navigateurs, il est ignoré sans conséquence.
Puis-je utiliser preconnect pour mon propre domaine ?
Inutile, car la connexion est déjà établie lors du chargement de la page. Le preconnect est réservé aux domaines tiers.
Quelle est la différence entre preconnect et dns-prefetch ?
dns-prefetch ne fait que la résolution DNS, tandis que preconnect prépare toute la connexion (DNS + TCP + TLS). Le preconnect est plus puissant mais plus coûteux en ressources navigateur.
Le preconnect peut-il améliorer le Largest Contentful Paint (LCP) ?
Oui, si la ressource préconnectée est nécessaire pour afficher le contenu principal (comme une police ou une image hébergée sur un CDN).
Passez à l’action : optimisez vos connexions dès maintenant
Le preconnect est une technique simple mais efficace pour améliorer les performances perçues de votre site. Commencez par auditer vos ressources tierces, implémentez les directives avec précaution, et mesurez l’impact. Une fois maîtrisé, vous pouvez combiner preconnect avec d’autres optimisations comme le lazy loading ou la mise en cache pour offrir une expérience utilisateur optimale.
N’attendez pas : ajoutez le preconnect à votre site dès aujourd’hui et constatez la différence dans vos métriques de performance.
Photo by Vlada Karpovich on Pexels
8 Comments
Merci pour cet article très clair ! J’ai une question : est-ce que le preconnect peut être utilisé pour les polices Google Fonts ? Et si oui, faut-il préconnecter les deux domaines (fonts.googleapis.com et fonts.gstatic.com) ou un seul suffit ?
Oui, le preconnect est très utile pour Google Fonts. Il est recommandé de préconnecter les deux domaines : fonts.googleapis.com pour le chargement des feuilles de style CSS et fonts.gstatic.com pour les fichiers de polices. Cela évite deux résolutions DNS séparées et accélère le rendu des polices.
Très bon article. Je me demandais si le preconnect pouvait avoir un impact négatif si on l’utilise sur trop de domaines. Est-ce que ça peut saturer les connexions ?
Tout à fait, utiliser le preconnect sur trop de domaines peut saturer les connexions simultanées du navigateur (généralement 6 par domaine). Cela peut ralentir le chargement des autres ressources. Il est conseillé de limiter le preconnect aux 2-3 domaines les plus critiques pour votre page.
Merci pour l’explication. Une petite précision : est-ce que le preconnect fonctionne aussi pour les ressources HTTP ou seulement HTTPS ?
Le preconnect fonctionne pour les deux protocoles, mais étant donné que la plupart des sites utilisent aujourd’hui HTTPS, c’est surtout utile pour les connexions sécurisées. Notez que pour les ressources HTTP, la négociation TLS n’a pas lieu, donc le gain est moindre.
Article très utile, merci ! J’ai remarqué que certains sites utilisent aussi dns-prefetch. Dans quels cas vaut-il mieux utiliser dns-prefetch plutôt que preconnect ?
Bonjour, bonne question. dns-prefetch est plus léger car il ne fait que résoudre le DNS, sans ouvrir de connexion TCP/TLS. Il est recommandé pour les domaines dont vous n’êtes pas sûr d’avoir besoin (par exemple, des ressources conditionnelles). Utilisez preconnect uniquement pour les domaines critiques dont vous êtes certain qu’ils seront sollicités rapidement.