Optimiser la vitesse de chargement de ses pages Web, ça en devient presque à la mode, surtout depuis le pavé dans la marre jeté par Google.
Voici de quoi remuer tout ça, et augmenter nos scores Yslow ou Page Speed (et nous aimons ça). On va chasser les octets superflus, on va s’attaquer aux CSS.
Et l’occasion qui fait le larron, c’est la sortie de MAX CssMin, un optimiseur CSS écrit en PHP que je viens de releaser en GNU GPL. Une sortie du placard car cela fait un petit moment que je l’utilise pour différents projets. Il ne touche pas à la sémantique, que de l’amélioration de syntaxe. Pour l’instant, c’est le meilleur que j’ai pu essayé. Bon, à la fin, c’est la guerre des octets, que des micros optimisations, mais j’en ai encore quelques unes en réserves. La version 0.2 verra une option pour tout mettre sur une seule ligne. Pour l’instant ça le fait pas encore (vous pouvez en éditant le fichier cssmin et en décommentant la ligne en dessous du commentaire « Efface les retours à la ligne (à désactiver par défaut) »).
On va se faire un petit script à placer sur le serveur, lancé par cron chaque nuit qui va optimiser vos fichiers CSS, tout seul.
Aller, on se ssh à son serveur.
Les prérequis (rien de bien extraordinaire, adaptez la commande à votre système de paquet) :
aptitude install php5-cli unzip
On commence par installer le MAX CssMin en version script (CLI). Copiez-collez ceci (après avoir lu et compris) dans votre terminal :
wget http://libre.maxbusiness.fr/files/cssmin/cssmin-0.1.zip wget http://libre.maxbusiness.fr/files/cssmin/cssmin-0.1.zip.md5 md5sum -c cssmin-0.1.zip.md5 unzip cssmin-0.1.zip chmod +x cssmin mv cssmin /usr/local/bin cssmin --help
Bonus, ça vérifie même la somme md5 de l’archive. C’est installé. Tapez cssmin --help pour les options courantes.
On va créer un script shell, nommons le css.sh qui va contenir les commandes de minification. C’est lui qui sera appelé par la tâche cron toutes les nuits. Créons le. Voici son contenu :
#!/bin/sh cssmin -rbq /var/www/monsite/css/style.css cssmin -rbq /var/www/monsite2/css/style2.css
Explications : -q vous passe en mode quiet (pas de blabla sauf si erreurs), -r c’est le mode replace (on écrase le fichier CSS par sa version minifiée) et -b c’est le mode better (on ne fait les changements que si le résultat est meilleur). En l’occurrence, le mode better vous permettra de ne pas avoir la date de modification du fichier mise à jour chaque nuit (apache s’en sert pour les instructions de cache aux navigateurs).
Vous placer une ligne comme ça par fichier à optimiser. Je vous conseille d’essayer en console avant (sans l’option -q).
On rend ce script exécutable :
chmod +x css.sh
Maintenant, on enregistre une tâche cron, réglée pour être lancée pour tous les jours à 03:05. Tapez crontab -e et ajoutez dont une ligne :
5 3 * * * /home/mon/chemin/vers/mon/script/css.sh
Et voilà. Vos fichiers CSS se ré-optimiseront tout seuls, même après vos uploads de nouvelles versions, non optimisées.
MAX CssMin n’en est qu’à ses débuts publics, mais on peut déjà faire des choses intéressantes avec. Un bonus pour la fin :
cat style-1.css style-2.css style-3.css | cssmin > all-min.css
Il est de toi l’optimiseur ? C’est génial
Après c’est bizarre que sur le site de l’optimiseur on puisse pas voir que c’est de toi…
Ah bah oui. Du coup, je me suis mis sur la page développement.
Je l’avais écrit pour ADNPC.net à la toute base.
Mais un projet aussi classe il faut qu’on sache facilement que ça vient de toi, et que ce soit marqué sur ton CV et autre. Histoire de pas perdre le bénéfice de ton travail
ça à l’air sympa tout ça, j’y jetterai un oeil lorsque j’aurai plus de temps devant moi
Pour l’instant, je fais actuellement 2 feuilles de style : une visible que je modifie et une ultra compressée par cssoptimiser, cleancss ou autre suivant la taille finale du fichier final.
Pratique comme outil, c’est un peu pénible à faire à la main.
Mais pour que Yslow donne une bonne note il faut faire la même chose avec les javascripts avec jsmin. Puis fusionner les javascript pour réduire le nombre de requêtes DNS. Normalement, une page ne contient plus que le corps HTML, un CSS, et un fichier javascript. (enfin, c’est la théorie … :=) )
En utilisant les Serveur Side Include Apache (SSI), il est possible d’inclure soit les fichiers css ‘mininfiés’ soit les fichiers d’origines, cela peut-être bien pratique pour différencier la version en dev et la version en exploitation.