Optimiser un site Joomla! avec JCH Optimize

Améliorer le score de vos pages dans les tests Page Speed

Ils sont nombreux et ne vous privez pas d'en essayer plusieurs. Pour des raisons pratiques, nous utiliserons un test plébiscité par tous : GTmetrix. Il permet, dans sa version gratuite, de se constituer un tableau de bord sur lequel vous pourrez installer vos sites et les tests des différentes URLs qui les composent.

 

Quel est le rôle de JCH Optimize ?

JCH Optimize est un plug-in puissant qui combine et minimise les feuilles CSS et les fichiers JavaScript qui sont chargés par le navigateur avant d'afficher une page. Il permet également d'optimiser les images (dans la version pro). Il possède aussi un grand nombre de fonctions d'accélération de l'affichage comme la génération de Sprite, la gestion du cache du navigateur et la gestion d'un domaine statique CDN/Domaine sans cookies.
Sur n'importe quelle page d'un site, la commande CTRL-U ouvre un nouvel onglet (ou une nouvelle fenêtre de votre navigateur) avec le code source.
Dans la partie <head></head> se trouvent les éléments que JCH Optimize va devoir combiner et optimiser en premier lieu : les métadonnées (que vous aurez renseignées par une bonne SEO), l'appel des feuilles CSS et fichiers JavaScript, et probablement des scripts JavaScript que certains modules ou plug-ins installent tels quels dans cette partie du code.

Note : Ce tutoriel est inspiré de la documentation JCH Optimize (en anglais) et de mon expérience personnelle. Il ne peut couvrir de manière exhaustive les problèmes rencontrés lors d'une optimisation, eu égard au nombre impressionnant d'extensions de Joomla!

JCH Optimize a été testé sur divers hébergements (avec et sans certificat), sur une quinzaine de sites et avec le maximum de composants (natifs Joomla!, forum, frameworks,...), modules et plug-ins et les éléments récalcitrants ne sont pas si nombreux.

En cas de problème, vous avez toujours la possibilité de redescendre l'optimisation d'un cran, après avoir tenté de résoudre le problème avec les exclusions.

 

Prérequis

Un site Joomla! de dernière génération 3.7.0 et PHP 7 sont préconisés mais pas obligatoires, Le plug-in fonctionne avec Joomla à partir de 3.3.0 et PHP 5.3

Pour les plus novices, signalons que ce type d'optimisation est à entreprendre, conjointement et plutôt après une bonne SEO et avec un fichier robots.txt en ordre de marche !
Un compte GTmetrix vous permettra d'analyser le fruit de votre travail.
Une bonne connaissance de Joomla! et de son architecture : composants, modules et plug-ins ; liens de menu/articles.

Installer Akeeba et faire régulièrement des sauvegardes en cas de problème sérieux.

 

Télécharger et installer JCH Optimize

Rendez vous sur le site JCH Optimize et téléchargez la dernière version. Mieux vaut télécharger d'abord la version gratuite. Il se peut qu'un composant important de votre site ne soit pas compatible avec l'optimisation (template, composant, module ou plug-in).

La page de téléchargement JCH Optimize

JCH Optimize en français

Vu la galère pour trouver les fichiers de traduction en français, ma philanthropie naturelle m'impose de vous les fournir, ainsi que le chemin du dossier où les placer. Oh, ne me remerciez pas, comme disait le scorpion à la grenouille : « C'est dans ma nature ! ».

Note : Les 2 fichiers sont au format .txt. Il faut les renommer en .ini

fr-FR.plg_system_jch_optimize.ini

fr-FR.plg_system_jch_optimize.sys.ini

Et le chemin : administrator/language/fr-FR

Note : Cette traduction a été réalisée pour la version 5.0.5 et la version 5.1.0 venant de sortir, certains textes sont en anglais.

 

On utilisera ensuite la version payante (29 € en multisite) qui permet une optimisation maximale, comprend une API très efficace de compression des fichiers graphiques et la gestion du CDN/Domaine sans cookies.
Le téléchargement et l'installation du script ne posent aucun problème sur une version Joomla! 3.7.0 avec PHP 7 ou 7.1
Il suffit ensuite de se rendre dans "Gestion des plug-ins" (taper JCH dans la case "Rechercher" fait gagner du temps) et d'ouvrir le plug-in.

 

Premiers essais du plug-in

 

Préambule

Une règle importante : Après chaque modification "Enregistrer" et dans l'onglet "Options de base" –> "Vider le cache du plug-in" avant de vérifier votre travail.

 

Commencer par l'activer et "l'Enregistrer" pour avoir un fonctionnement correct.
Dans l'onglet "Options de base" se trouvent les différents réglages de l'optimisation.
Combiner les fichiers CSS et JavaScript : régler sur minimum.

 

La page des différentes options dans l'onglet Options de base

 

Enregistrer et faire le tour du site pour vérifier les différentes pages, notamment celles qui utilisent des fonctionnalités non natives de Joomla!
Votre template peut également poser un problème rédhibitoire à l'optimisation (affichage désordonné, modules mal placés ou absents,…). Dans ce cas, il faut envisager de changer de template (vous pouvez en trouver un compatible ou le fabriquer vous-même et par exemple utiliser TemplatecreatorCK, il fonctionne parfaitement avec JCH Optimize). Un template qui pose problème dégradera définitivement la note des tests Page Speed car toutes les pages seront impactées.


Un exemple concret

Une page de votre site utilise une carte Google interactive. Votre carte ne s'affichera pas car elle fait appel à des fichiers JavaScript externes (des API Google). Il faut aller dans l'onglet "Options d'exclusion", choisir l'élément de menu contenant la carte et chercher celui qui fait appel à des fichiers CSS et JavaScript externes. Note : Une fois votre lien sélectionné (dans ce cas, il s'agit du lien de menu "Carte"), il faut cliquer sur Enregistrer pour voir l'élément à exclure.

 L'onglet

 

Il faut visionner soigneusement chaque page pour en vérifier le bon affichage. Un petit tour sur votre console GTMetrix vous indiquera l'amélioration de votre note.

 

Options de restriction

JCH Optimize vous fait des suggestions des éléments à exclure. Il faut parcourir les différents liens de menu de cet onglet avec "Eléments de menu" et double cliquer sur la fenêtre "Exclure les fichiers CSS de ces extensions" pour obtenir la liste des éléments à exclure.

Important : A chaque modification dans le plugin, il est impératif d'enregistrer et de vider le cache ("Options de base")

 

Augmenter le niveau d'optimisation

Si tout va bien et que votre site s'affiche correctement, vous pouvez passer au niveau supérieur et recommencer les opérations de vérification.
Pour constater le résultat de la combinaison des fichiers entre chaque étape, il faut afficher le code source de la page : CTRL-U.

Avec la version gratuite du plug-in, vous pouvez aller jusqu'au niveau "Average".

 

Les autres fonctionnalités

Dans l'onglet "Fonctionnalités gratuites", activer les 3 (Générateur de Sprite, Colonnage et Attributs des images).

Les différentes fonctionnalités gratuites du plug-inÀ chaque opération, refaire le tour du site et vérifier la qualité de l'affichage ainsi que la visibilité par Google.

 

 

Gestion du cache, des permissions et de l'ordre du plug-in

Dans l'onglet "Options de base", en bas de la page, vous trouverez les options suivantes :

Options de base JCH Optimize

Si vous ne possédez pas Aesecure, que je vous recommande fortement, vous pouvez lancer "Mise en cache du navigateur". Dans le cas contraire, JCH Optimize vous indiquera que le fichier .htaccess est déjà configuré. Vérifiez cependant que le cache Joomla! n'est pas activé. La gestion du cache est très importante puisque les images, les fichiers CSS et JavaScript vont être stockés dans un dossier temporaire de votre ordinateur et n'auront donc pas à être chargés depuis le réseau. La vitesse d'affichage de vos pages va considérablement s'améliorer.
Cliquez ensuite sur "Fixer les permissions de fichiers". Le script va vérifier le CHMOD des fichiers nécessaires à l'optimisation. Cette option est également disponible avec Aesecure.
Cliquez ensuite sur "Ordre du plug-in".
Cliquez enfin sur "Nettoyer le cache" qui va vider le cache du plug-in.

Sans la version pro, vous n'avez pas accès à l'API d'optimisation des images. Vous pouvez le faire en ligne avec GTmetrix. Après une analyse, GTmetrix vous propose de télécharger une version optimisée des images. C'est beaucoup plus long mais c'est gratuit !

 

 Les autres articles de cette catégorie

 

Ce site utilise les cookies pour améliorer son utilisation