La section "Opportunités" de votre rapport Lighthouse liste toutes les requêtes clés qui ne priorisent pas encore les requêtes de récupération avec <link rel=preconnect> :
Compatibilité du navigateur
<link rel=preconnect> est compatible avec la plupart des navigateurs. Consultez la section Compatibilité du navigateur.
Améliorer la vitesse de chargement des pages grâce à la préconnexion
Envisagez d'ajouter des indices de ressources preconnect ou dns-prefetch pour établir les premières connexions avec des origines tierces importantes.
<link rel="preconnect"> informe le navigateur que votre page a l'intention d'établir une connexion avec une autre origine et que vous souhaitez que le processus commence dès que possible.
Lorsque le réseau est lent, établir des connexions nécessite souvent beaucoup de temps, en particulier pour les connexions sécurisées, car cela peut impliquer des recherches DNS, des redirections et plusieurs aller-retour vers le serveur final qui gère la requête de l'utilisateur.
En prenant soin de tout cela à l'avance, vous pouvez donner à l'utilisateur l'impression que votre application est beaucoup plus rapide, sans affecter négativement la consommation de bande passante. La plupart du temps, l'établissement d'une connexion est consacré à l'attente plutôt qu'à l'échange de données.
Pour informer le navigateur de votre intention, il vous suffit d'ajouter une balise "link" à votre page:
<link rel="preconnect" href="https://example.com">
Cela permet au navigateur de savoir que la page a l'intention de se connecter à example.com et d'y récupérer du contenu.
N'oubliez pas que, bien que <link rel="preconnect"> soit relativement peu coûteux, il peut toujours prendre un temps de processeur précieux, en particulier sur les connexions sécurisées.
Cela est particulièrement problématique si la connexion n'est pas utilisée dans les 10 secondes, car le navigateur la ferme, ce qui gaspille tout le travail de connexion initial.
En général, essayez d'utiliser <link rel="preload">, car il s'agit d'un réglage des performances plus complet, mais gardez <link rel="preconnect"> dans votre boîte à outils pour les cas particuliers, par exemple :
- Cas d'utilisation : Savoir d'où provient l'élément, mais pas ce que vous récupérez
- Cas d'utilisation : streaming multimédia
<link rel="dns-prefetch"> est un autre type de <link> lié aux connexions.
Cette méthode ne gère que la recherche DNS, mais elle est compatible avec un plus grand nombre de navigateurs. Elle peut donc servir de solution de secours.
Vous l'utilisez exactement de la même manière :
<link rel="dns-prefetch" href="https://example.com" />.
Conseils spécifiques aux piles
Drupal
Vous pouvez ajouter les optimisations de ressources Preconnect ou dns-prefetch en installant et en configurant un module qui fournit des installations pour les indices de ressources user-agent.
Magento
Modifiez la mise en page de vos thèmes et ajoutez des indices de ressources de préconnexion ou de précharge DNS.