Origines à préconnecter

Silktide vérifie si votre page pourrait se charger plus rapidement en indiquant, dès le départ, au navigateur quels autres serveurs elle utilisera bientôt. Ouvrir ces connexions en amont permet aux fichiers tiers de commencer à 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 nécessite plusieurs allers-retours réseau, et normalement le navigateur ne la commence que lorsqu’il découvre pour la première fois un fichier dont il a besoin depuis ce serveur, ce qui peut arriver tard dans le chargement de la page.

Pourquoi c’est important

L’établissement de la connexion vers 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 a besoin est référencé profondément dans une feuille de style ou un script — le retard 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 aucun changement visuel pour la page.

Comment corriger

Ajoutez un indice preconnect dans le <head> de votre page pour chaque serveur important signalé par le contrôle :

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

Incluez l’attribut crossorigin pour les serveurs qui en ont besoin — les polices en ont toujours besoin.
Ne préconnectez qu’aux serveurs qui comptent 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 plus léger qui effectue uniquement la résolution d’adresse à l’avance.

Comment Silktide teste cela

Chargez 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.
Identifiez les serveurs depuis lesquels la page télécharge pour lesquels l’établissement de la connexion a retardé le téléchargement et où aucun indice de préconnexion n’était en place.
Signalez chaque serveur avec l’économie de temps estimée qu’un indice de préconnexion permettrait.
Notez la page selon l’économie totale estimée : environ 100 millisecondes entraîne une baisse de note, et 200 millisecondes ou plus est noté comme médiocre.

Dépannage

J’ai ajouté l’indice mais le problème persiste

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 également crossorigin sur l’indice — sans cela, le navigateur ouvre un type de connexion inadapté puis l’abandonne.

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.