RootsLabs

Dans un site web, de nombreux points sont à optimiser : le code PHP, la partie serveur et les fichiers statiques. Ces fichiers sont ceux qui sont rarement modifiés et sont mis en cache par le navigateur. Le but de notre opération est de réduire la taille de ces fichiers sans réduire leur qualité.

Optimisation : CSS

De nombreux outils existent pour compresser vos fichiers CSS :

• CSSLint (online)
• CSSCompressor (online)
• CleanCSS (online)
• CSSTidy (offline)

Quelques astuces :

• Supprimer les espaces inutiles et des retours à la ligne ;
• Factoriser les classes ;
• Réunir tous vos fichiers CSS en un seul ;
• Eviter les wildcards (*) CSS, consommatrices de mémoire ;
• Enlever le dernier point-virgule des priorités (gain de 1 octet par priorité).

Optimisation : Images

Pour de nombreux formations, ils existent par conséquent de nombreux outils :

• JpegTran : Format JPG (offline)
• JpegOptim : Format JPG (offline)
• OptiPNG : Format PNG (offline)
• PngCrush : Format PNG (offline)

Pour optimiser le nombre d’images sur votre site, il est possible de penser à la technique du Sprite CSS pour réunir plusieurs images en une seule.

Optimisation : Javascript

Les outils pour Javascript sont :

• Javascript Compressor (online)
• JSCompress (online)
• YUI Compressor (offline – Java)
• Closure Compiler (offline)

Quelques astuces :

• Mettre en place « use strict »; en haut de votre fichier JavaScript ;
• Ajouter des points-virgules à la fin de chaque instruction.

Conclusion

Vos fichiers statiques sont, avec votre code PHP, les fichiers à optimiser.
Dans un prochain article, nous verrons comment utiliser Phing pour automatiser ces optimisations comme nous l’avons fait pour tester la qualité d’un projet.