Contact webmaster Lyon

Besoin d'un avis, d'un conseil ? Contactez-nous vite !

Comment améliorer la vitesse d’un site Joomla ?


une voiture de course

Comment rendre votre site Joomla plus rapide ? Voici un dossier complet sur la question !

Si vous n'aimez pas lire, contactez moi pour que j'intervienne directement sur votre site !



L’amélioration de la vitesse de votre site est essentielle, aussi bien du point de vue du référencement (Google positionne mieux votre site s'il est rapide) que du point de vue de l’expérience utilisateur.
En effet, la vitesse séduit les internautes ! Le moindre centième de seconde gagné en chargement de page est ressenti, presque inconsciemment par le visiteur de votre site, et améliore le taux de conversion (remplissage d’un formulaire, contact téléphonique, etc.). Alors pourquoi s’en priver ?

Je me suis donc engagé résolument dans la voie de l’optimisation de la vitesse de mes sites Joomla!



Première étape : déterminer les outils pour mesurer la vitesse d'un site

Les deux outils indispensables sont Yslow et Page Speed.

-Yslow est un module pour votre navigateur (Firefox, Chrome, etc.) à télécharger ici

Voici une capture d’écran qui montre ce que cela donne lorsqu’on active ce module et que l’on lance un test sur un site.

capture d'écran de Yslow


-Page Speed : de la même manière, il existe un module Page Speed à installer sur votre navigateur. Néanmoins, je vous recommande plutôt d’utiliser l’outil en ligne mis gracieusement à disposition par Google : car il donne beaucoup plus de résultats que le module. Etonnant d’ailleurs les différences de résultats : pour un même site, le module donnait un score de 90 et l’outil en ligne de 75. Ce qui compte, c’est que l’outil en ligne donne plus d’indications de travaux à réaliser que le module. Donc mieux vaut utiliser celui-ci.

capture d'écran de Page Speed


-les autres outils : Gmetrix : cet outil va solliciter Page Speed et Yslow, ce qui vous évite d’avoir à consulter les deux outils séparément et vous fait gagner du temps.

J’ai constaté que parfois les résultats divergeaient de ceux que donnaient les deux outils interrogés eux-mêmes. D’autre part, je suis toujours réservé quant à l’utilité des outils qui se contentent de reporter les résultats d’autres outils.

Néanmoins, cet outil est excellent, et vous fera gagner un temps fou ! Je vous le recommande vivement.

D’autres outils existent, mais je ne les ai pas utilisé. En voici une liste !


Deux précisions : une fois que les modifications demandées par Google page speed ont été effectuées, il faut attendre un certain moment, et nettoyer le cache du navigateur avant de relancer le test pour voir le score bouger. Cet outil est long à s'actualiser. Et même en procédant ainsi, cela ne marche pas toujours. Cet outil continue à me demander des modifications que j'ai déjà faites ! Et parfois il faut attendre vraiment longtemps avant l'actualisation, par exemple, revenir le lendemain.

D’autre part, les deux outils Yslow et Page Speed sont bien complémentaires et ne se contredisent jamais. Une manipulation peut faire monter le score sur Page speed, et pas sur Yslow (et vice versa), ce qui affine les tests.


Maintenant que vous avez les outils en main, et que vous allez pouvoir mesurer les progrès effectués, commençons à mettre les mains dans le cambouis et rentrons au cœur de votre site, pour transformer cette 2 Chevaux en Porsche !


J’ai travaillé sur la vitesse de six sites Joomla!, et j’ai constaté qu’en moyenne, le score naturel de vitesse de ces sites (avant toute intervention) était de 50 sur Page Speed, et de 70 sur Yslow.

Notez donc le score initial de votre site. Les conseils que je vais à présent vous donner vont vous permettre de faire monter le score de votre site à 90 en moyenne sur Page Speed et Yslow. Pas mal, non ?


1/ Activation de la compression gzip

Commençons par le plus simple : activez la compression gzip en vous rendant sur dans le back office de Joomla! sur « configuration générale », onglet « serveur ». De cette manière :

capture d'écran du back office de Joomla

2/ Optimisation des images

A présent, attelons-nous aux images. Quatre choses à faire : supprimer les images superflues, les mettre aux bonnes dimensions, préciser ces dimensions, optimiser leur poids grâce à Smushit.


a/ réduire le nombre d’images

Les images sont lourdes, donc les choses sont simples : plus un site a d’images, plus il est lourd. Les articles qui utilisent quatre ou cinq images ne sont pas adaptés du point de vue optimisation de site. Prenez l’habitude de faire des articles comportant une seule image, près du titre de l’article. En favorisant les sites rapides, Google favorise ainsi une standardisation des sites web qui s’effectue au détriment de leur graphisme.


b/ mettre les images aux bonnes dimensions

Vous aviez l’habitude comme moi, d’acheter des photos sur Fotolia, Getty Images ou autre sites, de les uploader telles quelles sur votre site et de régler leur dimension directement avec l’éditeur Wysiwyg de Joomla! (avec TinyMCE, JCE, etc.) ? Vous avez tout faux ! Les images ne doivent pas être redimensionnées avec Joomla!, mais doivent être mises directement en ligne dans la bonne dimension.

Vous avez donc tout un travail à faire, qui peut être très long : repérer, sur chaque page de votre site, les images qui sont redimensionnées dans le code, les télécharger sur le bureau de votre ordinateur, puis les redimensionner avec un logiciel tel que Gimp.

Note : pour aller beaucoup plus vite, vous pouvez redimensionner un grand nombre d’images aux mêmes dimensions d’un seul coup grâce au logiciel XnView (sélectionner le dossier des images concernées, dans le menu : Outils > Convertir > onglet transformations > Redimensionner > lancer).


c/ spécifier les dimensions

Il est important de spécifier les dimensions des images que vous mettez en ligne. C'est très simple à faire, il vous suffit de rajouter dans le code de chacun de vos articles les attributs "width" et "height".

Voici un exemple : si votre image nommée "logo" a des dimensions de 112X200 pixels, votre code source ressemblera à : img src="/images/stories/images/logo.jpg" width="112" height="200".

d/ réduire le poids des images

Une fois vos images redimensionnées, ne les remettez pas tout de suite sur votre site. Il vous faut supprimer les informations non essentielles d’une image. Vous gagnez parfois 50% sur le poids d’une image ! Pour cela, il vous suffit d'utiliser GtMetrix : ce service en ligne vous fournit la version allégée de chaque image. Très pratique...

Une fois ces travaux effectués, vous pouvez remplacer ces images par les nouvelles. Continuez à préciser dans le code source les dimensions de vos images (même si elles sont à présent aux bonnes dimensions), cela permet là aussi de gagner des points.

Vous pouvez pousser un soupir de soulagement et regarder à présent votre score dans Google Page Speed. Là encore, vous devez avoir gagné une dizaine de points, grâce à votre dévoué consultant en référencement de Lyon !


3/ Le code Google Analytics asynchrone

Ensuite, actualisez votre code Google analytics (si vous utilisez ce service) en utilisant la version asynchrone. C’est simple : si votre code analytics se situe en bas de votre page, avant la balise </body>, alors il faut l’actualiser, ce n’est pas la bonne version, en tout cas la version la plus adaptée à l’optimisation de la vitesse de votre site.

Pour trouver la nouvelle version, rendez-vous sur Google Analytics, cliquez sur Modifier en face de votre site, puis sur « vérifier l’état » et copier-coller le code qui apparaît juste avant la balise </head>. Vous trouverez celle-ci dans le fichier index.php de votre template. En tant que prestataire en création de site internet à Lyon, j'ai l'habitude de mettre à jour systématiquement le code Analytics de mes clients


4/ travail sur le fichier htaccess

Il vous rajouter plusieurs lignes de commandes dans votre fichier htaccess. Celui-ci doit être activé et sous la forme .htaccess dans votre ftp. Si ce n’est pas le cas, activez le en le renommant, et si vous ne vous y connaissez pas, ne touchez à rien, vous pouvez faire buguer entièrement votre site. Auquel cas contactez moi pour que je m’en charge, puisque je suis spécialiste en référencement de site internet à Lyon !

Quatre blocs de commande sont à rajouter dans votre fichier htaccess. Vous n'avez qu'à copier-coller ces lignes dans votre fichier .htaccess


a/ Pour la mise en cache :


<IfModule mod_headers.c>

# Mise en cache des images et autres fichier statiques pour un mois

<FilesMatch ".(ico|jpe?g|png|gif|swf|flv|css|js|gz|pdf)$">

Header set Cache-Control "max-age=2592000"

</FilesMatch>


# Mise en cache du html et xml pour 12 heures

<filesMatch ".(html|htm|xml)$">

Header set Cache-Control "max-age=43200"

</filesMatch>


# Désactive la mise en cache pour les fichier PHP et CGI

<FilesMatch ".(php|cgi)$">

Header unset Cache-Control

</FilesMatch>

</IfModule>


b/ Pour la compression :


# Compression

# Activer le filtre

SetOutputFilter DEFLATE


# Certains navigateurs ont des problèmes avec gzip, c'est pourquoi nous faisons des exceptions

BrowserMatch ^Mozilla/4 gzip-only-text/html

BrowserMatch ^Mozilla/4\.0[678] no-gzip

BrowserMatch \bMSIE !no-gzip !gzip-only-text/html


# Les images n'ont pas besoin d'êtres compressées puisqu'elles le sont déjà (jpg, gif...)

SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png)$ no-gzip dont-vary


# Pour les proxy

Header append Vary User-Agent env=!dont-vary


c/ Désactiver les E-Tags


#Désactivation des E-tags

Header unset E-Tag

FileETag None


d/ Améliorer la vitesse d'un site sur OVH


Enfin, si comme la majorité des (bons) sites, vous êtes hébergé sur OVH, rajoutez les lignes :

SetEnv REGISTER_GLOBALS 0

SetEnv ZEND_OPTIMIZER 1

SetEnv MAGIC_QUOTES 0


Je rajoute personnellement ces trois lignes au-dessus de la ligne SetEnv PHP_VER 5

Pour voir où j’ai placé ces trois blocs de commande, vous pouvez télécharger ce document, qui vous montre à quoi ressemble le fichier htaccess que j'utilise dans mon travail de créateur de site de Lyon.

Voici donc un bon fichier htaccess qui va vous permettre de gagner des points ! J’ai testé une par une ces trois blocs de commande, et si je vous les recommande, c’est parce que j’ai pu constater qu’elles permettaient de gagner des points sur l’un au moins des deux outils.


Une fois cela effectué, regardez à nouveau votre score dans les deux outils en question (en actualisant le cache) : vous devriez avoir gagné près d’une quinzaine de points. Mais nous pouvons faire mieux, continuons.


5/ Utilisation du plugin Joomla FwSiteOptimizer

Vous pouvez utiliser un module Joomla! pour finir d’améliorer la vitesse de votre site. Ce qu’il reste à faire, c’est de fusionner vos css et vos javascript, les compresser et les « minifier ». Moi qui utilise Artisteer pour certains de mes sites, je génère des templates qui font appel à cinq ou six css. D’autre part, lorsqu’on rajoute un module/composant sur son site Joomla! et qu’on l’active, on rajoute la plupart du temps l’appel à un script dans le header du site.

Bref, il s’agit de fusionner ces css et javascript, et de les comprimer. Idéalement, en utilisant un module joomla qui fasse cela sans que l’on ait besoin de rentrer dans le code. Sinon, cela signifie que vous êtes développeur et que vous savez faire cela vous-mêmes. Autant alors le faire directement sans passer par un module.

Pour ceux qui ne sont pas développeur, une solution existe : le plugin Fwsite Optimizer.

J’ai essayé plusieurs autres modules, tous ont fait buguer le site à différents niveaux, ce pourquoi je ne les ai pas retenu.

FwSiteopitmizer a fait buguer mes sites, mais je l’ai retenu pour deux raisons : il suffit de désactiver le plugin pour que tout redevienne normal. Ensuite il offre beaucoup de paramètres, qu’on peut activer ou désactiver. On peut donc activer uniquement les paramètres qui ne font pas buguer le site.

L’idée est de tout régler sur désactiver, et tester tous les paramètres un par un. Ainsi sur certains sites, seuls 50% des paramètres sont activés, et c’est déjà ça !

Attention, ne vous fiez pas à la seule page d’accueil pour vérifier que rien ne bugue. Ce plugin a fait buguer certaines pages seulement de mon site (comme la page contact !), et je ne m’en suis aperçu que bien après !

capture d'écran de Fwsiteoptimizer


Vous pourrez constater en vous rendant dans le header que celui-ci, qui était aussi touffu que celui-ci :

capture d'écran du code source d'un site

… est devenu aussi épuré que celui-là :

capture d'écran du code source du site après modification

Testez à présent votre site sur Page Speed et Yslow, et vous verrez les progrès de votre score. Votre site est déjà beaucoup plus rapide.


Néanmoins, ce n'est pas fini ! Il existe une dernière stratégie, que j'ai mise au point pour accélérer Joomla et qui permet de transformer votre site en vraie Porsche du Web 2.0...

Faites le test ! Explorez les différentes pages du site Webmaster Lyon, en commençant par la page d'accueil. Vous avez vu la rapidité ? En une ou deux secondes seulement, vous passez d'une page à l'autre ! Testez maintenant votre site : il vous faut encore quatre à cinq secondes pour qu'une page charge. Vous voyez la différence entre votre site et le mien ?

Pour transformer votre site en vraie formule 1, contactez-moi ! Envoyez moi un mail à contact@webmaster-lyon.fr et je vous indiquerai la technique à suivre, très simple à appliquer. Votre site sera alors aussi rapide que le mien...


Article rédigé avec amour par Cyril ARNAUD. Ajoutez-moi à vos cercles !

Cet article vous a plu ? Découvrez-en d'autres !

 

 

Connectons-nous !FacebookTwitterLinked InContactez-nous