L’importance de compresser les fichiers statiques

Anthor — Thu, 13 Aug 2009 11:45:15 +0000

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%.

Font-Family en CSS – Compatiblité Windows/Mac/Linux

Anthor — Sat, 24 Jan 2009 10:54:27 +0000

Il est parfois embêtant de ne pas disposer de polices à peu près égales en taille et en forme suivant les différents systèmes d’exploitation.
Voici une liste de quelques polices avec leurs équivalents sous la forme Windows/Mac/Linux :

font-family: Verdana,Geneva,Kalimati,sans-serif;
font-family: "Lucida Sans Unicode","Lucida Grande",Garuda,sans-serif;
font-family: "Arial Black",Gadget,sans-serif;
font-family: Arial,Helvetica,Garuda,sans-serif;
font-family: Georgia,"Nimbus Roman No9 L",serif;
font-family: "Palatino Linotype","Book Antiqua",Palatino,FreeSerif,serif;
font-family: Tahoma,Geneva,Kalimati,sans-serif;
font-family: "Trebuchet MS",Helvetica,Jamrul,sans-serif;
font-family: "Times New Roman",Times,FreeSerif,serif;

Carte Javascript en 3D isométrique héxagonale

Anthor — Wed, 10 Sep 2008 09:16:10 +0000

Hein ? Mais c’est quoi ce terme barbare ?!! Donc voilà, en ce moment, je bosse pas mal, sur les représentations en 3D isométrique pour noNamé Game, le but étant de pouvoir fournir aux joueurs une immersion importante.

Voici quelques captures des simulations photoshop :

Essai de déformation d’un hexagone orthonormé pour la 3d Isométrique.
Afin d’obtenir une meilleure contenance de la surface, seule la texture de la tuile est convertie, et l’on depose sur cette tuile une deuxième couche en 2D classique.

Une simulation d’agencement des tuiles, pour valider mon modèle de base.
On constate que les tuiles s’imbriquent parfaitement entres elles.

Cette simulation illustre l’empilement des tuiles de fonds et des différentes tuiles de couches sur la carte

Anthor.Net » CSS

L’importance de compresser les fichiers statiques

Font-Family en CSS – Compatiblité Windows/Mac/Linux

Carte Javascript en 3D isométrique héxagonale