Une piste quand le Smart Cache Prestashop ne fonctionne pas

Lors du passage en production d’une boutique Prestashop, il est intéressant d’activer tous les caches pour gagner de la vitesse. Même si cela n’est pas « vital », on apprécie de pouvoir diminuer le poids de la boutique.

Prestashop CCC

Qu’est-ce que le CCC ?

Dans les « Paramètres avancés -> Performances », de Prestashop il y’a une option qui concerne le Smart Cache. Pour faire court cette option va compresser le code des fichiers CSS et Javascript, afin de gagner en performance… Le fichier sera compilé sur une seule ligne et vous aurez donc des fichiers sources qui seront plus légers. Du coup quand l’acheteur affiche la page du site, vous aurez un gain de vitesse.

Une option simple à activer et qui fait gagner de la vitesse à votre boutique (+ économie de bande passante).
Une option simple à activer et qui fait gagner de la vitesse à votre boutique (+ économie de bande passante).

Ma boutique est déformée avec l’option active

Voici un cas expérimenté chez un client, avec l’activation de l’option la boutique proposait un affichage difformes. Des blocs prenaient des tailles disproportionnées, le menu n’avait pas de mise en forme convenable, le panier positionné à un emplacement indésirable. Ce problème est très pénalisant, car il est difficile d’évaluer où se situe le bug et si cela se trouve dans le coeur du comportement de Prestashop lors de la compilation.

Que ce soit sur un mobile, une tablette ou un desktop, le contenu est mal agencé , voir déformé.
Que ce soit sur un mobile, une table ou un desktop, le contenu est mal agencé , voir déformé.

La solution

Le problème se trouvera dans le fichier CSS même, la principale cause sera la mauvaise structure de celui-ci. Même avec des thèmes achetés, vous pouvez vous trouver avec des CSS qui sont corrompus et où la structure n’est pas intègre. Voici deux causes pouvant créer le problème :

  • commentaire CSS mal codé, sans espacement ex :  « /*commentaire*/ » au lieu de « /* commentaire */ »
  • des balises { ou } qui sont mal fermées

Le problème c’est que parfois la déformation se trouve par exemple sur le panier, mais n’a strictement rien à voir avec le CSS du panier, dans le fichier « global.css » par exemple, il pourrait manquer de balises fermantes. En mode navigateur classique, sans compression… le navigateur corrige à la volée le « bug », on a donc le sentiment que tout fonctionne correctement, mais cela n’est pas le cas et cela se voit immédiatement avec le cache CCC actif.

Pour trouver plus vite un bug

De mon côté j’utilise par exemple l’éditeur Netbeans, qui identifie automatiquement les erreurs sur les fichiers CSS et les signale même avant d’ouvrir le fichier en question. Si un signal rouge s’affiche, cela vaut la peine de regarder plus en détail (notez que certaines erreurs en rouge, ne sont pas forcément critiques).

Le fichier global.css semble potentiellement contenir de mauvaises règles / malformations.
Le fichier global.css semble potentiellement contenir de mauvaises règles / malformations.

Pour mieux comprendre où le fichier se déforme, il peut être bien pratique de faire appel à CSS Beautify, qui va restructurer votre fichier. Avec cela vous allez donc pouvoir consulter la nouvelle nomenclature du fichier et vous verrez certainement grâce à l’indentation qu’à un certain niveau le fichier ne devrait pas indenter 200 lignes d’affilées… du coup il y’a un problème potentiel d’accolades non fermées.

Nettoyer le CSS aide à mieux comprendre où se trouve le bug, car parfois les fichiers sources sont très touffus et denses.
Nettoyer le CSS aide à mieux comprendre où se trouve le bug, car parfois les fichiers sources sont très touffus et denses.

Bilan

Personnellement, j’ai dû tourner un moment avant de comprendre où se trouvait le bug, il était multiple sur plusieurs fichiers CSS du thème. Par exemple le fichier « category.css » pouvait provoquer la déformation du panier. Pour cela Netbeans a localisé rapidement les CSS avec des erreurs et j’ai pu les évaluer, les restructurer et ajouter les balises manquantes. A noter qu’il faut être prudent quand on ferme la balise, car parfois celle-ci font partie de règles responsives, qui encapsulent d’autres règles.

Notez mon billet, Google va adorer :
1 étoiles - J'aime pas !2 étoiles - Bof !3 étoiles - Bien !4 étoiles - Très bien !5 étoiles - Génial ! (Soyez le premier à noter ce billet)
Loading...

15 commentaires sur “Une piste quand le Smart Cache Prestashop ne fonctionne pas”

  1. Après une maj de presta + un passage en https , pas mal de bugs css que je corrige au fur et à mesure jusqu’à revenir à quelque chose de correct. Je passe en smart cache du CSS et paf , des bugs partout.
    Parcouru de long en large le forum de presta. Désactiver / Réactiver les caches de presta , du CDN de mon serveur , vérifier mon htaccess, sans résultat.
    Je ne suspectais pas mon css , puisque tout était ok sans le smart cache.
    Merci mille fois , il manquait une juste une balise fermante tout à la fin de mon global css …

    1. Bonjour,

      Je suis content que cela aie solutionné votre problème… il est difficile le localiser le bug, car parfois la déformation est très importante.

      Merci pour votre visite !

  2. Bonjour,
    Je rencontre exactement ce problème – avec un thème acheté.
    Depuis activation du cache, ma page d’accueil est totalement déformée (menu qui ne se déroule pas, produits affichés à la verticale), retour haut qui ne fonctionne pas et j’en passe.
    Le développeur du thème me dit de désactiver le cache, je ne suis pas d’accord car le temps de chargement explose.
    J’ai cherché dans le CSS sans succès. Une idée, au vu des problèmes rencontrés, de savoir dans quel fichier chercher ?

    Merci pour votre article.

    1. Bonjour,

      Difficile de répondre à votre question, de mon côté cela m’avait pris un certain temps à identifier les fichiers CSS impactés.

      Pour obtenir une réponse précise, il faudrait dans votre cas solliciter une aide / prestataire externe, car les causes et fichiers concernés peuvent être multiples.

      Merci pour votre visite !

  3. Bonjour Julia

    Pouvez vous me donner le nom du théme , l’url de votre site. Je peux éventuellement jetter un oeil. Le problème peut venir des fichiers .tpl

    Je suis d’accord avec vous , se priver du cache n’est pas une solution acceptable.

    1. Bonjour,

      Désolé je ne peux vous aider sur ce point, il y’a trop de paramètres qui peuvent entrer en compte pour résoudre ce problème.

      Merci pour votre visite !

  4. Merci pour cette piste qui m’a permis de trouver une solution à mon problème.
    Il suffit de désactiver l’option Smart Cache pour voir avec les debuggueurs des navigateurs d’où vient le problème. Dans mon cas c’était une feuille CSS d’un module (de vente privée) qui venait écraser une classe du fichier global.css.
    Merci encore pour le tuyau.

  5. Hello,
    j’ai ce souci… et le problème inverse aussi : certains des modules perdent leurs css quand j’active le smart cache, je l’ai donc laissé désactivé après avoir revérifier les css concernés sans trouver le problème. Mais là, j’ai des css qui ne se chargent pas pour une page cms… mais qui sont bien prises en compte quand j’active le smart cache! Une idée de la source du problème? Je désespère un peu après une journée entière perdue à chercher ce qui cloche!

    1. Hello,

      Franchement difficile de répondre sur ce point, j’ai rencontré ce cas quelques fois seulement… le problème peut venir de règles CSS du thème ou du code CSS des modules. Pour trouver le problème il faut procéder par isolement… désactiver les modules 1 à 1 et faire éventuellement un switch de thème (sur l’original).

      A bientôt !

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *