CloudFlare et KeyCDN, le couple parfait pour PrestaShop ?
Au fil des années, CloudFlare a su s'imposer dans le monde des CDN et de la performance des sites.
Si par le passé, j'ai pu expliquer pourquoi vous pouviez vous en passer si votre activité était purement Française ou tout du moins dans le pays où est hébergé votre boutique, la situation et les usages ont évolué concernant ces CDN.
J'ai expérimenté pour vous, un couple de CDN pour obtenir la meilleure configuration en terme de performances, de respect des consignes des outils de tests et aussi en respectant votre porte-monnaie.
Présentation des services utilisés
CloudFlare
CloudFlare est bien plus qu'un CDN mais avons-nous encore besoin de parler de CloudFlare alors que de très bons articles existent sur le sujet comme a pu le faire webbax sur son site : https://www.webbax.ch/2020/02/27/avec-cloudflare-votre-prestashop-ne-sera-plus-en-100eme-page-de-google-ep-49/
Dans notre cas, pour des raisons économiques, je ne parlerais que de la version gratuite de CloudFlare.
Cette solution intègre les bases de sécurité et surtout la gestion des DNS de votre nom de domaine, car là est la vraie force de CloudFlare.
En fonction de votre hébergeur et surtout de l'organisme gérant votre nom de domaine, la prise en compte des nouveaux DNS mis en place par CloudFlare sera plus ou moins longue, mais justement, CloudFlare va corriger ce délai vous permettant par la suite de gérer vos DNS dans CloudFlare avec une prise en compte des modifications rapidement, ce qui peut être un gros plus dans le cadre d'une migration de version ou d'hébergeur.
Cette solution est parfaite pour éviter les attaques DDOS avec un système simple à activer en cas d'attaque, CloudFlare c'est aussi un produit technique performant, complet et accessible si vous prenez bien le temps de vous référer à la documentation ou si vous partagez sa gestion avec votre prestataire technique.
Donc prenez l'habitude de gérer vos DNS sur CloudFlare même si vous ne vous en servez que pour cela, ainsi vous adopterez les bonnes pratiques pour appliquer rapidement vos modifications de DNS.
Voilà, ce sera tout sur le sujet CloudFlare car comme dit précédemment, tout fut déjà publié sur le sujet, donc je laisse vous plonger dans les autres articles sur le sujet.
KeyCDN
Avec KeyCDN on entre réellement dans la gestion d'un vrai CDN, comme je l'imagine, qui va prendre l'intégralité des éléments disponibles en ligne sur votre boutique pour les mettre à disposition dans les meilleures conditions à vos clients.
CloudFlare peut avoir le même fonctionnement, mais vous comprendrez, en lisant intégralement l'article, pourquoi j'ai pris la décision de coupler les deux services.
C'est ce genre de service qui permet de rajouter des serveurs de media dans la configuration du menu Performances de votre boutique.
Avec KeyCDN vous allez donc pouvoir créer une Pull Zone très facilement sans réelle connaissance technique.
Inscription sur KeyCDN
Inscrivez-vous sur KeyCDN gratuitement en profitant de 10$ de crédits offerts lors de votre inscription pour activer très rapidement votre CDN et constater tout de suite les améliorations proposées par ce système.
Création de votre première Pull Zone
À la suite de votre inscription, il vous suffit de sélectionner Zones dans le menu latéral et de cliquer sur le bouton Add Zone.
Ici, il vous suffit de renseigner l'url de base de votre boutique, bien entendu avec que votre nom de domaine et sous répertoire si nécessaire mais sans la référence à la langue si votre boutique possède plusieurs langues.
Il n'est pas nécessaire de déplier les paramètres avancés car ils ne vous serviront pas dans un premier temps et doivent être manipulés par une personne sachant ce qu'elle fait, vous pourrez y revenir après vous être formé en vous référent à la documentation proposée par KeyCDN
Et à la fin de cette procédure, il vous suffit de cliquer sur le bouton Save pour que la création de votre Pull Zone soit initiée.
Récupération de vos éléments
À partir de maintenant il vous suffit de patienter quelques minutes que les fichiers de votre site soient rapatriés dans votre zone et diffusés sur l'ensemble de leurs serveurs dans le monde.
Patientez bien que la petite pastille orange passe au vert.
Configurer PrestaShop avec cette zone
Rendez-vous sur la page Paramètres avancés >> Performances et renseigner l'url de votre Zone créée juste avant dans le premier serveur de media.
Pensez bien à retirer le https:// au debut de l'url.
Et n'oubliez pas, qu'il faut activer le Smartcache pour que la concaténation fonctionne et que Prestashop utilise les serveurs de media pour diffuser vos fichiers statiques.
À partir de maintenant, tous les fichiers statiques pris en charge par votre installation Prestashop seront traités par votre serveur de media, soit les fichiers js, css et images.
Améliorer le poids des images sans effort
Une des fonctionnalités que j'adore sur KeyCDN c'est le post traitement des images qui peut être très poussé, mais dans le cadre de Prestashop il faut faire attention à plusieurs choses.
Si vous avez configuré votre installation pour accepter des images au format PNG, alors vous pouvez rencontré un souci avec ces images si elles sont traitées par KeyCDN, car Prestashop utilise toujours l'extension JPG pour diffuser les images et au post traitement les zones alpha (transparence) définie sur un PNG disparaissent et sont remplacées par du noir.
Pour corriger ce souci, j'ai trouvé une solution deux en un.
KeyCDN permet de proposer des images au format moderne, le WEBP, le format le plus léger spécialement développé pour Internet.
Pour ce faire il faudra effectuer une petite modification de votre thème.
Rendez-vous dans vos fichiers tpl et pour toutes les images, à la fin de l'appel de l'url il vous suffit de rajouter le bout de code suivant :
?format=webp
Automatiquement, KeyCDN diffusera les images appelées avec ce code dans leur url au format WEBP, ce qui est un gain de poids énorme et ravira tous les sites de test connus à ce jour.
Par exemple, pour le logo du site on passera simplement de ce code :
<img class="logo img-responsive" src="{$shop.logo}" alt="{$shop.name}">
à celui-ci :
<img class="logo img-responsive" src="{$shop.logo}?format=webp" alt="{$shop.name}">
Créez votre compte et testez gratuitement KeyCDN (+10$ offerts)
Pourquoi coupler ces deux CDN ?
Je vais répondre directement à cette question sans détour :
Pour une raison économique.
Le coup de traitement journalier de KeyCDN est bien plus bas que celui de CloudFlare, mais attention, à partir d'un certain volume de visite sur votre site, CloudFlare devient plus compétitif.
Pour vous en rendre compte, lancez la partie CloudFlare en gratuit et regardez le volume de données traitées et reportez l'information sur le barème tarifaire de KeyCDN, pour la majorité des boutiques, KeyCDN sera plus avantageux, mais certains préféreront se contenter de CloudFlare pour n'avoir qu'une seule entité à gérer.
Conclusion
Personnellement, j'ai mis en place cette configuration sur mes domaines Prestatoolbox.fr et Prestatoolbox.com pour un coût journalier raisonnable et un gain de performance et de stabilité important.
Lorsque l'on regarde juste ces résultats on pourrait se dire que seul KeyCDN serait nécessaire, mais l'usage de CloudFlare apporte tellement d'avantages dans son offre gratuite qu'il serait dommage de s'en priver.
Vous pouvez aussi jouer sur des éléments différents pour améliorer la visite de vos clients à l'aide de mon module permettant, par exemple, de précharger la page juste en survolant les liens et rendre presque instantanée le changement des pages de votre boutique pour vos clients.
J'espère que cet article aura éclairé vos lanternes sur le sujet de la performance et de la sécurité de votre boutique.
Si vous souhaitez que je vous accompagne sur la mise en place de cette solution, n'hésitez pas à en faire la demande directement.
Discussions