Sur l'un des site en question, la bannière était une image BMP qui faisait la moitié du poids du site (571 KB / 1.14 MB). Sur une autre page, une image de 2000 par 3000 px pesant plus de 2 MB, alors qu'elle était affichée en 200 par 260px...
Pour régler ce problème, si le cas est "grave", il faut commencer avec un logiciel de retouche, en redimensionnant et en enregistrant dans un format adapté (JPEG, PNG, etc). Ensuite, ou dans le cas d'optimisation, il faut utiliser un compresseur d'image. Ils sont nombreux, et certains sont utilisables directement en ligne. Pour ma part, j'utilise principalement
PunyPNG.
Smush.it maintenant racheté par Yahoo!, est lui aussi une référence.
2. Ne pas utiliser plusieurs frameworks JavaScript en même temps
Cela peut fonctionner sans soucis, mais le problème n'est pas là. En effet, non seulement en terme de poids ce n'est pas optimal (duplicité de fonctions entre les frameworks), mais en plus ça complexifiera la maintenance à venir. Evitez donc et votre futur vous vous remerciera.
3. Minifier le CSS et le JS
Tout d'abord, pour ceux qui ne le saurait pas, la minification est un terme anglais qui décrit "le processus de suppression des caractères inutiles du code source, sans changer ses fonctionnalités". Et donc permet de "réduire la quantité de données qui doit être transférée" (cf.
Wikipédia).
Pour les frameworks, ces versions minifiées, repérables par un ".min." avant l'extension, sont généralement proposées sur le même site, autant les utiliser. Par exemple, la version actuelle de jQuery (1.7.1) non compactée pèse 229 KB, or la minifiée ne pèse plus que 31 KB. Ce gain conséquent (-87%) est facile à obtenir, il serait dommage de s'en priver.
Vous pouvez bien sûr minifier vos propres fichiers CSS et JS à l'aide d'outils comme
YUI Compressor. Cela peut paraître logique, mais faites cependant bien attention à garder les versions non compactées, sur lesquelles vous pourrez effectuer les modifications à venir.
4. Activer la compression des fichiers
En restant dans l'optique d'accélérer l'affichage, mais à un niveau un peu plus avancé, il est possible de demander au serveur de compresser à la volée les fichiers qui seront envoyés.
Dans le cas d'un
serveur Apache 2, avec le module mod_deflate activé, il suffit d'ajouter dans le fichier .htaccess (de le créer si il n'existe pas) les lignes suivantes :
- SetOutputFilter DEFLATE
- AddOutputFilterByType DEFLATE text/javascript application/javascript text/css application/xhtml+xml text/xml text/html text/plain application/json
Libre à vous de modifier les types MIME en fonction de vos besoins. Cependant, sachez qu'il est inutile de compresser les fichiers binaires, telles que les images ou vidéos.
5. Activer le cache serveur
Toujours dans le fichier .htaccess, si le module mod_expires est activé, voici une configuration simple, qui affectera un délai d'expiration du cache de 14 jours par défaut :
- ExpiresActive on
- ExpiresDefault "access plus 14 days"
Il est possible de choisir le délai d'expiration par type de fichier. Par exemple pour mettre un délai d'expiration d'un mois sur les fichiers CSS, il faudrait ajouter :
- ExpiresByType text/css "access plus 1 month"
6. Respecter les normes et conventions
Qu'elles soient fixées par un environnement ou par soi-même, les normes et conventions sont faites pour être suivies. Elles facilitent grandement les maintenances futures et leur non respect vous donnera juste envie de vous crever les yeux quand vous devrez y revenir (cf. votre futur vous).
7. Suivre autant que possible les recommandations W3C
Ceci aura pour effet d'améliorer l’accessibilité de votre site. Pour ce faire, vous pouvez utiliser les validateurs W3C, pour le
CSS, le code
HTML ou encore les flux
RSS. Ils vous aideront à détecter des possibles erreurs ainsi qu'à respecter les recommandations.
MOAR!
