Pour réduire le poids des codes JavaScript et CSS, la meilleure démarche est d’utiliser des minimiseurs. Autres leviers : vectoriser les descriptions de style, et supprimez les descriptions non utilisées.
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 quatre 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 cet article, nous revenons à l’objectif premier : réduire le poids global de votre site, avec un focus sur l’optimisation du poids des fichiers JavaScript et CSS.
Réduire le poids du JavaScript et du CSS
Pour réduire le poids du JavaScript et du CSS, la meilleure démarche est d’utiliser des minimiseurs.
Vous en trouverez sans difficulté sur Internet, comme Closure Compiler de Google ou JSLint pour ce qui concerne le JavaScript, et Clean CSS ou CSS Compressor pour le CSS, sans oublier YUI Compressor, capable de traiter à la fois le JavaScript et le CSS.
Pour une utilisation autonome sur votre poste, je vous recommande l'excellentJASC (Just Another Script Compressor) qui fera des merveilles, à la fois avec vos fichiers JavaScript et CSS.
Voici ce qu'il est possible d'obtenir, par exemple avec des composants largement utilisés sur Internet :
| Non optimisé | Optimisé | Gain | |
| JavaScript | |||
jQuery 1.8.3
|
252 Ko
|
32 Ko
|
87% de gain
|
jQuery Mobile 1.2
|
287 Ko
|
111 Ko
|
61% de gain
|
GMap3 5.0
|
68 Ko
|
27 Ko
|
60% de gain
|
| CSS | |||
jQuery Mobile Structure 1.2
|
53 Ko
|
47 Ko
|
11% de gain
|
jQuery Mobile Theme 1.2
|
52 ko
|
26 Ko
|
50% de gain
|
"J’utilise (ou mes équipes) toujours les versions compressées, évidemment !", me direz-vous. Parions un repas alors ? D’après Elie Bursztein, chercheur chez Google, 64% des sites[1] n’utilisent pas la version compressée de jQuery en production… Je crois que je viens de gagner deux repas gratuits par jour au restaurant !
De la même manière, la pertinence de jQuery n’est plus à démontrer, son usage étant devenu aujourd’hui pratiquement un pré-requis (utilisé par 89,9% des sites[2]). Mais avez-vous réellement analysé les fonctions qui vous sont nécessaires ? Par exemple, Zepto.js ou im.js sont des équivalents de jQuery, adoptant la même syntaxe et proposant uniquement les fonctions essentielles, en environ 8Ko au lieu de 32Ko, pour les versions compressées bien entendu. Un gain supplémentaire d’environ 75% sur le framework appelé par toutes vos pages mérite peut-être quelques essais !
Quoiqu’il en soit, la contrepartie, afin de conserver une réelle capacité de maintenance, est de travailler sur deux jeux de fichiers, un non minimisé, dans le cadre du développement et un optimisé en production.
Pour réduire le poids des fichiers CSS, une bonne pratique est aussi d’utiliser les syntaxes étendues.
| Syntaxe classique | Syntaxe étendue |
#selector1 {
margin-top: 50px;
margin-right: 0;
margin-bottom: 50px;
margin-left: 0;
}
#selector2 {
font-family: Helvetica;
font-size: 14px;
font-weight: bold;
line-height: 1.5;
}
#selector3 {
background-image:
url(background.png);
background-repeat: repeat-y;
background-position: center top;
}
| #selector1 {
margin-top: 50px 0;
}
#selector2 {
font: bold 14px/1.5 Helvetica;
}
#selector3 {
background:
url(background.png)
repeat-y
center top;
}
|
280 caractères
(espaces compris) |
146 caractères (espaces compris),
soit une réduction de 48% |
Pensez aussi à vectoriser vos descriptions de style. En plus de l’optimisation recherchée, vous y gagnerez en clarté et en lisibilité.
| Syntaxe classique | Syntaxe vectorisée |
#selector1 {
margin-top: 50px 0;
font: bold 14px/1.5 Helvetica;
background:
url(background.png)
repeat-y
center top;
}
#selector2 {
margin-top: 50px 0;
font: bold 14px/1.5 Helvetica;
background:
url(background.png)
repeat-y
center top;
}
#selector3 {
margin-top: 50px 0;
font: bold 14px/1.5 Helvetica;
background:
url(background.png)
repeat-y
center top;
}
| #selector1, selector2, #selector3 {
margin-top: 50px 0;
font: bold 14px/1.5 Helvetica;
background:
url(background.png)
repeat-y
center top;
}
|
360 caractères
(espaces compris) |
143 caractères (espaces compris),
soit une réduction de 60% |
Maintenant, une évidence toujours utile à rappeler : supprimez les descriptions non utilisées. Pour cela, réalisez des contrôles avec des outils comme Unused CSS(payant). Sinon, différents plugins pour navigateurs existent : Dust-Me Selectorsou CSS Usage pour Firefox ou l'outil d'audit intégré de Chrome.
Pour des constructions évoluées, il est possible de tirer profit d’outils/langages comme Less CSS qui apportent, non seulement des extensions syntaxiques majeures, mais aussi la possibilité de compiler le CSS pour produire une syntaxe optimisée.
Enfin, pour contenter les puristes, n’oubliez pas non plus de supprimer les unités de vos définitions nulles, car 0 reste 0, que ce soit en px, en em ou en %.
Concernant le JavaScript, les optimisations de performance que vous obtiendrez sont fondamentalement liées à vos techniques de codage, ce qui dépasse largement le cadre de cet article. Je vous propose néanmoins une piste pour débuter avec l'article JavaScript Optimization de Jeff Greenberg.
Conclusion
En utilisant les techniques et outils présentés dans cet article, une nouvelle étape majeure est franchie dans l’optimisation du poids de vos pages web et donc, de la dynamique de chargement des pages.
Dans un ultime article à paraitre très prochainement, nous finirons ce tour d’horizon en évoquant des améliorations possibles sur votre code HTML.
