La balise <link ref = "dns-prefetch"> doit-elle être placée aussi haut que possible dans le site Web <head>?
J'implémente la nouvelle balise dns-prefetch pour mon application Web et je me demande où je devrais la placer dans la balise <head>?
Dois-je la placer comme première balise dans <head> afin que le navigateur lance immédiatement la pré-extraction du DNS?
<html>
<head>
<link rel="dns-prefetch" href="//ajax.googleapis.com">
... other tags ...
</head>
<body>
</body>
</html>
Je ne trouve pas de bon guide sur cette balise.
Dns-prefetch est un indice qui indique à votre navigateur Web que vous utiliserez probablement ce domaine à un moment donné. Allez-y, configurez la connexion à l'avance pour gagner du temps.
Le point principal est que c'est un indice pour une page future. Donc, votre navigateur ne l'utilisera que s'il n'est pas occupé à faire autre chose. Quand une page est chargée pour la première fois, elle a beaucoup plus de ressources importantes à charger, qui ont une priorité bien supérieure à une indication. Ainsi, même si cette indication est la première chose sur la page, la plupart des navigateurs l'ignoreront jusqu'à une date ultérieure. Ce qui est logique car pourquoi perdriez-vous du temps sur quelque chose que vous pourriez utiliser plus tard, lorsque vous avez des ressources sur cette page que vous savoir il vous faut maintenant.
Il est également important de noter que, pour cette raison, il n'est pas avantageux de pré-télécharger une ressource sur votre page actuelle - bien qu'il existe une feuille de style que vous référencez contient une ressource qui nécessite une recherche DNS car elle ne se trouve pas directement sur votre page. .
Enfin, dns-prefetch n'enregistre que très peu de temps (la recherche DNS). Si vous êtes certain que vous aurez besoin de quelque chose de ce domaine, pourquoi ne pas utiliser plutôt la connexion préalable et effectuer à la fois la recherche DNS, la connexion TCP et toute négociation HTTPS? Voir ici pour plus de détails: https://www.igvita.com/2015/08/17/ éliminating-roundtrips-with-preconnect/
Donc, pour répondre à votre question, non, peu importe sa hauteur, le navigateur l'ignorera probablement jusqu'à ce qu'il traite le reste de votre page.
Je suggèrerais d'insérer une balise définissant le jeu de caractères de la page avant toute autre balise, en particulier si vous souhaitez que les anciennes versions d'Internet Explorer analysent correctement votre page.
Sur webpagetest.org lors d'un test d'URL, j'ai remarqué ceci:
Assurez-vous que votre jeu de caractères est défini en haut de votre tête ou dans des en-têtes HTTP, sinon IE devra peut-être redémarrer l'analyse de la page (entraînant l'annulation de demandes).
En savoir plus: Blog MSDN - Meilleures pratiques: mettez votre HEAD en ordre
Voici une bonne source de pré-extraction: https://developer.mozilla.org/en-US/docs/Web/HTTP/Link_prefetching_FAQ
Il indique que (pour les navigateurs mozilla), l'URL définie pour le prélecture ne sera vérifiée que pendant la période d'inactivité du navigateur, ce qui signifie qu'il ne numérise pas une page. Pour cette raison, l’utilisation de la balise link pour le dns-prefetching peut être placée n’importe où entre <head> et </head> de votre document HTML, sous réserve des restrictions énoncées dans mon premier paragraphe.
Vous pouvez également utiliser un en-tête HTTP pour définir l'URL à pré-extraire. Les détails pour cela sont également montrés dans la FAQ de prélecture de lien.