Votre site Joomla! est-il lent ? Vous devez réellement travailler sur cela : les utilisateurs ont horreur des sites lents et ils pourraient quitter votre site plus tôt que ce qu'ils le feraient normalement. Tout site qui nécessite plus de 2 secondes pour être chargé court un risque. De plus, Google dit souvent que la vitesse d'un site est déterminante pour son placement dans ses résultats de recherche. Ce qui est bon à savoir : il ne devrait pas être compliqué d'améliorer la vitesse de votre site Joomla!. Alors que vous pouvez parfois entendre des histoires disant que Joomla! est lent, cela vient en général d'un paramétrage incorrect ou d'un mauvais prestataire d'hébergement et vous pouvez travailler sur ces deux points. Si vous connaissez les points sur lesquels vous devez travailler, améliorer la vitesse de votre site Joomla! ne devrait pas être trop compliqué et parvenir à le faire charger en moins d'une seconde devrait être possible.

Avant de commencer, assurez-vous de prendre connaissance de la vitesse de chargement actuelle de votre site web. Il y a de nombreux outils en ligne permettant de vous aider à déterminer cela. Chaque outil de la liste suivante vous donne également des informations détaillées sur de potentiels problèmes.

Google Pagespeed Insights (qui inclut les performances pour mobile)
Yslow (une extension pour les navigateurs Firefox et Chrome)
Pingdom Tools
GT-Metrix (affiche les résultats de Pagespeed et Yslow)
Webpagetest.org

Maintenant que nous connaissons nos performances actuelles, commençons à optimiser. Une chose à garder en tête : faites une sauvegarde avant ! Ensuite, apportez vos améliorations étape par étape et après chaque étape d'optimisation, vérifiez que vos sites fonctionnent toujours correctement (assurez-vous de nettoyer votre cache entre chaque étape).

1) Choisissez un bon hébergeur

Choisir un hébergeur adapté pour votre site web est crucial. Indépendamment de la façon dont vous allez optimiser votre site, un mauvais hébergeur peut anéantir tous vos efforts et rendre votre site lent. Avant de faire votre choix, consultez les avis et les forums. Evitez les hébergeurs gratuits, tôt ou tard vous comprendrez pourquoi ils sont gratuits... comparez également les offres mutualisées et dédiées.
Les serveurs dédiés sont souvent synonyme de rapidité, mais bien sûr le coût sera plus important.

2) Cache de Joomla!

Le cache est une manière de proposer du contenu pré-généré à vos utilisateurs. Cela signifie que le serveur n'a pas à récupérer toutes les informations nécessaires dans la base de données à chaque fois qu'une page est générée. Au lieu de ça, une "vue" enregistrée est proposée au navigateur (si votre contenu a été modifié, cela signifie que les utilisateurs vont temporairement recevoir des informations non à jour, jusqu'à ce que vous nettoyiez votre cache). Joomla! propose trois différents types de cache :

• Vues de composants
• Vues de module
• Vues de page

Les deux premiers réglages sont déterminés par un même paramètre dans la Configuration Globale de votre site :

Réglez-le sur Cache conservateur. Optionnellement, vous pouvez également régler une durée différente de celle de 15 minutes proposée par défaut. Si le cache global est activé, vous pouvez le désactiver pour certains modules spécifiques, à partir de l'onglet avancé des modules sélectionnés.

Les vues de page sont seulement mises en cache si vous activez le plugin Système - Cache à partir du gestionnaire de plugin :

Réglez-le simplement sur Activé et conservez les paramètres par défaut. Faites attention, vous pouvez rencontrer des problèmes avec le cache, particulièrement sur les pages dynamiques comme les formulaires de contact, les captcha, etc.

Si vous avez des problèmes de cache, il y a des extensions qui vous permettent de contourner ces problèmes :

• JotCache et Cache Control sont deux extensions qui vous permettent de régler ce qui doit être mis en cache et ce qui doit être exclu.
• NoNumber Cache Cleaner est très pratique pour nettoyer le cache automatiquement.

3) G-Zip

Dans la Configuration Globale, onglet Serveur, vous trouverez un paramètre pour activer G-zip :

Avec G-zip activé, vos pages sont compressées en un fichier zip, envoyées au navigateur, puis décompressées sur votre PC. Excepté pour de très anciennes versions de IE, cela est supporté sur tous les navigateurs et ne devrait pas poser de problème une fois activé.

Après l'avoir activé sur votre serveur, vous pouvez utiliser un outil pour vérifier le taux de compression, comme celui-ci : www.feedthebot.com/tools/gzip. Souvent, vous verrez que votre contenu a été compressé à hauteur de plus de 50 %.

Si vous trouvez que cela ne fonctionne pas, cela peut venir du fait que votre hébergeur ne supporte pas mod_gzip, ou qu'il ne l'a pas activé.

4) Supprimez les extensions inutiles

Choisissez vos extensions avec précaution. Certaines extensions ont des effets horribles sur la vitesse de votre site. Les principaux problèmes sont :

• Scripts des réseaux sociaux comme les compteurs de likes et tweets. Ils ont en général besoin de javascripts additionnels, "pour se connecter à leurs réseaux", ce qui peut ralentir terriblement votre site.
• Larges sliders et afficheurs d'images. Toutes les images d'un slideshow doivent être chargées pour que le slideshow puisse fonctionner et ainsi les afficher, ce qui peut prendre du temps avec des images de grande taille.
• Egalement, les scripts comme Google Analytics, Google Webfonts, etc., peuvent provoquer plus de ralentissement que ce que vous attendiez...

Même si vous avez besoin de ce genre de fonctionnalité, prenez au moins le temps de réfléchir à la nécessité de telles extensions sur votre page d'accueil. Si vous pouvez ne les publier que sur certaines pages, comme une page de contact ou un portfolio, seul ces pages seront affectées.

5) Cache du navigateur dans le .htaccess

En supposant que vous ayez renommé votre fichier htaccess.txt en .htaccess, vous pouvez l'utiliser pour ajouter du code permettant de dire à votre navigateur de ne pas chercher certains types d'images spécifiques si elles sont déjà présentes sur votre PC. Comme les images représentent souvent une part importante d'une page web, cela économise beaucoup de bande passante. Un exemple pourrait être le code suivant :

<IfModule mod_expires.c>
   ExpiresActive On
   ExpiresDefault "access plus 1 seconds"
   ExpiresByType text/html "access plus 600 seconds"
   ExpiresByType text/css "access plus 604800 seconds"
   ExpiresByType text/javascript "access plus 216000 seconds"
   ExpiresByType application/xhtml+xml "access plus 600 seconds"
   ExpiresByType image/jpeg "access plus 2592000 seconds"
   ExpiresByType image/png "access plus 2592000 seconds"
   ExpiresByType etc, etc.
</IfModule>

Vous pouvez regarder cet article pour plus de possibilités avec .htaccess.

6) Optimisez vos images

Les images sont souvent responsables de plus de KB que le reste de vos pages web, elles doivent donc être optimisées. Plus important, assurez-vous de les utiliser correctement dimensionnées. Deuxièmement, vous pouvez reduire davantage la taille de vos images en utilisant des outils de compression qui suppriment les données inutiles dont vous ignorez en général l'existence. Même si vous utilisez la bonne procédure avec Photoshop pour enregistrer vos images en utilisant la fonctionnalité "Enregistrer pour le Web et les périphériques", un .png peut encore perdre 75% de sa taille sans être affecté visuellement. Les outils qui peuvent vous aider sont :

• TinyPNG.com : seulement pour les .png, mais vraiment de qualité pour ce format.
• Smush.it
• Si vous devez souvent compresser des images, vous pouvez regarder des solutions hors-ligne comme PNGGauntlet (png) et RIOT (jpg)

Les utilisateurs avancés peuvent également utiliser des techniques comme les sprites ou l'encodage Base64.

7) Utilisez un CDN

Si vous utilisez un Content Delivery Network, vos fichiers statiques ne seront pas chargés depuis la localisation de votre hébergeur web, mais à partir d'un réseau global de serveurs de votre fournisseur CDN. Cela assure aux utilisateurs éloignés du serveur de recevoir leurs fichiers à partir d'une localisation plus proche, sauf pour le code HTML qui contient un contenu fréquemment modifié.

Cela a l'air compliqué, mais en fait c'est assez simple à mettre en place et pas très coûteux.
Ce n'est pas seulement utile aux sites destinés au monde entier, mais également à ceux destinés à de grands pays.

8) Optimisez le CSS + Javascript

Les sites, particulièrement les sites récents, possèdent souvent beaucoup de fichiers CSS et Javascript. Ils font tous grossir la taille du site ET le nombre de requêtes HTTP. Il stoppe également le chargement de la page lorsqu'ils sont exécutés. Heureusement, il y a des techniques pour faire face à ces problèmes :

• Compressez ces fichiers. Cela supprime les espaces blancs. Alors que cela affecte la lisibilité du code, cela économise également plusieurs douzaines de pourcentage de la taille.
• Combiner plusieurs fichiers en un. A la place de plusieurs fichiers indépendants, vous n'avez plus qu'un grand fichier CSS et un grand fichier JS.
• Utilisez un attribut defer ou async dans vos scripts pour "dealy execution".

Assurez-vous que votre site fonctionne toujours comme il se doit, parfois certains fichiers doivent être exclus. Tout cela est intéressant, mais également assez compliqué à mettre en place. Vous pouvez partiellement réaliser ces optimisations dans votre template, mais qu'adviendra-t-il des fichiers qui ne sont pas chargés à partir de votre template, mais à partir du core de Joomla!, ou d'autres extensions ? Heureusement, il existe une bonne solution : des extensions !
Cela nous amène au point 9:

9) Extensions pour l'optimisation de la vitesse

Il existe de nombreuses extensions qui peuvent être d'une grande aide pour accélérer votre site. Elles s'adressent en particulier aux problèmes décrits dans le point 8, avec souvent des fonctionnalités supplémentaires sous un onglet Avancé. Vous devrez réellement vous pencher sur ces extensions, les résultats peuvent être impressionnants ! Les plus connues sont les suivantes :

• JCH-Optimize : Excellent pour combiner et compresser vos fichiers. Elle offre également des options pour régler les paramètres defer et async pour le Javascript. Elle est également capable de convertir les images en sprites.
• JBetolo : Similaire à JCH-Optimize, et offre également un support CDN, .htaccess amélioré et Smush.it.
• Yireo ScriptMerge : Possibilité de compresser/combiner les CSS et JS. Un plus est l'option d'encoder en base64 les petites images, plus un support avec jsmin-binary et WebP.
• AeSecure : Une nouvelle extension à découvrir. Une extension principalement tournée sécurité, mais qui offre également des possibilités d'amélioration de vitesse.

10) Optimisation pour mobile

Même si votre site s'affiche correctement sur un ordinateur de bureau, il peut être beaucoup moins performant sur les smartphones. Si vous utilisez l'outil Google Pagespeed pour contrôler votre site, vous aurez un onglet séparé consacré aux performances sur mobile. Même avec les progrès techniques comme la 4G, les sites ne se chargent pas toujours assez rapidement.

La clé pour améliorer cela, est de ne charger que ce qui est réellement nécessaire. En cachant certains éléments avec des classes bootstrap comme hidden-phone et hidden-tablet, cela vous permet d'économiser de la bande passante. Une possibilité est d'utiliser un user-agent detection pour vérifier si vous êtes sur un mobile et non simplement de réduire la taille de la fenêtre de votre navigateur. En utilisant un détecteur de mobile, vous pouvez alors désactiver les positions de module.

Le module manager de NoNumber est un outil qui peut être utilisé pour implémenter cela.

Terminé ? Vérifiez encore !

Une fois que vous avez terminé votre optimisation, vérifiez de nouveau la rapidité de votre site web. En espérant que votre site est désormais plus rapide ! Plus plus d'information sur l'optimisation de la vitesse de votre site, vous pouvez consulter ces liens :

• Joomla-SEO.net : Blog dédié au SEO et à la Performance
• Siteground.com : tutoriel sur la Performance
• Joomlart.com : billet sur la Performance
• Feedthebot.com : (Pas spécifique à Joomla, mais très utile)