13août2009
L'importance de compresser les fichiers statiques
Lorsque j'ai commencé Tarschool, j'ai immédiatement mis en place un système de compression des fichiers. Celui-ci est de deux sortes :
- Minification des fichiers JS et CSS
- Compression avec le mode deflate des fichiers JS et CSS
Faciles et rapides à mettre en place, ces solutions permettent souvent d'économiser au minimum 75% de la bande passante utilisé par le serveur en mode normal.
Voici un petit récapitulatif des solutions que nous avons mis en place et de leurs économies associées.
Pour la minification, je vous laisse voir de votre côté, personnellement, j'ai plusieurs scripts qui tournent avec YUICompressor, mais d'autres solutions sont possibles.
Par exemple: JSmin, CSSminifier, DOJO Compressor... C'est au choix, je pense qu'elles ont toutes leurs avantages et leurs inconvénients. YUICompressor est, dans mon cas utilisé en local avant upload des fichiers.
Pour le DEFLATE, un simple copier/coller suffit dans un .htaccess à la racine, ces lignes ayant déjà été donné dans mon .htaccess par défaut, cette méthode doit normalement resté active le plus souvent possible, et être activé de façon transparente. Notons que si le mod_deflate n'est pas initié par Apache, la ligne est purement et simplement ignorée.
<IfModule mod_deflate.c>
<FilesMatch "\.(js|css)$">
SetOutputFilter DEFLATE
</FilesMatch>
</IfModule>
Pour montrer la bande passante économisée, je prend les logs d'accès du mois de juillet. Je vais effectuer la comparaison sur deux fichiers CSS et deux fichiers JS.
Sur Tarschool, les plus utilisés sont :
| Nom du fichier | Taille originale | Taille minifié | Taille après DEFLATE |
|---|---|---|---|
| global.css | 22 566 | 18 260 [80.9%] | 3 664 [20%] |
| globalMember.css | 2 185 | 1 732 [79.2%] | 679 [39.2%] |
| jquery.tarschool.js | 113 480 | 55 283 [48.7%] | 17 264 [31.2%] |
| jquery.tarschool.voirCombat.js | 4 458 | 2 655 [59.1%] | 1 048 [39.4%] |
Pour le mois de Juillet, voici donc le nombre d'accès total, dans lequel nous allons séparer les fichiers effectivement transmis et ceux dont le cache a été utilisé. En effet par défaut, on peux déjà économiser une quantité significative. Pour contrôler un peu mieux ce cache, il existe différentes solutions qui ne seront pas abordées ici. Pour ma part je rajoute simplement un time de la dernière modification du bootstrap lors de l'appel des fichiers à mettre en cache. Je laisse le reste à Apache et pour le moment cela me convient.
| Nom du fichier | Nombre d'accès Total | 200 (OK) | 304 (Not Modified) | Ratio |
|---|---|---|---|---|
| global.css | 18 298 | 5 078 | 13 220 | [27.7%] |
| globalMember.css | 14 962 | 3 082 | 11 880 | [20.5%] |
| jquery.tarschool.js | 18 006 | 5 004 | 13 002 | [27.7%] |
| jquery.tarschool.voirCombat.js | 3 892 | 1 978 | 1 914 | [50.8%] |
En ne prenant en compte que les fichiers effectivement transmis, je peux donc calculer la bande passante utilisée avec la compression, la bande passante théorique (basée sur la taille réelle du fichier source), et les pourcentages de gains réalisés :
| Nom du fichier | Nombre d'accès | Bande Passante Théorique | Bande Passante Réelle | Ratio |
|---|---|---|---|---|
| global.css | 5 078 | 114 590 148 | 18 605 792 | [16.2%] |
| globalMember.css | 3 082 | 6 734 170 | 2 092 678 | [31%] |
| jquery.tarschool.js | 5 004 | 567 853 920 | 86 389 056 | [15.2%] |
| jquery.tarschool.voirCombat.js | 1 978 | 8 817 924 | 2 072 944 | [23.5%] |
En conclusion, l'apport du module deflate, couplé à une minification des fichiers permet d'économiser d'énormes quantités de bandes passantes, généralement de l'ordre de 75%.
Commentaires
21/08/2009 | 11:16
Merci pour cette article, très utile !