Optimisation d'un site internet Joomla en compressant le CSS et le JavaScript

Catégories : "Astuces", "Technologie" par Frédéric Tomasi Frédéric Tomasi le 12 Mars 2009

Optimisation d'un site internet Joomla en compressant le CSS et le JavaScript

L'optimisation d'un site internet est une étape primordiale. Selon une étude d'Éric Daspet, si l'on rajoutait 500ms au chargement de Google, cela entrainerait une chute de 20% des recherches.

Sans parler du poids des images et de la compression GZIP, qui représentent des aspects essentiels de l'optimisation d'un site, l'un des facteurs les plus importants est le nombre de requêtes effectuées sur le serveur. En effet, pour chaque image, script, animation flash, feuille de style, le navigateur va effectuer une requête afin de récupérer le fichier en question. Et cela va générer des aller-retours, donc prendre du temps.

Pour accélérer le chargement d'une page, une solution intéressante est donc de diminuer le nombre de requêtes vers le serveur. L'idéal pour cela, sans toucher au design du site, est de réduire le nombre de fichiers CSS et JavaScript, et de réduire au maximum leur taille.

Pour cela, Maecia propose aux développeurs Joomla son extension Maecia CSS/JS Cache qui leur permet de façon simple de compresser toutes les feuilles de style dans un seul fichier CSS, et de faire de même pour les fichiers JavaScript.

Installation et utilisation de Maecia CSS/JS Cache

L'installation est classique : comme la plupart des extensions Joomla, Maecia CSS/JS Cache est distribué dans un dossier compressé directement intégrable par le système d'installation des extensions Joomla.

Maecia CSS/JS Cache est doté d'un composant permettant son administration (sélection des fichiers à compresser, avertissement quand le cache n'est plus à jour par rapport aux fichiers sources) et d'un plugin servant à insérer les liens dans l'entête du site.

Pour ajouter des données dans le cache, il suffit d'ajouter un nouvel enregistrement dans l'administration du composant.

Exemple

Répertoires à mettre en cache :

  • /templates/MON_TEMPLATE/css
  • /templates/MON_TEMPLATE/js

Récursif : permet de compresser également les fichiers contenus dans des sous-répertoires.

Répertoire dans lequel stocker les fichiers en cache:

  • /templates/MON_TEMPLATE/cache

Ne pas oublier d'activer le plugin une fois installé.

Il est évidement conseiller d'activer le composant après la phase de développement afin d'éviter de devoir mettre le cache à jour à chaque modification.

Joomla, et les autres alors ?

Le même principe peut être décliné dans la plupart des solutions de publication. Nous essayerons de mettre à disposition Maecia CSS/JS Cache pour eZ Publish, qui est actuellement en cours de développement.

Sinon, vous pouvez toujours manuellement concaténer vos fichiers et les compresser grâce à de nombreux outils dédiés en ligne.

Grands remerciements à Maxime qui avait développé le composant cet été avant de nous quitter pour découvrir le Canada !

Liens utiles

Edit

03/04/2009 - Nouvelle version en ligne (1.0.1b) corrigeant un problème de répertoire de cache par défaut.

Fichiers:

Composant CSS/JS cache

 Alt=Composant CSS/JS cachecom_cssjscache.zip 26,34 kB

Plugin CSS/JS cache

Alt=Plugin CSS/JS cacheplg_cssjscache.zip 2,38 kB

Optimisation d'un site internet Joomla en compressant le CSS et le JavaScript

A propos

Bienvenue sur le Workshop de l'agence interactive Maecia : notre espace d'actualités, de veille et de publications sur les nouvelles tendances d'Internet. Vous y trouverez aussi le fruit de certains de nos développements techniques que nous mettons à disposition de la communauté. Découvrez notre vision du web et surtout n'hésitez pas à prendre la parole !