La section "Opportunités" de votre rapport Lighthouse répertorie toutes les demandes clés
qui ne priorisent pas encore les requêtes d'extraction avec <link rel=preconnect>:
Compatibilité du navigateur
<link rel=preconnect> est compatible avec la plupart des navigateurs. Voir
Compatibilité du navigateur
Améliorer la vitesse de chargement des pages grâce à la préconnexion
Envisagez d'ajouter preconnect ou dns-prefetch indices de ressources
afin d'établir des liens précoces avec des origines tierces importantes.
<link rel="preconnect"> informe le navigateur que votre page doit
pour établir une connexion
avec une autre origine,
et que vous souhaitez que le processus
commence dès que possible.
L'établissement de connexions implique souvent un temps important dans les réseaux lents, notamment en ce qui concerne les connexions sécurisées, car cela peut impliquer des résolutions DNS, des redirections et plusieurs allers-retours vers le serveur final qui traite la demande de l'utilisateur.
En prenant soin de tout cela à l'avance, vous pouvez rendre votre application beaucoup plus réactive. à l'utilisateur sans affecter négativement l'utilisation de la bande passante. La plupart du temps pour établir 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">
Ainsi, le navigateur sait que la page
pour se connecter à example.com et y récupérer du contenu.
Gardez à l'esprit que même si <link rel="preconnect"> est un service peu cher,
elle peut tout de même utiliser un temps CPU précieux, en particulier sur les connexions sécurisées.
C'est particulièrement mauvais si la connexion
n'est pas utilisée dans les 10 secondes,
lorsque le navigateur le ferme, ce qui gaspille
tout ce travail de connexion initial.
En général,
essayez d'utiliser <link rel="preload">,
car il s'agit d'un ajustement
des performances plus complet,
En revanche, gardez <link rel="preconnect"> dans votre ceinture porte-outils pour les cas particuliers, par exemple:
- Cas d'utilisation: savoir d'où proviennent les données, mais pas ce que vous extrayez
- Cas d'utilisation: streaming multimédia
<link rel="dns-prefetch"> est un autre type de <link> lié aux connexions.
Cela ne gère que la résolution DNS,
mais il offre une prise en charge plus large du navigateur, il peut donc servir de solution de remplacement.
Vous l'utilisez exactement de la même manière:
<link rel="dns-prefetch" href="https://example.com" />.
Conseils spécifiques aux piles
Drupal
Utiliser un module compatible avec les indices de ressources user-agent afin que vous puissiez installer et configurer des indices de ressources de préchargement DNS ou de préconnexion.
Magento
Modifier la mise en page de vos thèmes et ajouter des indices de ressources de préchargement DNS ou de préconnexion.