Ta boutique Prestashop encore plus rapide avec CCC & CDN

C’est quoi CCC ? C’est quand la banque a perdu son triple A ?  Et bien non pas tout à fait, cette option permet de gagner en vitesse de chargement sur ta boutique Prestashop… on va regarder cette option de plus près.



Non mais sérieux c’est quoi les CCC ?

Et bien c’est une manière de mettre en cache les feuilles CSS et les fichiers JS… (via Smartcache) plus les éléments sont en cache plus le site est rapide.  Dans le cas présent une boutique peut avoir énormément de fichier CSS et JS à charger, si on active cette gestion du cache pour ces éléments, le chargement se fera plus rapidement… c’est toujours ça de pris.

Sous l’onglet « Préférences -> Performance », je vous conseille d’activer uniquement les 2 premières options. Pourquoi éviter les 2 autres ? Parce que voilà… je suis pas tranquille avec la compression du code, des fois sous Internet Explorer on voit des bizarreries ou du Javascript qui ne fonctionne pas. Il est aussi plus facile pour parcourir le code du site en production, si on n’active pas cette option… sinon on se retrouve avec un gros bloc de code compact.

Et le CDN ?
C’est quoi le CDN ? C’est le content delivery network (ouf tu l’entends pas quand je le prononce)… en gros c’est une manière de mettre le contenu encore plus rapidement à la disposition de l’internaute. Normalement le CDN permet un accès plus rapide du site aux internautes (peu importe leur localisation), dans certains cas il est possible d’utiliser un service externe pour charger les données à travers un autre serveur… enfin je vous invite à regarder ça sur le site de MaxCDN y’a même une vidéo.

Mais nous on va faire un peu autrement et « gratuitement »… Il faut comprendre que le navigateur ne peut pas traiter plus de X requêtes HTTP en même temps… (genre une dizaine à ce que j’ai vu). Par requêtes il faut comprendre qu’il peut charger par exemple par tranche de 10 fichiers CSS à la fois… s’il y’en a 30 ben il devra le faire en plusieurs fois.

Du coup l’idée est de créer 3 sous domaines… qui ne servent à rien concrètement et d’utiliser les serveurs de médias de Prestashop. Du coup… le chargement va se répartir sur les 3 sous-domaines indiqués et mettre 3 fois moins de temps (enfin mathématiquement parlant)… De cette manière le navigateur pourrait charger d’une traite les 30 fichiers CSS,  il ferait une répartition 10 CSS pour le sous-domaine 1, 10 CSS pour le sous domaine 2 etc..

Par exemple dans mon cas j’ai créé 3 sous domaine chez Infomaniak, du genre cd1.nomdedomaine.ch,cd1.nomdedomaine.ch etc…

Puis ensuite j’ai simplement reporté ces sous-domaines dans la configuration des serveurs de médias, en dessous de CCC (qu’on a vu avant).

Et puis c’est tout… il n’y a rien à faire d’autres, pas besoin de modifier des informations dans le fichier .htaccess ou de toucher des paramètres dans le répertoire « config » de Prestashop.

Ensuite, si vous affichez votre site, vous verrez dans le code source, que les urls ont été subdivisées automatiquement en fonction des ressources disponibles au moment du chargement (l’assignation des CDN est aléatoire).

Et la vitesse alors ?
Pour mieux montrer la comparaison j’ai fait un tableau de test de vitesse sur différentes pages et surprise… le plus souvent la page est plus rapide « sans le CDN » c’est fou non ?

Mais pourtant je l’ai quand même laissé activé ! Pourquoi ? Parce qu’il y’a un autre paramètre qui entre en jeu… Et oui, la vitesse ressentie lors du chargement est meilleure « avec le CDN » ! Le navigateur ne continue pas à charger les éléments… on sent bien que le chargement se fait en « bloc » d’ailleurs parfois ça donne presque la sensation d’un « lag / blocage », mais les éléments sont affichés « simultanément » et pas vraiment  « progressivement »… du coup pour la navigation c’est quand même plus cool.

Bilan
Oui mais c’est bien ou c’est de la daube ? Je pense que le mieux c’est de tester sur votre site, mais je pense que la page se charge quand même plus vite avec le CDN… on a moins l’impression d’attendre que la page finisse de se charger (non sérieux… on voit la différence). Bon après si t’as un serveur moisi chez Lws Super Mega Hard Discount de FOU je peux rien pour toi (haha obligé de me moquer un coup). Peut-être que sur la partie technique j’ai pas été méga super-clair… mais mon but c’était d’expliquer le fonctionnement général et de pas trop faire l’informaticien boutonneux… binoclard sur des chiffres trop techniques 😀 !

46 commentaires sur “Ta boutique Prestashop encore plus rapide avec CCC & CDN”

  1. Et de créer plus de sous domaines? trois c’est déjà bien..mais imaginons 30 en exemple? quid de la répartition..plus rapide donc?

    Bref en tous cas, je n’y avais jamais pensé! merci une de fois plus.

    1. J’ai pas exploré cette piste, mais comme ils proposent uniquement 3 serveurs de médias pas plus…
      Logiquement il ne devrait pas y avoir de limites… mais peut-être à faire confirmer par un expert du milieu.

  2. Merci pour cet article, je suis justement en train de tenter d’améliorer la rapidité d’affichage de ma boutique.

    J’ai voulu implanter les CDN comme tu l’as exposé mais comme ma boutique se trouve dans un sous-répertoire « /boutique » cela ne fonctionne pas :/

    Est-ce que tu saurais par hasard comment remédier à cela ?

    Merci pour tout !

    yonni

    1. J’ai pas essayé avec une boutique dans un sous-répertoire, peut-être que dans ce cas là il faudrait :

      > rediriger le sous domaine « .cdn » vers ton répertoire « /boutique » (si tu peux configurer ça via ton panel admin de ton hébergeur)
      > ou alors faire une règle dans le .htaccess à la racine de ton hébergement pour rediriger ces 3 sous-domaines vers « /boutique »

      Oui.. heu j’ai dit que y’avait pas besoin de trifouiller… mais c’est dans le cas où la boutique se trouve directement à la racine de l’hébergement 😉

  3. Merci de ta réponse Germain 🙂

    En fait j’ai essayé pendant plusieurs heures !

    Je viens tout juste de trouver une solution via le htaccess !
    Voici mes directives :

    RewriteEngine On

    RewriteCond %{HTTP_HOST} ^cdn3.mondomaine.com$
    RewriteRule ^(.*) http://www.mondomaine.com/$1

    L’astuce réside dans la redirection mondomaine.com/$1 au lieu de mondomaine.com/boutique/$1 puisque la redirection vers /boutique, elle, se fait dans le .htaccess de la racine !

    Donc çà marche mais je l’ai enlevé ^^ car je me pose encore des questions par rapport au duplicate content ? Et en essayant de comparer avant/apres avec Gtmetrix.com, j’ai sensiblement le même temps d’affichage.

    yonni

  4. Très bon article. 😀

    Je trouve que c’est clair, j’ai déjà essayé le CDN et pour bien comprendre de quoi il s’agissait, j’ai du faire plusieurs blogs avant d’avoir bien compris.

    Au final, je l’ai désactivé, car comme tu nous le montre la vitesse de chargement est plus rapide sans CDN.

    Mais du tout ton article me fait faire un retour en arrière. 🙂
    Je vais paramétrer à nouveau le CDN et voir si on ressent vraiment la différence. Donc encore merci pour ton article.

    1. Au niveau du ressenti utilisateur, je pense que oui c’est meilleur… (en tout cas dans mon cas)
      Il faudrait voir aussi quand on avance dans le temps et qu’on se retrouve genre 2 ans plus tard avec 10’000 produits si on a toujours la même sensation et si en terme de vitesse cette fois l’écart se creuse avec ou sans CDN.

      1. Oui, c’est sûr il faut garder un oeil dessus pour voir si avec l’évolution de la boutique, il y a un écart qui se creuse avec/sans CDN.

        Par contre, en remettant en place le CDN hier soir, je me suis souvenu d’une autre raison pour laquelle je l’avais ôter.
        Dès qu’il s’agit d’une page https:// sa pose pas mal de soucis au niveau du chargement de la page. Celle-ci ne s’affiche pas du tout correctement.
        C’est comme s’il oubliait de prendre en compte tous les fichier tpl

        Est-ce que tu saurais par hasard comment remédier à ce problème d’affichage ?

        1. De mon côté j’ai pas testé avec le https, en principe je laisse le soin de sécuriser uniquement le processus de paiement, mais cela est pris en charge via le provider e-payment.
          J’ai déjà remarqué qu’en mode https, y’a des trucs qui ne fonctionnent pas toujours, ça augmente le risque de conflits (aussi dans l’utilisation de certains modules).

  5. J’avais testé le CDN, et c’était moins rapide avec. Je pense que c’est bien pour des sites avec des fichiers lourds, mais pour des « petits » sites, j’avais des meilleurs temps de première connection sans, et du coup c’était plus rapide. L’effet est néglieable par rapport à un hébergement de qualité.

    1. Merci pour ce retour, effectivement il y a je pense aussi une notion de volume et de trafic à prendre en compte dans le test.
      Dans le cas de mes clients, qui sont des « petites » boutiques, je n’ai pas activé cette option et c’est suffisant au niveau de la vitesse.

  6. Bonjour
    d’abord merci pour tout ces tutos ! c’est d’une aide précieuse.

    bon alors par contre (oui je suis pas la juste pour ca lol) soit je suis complétement abrut… soit j’ai raté un épisode (peut-etre les 2 ^^)

    j’ai suivi ton explication.
    créé 3 sous domaines, puis j’ai créé 3 dossiers du même nom a la racine du site.
    activé uniquement CCC

    alors ca charge plus vite : je n’ai plus aucunes images sur mon site … :/
    meme en faisant une régénération d’images

    pour ton info je suis chez 1&1 en hébergement (que je recommande pas du tout)

    merci pour ton aide

    1. Salut, il faudrait regarder les urls des images vers quel chemin ça pointe… mais je sais pas comment fonctionne l’hébergeur 1&1…
      Si tu as dû créer des répertoires je me demande si tu devra séparer les répertoires de ta boutique Prestashop dans les répertoires du sous-domaine.

    2. Salut,

      Même problème pour moi avec un serveur dédié chez 1&1.

      J’ai créé 3 sous domaines :
      – media1.domaine.com
      – media2.domaine.com
      – media3.domaine.com

      Mon site se trouve sur l’arborescence suivante :
      /www/domaine/prestashop/

      Les 3 sous domaines pointent vers :
      /www/domaine/prestashop/

      Après validation, plus d’images sur la boutique… surprenant.
      L’url des images sont du style :
      – media1.domaine.com/17566-productlist/robe-pakaa-myose-italia.jpg

      J’ai testé en localhost sur mon backup :
      – localhost/prestashop/
      – 127.0.0.1

      Aucun problème en localhost…

      1. Hello,
        A la limite il faudrait presque essayer de créer 3 règles dans le .htaccess pour forcer les 3 sous domaines :
        media1.domaine.com > media1.domaine.com/prestashop
        media2.domaine.com > media2.domaine.com/prestashop
        media3.domaine.com > media3.domaine.com/prestashop

  7. @Webbax

    Les urls de mes images sans CDN :
    – domaine.com/17566-productlist/robe-pakaa-myose-italia.jpg

    Les urls de mes images avec CDN :
    – media1.domaine.com/17566-productlist/robe-pakaa-myose-italia.jpg

    Sans CDN -> image
    Avec CDN -> Pas d’image

    Quand je supprime la réécriture des urls, je n’ai aucun problème mais je ne trouve pas qu’il y ai amélioration du temps de chargement.

    Je pense que le problème vient du mod_rewrite chez 1&1.


    Autres pistes à tester pour accélérer la boutique.

    Héberger les cdn sur un autre serveur dédié uniquement aux médias avec d’autres domaines :
    – media1-mondomaine.com
    – media2-mondomaine.com
    – media3-mondomaine.com

    Mettre en place google pagespeed service pour le site et pour les CDN.
    https://www.youtube.com/watch?feature=player_embedded&v=dOcGW95oyL0

    Je pense que ces solutions apporteraient la meilleure option pour les chargement du site.

    A suivre…

  8. J’ai enfin trouvé d’ou venait le problème chez 1&1.
    Lors de la mise en place des CDN, il y a une re-génération du .htaccess.

    Dans celui ci, il faut remplacer / ajouter :
    RewriteEngine On

    Par :
    Options +FollowSymLinks
    RewriteEngine On
    RewriteBase /

    Par contre après tests sur Google Pagespeed c’est une seconde de perdu (en plus).

    Donc procédure a tester :
    – Héberger les images sur un autre serveur avec un nom de domaine différent et voir si il y a amélioration.

      1. Après plusieurs tests pagespeed, la page met en moyen 1sec de plus pour s’afficher. Surprenant…

        Je vais faire d’autres tests en hébergeant les cdn sur un autre serveur pour voir le résultat. (dès que j’aurai le temps)

  9. Bonjour,

    tu précise bien que tu crée tes sous domaines et que tu pointe par exemple :
    cdn3.autodingo.ch —–vers—> http://autodingo.ch/cdn3

    et c’est le dernier cdn3 qui me gêne est ce que le simple fait de le mettre la va le créer ou faut t’il en créer un vide dans l’arborescence ?
    merci,

    cette méthode marche t’elle sur la version 1.5.3.1 de presta ?

  10. Hello,

    Le principe est le même pour les 3 CDN, il faut d’abord créer le sous-domaine puis ensuite indiquer l’url.

    Mais sincèrement je pense que ce n’est pas vraiment une bonne solution pour gagner en performance et pire… on ne gagne pas « toujours en vitesse ».

    Je n’ai pas essayé sous Prestashop 1.5 pour voir, mais le principe reste valable.

    A +

    1. cela ne sera pas plus rapide même si j’ai beaucoup de photos ? sinon quelle est alors al meilleure methode pour améliorer la fluidité/rapidité du site ? merci

    1. Bonjour,

      Concernant le CCC il suffit simplement de choisir l’option activer la compression… mais les impacts restent minimes au niveau de la vitesse.

      Pour le CDN en version 1.6 je n’ai pas fait le test, je pense que ce type d’option est à activer quand tout le reste autour est déjà bien optimisé (pour des petites et moyennes boutiques, on en mesure rarement l’efficacité).

      Merci pour votre visite !

    1. Bonjour,

      Concernant Google Analytics, une fois le code de tracking mis en place (avec le module natif) le reste se fait tout seul.

      Si vous désirez aller plus loin, il faudra faire une recherche sur « prestashop tunnel conversion google analytics ».

      Tout dépend du niveau actuel de votre boutique…

    1. Hello,

      Non parce que l’url des pages de la boutique ne changent pas, c’est juste les liens des fichiers contenus dans la page qui eux peuvent changer.

      A bientôt !

  11. Hello, j’ai fait quelques tests, pour ma part ça fonction sauf pour les icones du thème générés en font awesome rien à faire pour les faire apparaîtres je reste perplexe 🙁

    si quelqu’un a une idée je suis preneur 🙂

    mes 3 sous domaines pointent tous vers mon public_html

    1. Hello,

      Pas d’idée comme ça, mais sincèrement le gain CDN n’est pas assez tangible sur des petites / moyennes boutiques.

      Pour le CCC passe encore, mais le gain reste aussi généralement très faible.

      Merci pour votre visite !

    1. Bonjour,

      Actuellement je n’ai pas trop creusé cette fonction dans Prestashop 1.7 et je n’ai pas encore le retour d’expérience suffisant sur le sujet (sur des cas de boutiques en production). Il faut voir aussi si le problème survient avec le thème par défaut ou si cela survient uniquement sur un thème customisé, cela peut en être la cause.

      A bientôt !

  12. Bonjour,

    Je me permets de relancer le sujet.
    Je souhaite mettre en place les serveurs de media en créant 3 sous-domaines qui pointeront vers la racine de mon site sous Prestashop 1.6
    Je me demande si cela a des conséquences sur le référencement des images, car a priori, leurs urls devraient changer ?

    Merci

  13. Bonjour,
    il n’y a que 3 serveurs de média sur prestashop 1.7.4 et j’ai déjà créé mes 3 sous domaines mais pour installer mon CDN j’ai besoin d’ un quatrième emplacement pour mon site en www. y a t il une solution peut on créer un 4ème emplacement
    dans CCC
    merci

    1. Bonjour,

      Sur les CCC Prestashop j’ai jamais eu l’occasion d’ajouter un 4ème emplacement, peut-être qu’une solution plus pratique serait plutôt d’utiliser « Cloudflare » en amont plutôt que d’essayer de faire ça dans Prestashop.

      A bientôt !

  14. Rebonjour,
    excusez moi j’ai une autre question, j’ai installé Cloudfare sur mon Prestashop 1.7.4 et je vois qu’il y a un onglet minify js, css, html, est-ce que ça présente un risque pour le thème du site, puis-je les activer sans risquer de modifier mon template ?
    Encore merci pour votre réponse, je suis fan de vos tutos!

    1. Bonjour,

      En principe si vous avez Cloudflare, je conseille plutôt d’activer la compression directement sur Cloudlfare plutôt que de le faire sur Prestashop (la double compression n’est pas forcément une bonne idée).

      Merci pour le retour positif !

Laisser un commentaire

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