La minification dynamique de JS/CSS, c'est le mal !

30 Juin 2010

La minification et la diminution des requêtes HTTP pour les fichiers statiques sont une bonne pratique pour améliorer les performances d’un site web. En général, ces deux traitements sont effectués en PHP avec un script qui concatène les fichiers, les minifier pour les servir au client.Bien sûr, il est possible de mettre en place un cache sur ces outils, mais cela a quand même un impact négatif sur le chargement d’une page…

Pourquoi cette solution est plébiscitée ?

Mettre en place un système de minification des fichiers statiques est une procédure simple et qui améliore très simplement et rapidement les les performances d'un site web à moindre coût. C'est suffisant dans la majorité des usages mais cette technique montre ces limites dans les performances à un certain point et pour certains types de clients.

De plus, il existe de nombreuses outils de qualités pour minifier dynamiquement les fichiers statiques d'un site web, voici quelques exemples :

Les avantages de cette solution

Raison 1 : Simple à mettre en place Il suffit d'installer le script sur son serveur PHP, de modifier vos appels CSS et JS dans vos page pour appeler la version minifier de votre contenu statique et c'est bon. La minification est mise en place en moins de 30 minutes. De plus il existe également des plugins pour différents CMS (bien sur il y en a pour Wordpress).

Raison 2 : Le gain en performance est important Par rapport à un site qui ne minifie pas et ne combine pas ces CSS et ces JS, avec cette solution vous augmenter considérablement les performances de votre site.

Raison 3 :Configuration identique pour le développement L'un des avantages le plus important pour les développeur est d'avoir un environnement identique entre la prod et le poste de développement. Avec un plugin pour WordPress, il est train simple d'avoir deux environnement identiques.

Voici les trois principales raisons que j'ai trouvé pour justifier l'utilisation d'un minifier dynamique. De plug, cette capture montre la timeline de chargement de la home avec un outil de minification bien configuré avec du cache :

Cet exemple montre de bonne performance, néanmoins la requete contient des paramètres, ces performances ne sont pas garantis pour tous les utilisateurs.

Les inconvénients de cette solution

Raison 1 : L'exécution de code PHP a un coût La génération d'un fichier dynamique coute 2 à 3 fois plus qu'un accès à un fichier statique. Ce temps d'exécution n'est pas important en comparaison du temps de génération d'une page HTML avec WordPress (ou d'autres CMS). Mais en utilisant des systèmes de cache (pour créer un site aux bonnes performances), ces temps d'exécution minimes ont un impact.

Raison 2 : Les fichiers PHP peuvent avoir des paramètres GET Pour servir le contenu statique, les appels aux script PHP s'effectue avec des paramètres dans une requête GET, et c'est un gros inconviénent !!! En effet, certains proxy ne mettent pas en cache toute les requêtes qui ont des paramètres donc cela augmente les temps de téléchargements. On peut remédier à cela néanmoins avec des réécritures d'URL, mais je ne suis pas spécialement fan de cette solution.

Raison 3 : C'est une solution de fainéant Avec cette solution, on n'a plus des fichiers statiques mais des fichiers dynamiquement générés, ça ne vous choque pas ???

Voici la timeline de chargement de ma home avec Minify lorsqu'il n'y a pas de cache du contenu généré :

Clairement les performances sont mauvaises. Il faut 1,23 secondes pour générer un fichier de 23ko, bien entendu plus le fichier est lourd plus le temps de génération augmente...

Comment gérer ses fichiers statiques alors ?

Tout simplement en minifiant soi-même les fichiers CSS et JS de son projet. Il existe des utilitaires qui vont minimiser les fichiers et il suffira de les déployer sur un serveur de données statiques (sur un autre domaine sans cookies). Voici deux exemples de librairie reconnues pouvant minifier les fichiers :

La timeline du chargement avec les fichiers statiques générés à la main est la suivante :

C'est la meilleur solution pour accéder aux fichiers statiques.Pas de traitement serveur, fichiers gzippés, mise en cache par les proxy. Evidement on obtient un temps de chargement complet meilleur qu'avec la gestion dynamique alors que je n'ai fait aucune optimisation particulière au niveau de mes domaines.

Ma conclusion

Bon vous l'aurez compris, aujourd'hui j'utilise une solution à base de fichier statiques générés dynamiquement. Je vais essayer de passer à une solution entièrement statique en effectuant le traitement sur mes CSS et mes JS avant de les placer sur mon serveur.

Je ne suis pas le seul à avoir cette motivation de passer à du 100% statique. En effet, lors d'une conversation sur Twitter avec Vincent Voyer (alias @ZeroLoad) il a également exprimé le même point de vue que moi :

Je m'en sers actuellement mais idem je pense revenir à une solution plus de "déploiement" car c'est pas viable le 100% dynamique

En clair, rendons aux fichiers statiques leur staticité... et je n'ai plus qu'à trouver ou faire ma propre moulinette pour gérer proprement mes fichiers statiques.

Et vous, comment gérez vous vos feuilles de styles et vos JavaScripts ?

Charger les commentaires…