Serveurs de médias pour un CDN dans PrestaShop : configuration pas à pas

Les serveurs de médias de PrestaShop permettent de charger les images, le CSS et le JavaScript de la boutique depuis un autre domaine que le domaine principal. Leur usage actuel est de connecter un CDN, qui distribue ces fichiers depuis le serveur le plus proche de chaque visiteur.

Un CDN accélère le chargement des ressources, surtout pour les visiteurs éloignés de l'Espagne. Il n'accélère ni les requêtes de la boutique ni le processus d'achat : cela dépend de l'hébergement et du cache de PrestaShop.

Domain sharding : cela ne sert plus

Autrefois, on utilisait les serveurs de médias pour répartir les fichiers entre plusieurs sous-domaines du même serveur (cdn1.tutienda.com, cdn2.tutienda.com), une technique appelée domain sharding. Elle permettait de contourner la limite de connexions par domaine de HTTP/1.1.

Nos serveurs utilisent HTTP/2 et HTTP/3, qui chargent de nombreux fichiers en même temps sur une seule connexion. Avec eux, le domain sharding n'améliore rien et ajoute des connexions supplémentaires. Si votre boutique a cdn1 et cdn2 configurés vers le même hébergement, videz ces champs (nous expliquons où plus bas) et videz le cache.

Étape 1 : activer CCC

Les serveurs de médias doivent être utilisés avec CCC (Concaténation, Compression et Cache) activé. Dans l'administration de PrestaShop, allez dans Paramètres avancés > Performances et, dans la section CCC, réglez :

• Smart cache pour les feuilles de style (CSS) : Oui
• Smart cache pour le JavaScript : Oui
• Optimisation Apache : Non. Nos serveurs LiteSpeed compressent déjà avec Brotli et Gzip d'eux-mêmes.

Dans PrestaShop 1.6 apparaissent aussi les options pour combiner et minifier le CSS et le JavaScript et Déplacer le JavaScript en fin de page ; activez-les également.

Enregistrez et vérifiez la boutique : menus, filtres, déclinaisons de produits, bandeau des cookies et panier. Combiner le JavaScript peut provoquer des conflits entre modules qui cassent les listes déroulantes, les fenêtres modales ou le panier. Dans ce cas, désactivez Smart cache pour le JavaScript, videz le cache et vérifiez si le problème disparaît.

Étape 2 : créer le CDN (exemple avec Bunny)

Nous recommandons un CDN de type Pull Zone, comme Bunny : vous n'avez rien à envoyer. Lorsqu'un visiteur demande un fichier que le CDN n'a pas, celui-ci le télécharge depuis votre boutique, le conserve et le sert depuis son réseau aux visiteurs suivants. KeyCDN, Amazon CloudFront et d'autres fonctionnent aussi sur le même modèle.

1. Dans le panneau de Bunny, créez une Pull Zone.
2. Dans Origin URL, indiquez l'adresse de votre boutique en HTTPS : https://tutienda.com.
3. Bunny vous attribue un nom du type tutienda.b-cdn.net. Vérifiez qu'il fonctionne en ouvrant une image de la boutique avec ce nom, par exemple https://tutienda.b-cdn.net/img/logo.jpg.

Pour utiliser votre propre nom, comme cdn.tutienda.com :

1. Dans la Pull Zone, allez dans General > Hostnames et ajoutez cdn.tutienda.com.

2. Créez un enregistrement CNAME dans les DNS du domaine (dans cPanel, Zone Editor, s'il utilise nos DNS) :

   cdn.tutienda.com.   CNAME   tutienda.b-cdn.net.
   

3. Une fois le CNAME propagé, revenez dans Bunny et cliquez sur Verify & Activate SSL pour qu'il génère le certificat du sous-domaine.

Si les DNS du domaine sont chez Cloudflare, laissez l'enregistrement cdn avec le nuage gris (DNS uniquement, sans proxy). Le guide de Bunny sur les noms d'hôte personnalisés donne plus de détails.

N'indiquez pas cdn.tutienda.com lui-même comme origine de la Pull Zone : vous créeriez une boucle.

Étape 3 : configurer PrestaShop

1. Allez dans Paramètres avancés > Performances, section Serveurs de médias.

2. Dans Serveur de médias n°1, saisissez uniquement le nom, sans https:// ni barres obliques :

   cdn.tutienda.com
   

   PrestaShop vérifie à l'enregistrement que le nom existe dans les DNS : si vous incluez le protocole ou si le CNAME n'est pas encore propagé, il indiquera que le serveur de médias n°1 n'est pas valide. Si vous n'utilisez pas de nom personnalisé, indiquez celui de Bunny (tutienda.b-cdn.net).

3. Laissez vides les n°2 et n°3.

4. Enregistrez et cliquez sur Vider le cache en haut à droite.

Vérifier que cela fonctionne

Ouvrez la boutique dans une fenêtre privée, appuyez sur F12 et allez dans l'onglet Réseau (Network). Rechargez la page : les images, le CSS et le JavaScript doivent se charger depuis cdn.tutienda.com avec le code 200 et en HTTPS. Le HTML de la page continue de provenir de votre domaine.

Si des images manquent ou si la mise en page se casse

• Les images ne se chargent pas et le navigateur indique qu'il ne trouve pas le serveur : le CNAME n'existe pas ou n'est pas encore propagé. Vérifiez-le dans la zone DNS.
• Erreur de certificat : il manque l'activation du SSL du nom d'hôte dans le CDN. Faites-le avec Verify & Activate SSL.
• Erreur 404 sur le CDN : ouvrez le même chemin sur votre domaine. S'il fonctionne, vérifiez l'Origin URL de la Pull Zone.
• Les icônes ou les polices ne s'affichent pas : le navigateur les bloque à cause de CORS. Dans Bunny, vérifiez dans Headers que l'option Add CORS headers est active avec les extensions woff, woff2, ttf et eot.
• Le menu, le panier ou les filtres échouent alors que tout répond 200 : c'est un conflit JavaScript dû à CCC. Désactivez Smart cache pour le JavaScript et videz le cache.
• Vous modifiez une image ou un CSS et l'ancienne version s'affiche toujours : le CDN conserve sa copie jusqu'à son expiration. Purgez-la dans Bunny (Purge Cache) ou videz le cache de PrestaShop pour qu'il génère des fichiers avec un nouveau nom.

Pour revenir en arrière, videz le champ Serveur de médias n°1, enregistrez et videz le cache de PrestaShop.