Devsource by Maxime GUINARD

Preconnect

Directive permettant d’anticiper la connexion réseau vers un domaine tiers avant que la requête réelle ne soit envoyée.

Video
Chargement...

Définition

Le Preconnect (rel="preconnect") est une instruction qui permet au navigateur d’établir une connexion anticipée avec un serveur externe. Il réalise les étapes de résolution DNS, de négociation TCP et de chiffrement TLS, éliminant ainsi ces délais lors de l’appel effectif de la ressource.

Bonnes pratiques

  • Implémenter progressivement : À réserver aux domaines tiers critiques (ex: Google Fonts, CDN d’images, scripts de paiement).
  • Mesurer avec Lighthouse : Surveiller la réduction du temps de latence réseau sur les ressources externes prioritaires.
  • Combiner avec dns-prefetch : Utiliser dns-prefetch en fallback pour les navigateurs plus anciens afin de garantir une résolution DNS rapide.
  • Automatiser le monitoring : Vérifier que les domaines préconnectés sont toujours utilisés pour ne pas gaspiller de ressources processeur.

À éviter

  • Chargements bloquants : Préconnecter trop de domaines (plus de 2 ou 3) peut ralentir le chargement de la page principale en surchargeant le réseau.
  • Assets non optimisés : Ne pas utiliser le preconnect pour des domaines dont vous n’avez besoin qu’en fin de chargement (ex: scripts de chat en bas de page).
  • Modifications non mesurées : Oublier de supprimer les directives vers des domaines qui ne sont plus présents sur votre site.
The Bridge
reside
AFFS7
12
R
kp
S
K
The Bridge
reside
AFFS7
12
R
kp
S
K
The Bridge
reside
AFFS7
12
R
kp
S
K
The Bridge
reside
AFFS7
12
R
kp
S
K
The Bridge
reside
AFFS7
12
R
kp
S
K