5 1 1 1 1 1 Rating 5.00 (6 Votes)

Bonsoir, après avoir mis du temps à optimiser notre site, j’ai décidé de faire ce petit article pour vous passer nos astuces, et savoir comment optimiser un site Joomla, et ainsi promouvoir notre CMS préféré, sans lequel ce site n’existerait tout simplement pas... Du reste, vous devez savoir que la vitesse de chargement de votre site influe grandement sur son classement dans les moteurs de recherche. Google recommande une vitesse de chargement de 600ms, je vous avouerai que je n’y suis jamais arrivé, mais nous avons tout fait pour nous en approcher. Vous avez différents services sur internet qui vous permettent de mesurer la vitesse de chargement de votre site, je vous recommande de les tester pour savoir les gains que vous auriez gagné avec les diverses modifications que nous allons vous présenter. Chaque site vous propose des recommandations, pour optimiser votre contenu. Le premier est bien sûr Page Speed Insigths de Google, le second est GT Metrix qui est très complet, le plus réaliste à mon sens, et aussi, le plus précieux est Web Page Speed Test. Pour avoir une vue rapide Pingdom Tool et son mode cascade synthétique est aussi très utile pour identifier les ressources qui prennent le plus de temps à se charger. Dans tous les cas de figures choisissez bien le pays d’où vous lancer le test.

Opti 1sec

Tout d’abord il faut commencer par le commencement, vous avez en racine de votre site web un fichier qui s’appelle, htaccess ce dernier contient certaines directives pour le fonctionnement de votre serveur, et on peut notamment y indiquer les temps de mise en cache des fichiers par type, ainsi que la compression des échanges entre votre serveur et les clients web. Aussi on ne perdra pas de temps vous avez des tonnes d’informations sur internet pour les expires headers, voici donc notre section consacrée à cette dernière, ceci afin d’avoir un temps d’échange minimal entre le client et le serveur.

 

RewriteEngine on

# MOD_DEFLATE COMPRESSION
SetOutputFilter DEFLATE
AddOutputFilterByType DEFLATE text/html text/css text/plain text/xml application/x-javascript application/x-httpd-php
#Pour les navigateurs incompatibles
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html
#ne pas mettre en cache si ces fichiers le sont déjà
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png)$ no-gzip
#les proxies doivent donner le bon contenu
Header append Vary User-Agent env=!dont-vary


# BEGIN Expire headers

<IfModule mod_expires.c>
 ExpiresActive On
 ExpiresDefault "access plus 3024000 seconds"
 ExpiresByType image/jpg "access plus 3024000 seconds"
 ExpiresByType image/jpeg "access plus 3024000 seconds"
 ExpiresByType image/png "access plus 3024000 seconds"
 ExpiresByType image/gif "access plus 3024000 seconds"
 AddType image/x-icon .ico
 ExpiresByType image/ico "access plus 3024000 seconds"
 ExpiresByType image/icon "access plus 3024000 seconds"
 ExpiresByType image/x-icon "access plus 3024000 seconds"
 ExpiresByType text/css "access plus 3024000 seconds"
 ExpiresByType text/javascript "access plus 3024000 seconds"
 ExpiresByType text/html "access plus 3024000 seconds"
 ExpiresByType application/xhtml+xml "access plus 3024000 seconds"
 ExpiresByType application/javascript A259200
 ExpiresByType application/x-javascript "access plus 3024000 seconds"
 ExpiresByType application/x-shockwave-flash "access plus 3024000 seconds"
</IfModule>


# END Expire headers

# BEGIN Cache-Control Headers

<IfModule mod_headers.c>
 <FilesMatch "\\.(ico|jpe?g|png|gif|swf|gz|ttf)$">
 Header set Cache-Control "max-age=3024000, public"
 </FilesMatch>
 <FilesMatch "\\.(css)$">
 Header set Cache-Control "max-age=3024000, private"
 </FilesMatch>
 <FilesMatch "\\.(js)$">
 Header set Cache-Control "max-age=3024000, private"
 </FilesMatch>
<filesMatch "\\.(html|htm)$">
Header set Cache-Control "max-age=3024000, private, must-revalidate"
</filesMatch>

 

# Disable caching for scripts and other dynamic files
 

<FilesMatch "\.(pl|php|cgi|spl|scgi|fcgi)$">
Header unset Cache-Control
</FilesMatch>
</IfModule>

 

# END Cache-Control Headers

# KILL THEM ETAGS
 

Header unset ETag
FileETag none

 

Ensuite vous avez certaines configurations à faire dans le panneau de configuration de Joomla, les bonnes conduites à prendre pour le SEO étant d’indiquer la réécriture des URL en clair (Search Engine Friendly) et la réécriture au vol des URL, éviter aussi d’inclure le nom de votre site dans les titres, car cela vous ôtes de la place dans ces derniers dont la taille doit être limitée. Afin d'optimiser au mieux le système de cache de Joomla nous allons le modifier à deux niveau, premièrement il faut demander à votre hébergeur d'installer Memcached sur votre serveur, et ensuite l'indiquer dans votre configuration. Puis nous allons aussi utiliser un système de cache de second niveau beaucoup plus performant que le plug-in système de cache de Joomla, ce dernier s'appelle Jot Cache et s'appuira aussi sur Memcached plutôt que le système de fichier (certains paramètres des captures d'écrans sont tout bonnement effacés pour ne pas compromettre notre sécurité).

Voici un exemple de notre configuration.

Config Joomla 0 3
Config 1/3 - Cliquer sur l'image pour l'agrandir
 
Config Mem Cache
Config 2/3 - Cliquer sur l'image pour l'agrandir
 
Config Joomla 2 3
Config 3/3 - Cliquer sur l'image pour l'agrandir

La première chose à faire est de limiter le nombre de modules et de plug-in que vous chargez sur votre page de garde ainsi que sur toutes vos pages, chaque module et plug-in, prend un temps de chargement qui peut être important. Aussi, nous sommes souvent tentés de rajouter tels effets, telles images, mais cela a un impact sur le temps de chargement, et si vous voulez de la performance, il va falloir faire des choix. Bien sûr, avec les outils que nous vous avons indiqués précédemment vous serez en mesure de calculer l’impact de chacun des modules que vous désirez afficher. Le temps de chargement le plus important consiste dans les images, c’est pour cela qu’il est important d’optimiser ces dernières, les autres ressources telles que les fichiers CSS et JavaScript ont aussi un impact, et il faudra les optimiser. Sachez que j’ai dû le faire « manuellement », mais nous allons vous conseiller des extensions qui le feront pour vous, car chaque kilo-octet qui transite entre votre serveur et vos clients web a son importance.

Aussi pour optimiser vos images, et ceci de façon quasi automatique, nous vous conseillons Image Recycle, le composant peut avoir certains bugs, et le quota de page à optimiser est payant, sachez que la sauvegarde automatique des images optimisées a buggé chez moi, le traitement par lot aussi, car nous avons plus de 32.000 images. Mais le cron job a fonctionné, et nous avons ainsi pu optimiser toutes nos images, à l’heure où j’écris ces lignes nous avons remonté les informations de bug à l’éditeur, aussi peut-être qu’il aura corrigé son logiciel. Mais quoi qu’il en soit, si vous avez peu d’images vous pourrez les optimiser facilement.

N’oubliez pas (jamais) de sauvegarder votre site, des hébergeurs comme le nôtre (Infomaniak) font des backups de vos sites web tous les jours, aussi il est facile de redéployer un backup en 15 min, mais on n’est jamais mieux servi que par soi-même, aussi nous vous conseillons de doubler vos backups et d’utiliser Akeeba Backup, ce dernier est absolument fantastique, et ses sauvegardes vous permettrons de restaurer tel ou tel fichier sans redéployer l’intégralité d’un backup. Sauvegardez donc votre site web tous les jours, voir plusieurs fois par jour pour avoir les différentes versions, et pensez aussi à sauvegarder régulièrement dans un répertoire de votre disque dur la racine de votre site web, si vous faites telle ou telle modification sur vos fichiers, il est toujours utile d’avoir un backup daté de ces derniers.

Image Recycle
Image Recycle - Cliquer sur l'image pour l'agrandir

Comme je vous l’ai dit vous devez aussi optimiser, merger et compresser vos fichiers CSS et JavaScript. Et comme je vous l’ai indiqué précédemment il fut un temps où j’ai dû le faire à la main, et Page Speed insigths de Google est d’un grande aide pour cela. Puisque, après un test, il vous propose de télécharger les ressources de votre site web en version optimisées, à vous de remplacer un à un les fichiers sur votre serveur par ceux proposés par Google. Du reste, même en ayant optimisé vos fichiers pour pouvez vérifier le bon fonctionnement de votre optimisation via ce dernier. Sachez toutefois que certains fichiers ne peuvent pas être optimisés, parce qu’ils sont sur des sites distants, ou sont réfractaires. Vous devez aussi faire attention en optimisant ces derniers, car vous pouvez avoir des effets de bord visuel, ou de fonctionnement, en les améliorant. Encore une fois, les backups sont importants ; ))). Pour optimiser vos ressources, il existe un soft qui est payant, mais il est disponible dans une version limitée gratuitement, c’est JCH optimize, il est vraiment précieux et fournit une tonne d’optimisation que vous pouvez tester à loisir. Il a même des fonctions très faciles d’utilisation, mais dans notre cas de figure il n’a pas été utilisable, car il générait des erreurs de CSS que nous n’avons pas pu éradiquer.

Aussi la solution de contournement a été l’Extension Script Merge, elle est payante (pour les sites HTTPS), mais est redoutablement efficace, encore une fois si telle ou telle optimisation vous pose des problèmes vous pouvez « exclure » tel ou tel fichier CSS ou JavaScript, pour savoir ceux qui sont chargés, la cascade de Pingdom tools est très utile, n’oubliez pas de vérifier le bon fonctionnement de chaque module, tel que les commentaires, les recherches web, les votes sur les articles, car certains composants n’aiment pas être mis inline, compressés ou mergés.

Voici nos optimisations pour Script Merge

Scripit Merge Css Ok
Script Merge 1/6 - Cliquer pour agrandir l'image
 
Script Merge 2 6
Script Merge 2/6 - Cliquer pour agrandir l'image
 
Script Merge Exclude
Script Merge 3/6 - Cliquer pour agrandir l'image
 
Script Merge 4 6
Script Merge 4/6 - Cliquer pour agrandir l'image
 
Script Merge 5 6
Script Merge 5/6 - Cliquer pour agrandir l'image
 
Script Merge 6 6
Script Merge 6/6 - Cliquer pour agrandir l'image

Une dernière optimisation est l’utilisation de la librairie WebP, c’est une librairie de Google qui peut vous faire gagner jusqu'à 60% sur le poids de vos images. Si vous ne gérez pas vous-même votre serveur, demandez à votre hébergeur d'installer sur votre serveur les librairies WebP et JSmin, et renseignez les chemins d’accès dans l'onglet Guru de Script Merge (sachez que par rapport à nos captures vous pouvez gagner encore quelques millisecondes en autorisant  la compression HTML, chez nous ça n’a pas été possible à cause de notre module de vote sur les articles, mais chez vous pourquoi pas ; )))

Bien sûr le choix de votre template est primordial, c’est même un point central, la mode est aux templates « réactive » en ce qui nous concerne nous avons deux templates, JA purity II pour la version ordinateur du site et JA Simpli pour la version Mobile, le swap entre les deux et la détection des tablettes, GSM et autres est effectué par Simple Mobile Detection.

À ce sujet il est important d’avoir une version mobile qui soit vraiment adaptée à ces derniers, notamment pour la taille des images, et autres spécificités de ces appareils, aussi nous utilisons XT Adaptive Images Pro, il est payant, mais est très utile, du reste voici nos réglages pour ce dernier.

 

Voici nos réglages pour XT Adaptive Images Pro

Adaptive1 3
XT Adaptive images Pro 1/5 - Cliquer pour agrandir l'image
 
Apaptive 2 5
XT Adaptive images Pro 2/5 - Cliquer pour agrandir l'image
 
Adaptive 3 5
XT Adaptive images Pro 3/5 - Cliquer pour agrandir l'image
 
Adaptive 4 5
XT Adaptive images Pro 4/5 - Cliquer pour agrandir l'image
 
Adaptive 5 5
XT Adaptive images Pro 5/5 - Cliquer pour agrandir l'image
 
Une autre astuce pour gagner un peut de temps est de désactiver la librairie Mootools via le plug in Mootools Enabler/Disabler, et ça vous permet de gagner 600ko par page ; )))), nous, nous n'avons pas pus totalement la désactiver à cause de notre module de commentaire, mais la aussi pour tenter de faire passer la pilule vous pouvez désactiver certains fichiers JS, ou au contraire demander à activer la libraire pour certains composants. 
 
Voici nos réglages pour Mootools Enabler/Disabler
 
Motools
Plug-in Mootools Enabler/Disabler
 

Enfin cerise sur le gâteau, comme je vous l’ai dit en Intro nous avons testé des CDN, et franchement le résultat n’était pas à la hauteur du prix que nous devions payer, et souvent leur principale utilisation était de servir de cache. Nous avons donc choisi d’utiliser un système de cache très performant, pendant des années cela a été un souci sur Joomla, mais un programmeur de génie et totalement désintéressé a créé une extension formidable pour Joomla, c’est JOT Cache de V. Kanich. Le composant vient remplacer le cache système de Joomla et il est vraiment bien pensé, le programmeur a pensé à toutes les conditions possibles (un don est toujours le bienvenu, vu le bienfait pour la communauté Joomla). D'ailleurs si vous avez un blog nous vous conseillons de l'utiliser conjointement avec Cache Cleaner de Regular Labs, afin de vider automatiquement votre cache lors de l'édition ou de la sauvegarde d'article.

Nous vous laisserons découvrir les multiples possibilités que propose ce module, mais voici nos principaux réglages.

Jot Cache 1
Jot Cache  Module 1/2 - Cliquer pour agrandir l'image
 
Jotcache 3
Jot Cache  Module 2/2 - Cliquer pour agrandir l'image
 
Jotcache Plugin 1 4
Jot Cache  Plugin 1/4 - Cliquer pour agrandir l'image
 
Jotcache Plugin 2 4
Jot Cache  Plugin 2/4 - Cliquer pour agrandir l'image
 
Jotcache Plugin 3 4
Jot Cache  Plugin 3/4 - Cliquer pour agrandir l'image
 
Jotcache Plugin 4 4
Jot Cache  Plugin 4/4 - Cliquer pour agrandir l'image

Sachez toutefois que vous pouvez aussi créer un Cron Job sur votre serveur qui nettoira le cache, puis qui « visitera » chaque page du site pour les remettre en cache de façon préemptive, nous utilisons en plus ce type de service pour minimiser notre temps de réponse face aux requêtes des internautes et des moteurs de recherche (le résultat est totalement aléatoire car avec 14k articles on ne peut pas tout mettre en cache, mais pour les sites plus petits cela peut être une très bonne solution)

Jot Cron
Example de Cron Job Jot Cache. - Cliquer pour agrandir

La dernière optimisation vise à désinstaller définitivement tout les modules et plug-in dont vous n’avez pas besoin, ceci pour gagner de précieuses millisecondes. Une ou deux semaines après les avoir désactiver, si tout fonctionne bien et que vous êtes sûr de vos choix, il faut désinstaller totalement ces composants pour alléger le site et améliorer son temps de réponse, c’est la dernière chose à faire, bien sûr backup, backup et backup, car après vous ne pourrez plus faire machine arrière, aussi soyez judicieux dans vos choix, et tous les composants purement Joomla doivent être sanctuarisés (à moins que vous ne sachiez vraiment ce que vous faites ; )))))))

Voilà, je pense que je n’ai rien oublié, si par hasard je me rappelle d’autres optimisations, je mettrais à jour l’article, mais les autres optimisations concernent principalement le SEO, ce qui est un facteur important, car si nous faisons des sites web, et donc des articles, c’est pour être lu, n’est-ce pas ?

 

Si j’ai le courage, je ferai donc un petit topo (de ce que j'en ai appris) en ce sens.

 

En attendant bonnes optimisations, et bon courage.

 

Amitiés,

f.

 

Information complémentaire :

Crashdebug.fr :

 

Vous êtes ici : Accueil Arrow Informatique Arrow Astuces Logiciels Arrow Comment faire pour optimiser réellement un site Joomla