Emplacement scripts et vitesse d'affichage page web

**Anibel** · 03/07/2013, 17h28

Salut tout le monde,

Est ce que l'emplacement des scripts intervient dans la vitesse d'affichage d'une page web ?

Si oui, quel est l'emplacement l'idéal ?

Merci d'avance

**SpaceFrog** · 04/07/2013, 08h37

l'essentiel de la vitesse d'affichage est conditionné par le débit.

il serait cependant possible, selon les puristes, de gagner quelques millionièmes de secondes en plaçant les script en fin de page avant la balise de fermeture body

[edit] oups oui balise body et pas html ...

**SylvainPV** · 04/07/2013, 09h17

Envoyé par SpaceFrog

l'essentiel de la vitesse d'affichage est conditionné par le débit.

il serait cependant possible, selon les puristes, de gagner quelques millionièmes de secondes en plaçant les script en fin de page avant la balise de fermeture html

Les "puristes", comment tu y vas

Il est conseillé de mettre les scripts en fin de body, juste avant le tag de fermeture </body>, pour deux raisons à ma connaissance :
- les browsers ne prennent en charge qu'un nombre limité de téléchargements simultanés en parallèle. Mettre les scripts dans le HEAD peut bloquer peut-être le téléchargement en parallèle d'autres ressources jugées plus prioritaires, comme des CSS ou des images.
- lorsque le navigateur lit un script, il est "bloqué" le temps d'interpréter et de compiler le script (à nuancer, certains browsers sont peut-être multi-threadés aujourd'hui, je n'en suis pas sûr). En plaçant les scripts tout à la fin, le contenu est déjà visible pendant ce délai très court, et l'utilisateur peut donc commencer à le consulter un peu plus tôt.

Certes SpaceFrog a raison, ça casse pas trois pattes à un canard niveau performances. Mais quand le périphérique ou le réseau ne sont pas de bonne qualité, ça peut vraiment changer la donne, et l'utilisateur peut consulter le contenu de 10 millisecondes à 1 seconde plus tôt je dirais. Je pense que quelqu'un avec un vieux smartphone mono-coeur chez Free Mobile verra davantage la différence

**Webokage** · 04/07/2013, 09h22

Je complète la réponse précédente en vous proposant de lire un article assez dense faisant un retour d’expérience sur le temps de chargement des pages, les difficultés, etc, en plaçant ces fameux scripts en bas de page :
http://braincracking.org/2010/05/31/...-mais-comment/

J'étais tombé dessus à l'époque ou je voulais comprendre pourquoi la légende voulait qu'on place nos scripts en bas, maintenant vous le saurez aussi

**SylvainPV** · 04/07/2013, 09h37

J'ai lu en diagonale l'article, mais il y a un truc qui m'a fait défriser :

taire les erreurs JS
la page se charge, les JS inline se lancent et plantent en silence
remettre le système d’erreur standard
inclure le fichier
re-exécuter tous les scripts inline

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
window.defaultOnError = window.onerror; window.onerror = function() {return true;};

Ca serait pas particulièrement dégueulasse ça ?

Si le problème est une question d'ordre d'exécution, il vaut largement mieux utiliser un outil de chargement asynchrone de scripts (alias script loader). Ces outils généralement très légers permettent de télécharger en parallèle les scripts tout en gardant le contrôle de l'ordre d'exécution. On peut citer :

**Bovino** · 04/07/2013, 10h06

Est ce que l'emplacement des scripts intervient dans la vitesse d'affichage d'une page web ?

Oui et non.

Ca n'a aucun impact sur le chargement global de ta page.
Comme il a déjà été mentionné, le chargement des scripts est un peu particulier : contrairement aux autres contenus dits remplacés (feuilles de style, images...) un script peut modifier le contenu du document (par exemple avec l'immonde document.write()...) de ce fait, le chargement d'un script bloque le rendu de la page. Néanmoins, quel que soit l'endroit où tu places le script, le chargement global de la page sera le même. La seule différence (mais elle peut quand même être de taille), c'est à quel moment ce blocage va intervenir. Si ton script est dans le <head>, ce sera avant tout début d'affichage de la page, si c'est juste avant le </body>, ce sera après l'affichage complet du DOM (mais pas forcément des éléments remplacés). Donc l'utilisateur pourra (encore faut-il avoir une quantité de scripts assez imposante) avoir l'impression d'un chargement plus rapide.
N'oublie pas non plus que le positionnement du script a aussi un impact sur sa structure. Habituellement, on demande aux scripts d'attendre le chargement de la page (ou au moins du DOM) pour initialiser les fonctionnalités (typiquement avec window.onload) ce qui n'est plus utile si le script est en fin de page.
Enfin, si ton script n'est pas sensé insérer du contenu dans le document pendant son chargement, tu peux très bien le charger de façon asynchrone à l'aide des attributs async et defer.

Comprendre la balise script.

Emplacement scripts et vitesse d'affichage page web

JavaScript

Discussions similaires

Partager

Partager