Devsource

Preconnect : définition et optimisation du chargement des ressources

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.

 

→ Prendre RDV pour votre projet maintenant

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.
Qu’est-ce que le preconnect ?

Le preconnect est une instruction HTML qui permet au navigateur d’anticiper la connexion à un domaine externe pour accélérer le chargement des ressources.

Il réduit le temps de latence en préparant à l’avance la connexion réseau (DNS, TCP et TLS) vers des ressources externes.

Le navigateur établit en avance la connexion avec un domaine tiers avant même de demander les ressources associées.

Le dns-prefetch ne fait que la résolution DNS, tandis que le preconnect prépare l’ensemble de la connexion réseau.

Il est recommandé pour les ressources critiques provenant de domaines externes comme les CDN, polices ou scripts tiers.

Indirectement, oui. En améliorant les performances et la vitesse de chargement, il peut contribuer à une meilleure expérience utilisateur.

Client The Bridge
Client Reside
AFFS7
Client Acme
R
kp
S
K
Client The Bridge
Client Reside
AFFS7
Client Acme
R
kp
S
K
Client The Bridge
Client Reside
AFFS7
Client Acme
R
kp
S
K
Client The Bridge
Client Reside
AFFS7
Client Acme
R
kp
S
K
Client The Bridge
Client Reside
AFFS7
Client Acme
R
kp
S
K