J'ai récemment lu le manifeste Yahoo Bonnes 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ù exactement et quand?
Devrions-nous le mettre avant </html>ou après la fermeture ? Et surtout, quand faut-il encore le mettre dans la <head>section?
Réponses:
Il existe deux possibilités pour des scripts vraiment discrets:
</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 atteignent 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 doit 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 est sur un autre domaine (comme les widgets externes), cela peut valoir la peine de le mettre en bas pour éviter qu'il ne retarde le chargement de la page.
Et pour tout problème de performance, 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 - Yahoo recommande de placer les scripts juste avant la </body>balise de fermeture , ce qui créera l'illusion que la page se charge plus rapidement sur un cache vide (puisque les scripts ne bloquent pas le téléchargement du reste du document). Cependant, si vous souhaitez exécuter du code lors du chargement de la page, il ne commencera à s'exécuter qu'après le chargement de la page entière. Si vous mettez les scripts dans la <head>balise, ils commenceraient à s'exécuter avant - donc sur un cache amorcé, la page semblerait en fait se charger plus rapidement.
De plus, le privilège de placer des scripts en bas de page n'est pas toujours disponible. Si vous devez inclure dans vos vues des scripts en ligne qui dépendent d'une bibliothèque ou d'un autre code JavaScript chargé auparavant, vous devez charger ces dépendances dans la <head>balise.
Dans l'ensemble, les recommandations de Yahoo sont intéressantes mais pas toujours applicables et doivent être considérées au cas par cas.
<script>balises en ligne n'impliquent pas de javascript importun.
<script>Les balises sont séparées du balisage et peuvent être utilisées avec du code qui améliore l'interface mais n'est pas obligatoire. Il n'y a donc rien d'intrusif dans les <script>balises en ligne .
<script>balises pour encoder ces valeurs dans des variables javascript, à utiliser peut-être avec édition en ligne ou autre comportement similaire.
Comme d'autres l'ont dit, placez-le avant les balises html du corps de fermeture .
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 représentaient une activité d'environ 0%.
Au bout de quelques minutes, nous avons réalisé qu'un site externe était en panne, auquel nous établissions un lien pour les balises de suivi Javascript. Cela signifiait que les navigateurs tapaient sur la balise de 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 comme dernière chose sur la page. Ensuite, s'ils n'étaient pas disponibles, le navigateur chargerait au moins la page jusqu'à ce point - et l'utilisateur en serait inconscient.
Pour résumer, sur la base des suggestions ci-dessus:
</body>balise.</body>moins que vous n'ayez une raison de placer les scripts dans head.Si vous souhaitez modifier 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 de document peut vraiment tuer les temps de chargement des pages.
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>
C'est essentiellement parce que la plupart des navigateurs arrêtent de rendre la page pendant qu'ils évaluent le script que vous fournissez. Il est donc possible de mettre du code non bloquant n'importe où dans la page (je pense principalement aux choses qui attachent des fonctions à l' onLoadévénement, car la liaison d'événements est si rapide qu'elle est effectivement gratuite). Un gros tueur ici est au début de la page en insérant un script de serveur publicitaire, ce qui peut empêcher le chargement de la page avant que les publicités ne soient totalement téléchargées, ce qui rend les temps de chargement de votre page gonflés.
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>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 mettre des éléments comme les widgets de blog en bas de sorte que s'ils ne se chargent pas, cela n'affecte pas la convivialité de la page.