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 :
- Un fichier unique pour tout le site,
- 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,
- Un fichier par page,
- 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é.
A lire aussi :
- Introduction : Pourquoi optimiser un site web ?
- Pratique : Comment situer la performance de son site Web ?
- Pratique : Optimiser les images d'une page web : traiter les images
- Pratique : Optimiser les images d’une page web : intégration HTML
- Pratique : Optimisation web : organiser le code JavaScript et CSS
- Pratique : Comment réduire le poids du code JavaScript et CSS
- Pratique : Performance web : optimiser son code HTML et CSS
- Pratique : PHP : faciliter la maintenance d'un site web avec la fonction include
- Pratique : Comment optimiser la performance d'un site web côté serveur