La section "Opportunités" de votre rapport Lighthouse répertorie toutes les requêtes clés qui ne donnent pas encore la priorité aux requêtes d'extraction avec <link rel=preconnect>:
Compatibilité du navigateur
<link rel=preconnect> est compatible avec la plupart des navigateurs. Consultez Compatibilité des navigateurs.
Améliorer la vitesse de chargement des pages grâce à la préconnexion
Envisagez d'ajouter des indications 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 le processus doit commencer le plus tôt possible.
Dans les réseaux lents, établir des connexions prend souvent beaucoup de temps, en particulier pour les connexions sécurisées, car cela peut impliquer des résolutions DNS, des redirections et plusieurs aller-retours vers le serveur final qui gère la requête de l'utilisateur.
En prenant soin de tout cela à l'avance, vous pouvez rendre votre application beaucoup plus rapide pour l'utilisateur sans affecter négativement l'utilisation de la bande passante. La plupart du temps consacré à l'établissement d'une connexion est passé à attendre au lieu d'échanger des données.
Pour informer le navigateur de votre intention, il suffit d'ajouter une balise de lien à votre page:
<link rel="preconnect" href="https://example.com">
Cela indique au navigateur que la page a l'intention de se connecter à example.com et d'y récupérer du contenu.
Gardez à l'esprit que même si <link rel="preconnect"> est assez bon marché, il peut tout de même occuper un temps CPU précieux, en particulier sur les connexions sécurisées.
Cela est particulièrement préjudiciable 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 préliminaire.
En général, essayez d'utiliser <link rel="preload">, car il s'agit d'un ajustement plus complet des performances, mais conservez <link rel="preconnect"> dans votre ceinture porte-outils pour les cas particuliers tels que:
- Cas d'utilisation: savoir d'où proviennent les données, mais pas ce que vous récupérez
- Cas d'utilisation: contenus multimédias en streaming
<link rel="dns-prefetch"> est un autre type de <link> lié aux connexions.
Cela gère uniquement la résolution DNS, mais il bénéficie d’une prise en charge plus large du navigateur, ce qui peut 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 à la pile
Drupal
Utilisez un module compatible avec les indices de ressources user-agent afin d'installer et de configurer des indices de ressources de préconnexion ou de préchargement DNS.
Magento
Modifiez la mise en page de vos thèmes et ajoutez des indices de ressources de préconnexion ou de préchargement DNS.