Comment supprimer le code inutilisé dans Shopify (2026)

À retenir

• Le code inutilisé s’accumule à cause des applications désinstallées, d’anciennes personnalisations du thème et de sections abandonnées.
• Utilisez Shopify Theme Inspector (extension Chrome) pour identifier les assets qui sont les plus lents à charger.
• 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.

Chaque fois que vous installez une application, essayez une personnalisation ou mettez à jour votre thème, du code s’accumule. Du CSS mort. Des balises script pour des applications que vous avez désinstallées il y a deux ans. Des fichiers de snippet qui ne rendent plus rien. Au fil du temps, ce code inutilisé ralentit votre boutique sans apporter la moindre valeur.

Faire le ménage est l’une des améliorations de performance les plus efficaces que vous puissiez faire — et ça ne vous coûte rien d’autre que du temps.

Comment supprimer du code dans Shopify ?

Allez dans Boutique en ligne → Thèmes → Actions → Modifier le code. Cela ouvre l’éditeur de code où vous pouvez voir tous les fichiers du thème. Les fichiers peuvent y être modifiés ou supprimés individuellement.

Rappel crucial : dupliquez votre thème avant de toucher à la moindre ligne de code. Boutique en ligne → Thèmes → menu avec les trois petits points → Dupliquer.

Étape 1 — Identifier ce qui est lent avec Theme Inspector

Le Shopify Theme Inspector est une extension Chrome gratuite qui montre quels templates Liquid et assets prennent le plus de temps à s’afficher.

Comment l’utiliser :

1. Installez l’extension depuis le Chrome Web Store
2. Ouvrez votre boutique et appuyez sur F12 pour ouvrir les Chrome DevTools
3. Allez sur l’onglet “Theme Inspector”
4. Naviguez dans votre boutique — l’extension affiche le temps de rendu par template

Cela vous indique quelles pages et quels assets ralentissent le plus le temps de chargement. Concentrez vos efforts de nettoyage sur les pires élèves.

Pour le JavaScript plus spécifiquement : ouvrez les Chrome DevTools → l’onglet Network (Réseau) → filtrez par JS → rechargez la page. Triez par Size (Taille) pour trouver les scripts les plus lourds. Y en a-t-il qui proviennent d’applications que vous n’utilisez plus ?

Article lié : 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.

Article lié : Supprimer le code restant des applications Shopify.

Les fichiers JavaScript inutilisés dans assets/. Ouvrez le dossier assets/ dans l’éditeur de code. Cherchez les fichiers .js dont les noms font référence à des applications ou des fonctionnalités que vous n’utilisez plus. Cherchez le nom du fichier dans les fichiers Liquid de votre thème — si rien ne le rend ou ne l’inclut, il peut être supprimé.

Les blocs de sections JavaScript. Si vous avez supprimé une section de tous vos templates mais que vous avez laissé le fichier de la section, son bloc {% javascript %} se compile toujours dans le bundle JavaScript principal de votre thème. Supprimez complètement les fichiers de section inutilisés.

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 dit “orphelin” si aucun template, section ou autre snippet ne le rend.

Trouver les snippets orphelins :

1. Allez dans le dossier snippets/ via l’éditeur de code
2. Pour chaque fichier suspect (en particulier ceux portant des noms d’applications), cherchez son nom de fichier à travers tout votre thème
3. Cherchez {% render 'snippet-name' %} ou {% include 'snippet-name' %}
4. S’il n’y a aucun résultat : le snippet est orphelin et peut être supprimé

Article lié : Corriger les problèmes d’affichage après l’installation d’apps Shopify.

Les snippets orphelins fréquents : les fichiers portant le nom d’applications (loox-widget.liquid, privy-form.liquid), les anciens snippets de fonctionnalités de précédentes personnalisations du thème, et les versions dupliquées de snippets.

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 rendues par une autre section.

Vérifier les fichiers de template :

1. Ouvrez le dossier templates/
2. Chaque fichier de template .json liste les sections qui apparaissent sur ce type de page
3. Si un fichier de section existe mais n’est listé dans aucun template, c’est qu’il est inutilisé (bien qu’il reste potentiellement accessible via “Ajouter une section” dans l’Éditeur de thème)

Pour les sections qui ont été ajoutées à une page une seule fois puis retirées, elles peuvent ne plus apparaître sur aucune page mais leur fichier existe toujours. Vous pouvez les supprimer sans danger.

L’ordre de priorité pour le nettoyage

Le code inutilisé n’a pas toujours le même impact sur les performances. Priorisez de la manière suivante :

1. Les scripts externes (les balises scripts d’apps dans theme.liquid) — chacun d’eux représente une requête HTTP vers un serveur externe
2. Les gros fichiers JavaScript dans assets/ — surtout tout ce qui dépasse 50 Ko
3. Les feuilles de style CSS inutilisées — particulièrement celles chargées sur chaque page via theme.liquid
4. Les snippets et sections orphelins — un impact moindre mais une bonne pratique de propreté

Article lié : Accélérer un thème Shopify.

Utiliser le theme check intégré de Shopify

Les outils de développement de thème de Shopify incluent Theme Check, qui signale une série de problèmes de code, dont les variables inutilisées et la syntaxe Liquid obsolète. Pour les marchands (contrairement aux développeurs), son accès est plus difficile — c’est avant tout un outil CLI.

L’éditeur de code de Shopify affiche tout de même quelques avertissements de base, et le Theme Inspector gère l’aspect performance suffisamment bien pour la plupart des tâches de nettoyage.

FAQ

Supprimer du code inutilisé va-t-il vraiment accélérer ma boutique Shopify ?

Ça dépend de la quantité. Supprimer un seul fichier JavaScript de 200 Ko d’une application précédemment désinstallée peut faire baisser le LCP de 0,5 à 1 seconde sur les connexions lentes. Supprimer quelques Ko de CSS inutilisé ne changera pas grand-chose. Les plus gros gains viennent de l’élimination de requêtes HTTP entières (scripts tiers), et non des petites réductions de taille de fichier.

Comment savoir si une règle CSS est vraiment inutilisée ?

Des outils comme PurgeCSS ou l’onglet Coverage des Chrome DevTools (Cmd+Shift+P → “Show Coverage”) mettent en évidence le CSS inutilisé sur une page. L’approche manuelle : recherchez dans le HTML rendu tout élément correspondant au sélecteur. Attention : une règle peut paraître inutilisée sur la page d’accueil, mais servir sur une autre page (ex. uniquement sur la page produit).

Dois-je supprimer les fonctionnalités natives du thème que je n’utilise pas ?

Généralement non — modifier le code de base du thème complique les futures mises à jour (Shopify recompile votre thème lors d’une mise à jour, écrasant ainsi vos modifications). C’est mieux de laisser le code en place, mais de désactiver la fonctionnalité via les paramètres de l’éditeur de thème. Ne modifiez le code du thème que si le gain (vitesse, sécurité) dépasse largement le coût de maintenance. Si vous voulez remplacer une fonctionnalité native un peu lourde par un équivalent sur mesure plus léger, décrivez ce que vous voulez à Fudge et il ajoutera le remplacement sous forme de nouvelle section (en préservant le code original du thème pour des mises à jour sans risque).

Est-ce que Shopify me prévient quand je supprime du code référencé ?

L’éditeur de code inclut les avertissements de Theme Check pour certaines références (appels {% render %} cassés, assets manquants), mais il ne détectera pas toutes les dépendances. Prévisualisez toujours votre thème sur une copie après des suppressions et avant de publier — les bugs silencieux n’apparaissent souvent que sur des types de pages précis ou sous certaines conditions.

À quelle fréquence dois-je faire un nettoyage de code sur mon thème Shopify ?

Tous les trimestres pour les boutiques actives ou après des changements majeurs d’applications. Tous les ans pour les boutiques stables. L’effet cumulé d’un nettoyage est bien réel — trois ans de résidus d’applications accumulés peuvent ajouter 1 à 2 secondes au LCP sur mobile. Un nettoyage couplé à une mise à jour du thème (ou une refonte sur un thème vierge) produit souvent des améliorations spectaculaires.