Il peut arriver dans certains cas lors de l'utilisation de JCH Optimize que votre site cesse de fonctionner correctement ou présente des erreurs qui n'existaient pas avant l'utilisation du plugin.

Ne vous inquiétez pas, dans la plupart des cas, ces soucis sont mineurs et peuvent être assez facilement résolus. Par contre, il vous faut savoir comment !

Quand un site dysfonctionne avec l'utilisation de JCH Optimize, il s'agit généralement d'un fichier provoquant une erreur quand il se retrouve combiné dans le fichier unique. En effet, combiner les fichiers signifie également changer la localisation du fichier d'origine dans les liens appelant le script (puisque ce sera le fichier combiné qui est appelé et pas le fichier à son emplacement original), ce qui peut alors interférer avec le code écrit pour ce fichier spécifique (si le programmeur a "appelé" le fichier avec un chemin absolu dans le code, le fichier ne sera alors pas "trouvé").

L'astuce ici consiste donc à trouver quel fichier pose problème et de l'exclure alors du processus d'optimisation.

Trouver le fichier posant problème

Etape 1 - Identifier les conflits

Si vous essayez de configurer le plugin sur un site où vous n'avez que le noyau du CMS (l'installation "vierge"), les extensions déjà pré-installée et le template par défaut, il y a alors toutes les chances pour les réglages automatiques fonctionnent parfaitement.

Dans la pratique, la majorité des sites demandent des fonctionnalités additionnelles n'étant pas nativement disponibles et plusieurs extensions sont souvent installées sur votre site. Ces extensions incorporent alors la plupart du temps du Javascript et des fichiers CSS, et le nombre de fichiers chargés allant progressivement grandissant, la chance (ou malchance !) d'obtenir un conflit augmente d'autant.

Les conflits sont des fonctionnalités défectueuses sur vos pages (un élément qui ne "réagit" plus sur une page) ou un défaut de présentation, ce conflit se manifestant après que les fichiers Javascript et CSS aient été combinés en un seul fichier.

Notez que si vos pages présentait un dysfonctionnement avant même l'utilisation du plugin, c'est aussi un conflit qu'il vous faut alors résoudre !

Etape 2 - Confirmer que le conflit est bien causé par JCH Optimize

Avant de tenter de résoudre un conflit après l'installation et l'action du plugin JCH Optimize, vous devez vous assurer que ce conflit a été causé par le plugin.

Il arrive que nous fassions des modifications sur nos sites sans réaliser les conséquences de la modification (pouvant impacter alors une ou plusieurs pages du site) et il est fréquent de ne "plus se rappeler ce que l'on a fait" pour arriver à un conflit sur une page.

Si vous ne vérifiez pas que le conflit est causé par le plugin, vous risquez alors de partir dans une "chasse au dahu" pour modifier le fonctionnement du plugin alors que celui-ci n'est pas en cause.

Pour vérifier si le plugin est le responsable du conflit, désactivez-le ainsi que tous les plugins gérant le cache sur votre site. Rechargez alors votre page après avoir désactivé les plugins et regardez si le problème est alors résolu.

Si le problème est résolu mais réapparait à nouveau en ré-activant le plugin, alors vous pouvez raisonnablement déduire que c'est le plugin qui cause le conflit.

Si par contre le problème persiste alors que le plugin est désactivé, alors vous pouvez être sur que le problème ne vient pas du plugin.

Note : pensez également à "vider le cache" de votre site et de votre navigateur pour vérifier !

Même après avoir établi que le conflit n'arrive qu'après l'activation du plugin, le conflit peut être causé par des erreurs déjà existantes sur votre site : vous devez alors vérifier la console d'erreur Javascript.

Par ailleurs, si vous ne savez pas exactement comment résoudre les conflits javascript, vous pouvez également tenter d'activer l'option "Utiliser Try-Catch" dans l'onglet des options avancées du plugin. Cette option va alors "entourer" chaque fichier de scripts dans un bloc "Try-catch" pour éliminer les erreurs pouvant provenir d'un fichier particulier, cette erreur affectant alors tout l'ensemble du fichier combiné.

Même si vous utilisez l'option "Try-Catch", la meilleure chose à faire est de tenter de trouver et résoudre le conflit : cette option n'est pas la "solution ultime" permettant de résoudre tous les conflits.

Etape 3 - Procédure permettant d'identifier et d'exclure les fichiers posant problème

1. Activer le mode "Debug" pour vous aider à trouver le problème

Mettez sur "OUI" l'option "Déboguer le plugin".

2. Est-ce que le conflit est un conflit Javascript ou un conflit CSS ?

Nous devons arriver à savoir si le conflit est causé la combinaison des fichiers Javascript ensembles ou si c'est la combinaison des fichiers CSS qui est en cause.

Juste en dessous des réglages divers, vous pouvez voir une ligne "Groupe de réglages automatiques". Cette ligne est volontairement "anodine" pour éviter que vous ne fassiez des erreurs :

Tant que vous ne cliquez pas sur cette zone, on a l'impression que c'est une zone d'information :

Si vous cliquez sur cette zone, c'est en fait un zone de réglage fin (je vous conseille de consulter le chapitre sur les réglages automatiques ! Vous ne devez en théorie pas toucher à ces réglages, mais vous devez ici les utiliser pour régler les conflits)

Ici, vous allez mettre sur "NON" les 2 premières options : "Combiner les fichiers CSS" et "Combiner les fichiers Javascript".

 

Vous allez ensuite recharger votre page, vérifier que cela fonctionne correctement, puis ensuite activer à nouveau "Combiner les fichier css", vérifier si cela fonctionne ou si le conflit est présent, pour enfin, après avoir désactivé l'option "Combiner les fichier css" et activé l'option "Combiner les fichiers Javascript" vérifier si cela provient des fichiers Javascript.

 

Vous devriez alors savoir si le problème vient des fichiers CSS, Javascript, ou les 2 : si en activant une des 2 options vous avez une erreur sur vos pages, vous pouvez alors immédiatement savoir qui est en cause.

 

Note : pensez bien à appliquer vos changements en sauvegardant à chaque modification avant de tester et vérifier votre page : changer une option ne sera pas pris en compte tant que vous ne sauvegardez pas les réglages du plugin !

 

3. Résoudre les conflits CSS.

 

La plupart des problèmes de CSS sont dus à des erreurs d'analyse dans les fichiers CSS. Nous allons voir comment vérifier les fichiers CSS avec CSS Lint pour rechercher des erreurs d'analyse.

Comment configurer CSS Lint pour vérifier le CSS

 

Nous sommes ici uniquement intéressé par les erreurs d'analyse css, nous allons donc utiliser le site CSS Lint pour trouver les erreurs.

Allez sur le site http://csslint.net/

 

Arrivé sur la page de CssLint, cliquez sur le petite flèche à droite de "LINT!", puis décochez toutes les cases présentes (Astuce : cliquez sur "None" pour "Aucune" au dessus de chaque zone pour tout décocher rapidement) :

Ouvrez votre site dans un nouvel onglet et affichez la source de votre page.

Astuce : dans un navigateur comme Firefox, vous pouvez obtenir la source de votre page avec la combinaison au clavier "CTRL + U".

 

En réalisant cette manipulation sur mon propre site, j'obtiens ceci comme source  :

 

 

Vous pouvez voir alors l'appel à la feuille de style combinée : ici, dans mon exemple, cela correspond à cette ligne :

 

 

En cliquant simplement sur ce lien, vous allez ouvrir le fichier unique css combiné : vous allez dans la page tout sélectionner et copier le code affiché (Astuce : CTRL+A suivi de CTRL+C) puis dans la zone de texte de CSSLint, coller le code récupéré (CTRL+V).

 

Il vous restera alors à cliquer sur le gros bouton bleu "Lint!" et le site analysera votre fichier css combiné pour vous indiquer si il trouve des erreurs.

 

Vous aurez dans le rapport la ligne où l'erreur se trouve, la colonne et l'erreur détectée. Il vous faudra alors résoudre le problème dans le css ou exclure le fichier css de l'optimisation (voir plus bas dans cette page)

 

Résoudre les conflits Javascript

 

1ère étape : utiliser la console pour identifier l'erreur

 

Dans votre navigateur (Firefox, Chrome, etc..), vous avez une console d'erreur. Par exemple, sous Firefox, elle est activable par la touche de fonction F12.

 

La console va vous permettre de voir ce conflit et va vous permettre alors de résoudre le problème.

La copie d'écran ci-dessous vous montre une erreur provoquée par le fichier combiné avec la console de Google Chrome.

Toute erreur Javascript commençant par le texte "Uncaught" suivi de "erreur quelque chose" suivi de "où" l'erreur est arrivée est une mauvaise chose pour votre site : c'est une erreur qui provoquera un dysfontionnement du plugin.

 

 

2ème étape : Identifier le fichier où l'erreur a eu lieu

 

Vous pouvez voir dans la copie écran au dessus qu'à droite de l'erreur affichée il y a un lien (souligné). Cliquez dessus pour être redirigé dans la console sur l'onglet "Sources" qui vous montrera alors l'erreur dans le code Javascript.

Vous pouvez identifier très simplement alors l'erreur à l'aide de la ligne commentée (affichée en vert) juste au dessus de l'endroit où l'erreur a été détectée !

 

Dans cet exemple, vous pouvez voir que l'erreur a été provoqué par le fichier : "components/com_roksprocket/assets/ js/roksprocket.js"

 

 

 

 

Exclure le fichier provoquant l'erreur

Vous avez trouvé le fichier Javascript (ou css) responsable du problème lorsqu'il est présent dans le fichier combiné, vous pouvez maintenant l'exclure grace à l'onglet "Options d'exclusion" du plugin.

Pour cela, si vous connaissez le nom du fichier Javascript, il suffira de cliquer sur la zone "Exclure des fichiers Javascript" (ou css !) : une zone déroulante de tous les fichiers Javascript sera disponible et vous pourrez trouver à l'aide de vos résultats précédents le fichier à exclure.

Quelque fois, si vous excluez des fichiers et que certains fichiers fonctionnent ensemble, cela peut alors créer d'autres soucis : exclure un fichier qui est appelé par un autre fichier risque de générer un nouveau problème.

Nous verrons dans le prochain chapitre à venir comment résoudre ce type de problème.