Points à retenir
- Le code inutilisé s’accumule avec les applications désinstallées, les anciennes personnalisations de thème et les sections non utilisées.
- Utilisez Theme Inspector pour trouver le code Liquid lent, et les onglets Network et Coverage des Chrome DevTools pour trouver le JavaScript et le CSS lourds ou inutilisés.
- Trouvez les snippets et sections orphelins en cherchant leurs noms de fichiers dans les fichiers Liquid de votre thème.
- Travaillez toujours sur un thème dupliqué. Supprimer le mauvais code peut casser votre boutique.
Pour supprimer du code inutilisé sur Shopify, dupliquez votre thème, repérez les scripts et feuilles de style lourds ou inutilisés avec Chrome DevTools, cherchez le nom de chaque fichier dans le thème pour confirmer que rien ne le charge, puis supprimez-le sur la copie et prévisualisez avant de publier.
Chaque fois que vous installez une application, essayez une personnalisation ou mettez à jour votre thème, le code s’accumule. Du CSS mort. Des balises script d’applications désinstallées il y a deux ans. Des fichiers de snippet que rien ne charge (render). Au fil du temps, ce code inutilisé ralentit votre boutique sans apporter de valeur.
Le supprimer allège vos pages et ne coûte que du temps.
Comment supprimer du code dans Shopify ?
D’abord, dupliquez votre thème. Boutique en ligne → Thèmes, cliquez sur le menu à trois points (…) à côté de votre thème, puis sur Dupliquer.
Ensuite, sur la copie, cliquez sur le menu à trois points (…) et choisissez Modifier le code. Cela ouvre l’éditeur de code où vous pouvez voir tous les fichiers du thème. Les fichiers individuels peuvent être modifiés ou supprimés ici.
Étape 1 — Identifier ce qui est lent
L’extension gratuite Shopify Theme Inspector pour Chrome montre combien de temps chaque template, section et snippet Liquid prend pour s’exécuter sur le serveur de Shopify. Elle ne mesure pas le temps de chargement des scripts ou autres assets.
Comment l’utiliser :
- Installez l’extension depuis le Chrome Web Store
- Ouvrez votre boutique et appuyez sur F12 pour ouvrir les Chrome DevTools
- Passez sur l’onglet “Theme Inspector”
- Naviguez sur votre boutique — l’extension affiche le temps de rendu par template
Cela vous indique quels templates et sections sont les plus lents à s’afficher. Concentrez le nettoyage de votre Liquid sur ceux qui posent le plus de problèmes.
Pour le JavaScript et le CSS : ouvrez les Chrome DevTools → onglet Network → filtrez par JS ou CSS → rechargez la page. Triez par Size (Taille) pour trouver les plus gros fichiers. Y en a-t-il qui proviennent d’applications que vous n’utilisez plus ? L’onglet Coverage (Cmd+Maj+P → “Show Coverage”) montre quelle proportion de chaque fichier la page utilise réellement.
Pour ce que Shopify compresse déjà, voir comment minifier le CSS et le JavaScript sur Shopify.
Comment supprimer le JavaScript inutilisé dans Shopify
Les restes de scripts d’applications dans theme.liquid. C’est la source la plus courante de JavaScript inutilisé. Ouvrez theme.liquid dans l’éditeur de code et cherchez les balises script faisant référence à des domaines tiers d’applications que vous avez désinstallées.
<!-- Exemple de script restant d'une application de popup désinstallée -->
<script src="https://privy.com/scripts/privy.js"></script>Supprimez toute la balise <script> si l’application n’est plus installée.
Fichiers JavaScript inutilisés dans assets/. Ouvrez le dossier assets/ dans l’éditeur de code. Cherchez des fichiers .js avec des noms faisant référence à des applications ou fonctionnalités que vous n’utilisez plus. Cherchez le nom du fichier dans les fichiers Liquid de votre thème — si rien ne fait un render ou n’inclut le fichier, il peut être supprimé.
Blocs JavaScript de sections. Si vous avez supprimé une section de tous vos templates mais laissé le fichier de la section, son bloc {% javascript %} est toujours compilé dans le bundle JavaScript principal de votre thème. Supprimez complètement les fichiers de sections inutilisés.
Pour un nettoyage étape par étape après la désinstallation d’une application, voir comment supprimer le code restant d’une application sur Shopify.
Comment supprimer le CSS inutilisé
Les feuilles de style inutilisées dans assets/. Cherchez les fichiers .css provenant d’anciennes applications ou personnalisations. Même méthode : cherchez le nom du fichier dans les fichiers Liquid pour vérifier si quelque chose s’en sert.
Le CSS mort dans base.css. Ce sont les règles CSS écrites pour des sections ou des éléments qui n’existent plus. C’est plus difficile à auditer de manière automatique. Des outils comme PurgeCSS (ce n’est pas un outil natif de Shopify, mais il est très utile pour l’analyse) peuvent identifier les sélecteurs CSS qui ne correspondent à aucun HTML sur vos pages en ligne.
L’approche pratique : concentrez-vous sur la suppression de blocs CSS clairement nommés et manifestement obsolètes, plutôt que d’essayer d’auditer chaque règle dans base.css. Les plus grands gains viennent de la suppression de feuilles de style entières plutôt que de règles individuelles.
Comment trouver et supprimer les snippets orphelins
Un snippet est “orphelin” si aucun template, section, ou autre snippet ne le charge.
Trouver les snippets orphelins :
- Allez dans le dossier snippets/ dans l’éditeur de code
- Pour chaque fichier suspect (surtout ceux avec des noms d’applications), cherchez le nom du fichier du snippet dans tout votre thème
- Cherchez
{% render 'snippet-name' %}ou{% include 'snippet-name' %} - S’il n’y a aucun résultat : le snippet est orphelin et peut être supprimé
Snippets orphelins courants : les fichiers portant le nom d’applications (loox-widget.liquid, privy-form.liquid), les anciens snippets de fonctionnalités issus de précédentes personnalisations du thème, et les versions de snippets en doublon.
Comment trouver les sections inutilisées
Les sections sont utilisées si elles sont référencées dans le fichier JSON d’un template ou chargées par une autre section.
Vérifiez les fichiers de templates :
- Ouvrez le dossier templates/
- Chaque fichier de template
.jsonliste les sections qui apparaissent sur ce type de page - Si un fichier de section existe mais n’est listé dans aucun template, il est inutilisé (bien qu’il puisse être accessible via “Ajouter une section” dans l’éditeur de thème)
Vérifiez également les fichiers de groupes de sections (sections/header-group.json, footer-group.json) et layout/theme.liquid pour les balises {% section %} ; une section qui n’est listée dans aucun de ces fichiers peut être supprimée sans risque.
L’ordre de priorité pour le nettoyage
Tout le code inutilisé n’a pas le même impact sur les performances. Concentrez-vous dans cet ordre :
- Scripts externes (balises script d’applications dans theme.liquid) — chacune est une requête HTTP vers un serveur externe
- Gros fichiers JavaScript dans assets/ — surtout tout ce qui dépasse 50 Ko
- Feuilles de style CSS inutilisées — en particulier celles chargées sur chaque page via theme.liquid
- Snippets et sections orphelins — impact plus faible mais c’est une bonne pratique de nettoyage
Pour des optimisations de vitesse au-delà du simple nettoyage, voir comment accélérer un thème Shopify.
Utiliser le theme check intégré de Shopify
Les outils de développement de thèmes de Shopify incluent Theme Check, qui signale divers problèmes de code dont les variables inutilisées et la syntaxe Liquid obsolète. Pour les marchands (contrairement aux développeurs), c’est plus difficile d’y accéder — c’est avant tout un outil CLI.
L’éditeur de code Shopify affiche quelques avertissements basiques. Pour les performances, Theme Inspector couvre le code Liquid lent, et les onglets Network et Coverage des DevTools couvrent les scripts et les feuilles de style.
FAQ
Est-ce que supprimer du code inutilisé va visiblement accélérer ma boutique Shopify ?
Cela dépend de la quantité. Supprimer un seul fichier JavaScript de 200 Ko d'une application préalablement désinstallée peut faire une différence notable sur les connexions lentes. Supprimer quelques Ko de CSS inutilisé ne changera pas grand-chose. Les gains les plus importants viennent de la suppression de requêtes HTTP entières (scripts tiers), pas des réductions mineures de la taille des fichiers.
Comment savoir si une règle CSS est réellement inutilisée ?
Des outils comme PurgeCSS ou l'onglet Coverage des Chrome DevTools (Cmd+Maj+P → "Show Coverage") mettent en évidence le CSS inutilisé sur une page. Approche manuelle : cherchez dans le HTML généré n'importe quel élément correspondant au sélecteur. Attention : une règle peut sembler inutilisée sur la page d'accueil mais servir sur une autre page (ex. : page produit uniquement).
Dois-je supprimer les fonctionnalités intégrées au thème que je n'utilise pas ?
Généralement non — modifier le code de base du thème rend les futures mises à jour compliquées (Shopify reconstruit votre thème lors des mises à jour, écrasant vos modifications). Mieux vaut : laisser le code en place mais désactiver la fonctionnalité via les paramètres de l'éditeur de thème. Ne modifiez le code du thème que lorsque le gain (vitesse, sécurité) dépasse clairement le coût de maintenance. Si vous souhaitez remplacer une fonctionnalité intégrée lourde par un équivalent sur mesure plus léger, décrivez ce que vous voulez à Fudge, l'opérateur IA pour les boutiques Shopify, et il ajoutera le remplacement comme une nouvelle section (en préservant le code d'origine du thème pour des mises à jour sûres). Pour la source la plus courante de code mort, les scripts d'applications que vous avez désinstallées, Fudge peut trouver ce qu'elles ont laissé derrière elles et préparer un nettoyage pour que vous l'approuviez.
Est-ce que Shopify me prévient quand je supprime du code référencé ?
L'éditeur de code inclut des avertissements Theme Check pour certaines références (appels {% render %} cassés, assets manquants), mais il ne captera pas toutes les dépendances. Prévisualisez toujours votre thème sur une copie après des suppressions avant de publier — les erreurs silencieuses n'apparaissent souvent que sur des types de pages spécifiques ou sous des conditions précises.
À quelle fréquence dois-je nettoyer le code de mon thème Shopify ?
Chaque trimestre pour les boutiques actives ou après des changements importants d'applications. Chaque année pour les boutiques stables. Un nettoyage associé à une mise à jour de thème (ou à une reconstruction sur un thème vierge) produit souvent des améliorations spectaculaires.
