JavaScript discret: <script> en haut ou en bas du code HTML?
J'ai récemment lu le manifeste Yahoo Meilleures pratiques pour accélérer votre site Web . Ils recommandent de mettre l'inclusion JavaScript au bas du code HTML lorsque cela est possible.
Mais où et quand exactement?
Faut-il le mettre avant de fermer </html> ou après ? Et surtout, quand devrions-nous encore le mettre dans le <head> section?
Il existe deux possibilités pour des scripts vraiment discrets:
- y compris un fichier de script externe via une balise de script dans la section head
- y compris un fichier de script externe via une balise de script en bas du corps (avant
</body></html>)
Le second peut être plus rapide car la recherche originale de Yahoo a montré que certains navigateurs essayent de charger des fichiers de script lorsqu'ils frappent la balise de script et ne chargent donc pas le reste de la page avant d'avoir terminé. Cependant, si votre script a une partie "prête" qui doit s'exécuter dès que le DOM est prêt, vous devrez peut-être l'avoir dans la tête. Un autre problème est la mise en page - si votre script va changer la mise en page, vous voulez qu'il soit chargé le plus tôt possible afin que votre page ne passe pas longtemps à se redessiner devant vos utilisateurs.
Si le site de script externe se trouve sur un autre domaine (comme les widgets externes), il peut être utile de le placer en bas pour éviter qu'il ne retarde le chargement de la page.
Et pour tous les problèmes de performances faites vos propres tests de performance - ce qui peut être vrai à un moment où une étude est effectuée peut changer avec votre propre configuration locale ou des changements dans les navigateurs.
Ce n'est jamais aussi simple et sec - Yahoo recommande de mettre les scripts juste avant la fermeture </body> tag, ce qui créera l'illusion que la page se charge plus rapidement sur un cache vide (puisque les scripts ne bloqueront pas le téléchargement du reste du document). Cependant, si vous avez du code que vous souhaitez exécuter au chargement de la page, il ne commencera à s'exécuter qu'après le chargement de la page entière. Si vous placez les scripts dans le <head> tag, ils commenceraient à s'exécuter avant - donc sur un cache amorcé, la page semblerait se charger plus rapidement.
De plus, le privilège de mettre des scripts en bas de la page n'est pas toujours disponible. Si vous devez inclure des scripts en ligne dans vos vues qui dépendent d'une bibliothèque ou d'un autre code JavaScript en cours de chargement, vous devez charger ces dépendances dans le <head> tag.
Dans l'ensemble, les recommandations de Yahoo sont intéressantes mais pas toujours applicables et doivent être considérées au cas par cas.
Comme d'autres l'ont dit, placez-le avant les balises de fermeture bodyhtml.
L'autre jour, nous avons reçu de nombreux appels de clients se plaignant que leurs sites étaient extrêmement lents. Nous les avons visités localement et avons constaté qu'il leur fallait 20 à 30 secondes pour charger une seule page. Pensant que les serveurs fonctionnaient mal, nous nous sommes connectés - mais les serveurs web et sql étaient à ~ 0% d'activité.
Après quelques minutes, nous avons réalisé qu'un site externe était en panne, auquel nous nous connections pour les balises de suivi Javascript. Cela signifiait que les navigateurs frappaient la balise script dans la section head du site et attendaient de télécharger le fichier de script.
Donc, pour les scripts tiers/externes au moins, je recommanderais de les mettre en dernier sur la page. Ensuite, s'ils n'étaient pas disponibles, le navigateur chargerait au moins la page jusqu'à ce moment - et l'utilisateur n'en serait pas conscient.
Pour résumer, sur la base des suggestions ci-dessus:
- Pour les scripts externes (Google Analytics, outils de suivi marketing tiers, etc.), placez-les avant le
</body>tag. - Pour les scripts qui affectent la mise en page, placez-les dans head.
- Pour les scripts qui s'appuient sur "dom ready" (comme jquery), pensez à placer avant
</body>sauf si vous avez une raison Edge-case pour placer des scripts dans head. - S'il existe des scripts en ligne avec des dépendances, placez les scripts requis dans head.
Non, cela ne devrait pas être après le </html> car cela serait invalide. Le meilleur endroit pour mettre des scripts est juste avant le </body>
Cela est essentiellement dû au fait que la plupart des navigateurs arrêtent de rendre la page pendant qu'ils évaluent le script que vous fournissez. Donc, c'est OK de mettre du code non bloquant n'importe où dans la page (je pense principalement aux choses qui attachent des fonctions à l'événement onLoad, car la liaison d'événements est si rapide qu'elle est effectivement libre). Un gros tueur ici est au début de la page en mettant un script de serveur publicitaire, ce qui peut empêcher le chargement de la page avant que les annonces ne soient totalement téléchargées, ce qui rend votre temps de chargement de la page ballon
Si vous souhaitez bricoler la position de vos scripts, YSlow est un excellent outil pour vous donner une idée si cela va améliorer ou nuire aux performances. Mettre javascript dans certaines positions du document peut vraiment réduire les temps de chargement des pages.
Si vous le mettez en bas, il se charge en dernier, accélérant ainsi la vitesse à laquelle l'utilisateur peut voir la page. Il doit être avant la finale </html> mais sinon, il ne fera pas partie du DOM.
Si le code est nécessaire instantanément, mettez-le dans la tête.
Il est préférable de placer des éléments tels que les widgets de blog en bas afin que s'ils ne se chargent pas, cela n'affecte pas la convivialité de la page.