SEO technique

Preconnect

preconnect est une directive qui demande au navigateur d’établir à l’avance la connexion vers un domaine tiers, avant que la première ressource ne soit réclamée.

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Elle fait gagner le temps d’établissement de la connexion : résolution du nom, poignée de main réseau, négociation du chiffrement.

Sa différence avec les directives voisines

Trois mécanismes voisins, souvent confondus.

dns-prefetch résout seulement le nom de domaine. Le gain est plus faible, le coût aussi. C’est le repli quand preconnect n’est pas pris en charge.

preconnect va jusqu’à l’établissement complet de la connexion. Le gain typique se compte en centaines de millisecondes sur une connexion mobile.

preload télécharge une ressource précise à l’avance. Il ne prépare pas une connexion, il récupère un fichier nommé.

Les trois se complètent : preconnect sur le domaine, preload sur le fichier critique.

Où elle sert

Sur les domaines tiers dont une ressource critique dépend, et uniquement ceux-là.

Trois cas typiques : les polices chargées depuis un service externe, le domaine d’images si elles sont servies depuis un CDN distinct, et le script d’un outil de test dont l’exécution retarde l’affichage, ce qui rejoint le sujet du scintillement.

L’erreur de l’utiliser partout

Chaque connexion préparée consomme des ressources : mémoire, sockets, batterie sur mobile.

Ouvrir dix connexions à l’avance pour des domaines dont la moitié ne sera jamais sollicitée dégrade la performance au lieu de l’améliorer. Le navigateur ferme d’ailleurs les connexions inutilisées après quelques secondes, ce qui annule le bénéfice si la ressource arrive trop tard.

La règle pratique : deux à quatre domaines au maximum, choisis parce qu’une ressource visible en dépend.

Comment vérifier le gain

L’onglet réseau des outils du navigateur montre le temps passé en connexion pour chaque domaine. Un domaine tiers dont cette phase dure longtemps est candidat.

La mesure se fait ensuite sur le Largest Contentful Paint, sur données de terrain et non en laboratoire.

FAQ

Questions fréquentes

01

Faut-il l'attribut crossorigin ?

Pour les polices et les requêtes qui l'exigent, oui. Sans lui, la connexion préparée n'est pas réutilisée.
02

Combien de domaines ?

Peu. Au-delà de quatre, le coût dépasse généralement le gain.
03

Est-ce un critère de classement ?

Non. L'effet est indirect, par les signaux web essentiels.