Joomla : optimiser le cache et les requêtes

Catégories : "Astuces", "Technologie" par Sylvain Maillard Sylvain Maillard le 02 Janvier 2012

Joomla : optimiser le cache et les requêtes

Aujourd'hui, la qualité de votre site se juge aussi par sa vitesse de chargement. Optimiser le poids des images et de vos fichiers CSS/JS ne suffit plus. Diminuer le nombre de requêtes entre le navigateur et le serveur hébergeant votre site est désormais aussi important, voire plus. Ce travail doit se faire à chaque étape de son développement. Et Joomla ne déroge pas cette règle.

Aujourd'hui, la qualité de votre site se juge aussi par sa vitesse de chargement. Si le débit de nos connexions internet a énormément augmenté et facilite le téléchargement des éléments d'un site, notre patience à voir s'afficher notre site préféré a lui grandement baissée.

Ainsi optimiser le poids des images et de vos fichiers CSS/JS ne suffit plus pour accélérer le chargement de votre site. Diminuer le nombre de requêtes entre le navigateur et le serveur hébergeant votre site est désormais aussi important, voire plus. Ce travail doit se faire à chaque étape de son développement.

Le CMS Joomla ne déroge pas cette règle.

Passez au contrôle technique

Avant de se lancer dans l'optimisation de Joomla il vous faut diagnostiquer les performances de votre site pour repérer les points à améliorer. Pour ce faire il est conseillé de se doter du module Yslow. Ce dernier s'installe sous Firefox et nécessite l'installation au préalable du module Firebug.

Au chargement de votre site Yslow analysera plus d'une vingtaine de critères comme le nombre de requêtes, la bonne compression de vos fichiers CSS et JS, la présence d'erreur 404, le poids de la page chargée ou encore la taille des cookies. Une note allant de A à F est ensuite attribuée à chacun de ces critères pour constituer à la fin une note globale.

Tout le jeu constituera désormais à améliorer les performances de chargement de votre site jusqu'à atteindre au minimum la note de C, et plus généralement celle de B. Ne visez pas le triple A il n'existe pas.

Autres indicateurs très utiles fournis par Yslow, le temps de chargement de la page et son poids.

capture du plugin Firefox Yslow

Lorsque votre site est en ligne vous pourrez également analyser ses performances sur les sites de www.websiteoptimization.com ou bien www.webpagetest.org. Sur le même principe que Yslow ces derniers fournissent un grand nombre d'indications sur le chargement de votre site et attribuent une note aux résultats analysés.

Jouez à cache cache

Joomla propose nativement d'améliorer le chargement de votre site grâce à l'activation du cache. Son activation se fait depuis la section « Configuration » du back office. Il existe deux niveaux de cache, conservateur et progressif. Ce dernier niveau active le cache pour l'ensemble des modules. Il vous est aussi possible de gérer le cache de chacun de vos modules indépendamment les uns des autres et même de choisir la durée de celui-ci en les éditant depuis la section « Gestion des modules » du back office de Joomla.

Enfin il est possible d'exploiter le cache du navigateur du client sur le site en configurant le plugin « Système – Cache » de Joomla.

Dans un second temps vous pouvez activer la compression des pages grâce à GZIP.

L'activation et gestion du cache ainsi que la compression GZIP proposée par Joomla peut déjà vous faire gagner un peu en rapidité.

Faîtes le tri

La rapidité d'affichage passant aussi par le nombre de requêtes vous pouvez désactiver les composants et plugins non utilisés sur votre site. De même il est préférable de ne pas trop surcharger votre site de modules puisque chacun d'entre eux représente une requête, voire l'appel de nouveaux fichiers CSS et JS.

Le rôle des templates

L'utilisation d'un template peut aussi avoir une influence sur la vitesse de votre site. N'hésitez pas à analyser leurs performances avant de faire définitivement votre choix. Certains templates proposent d'eux mêmes des options pour compresser leurs fichiers CSS et JS, voire une compression en GZIP des fichiers et images.

De même n'hésitez pas à regarder grâce à Firebug les feuilles de styles appelées par votre template et à désactiver dans le code celles inutiles. L'optimisation de votre site se jouera en partie sur les détails.

Bien positionner les appels vers vos fichiers Javascript

Le placement des appels des fichiers CSS et JS ont désormais leur importance pour optimiser l'affichage de votre site. Si l'appel vers les feuilles de styles doit rester dans la partie <head> de votre site, les appels vers les fichiers Javascript doivent être fait à la fin de votre page.

Le plugin ScriptsDown peut le faire automatiquement une fois installé et activé. Si d'appeler en bas de page les scripts JS entraînent des dysfonctionnement vous pouvez demander à ScriptsDown de ne pas changer de place le fichier Javascript qui poserait problème.  

Outils de compression

Si vous n'utilisez pas un template proposant des options de compression des fichiers il existe des plugins pour tout de même le faire. JFinalizer et jCH Optimizer sont deux des plus complets existants et compatibles avec les versions 1.5, 1.6 et 1.7 de Joomla. Outre leurs options de compression, ces plugins proposent aussi d'appeler les fichiers Javascript en bas de page tout comme le plugin ScriptsDown.

Une autre solution consiste à utiliser les « Expires Header » pour améliorer encore la vitesse de votre site. Les Expires Header permettent de spécifier la validité de vos fichiers et leur mise en cache par le navigateur du client des éléments statiques de votre site.

A nouveau certains plugins de Joomla gèrent cette option dont Expires Headers. Mais vous pouvez aussi la configurer directement dans votre fichier .htaccess en insérant ce code :

### Caching mod_headers + mod_expires
<IfModule mod_expires.c>
# Turn on Expires and set default to now
ExpiresActive On
ExpiresDefault "now"

# Set up caching on media files for 1 month
<FilesMatch "\.(flv|ico|pdf|avi|mov|ppt|doc|mp3|wmv|wav|swf)$">
ExpiresDefault "access plus 1 month"
</FilesMatch>

# Set up caching on images, CSS and JS files for 1 week
<FilesMatch "\.(gif|jpg|jpeg|png|js|css)$">
ExpiresDefault "access plus 1 week"
</FilesMatch>

# Set up 1 hour caching on commonly updated files
<FilesMatch "\.(xml|xsl|html|htm|txt)$">
ExpiresDefault "access plus 1 hour"
</FilesMatch>

# Force no caching for dynamic files
<FilesMatch "\.(php|cgi|pl)$">
ExpiresActive Off
</FilesMatch>
</IfModule>
<IfModule mod_headers.c>

# Remote ETag from headers
Header unset ETag

# Disable ETag for files
FileETag None

# Media files are catchable
<FilesMatch "\.(flv|ico|pdf|avi|mov|ppt|doc|mp3|wmv|wav|swf)$">
Header append Cache-Control "public"
</FilesMatch>

# Images, css and javascript files are catchable
<FilesMatch "\.(gif|jpg|jpeg|png|js|css)$">
Header append Cache-Control "public"
</FilesMatch>

# Commonly updated files are catchable
<FilesMatch "\.(xml|html|htm|txt)$">
Header append Cache-Control "public"
</FilesMatch>

# Force no caching for dynamic files
<FilesMatch "\.(php|cgi|pl|htm)$">
Header set Cache-Control "private, no-cache, no-store, proxyrevalidate,
no-transform"
Header set Pragma "no-cache"
</FilesMatch>
</IfModule>

Vous pouvez bien sûr modifier les délais d'expiration comme bon vous semble. A noter que la balise « Header unset Etag » et « FileETag None » forcera le navigateur à utiliser
les instructions insérées dans le fichier .htaccess.

Précautions d'usage

Pour ne pas gêner votre travail lors du développement du site il est conseillé de désactiver les options de cache et de compression, ainsi que les plugins d’optimisation. Toutefois il est utile de les réactiver régulièrement afin de vérifier le bon fonctionnement du site. Certains composants pouvant mal supporter ces optimisations il est préférable de s'en rendre compte en cours de développement qu'une fois le site achevé.

En résumé :

  • l'activation du cache et de la compression GZIP du site

  • la désactivation des extensions (composants, plugins etc) inutilisées

  • la compression de vos feuilles de styles et Javascript

  • la suppression des appels vers les feuilles de styles inutilisées (spécialement dans les templates et certains composants)

  • la traque des fichiers ou pages non trouvées

  • le placement en bas de page des appels vers vos fichiers Javascript

  • l'ajout du cache header dans votre fichier .htaccess

Si vous avez des astuces supplémentaires pour optimiser le cache alors n'hésitez pas à commenter !

Joomla : optimiser le cache et les requêtes

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 !