Origines à préconnecter

Silktide vérifie si votre page pourrait se charger plus rapidement en indiquant d’emblée au navigateur quels autres serveurs elle devra bientôt contacter. Ouvrir ces connexions à l’avance signifie que les fichiers de tiers commencent à se télécharger plus tôt.

Avant qu’un navigateur puisse télécharger quoi que ce soit depuis un nouveau serveur — un service de polices, un , un fournisseur d’analytique — il doit rechercher l’adresse du serveur, ouvrir une connexion et négocier le chiffrement. Cette préparation exige plusieurs allers‑retours réseau, et normalement le navigateur ne s’y met que lorsqu’il découvre pour la première fois un fichier nécessaire provenant de ce serveur, ce qui peut arriver tard pendant le chargement de la page.

Pourquoi c’est important

L’établissement d’une connexion à un seul serveur peut coûter des centaines de millisecondes sur une connexion mobile, et une page typique communique avec plusieurs serveurs tiers. Lorsque cette préparation démarre tard — parce que le fichier qui en dépend est référencé profondément dans une feuille de style ou un script — le délai affecte directement le contenu visible, comme les polices et les images.

Un indice de préconnexion déplace ce coût tout au début du chargement, où il se superpose au travail que le navigateur effectuait de toute façon. C’est une ligne de par serveur, sans changement visuel de la page.

Comment corriger

Ajoutez un indice de préconnexion dans l’élément <head> de votre page pour chaque serveur important signalé par la vérification :

<!-- Ouvrir la connexion avant que le navigateur ne découvre qu’il en a besoin -->
<link rel="preconnect" href="https:\/\/fonts.gstatic.com" crossorigin>

Ajoutez l’attribut crossorigin pour les serveurs qui en ont besoin — les polices en ont toujours besoin.
Ne préconnectez qu’aux serveurs importants pour la page visible, par exemple ceux qui hébergent vos polices, images ou scripts critiques. Chaque connexion ouverte consomme des ressources sur l’appareil du visiteur, donc quelques indices aident et des dizaines nuisent.
Pour les serveurs moins importants, rel="dns-prefetch" est un indice moins coûteux qui effectue seulement la recherche d’adresse à l’avance.

Comment Silktide teste cela

Charger la page dans un vrai navigateur, en utilisant le type d’appareil, la vitesse de connexion et l’emplacement de test configurés pour vos tests de vitesse.
Identifier les serveurs depuis lesquels la page télécharge, où la mise en place de la connexion a retardé le téléchargement et où aucun indice de connexion anticipée n’était en place.
Rapporter chaque serveur avec l’estimation du temps qu’un indice de préconnexion ferait gagner.
Noter la page selon le gain total estimé : environ 100 millisecondes font baisser la note, et 200 millisecondes ou plus sont jugées médiocres.

Dépannage

J’ai ajouté l’indice, mais le constat demeure

Vérifiez l’adresse exacte : l’indice doit correspondre au serveur d’où proviennent réellement les fichiers, y compris le protocole et tout sous-domaine (https:\/\/fonts.gstatic.com n’est pas https:\/\/fonts.googleapis.com). Les polices exigent aussi crossorigin sur l’indice — sans cela, le navigateur ouvre le mauvais type de connexion puis la rejette.

Dois-je préconnecter à tous les serveurs tiers ?

Non. Les navigateurs limitent le nombre de connexions anticipées qu’ils honorent, et chacune consomme des ressources sur l’appareil du visiteur. Réservez la préconnexion aux quelques serveurs dont les fichiers déterminent ce que les visiteurs voient en premier.