Herbelin, allègement de la boutique Shopify de l’horloger français

Une boutique Shopify à alléger, sans changer de thème

À propos d’Herbelin

Herbelin est une maison horlogère française indépendante, fondée en 1947 à Charquemont, dans le Haut-Doubs. Ses collections (Newport, Cap Camarat, Art Déco, Antarès) sont vendues en boutiques agréées et sur herbelin.com, une boutique Shopify récemment migrée depuis WooCommerce, qui met en scène les montres par de grandes vidéos et un configurateur de bracelets.

Pourquoi nous avoir contactés

Après la migration, l’équipe e-commerce nous a confié un pré-audit de performance : quatorze actions chiffrées, du plus rentable au plus technique. Elle en a appliqué une partie en interne, puis nous a demandé de faire la recette de ce qui avait été déployé, de trancher les points discutés et de réaliser nous-mêmes les corrections restantes : une intervention d’optimisation Shopify menée de bout en bout, jusqu’au compte rendu.

Performances attendues

Les Core Web Vitals de terrain étaient déjà « bons » (LCP de 1,3 s au 75e centile sur l’accueil mobile, INP de 129 ms, CLS nul). L’objectif n’était donc pas de sortir d’une zone rouge, mais d’alléger franchement les pages, surtout sur mobile où chaque mégaoctet se paie en données et en batterie, de rendre le premier geste du visiteur plus réactif et de fiabiliser le recueil du consentement.

Enjeux et contraintes

Le thème, un thème Online Store 2.0 en Liquid personnalisé par sections et blocs, est relié au dépôt GitHub du développeur de la marque : toute modification devait s’y retrouver, sans jamais écraser un travail en cours. L’identité visuelle (vidéos plein écran, police de titres variable, police de texte sous licence) devait rester strictement identique à l’œil. Et une partie du poids ne dépend pas du thème mais de la plateforme elle-même : il fallait distinguer ce qui se corrige de ce qui ne se corrige pas, pour ne facturer que des gains réels.

Les étapes du projet

Alignement technique : la recette du pré-audit

Chaque action du pré-audit a été recontrôlée avec le même protocole de mesure (GTmetrix depuis Paris, mobile Pixel 9 en 4G, ordinateur non bridé), sur le thème en ligne. Verdict : trois actions déclarées faites l’étaient bien (images éditoriales converties, variantes d’images plafonnées, décodage asynchrone), quatre points discutés par l’équipe étaient fondés, et deux actions clés n’avaient pas produit leur effet. Aucun gain n’est affiché sans une mesure avant et après, sur le même protocole.

Implémentation du tracking : un consentement enfin respecté

La bannière de consentement s’affichait, mais son bloqueur était inactif : les outils d’analyse, de ciblage et de mesure d’audience partaient avant tout choix du visiteur. Nous avons activé le blocage strict de la CMP, déclaré les domaines que son bloqueur automatique ne reconnaissait pas, et soumis au consentement le pixel personnalisé déclaré dans les événements clients (Web Pixels) de Shopify. Un contrôle sur plusieurs chargements en navigation vierge a ensuite révélé qu’un script d’application pouvait encore passer devant le bloqueur, selon l’ordre d’arrivée des fichiers : le thème le retient désormais lui-même et ne le relâche qu’au consentement marketing, lu par l’API Customer Privacy de Shopify. Six chargements sur six sont propres, et tout se charge normalement dès que le visiteur accepte.

Optimisation du Shopify : ce qui a été corrigé

« Login with Shop », deux iframes cachées sur chaque page. Le réglage de l’admin ne se désactive pas sans Shop Pay. En cause : les deux composants natifs <shopify-account> de l’en-tête et du menu, qui préparaient la connexion Shop pour chaque visiteur non connecté : deux iframes de 248 Ko, un script de compte aux tâches longues de 80 à 167 ms, une police et un sprite dédiés. Le composant n’est plus servi qu’aux clients connectés ; les autres voient la même icône, reliée à la page de connexion. Résultat : 126 requêtes et 0,85 Mo de moins sur l’accueil ordinateur.

Un chargement différé des scripts, mais intelligent. Le mécanisme en place retenait les scripts d’applications jusqu’au premier geste du visiteur, puis relâchait tout d’un bloc : 87 médias hors écran, une cinquantaine de requêtes et 34 ms de travail synchrone au moment précis où le visiteur agit. Nous l’avons remplacé par le chargeur maison de l’agence, adapté à Shopify : interception ciblée des scripts que la plateforme injecte par content_for_header (ScriptTags des applications, statistiques, fonctionnalités Shop Pay) ou par les blocs d’application, exécution en période d’inactivité du processeur, échelonnement, et médias chargés seulement à l’approche de l’écran, carrousels compris. Le travail au premier geste tombe à 9 ms. Les statistiques Shopify et Shop Pay, dont l’exécution déclenche le préchargement du tunnel de paiement (61 requêtes), sont réservées à une interaction réelle.

Des vidéos mobiles réencodées au bon débit. Sur téléphone, l’accueil lisait 9,8 Mo de vidéo. La définition était juste ; le débit, non. Nous avons produit une échelle d’encodages x264 et mesuré chacun avec VMAF, l’indicateur de qualité perçue de Netflix, pour retenir le premier palier au-dessus de 95/100. La vidéo de fond, servie en 1920 × 1080 alors que l’écran n’en montre qu’une bande de 486 pixels, est recadrée pour les téléphones en portrait. Les fichiers sont servis depuis les assets du thème, que Shopify sert tels quels (une vidéo déposée dans les fichiers de l’admin est, elle, réencodée en flux adaptatif HLS), et une source <source media> les réserve aux téléphones : 3,7 Mo au total, sans différence visible.

Une police de titres réduite de moitié, et conforme à sa licence. La police variable des titres embarquait deux axes complets (largeur et graisse) et 543 caractères, alors que le thème fige la largeur et n’utilise que les graisses 300 à 700. Instanciée et limitée à l’alphabet latin, elle passe de 158 à 69 Ko, sans un pixel de différence sur 60 éléments comparés. Sa licence libre réservant le nom d’origine, la version allégée a été renommée. Enfin, chaque graisse dispose d’une police de repli calibrée sur des textes du site et enregistrée dans No More Font Shift, l’outil de l’agence, pour que le texte ne bouge plus à l’arrivée de la police : écart de largeur inférieur à 0,4 %.

Compte-rendu d’intervention

Chaque modification a été mise en ligne fichier par fichier, après avoir vérifié que la version en ligne n’avait pas changé entre-temps, et se retrouve dans le dépôt GitHub de la marque avec sa procédure de retour arrière. Le compte rendu de 14 pages détaille chaque chantier, les mesures avant et après et les points laissés à la décision du client, ainsi que les choix techniques à respecter pour que les prochaines évolutions du thème suivent la même direction.

Ce que le thème contrôle, et ce qu’il ne contrôle pas

Pourquoi cette boutique Shopify était-elle lente ?

Pas à cause de Shopify en soi, mais de ce qui s’ajoute au thème : des composants natifs dupliqués qui préparent des services invisibles, des applications qui injectent leurs scripts dans l’en-tête, des vidéos encodées pour la fibre, une police chargée avec des variantes jamais affichées. Sur l’accueil mobile, près de 230 requêtes sur 321 étaient évitables.

Que peut-on optimiser, et ne pas optimiser, sur Shopify ?

Le préchargement du checkout (des dizaines de modules chargés après l’affichage) et le Web Pixels Manager de Shopify s’imposent à toutes les boutiques : ils se retardent, ils ne se retirent pas. Tout le reste relève du thème Liquid et des réglages d’applications : composants rendus, scripts injectés dans le <head>, médias, polices, consentement. Le temps de réponse du serveur, lui, reste excellent sur l’infrastructure de Shopify. C’est là que se trouvaient tous les gains mesurés ici.

Faut-il quitter Shopify pour avoir un site rapide ?

Non. Sans changer de plateforme ni de thème, l’accueil mobile a perdu 57 % de son poids et 70 % de ses requêtes. Une optimisation Shopify bien menée travaille avec la plateforme, pas contre elle.

La stack technique

Le résultat en chiffres

Mesures GTmetrix depuis Paris, avant et après intervention, avec le même protocole ; visiteur sans consentement ni interaction.

Accueil ordinateur : de 352 à 188 requêtes et de 2,94 à 1,58 Mo, temps de blocage de 443 à 132 ms. Fiche produit mobile : de 350 à 124 requêtes, LCP de 1,90 à 1,10 s. Score PageSpeed Insights mobile de 71 à 84. Les données terrain de Google, déjà bonnes, intègrent ces gains sur 28 jours glissants.

Votre boutique mérite le même traitement ? Découvrez notre prestation d’optimisation Shopify.

La suite et fin en images