Optimisation web : organiser le code JavaScript et CSS

Zoom sur les axes techniques d’optimisation liés à la structure et la conception des pages web, et la gestion des dépendances JavaScript et CSS. Un équilibre entre sur-optimisation et perception client est à trouver.

Comme nous l’avons vu dans l’article Pourquoi optimiser un site web ?, améliorer la vitesse de chargement des pages d’un site à au moins 4 impacts directs : le nombre de visiteurs (et par effet de levier le référencement), un manque à gagner économique, et un impact environnemental réel. Ensuite, nous avons vu dans l’article Optimiser l’utilisation des images d’une page web comment améliorer la performance du poste le plus gourmand en ressources inutiles, les images, avec la prétention de réduire, parfois, de plus de 75% le volume global.

Dans cette nouvelle série d’articles, je vais évoquer avec vous des axes techniques d’optimisation en parlant de la structure et de la conception de la page ainsi que de la gestion des dépendances JavaScript et CSS.

L’organisation des pages

Le développement Web autorise beaucoup de latitudes, notamment dans l’organisation du code des pages.

Une bonne pratique consiste à regrouper le code JavaScript et CSS dans des fichiers externes qu’il est possible d’appeler par une syntaxe du type :

<link href="css/default.css" rel="stylesheet" type="text/css" />

<script src="scripts/default.js" type="text/javascript"></script>


Cette recommandation est aussi une manière d’améliorer véritablement votre référencement ainsi que la maintenabilité de votre site, alors évitez de la contourner !

Concernant le JavaScript, plusieurs grandes logiques d’organisation peuvent être considérées :

  1. Un fichier unique pour tout le site,
  2. Un fichier par fonction essentielle (par exemple, la gestion du menu principal, la gestion du nuage de tags, la gestion de la recherche, etc.), chaque fonction étant appelée par la page qui le nécessite,
  3. Un fichier par page,
  4. Un fichier générique pour toutes les fonctions communes au site et un fichier pour le spécifique de chaque page.


Avec le tableau précédent, nous comprenons aisément que le meilleur choix est de regrouper tous les éléments communs aux différentes pages du site, pour traiter les éléments spécifiques en parallèle.


L’appel des fichiers JavaScript et CSS externes

La tendance naturelle est de placer les appels aux fichiers CSS et JavaScript externes dans les balises <head> des pages.

Pourtant, nous savons que le nombre de requêtes de chargement simultanées est limité à deux. Une meilleure pratique est donc de laisser les appels CSS en début de page, mais de déplacer les appels JavaScript en fin de page.

De cette manière, nous favorisons le chargement du contenu de la page, ce qui augmente la perception de réactivité chez l’internaute, puisque les informations arrivent en premier. Ensuite seulement, les codes JavaScript sont chargés et appliqués. 

Un autre bénéfice est aussi identifiable lorsque le code provoque des manipulations d’images. Chargées en premier, ces dernières sont immédiatement disponibles, alors que dans le cas contraire l’exécution sera retardée, le temps que les éléments graphiques soient manipulables.

Le seul bémol à cette technique concerne les sites qui utilisent un grand nombre d’images ou sprites et qui proposeront alors, pendant quelques instants, un contenu disgracieux.

Un équilibre entre sur-optimisation et perception client est donc à trouver.

 

Conclusion

Nous venons de voir comment structurer au mieux une page ainsi que l’appel aux dépendances JavaScript et CSS afin d’améliorer la réactivité perçue par l’internaute. Dans un prochain article, j’évoquerai des astuces avec desquelles vous obtiendrez, sans aucun doute, un réel bénéfice de maintenance et de lisibilité.