Créer une boutique Shopify multi-devises sans sacrifier la vitesse

Ce qu’il faut retenir

• La vitesse du multi-devises sur Shopify se résume à un choix : convertir les prix sur les serveurs de Shopify avec Markets natif, ou les convertir dans le navigateur avec une application tierce.
• Shopify Markets natif avec Shopify Payments affiche les prix dans la devise de présentation de l’acheteur côté serveur, ce qui évite les scripts supplémentaires et l’effet de scintillement des prix.
• La plupart des applications de conversion de devises injectent du JavaScript render-blocking et un appel de géolocalisation sur chaque page, puis réécrivent les prix côté client, ce qui est une source fréquente de layout shift.
• Les règles d’arrondi, le sélecteur de devises, les redirections par géolocalisation et le cache affectent tous les performances multi-devises de Shopify plus que ce que les marchands imaginent.
• Fudge crée le sélecteur et le formatage des prix sous forme de code natif du thème, ainsi votre interface de devises n’ajoute pas le poids d’un widget et reste en place si vous désinstallez l’application.

Pour bien gérer la vitesse du multi-devises sur Shopify, il faut que la conversion reste sur les serveurs de Shopify et n’impacte pas l’appareil de l’acheteur. Faites cela, et gérer dix devises ne vous coûtera presque rien. Si vous vous trompez avec une application de conversion trop lourde, chaque page produit comportera un script supplémentaire qui réécrit les prix après que la page a déjà été affichée.

Le problème vient rarement des devises elles-mêmes. C’est la façon dont les prix sont convertis et l’endroit où ce travail s’effectue qui posent problème.

Pourquoi vous pouvez nous faire confiance

Jacques a plus de 15 ans d’expérience en développement et a créé des boutiques en ligne internationales pour des centaines de sites Shopify. Nous développons Fudge, l’opérateur IA pour les boutiques Shopify, noté 4.9 sur le Shopify App Store. Nous travaillons donc directement sur la couche du thème où se trouvent les sélecteurs de devises et le formatage des prix, et nous voyons bien les dégâts qu’une mauvaise implémentation peut causer aux Core Web Vitals.

Pourquoi les configurations multi-devises nuisent à la vitesse

Un prix sur une page produit semble anodin. Convertir ce prix dans la bonne devise pour chaque visiteur ne l’est pas.

Il y a deux endroits où la conversion peut avoir lieu. Sur le serveur, avant que Shopify n’envoie le HTML au navigateur. Ou dans le navigateur, après le chargement de la page, à l’aide d’un JavaScript qui lit l’emplacement de l’acheteur et réécrit chaque prix sur la page.

C’est avec la deuxième approche que les dégâts commencent. Un convertisseur côté client doit faire trois choses coûteuses sur chaque page :

1. Charger son propre JavaScript, souvent render-blocking, avant que les prix ne soient corrects.
2. Faire une recherche de géolocalisation pour deviner le pays du visiteur, généralement via un appel réseau à un point de terminaison tiers.
3. Réécrire le DOM, en trouvant chaque élément de prix et en modifiant le texte après coup.

Chaque étape coûte du temps, et la troisième coûte en stabilité. Lorsque les prix sont réécrits après le premier affichage, les chiffres changent de largeur, les éléments se réorganisent, et vous obtenez un Cumulative Layout Shift (CLS). Google mesure le CLS comme un Core Web Vital, et le « bon » seuil est de 0.1 ou moins.¹ Un prix qui saute de « 49 $ » à « 1 299 kr » après le chargement est exactement le type de décalage qui vous fait basculer du mauvais côté de la ligne.

La page speed est directement liée à la conversion, et elle est liée aux classements SEO. Pour une vue d’ensemble sur les raisons pour lesquelles les boutiques perdent du temps, consultez notre rapport sur l’état des performances Shopify.

Shopify Markets natif vs applications de conversion de devises

Shopify a une réponse native à ce problème, et cela élimine complètement le travail côté client.

Shopify Markets vous permet de vendre dans différents pays et régions avec des devises locales. Lorsqu’un marché utilise une devise locale, Shopify convertit les prix de votre boutique dans la devise de présentation de l’acheteur et les rend côté serveur, de sorte que le navigateur reçoit les bons prix dans le HTML initial.² Combiné à Shopify Payments, l’acheteur paie également dans cette devise de présentation lors du checkout, la conversion étant gérée par la plateforme.³

C’est la différence clé. Markets natif effectue la conversion avant l’envoi de la page. Une application de conversion le fait après l’arrivée de la page.

Voici comment les deux approches se comparent sur les critères qui déterminent la vitesse.

Passer par une application peut sembler pratique parce que vous l’installez et que ça marche tout de suite. Le coût caché, c’est un script sur chaque page et un clignotement des prix qui nuit à la fois au CLS et à la confiance des acheteurs. Pour un guide d’installation complet, consultez notre guide de configuration multidevise Shopify.

Comment Markets natif garde des prix rapides

Si Markets natif est plus rapide, ce n’est pas un tour de magie. C’est simplement que le travail coûteux n’atteint jamais le navigateur.

Les prix arrivent déjà convertis et déjà formatés dans le HTML, il n’y a donc aucun script render-blocking qui attend de les corriger et aucune réécriture des prix côté client pour causer un layout shift. Le navigateur affiche le bon chiffre une fois et n’y touche plus.

Dans votre thème, les prix passent toujours par les filtres money de Liquid. La différence est que Shopify résout la devise de présentation sur le serveur et que le filtre sort la valeur locale :

{% comment %} S'affiche dans la devise de présentation de l'acheteur, côté serveur {% endcomment %}
<span class="price">{{ product.price | money }}</span>

Pas d’élément enveloppant (wrapper), pas d’attribut de donnée (data attribute) pour qu’un script le trouve plus tard, pas d’état « de chargement » sur le prix. C’est la forme que doit prendre chaque prix sur votre page.

Arrondi et formatage des prix

Les prix convertis tombent rarement juste. Un produit à 49,00 $ avec un taux de change en direct pourrait atterrir sur 1 287,43 dans une autre devise, ce qui semble cassé à côté d’un catalogue de chiffres ronds.

Shopify Markets vous permet de définir des règles d’arrondi par marché, afin que les prix convertis se terminent de façon logique par .00 ou .99 pour chaque devise.³ C’est une décision d’affichage et de tarification, pas de performance, mais cela compte : l’arrondi est appliqué côté serveur, il ne coûte donc rien au moment du rendu et permet à vos prix de paraître intentionnels plutôt que générés par une machine.

Le formatage suit la même logique. Les séparateurs de milliers, les marques décimales et le symbole de la devise proviennent tous des paramètres de format de devise de Shopify et sont rendus dans le HTML. Une application de conversion qui reformate les nombres en JavaScript refait un travail que la plateforme fait déjà gratuitement.

Le sélecteur de devise et son coût

Les acheteurs ont besoin d’un moyen de changer de devise ou de pays, et c’est là qu’une configuration native peut tout de même poser problème.

Le sélecteur lui-même devrait être un simple formulaire rendu côté serveur, et non un widget JavaScript qui récupère les options au chargement. Le formulaire de localisation de Shopify vous offre exactement cela :

{% form 'localization' %}
  <select name="country_code">
    {% for country in localization.available_countries %}
      <option value="{{ country.iso_code }}"{% if country.iso_code == localization.country.iso_code %} selected{% endif %}>
        {{ country.name }} ({{ country.currency.iso_code }} {{ country.currency.symbol }})
      </option>
    {% endfor %}
  </select>
  <button type="submit">Mettre à jour</button>
{% endform %}

Un sélecteur natif comme celui-ci ajoute quelques éléments de balisage et aucun script supplémentaire. En revanche, un widget tiers de changement de devise est souvent l’élément le plus lourd de la page : il a son propre bundle, ses propres styles et son propre appel de géolocalisation.

Géolocalisation, mise en cache et contenu dupliqué

Au-delà du prix affiché sur la page, trois détails au niveau de la plateforme influencent les performances du multi-devises et le SEO.

Redirections par géolocalisation. De nombreuses boutiques redirigent automatiquement les visiteurs vers une URL spécifique à leur pays en fonction de leur adresse IP. Fait côté client, cela ajoute une requête et une redirection avant même que l’acheteur ne voie quoi que ce soit. L’application gratuite Geolocation de Shopify peut suggérer le bon marché avec une recommandation légère au lieu de forcer une redirection stricte, ce qui évite cet aller-retour. Préférez une suggestion que l’acheteur peut ignorer plutôt qu’une redirection automatique qui bloque le first paint.

Le cache et le CDN. Les prix rendus côté serveur peuvent être mis en cache, c’est l’une des raisons pour lesquelles la conversion native est rapide. Les convertisseurs côté client compromettent cela en faisant dépendre la “bonne” version de la page d’un JavaScript qui s’exécute après que le HTML en cache a été servi. En gardant la conversion côté serveur, vous laissez le CDN faire son travail.

Contenu dupliqué. Proposer le même catalogue sur plusieurs marchés peut créer des pages presque identiques qui se font concurrence dans les résultats de recherche. La configuration Markets de Shopify gère la structure des URL et le routage localisé pour que chaque marché soit bien distinct. Le lien avec les performances est ici indirect mais bien réel : moins de chaînes de redirection et un routage plus propre signifient moins de requêtes inutiles.

Considérations sur les balises hreflang et les locales

La devise et la langue sont des axes distincts, mais ils voyagent ensemble dans les boutiques internationales.

Globalement, les balises hreflang indiquent à Google quelle URL sert quelle langue et quelle région, afin que la bonne version se classe pour le bon public. Shopify Markets émet ces balises pour vos marchés configurés lorsque vous utilisez ses URL localisées. Vous n’avez pas besoin de créer les balises à la main, mais vous devriez confirmer qu’elles sont présentes, car un ensemble hreflang manquant ou erroné envoie les moteurs de recherche vers la mauvaise page régionale. Pour une vision stratégique de la façon dont les marchés, les langues et les devises s’articulent, consultez notre guide sur Shopify Markets.

Une checklist pour garder vos Core Web Vitals au vert avec plusieurs devises

Utilisez ceci pour auditer une boutique multi-devises existante ou pour en planifier une nouvelle. L’objectif est d’atteindre les trois seuils des Core Web Vitals : un LCP en moins de 2,5 secondes, un CLS de 0.1 ou moins, et un INP de 200 millisecondes ou moins.¹

• Convertissez sur le serveur, pas dans le navigateur. Utilisez Shopify Markets natif avec Shopify Payments pour que les prix arrivent corrects dans le HTML.
• Supprimez toute application de conversion de devises côté client si Markets natif couvre vos devises. C’est généralement un poids redondant.
• Affichez le sélecteur de devises comme un formulaire côté serveur, pas comme un widget JavaScript.
• Définissez des règles d’arrondi par marché pour que les prix semblent intentionnels et soient résolus côté serveur.
• Évitez les redirections strictes par géolocalisation. Préférez une recommandation de marché qu’il est possible de fermer plutôt qu’une redirection bloquante.
• Vérifiez s’il y a un layout shift sur les éléments de prix. Si un prix change après le chargement, quelque chose le réécrit côté client.
• Confirmez que les balises hreflang existent pour chaque marché afin que les pages régionales soient correctement référencées.
• Corrigez d’abord la vitesse de base du thème. Le multi-devises ne sauvera pas un thème lent.

Ce dernier point est important. Si votre boutique est déjà lente, la gestion des devises n’est pas votre premier problème. Commencez par découvrir comment accélérer un thème Shopify, et si de gros médias sont en cause, le lazy loading des images est souvent le plus grand gain individuel.

Où Fudge entre en jeu

Markets natif s’occupe de la conversion. Ce qu’il ne fait pas, c’est construire l’interface utilisateur de la boutique autour de cela : le sélecteur de devises, le formatage des prix, l’apparence générale dans votre thème. Ce travail doit toujours être fait par quelqu’un.

Fudge, l’opérateur IA pour les boutiques Shopify, écrit du code natif pour votre thème. Vous décrivez ce que vous voulez : “ajoute un sélecteur de devises et de pays à mon header qui correspond à ma marque, et formate les prix pour chaque marché”, et il écrit le Liquid, le CSS et le JavaScript directement dans votre thème sous forme de brouillon que vous pouvez prévisualiser avant de publier.

Puisque le résultat est natif, il n’y a aucun widget de devises tiers qui se charge sur chaque page, aucun script supplémentaire bloquant le rendu, et aucun appel de géolocalisation greffé par une application. Le sélecteur est un balisage que votre boutique comprend déjà, son poids est donc pratiquement nul.

Et comme il s’agit du code de votre thème, il survit à la désinstallation. Annulez Fudge et le sélecteur ainsi que le formatage resteront exactement là où ils sont, contrairement à un élément généré par une application qui disparaît lorsque vous la supprimez. Il en va de même pour tout ce que vous modifiez avec l’éditeur de boutique. Si vous n’êtes pas sûr de ce que vous coûte votre configuration actuelle de devises, demandez d’abord à Fudge un audit de performance : il liste ce qui ralentit vos pages et prépare les correctifs dans votre thème pour que vous les validiez.

FAQ