Comment supprimer le CSS et le JavaScript inutilisés sur Shopify (2026)

Corrigez les avertissements CSS et JS inutilisés en 60 secondes

Lancez un test de vitesse gratuit sur votre boutique — cherchez « Réduisez le CSS inutilisé » et « Réduisez le JavaScript inutilisé » dans la section Opportunités. Ces avertissements vous montrent exactement combien de kilooctets de code mort bloquent le rendu de votre page. Thunder Page Speed Optimizer traite les deux automatiquement :

• Diffère le CSS non critique pour qu'il se charge après le rendu de la page
• Diffère le JavaScript non critique (applications, analytics, widgets)
• Inline le CSS critique pour le contenu au-dessus de la ligne de flottaison
• Optimise l'ordre d'exécution des scripts pour réduire le blocage du thread principal

Installation en un clic. Les avertissements ne disparaîtront peut-être pas complètement (les scripts essentiels de Shopify ne peuvent pas être différés), mais Thunder en réduit l'impact de 60-80 % pour la plupart des boutiques.

Pourquoi les boutiques Shopify ont autant de code inutilisé

Chaque boutique Shopify charge du CSS et du JavaScript inutilisés. Ce n'est pas un bug — c'est le fonctionnement de l'architecture de Shopify. Comprendre pourquoi vous aide à savoir ce que vous pouvez corriger et ce que vous ne pouvez pas.

1. Le CSS global du thème

Les thèmes Shopify compilent tout le CSS en un ou deux fichiers (comme base.css ou theme.css) chargés sur chaque page. Ce fichier contient les styles de la page d'accueil, des pages produit, des pages de collection, du panier, du blog, des pages de compte — tout. Quand quelqu'un visite votre page produit, il télécharge les styles du tiroir de panier, de la grille de collection, des articles de blog et des pages de compte qu'il n'utilisera jamais sur cette page.

Un thème Dawn d'origine charge ~60KB de CSS. Après personnalisations et CSS additionnel, cela monte à 100-200KB. Les thèmes premium peuvent atteindre 200-400KB. Sur une page donnée, généralement seuls 30-50 % de ce CSS sont réellement utilisés.

2. Le code injecté par les applications

Chaque application Shopify que vous installez peut injecter du JavaScript et du CSS dans votre thème. La plupart des applications injectent leur code globalement — sur chaque page — même si l'application n'agit que sur les pages produit ou le panier. Une application d'avis charge son CSS sur votre page À propos. Une application d'upsell de panier charge son JS sur les articles de blog. Chaque application ajoute typiquement 50-300KB de CSS/JS.

Avec 10 applications installées, vous chargez peut-être 500KB-3MB de code d'applications sur chaque page, chaque page n'en utilisant qu'une fraction. Consultez notre analyse des applications qui ralentissent votre boutique pour des exemples concrets.

3. Le code orphelin des applications désinstallées

Quand vous désinstallez une application Shopify, elle retire ses fonctionnalités backend mais laisse souvent du code dans votre thème. Balises script dans theme.liquid, snippets Liquid dans le dossier snippets/ et CSS inline persistent après la suppression de l'application. C'est du code mort qui se charge sur chaque page pour zéro bénéfice.

4. Les scripts propres de Shopify

Shopify injecte son propre JavaScript sur chaque page de la vitrine — pour les analytics, les fonctions de panier, les comptes clients et le checkout. Ces scripts totalisent 100-200KB et ne peuvent être ni supprimés ni différés sans casser des fonctionnalités essentielles.

Comment trouver le CSS et le JavaScript inutilisés sur votre boutique Shopify

Avant de supprimer quoi que ce soit, vous devez identifier ce qui est inutilisé et d'où cela vient. L'outil Coverage de Chrome est la meilleure option gratuite.

Étape 1 : ouvrez Coverage dans Chrome DevTools

1. Ouvrez votre boutique dans Chrome
2. Appuyez sur F12 (ou Cmd+Option+I sur Mac) pour ouvrir DevTools
3. Appuyez sur Ctrl+Shift+P (Cmd+Shift+P sur Mac) pour ouvrir la palette de commandes
4. Tapez « Coverage » et sélectionnez « Show Coverage »
5. Cliquez sur le bouton de rechargement (⟳) dans le panneau Coverage
6. Attendez le chargement complet de la page

Étape 2 : lisez les résultats

Le panneau Coverage montre chaque fichier CSS et JS avec une barre rouge/verte :

• Vert = code exécuté/appliqué sur cette page
• Rouge = code chargé mais jamais utilisé sur cette page
• Total Bytes = taille totale du fichier
• Unused Bytes = bande passante gaspillée qui bloque le rendu

Cliquez sur un fichier pour voir l'utilisation ligne par ligne. Les lignes rouges sont des règles CSS ou des fonctions JavaScript inutilisées. Pour une boutique Shopify typique, vous verrez :

• base.css ou theme.css — 50-70 % inutilisé (styles globaux du thème)
• vendor.js ou theme.js — 40-60 % inutilisé (JavaScript du thème)
• Fichiers spécifiques aux applications — 70-90 % inutilisés par page (la plupart du code d'application n'est pas nécessaire)
• Scripts propres de Shopify — 30-50 % inutilisés (code cœur de la plateforme)

Étape 3 : identifiez les plus gros coupables

Triez par « Unused Bytes » (cliquez sur l'en-tête de colonne). Les fichiers avec le plus d'octets inutilisés sont vos cibles à plus fort impact. Typiquement : le CSS du thème, 1-2 gros bundles d'applications et les scripts d'analytics de Shopify. Pour la partie JavaScript en particulier, notre guide d'optimisation JavaScript propose une analyse plus poussée.

Quel code inutilisé pouvez-vous réellement supprimer sur Shopify

Soyons réalistes : vous ne pouvez pas éliminer tout le CSS/JS inutilisé sur Shopify. Mais vous pouvez faire des réductions significatives. Voici ce qui est actionnable :

{% comment %} Only load review CSS on product pages {% endcomment %}
{% if template contains 'product' %}
  {{ 'review-styles.css' | asset_url | stylesheet_tag }}
{% endif %}

{% comment %} Only load collection JS on collection pages {% endcomment %}
{% if template contains 'collection' %}
  <script src="{{ 'collection-filters.js' | asset_url }}" defer></script>
{% endif %}

Pourquoi différer vaut mieux que supprimer pour le code inutilisé sur Shopify

Sur un site statique, supprimer le CSS inutilisé est simple — chaque page a un contenu connu et fixe. Sur Shopify, c'est dangereux parce que :

• Contenu dynamique — les templates Liquid ajoutent des classes CSS conditionnellement. Un produit avec 5 variantes charge un CSS différent d'un produit avec 2. PurgeCSS ne peut pas détecter les classes générées par Liquid.
• Éléments ajoutés en JavaScript — les tiroirs de panier, les modales d'aperçu rapide et l'ajout au panier en AJAX créent des éléments DOM dynamiquement. Leur CSS paraît « inutilisé » jusqu'à ce qu'une interaction utilisateur les déclenche.
• Dépendances entre pages — un CSS inutilisé sur votre page d'accueil est critique sur votre page produit. Le supprimer de la feuille de style globale casse d'autres pages.
• Mises à jour d'applications — les applications peuvent changer leurs noms de classes CSS lors des mises à jour. Si vous avez purgé leur CSS « inutilisé », la mise à jour casse le style.

Différer est l'alternative sûre. Le CSS/JS différé se charge quand même et fonctionne — il se charge simplement après le rendu de la page au lieu de le bloquer. Le visiteur voit la page plus vite, toutes les fonctionnalités continuent de marcher et rien ne casse lors des mises à jour.

C'est exactement ce que fait Thunder avec les ressources bloquant le rendu. Il identifie quels CSS et JavaScript ne sont pas nécessaires au premier affichage et les diffère, tout en inlinant le CSS critique nécessaire au contenu au-dessus de la ligne de flottaison.

Pas à pas : nettoyez le code d'applications orphelin

C'est le seul nettoyage que vous devriez faire manuellement — c'est gratuit, sûr et les résultats sont immédiats. Voici comment trouver et supprimer le code des applications que vous avez désinstallées :

1. Sauvegardez votre thème — Allez dans Boutique en ligne → Thèmes → Actions → Dupliquer. Ayez toujours une solution de repli.
2. Listez vos applications actuelles — Allez dans Paramètres → Applications et canaux de vente. Notez chaque application installée.
3. Ouvrez l'éditeur de thème — Allez dans Boutique en ligne → Thèmes → Modifier le code.
4. Vérifiez theme.liquid — Ouvrez layout/theme.liquid et cherchez les balises <script> et <link> qui référencent des domaines externes. Si vous voyez un domaine qui ne correspond à aucune application installée, c'est probablement du code orphelin.
5. Vérifiez snippets/ — Parcourez le dossier snippets. Les fichiers portant des noms d'applications (par exemple bold-options.liquid, loox-reviews.liquid) qui ne correspondent à aucune application installée sont orphelins. Supprimez-les et retirez les appels {% render %} ou {% include %} correspondants.
6. Cherchez les motifs connus — Utilisez la recherche de l'éditeur de code (Ctrl+F) dans tous les fichiers pour :
   • Les noms d'applications que vous avez utilisées auparavant
   • Les références ScriptTag
   • Les domaines externes dans les attributs src des scripts
7. Testez soigneusement — Prévisualisez le thème, testez l'ajout au panier, le parcours de checkout et tous les types de pages avant de publier.

Gains de nettoyage courants : snippets d'applications d'avis supprimés (50-100KB), anciens scripts d'analytics (20-50KB) et code de popup/bannière abandonné (30-80KB). Pas énorme individuellement, mais significatif cumulé. Pour un audit complet du thème, consultez notre guide d'audit de vitesse Shopify.

Attentes réalistes : de combien pouvez-vous réduire ?

L'avertissement « Réduisez le CSS/JS inutilisé » de PageSpeed Insights ne disparaîtra jamais totalement sur une boutique Shopify. Voici ce qui est réaliste :

L'action à plus fort impact est presque toujours de supprimer les applications dont vous n'avez pas réellement besoin. Chaque suppression d'application élimine à la fois son code et ses requêtes HTTP. Pour approfondir l'optimisation du JavaScript restant, consultez notre guide d'optimisation JavaScript. Pour le CSS en particulier, notre guide d'optimisation CSS couvre le CSS critique, la minification et les techniques avancées.

Questions fréquentes

Empêchez le code inutilisé de ralentir votre boutique Shopify

Vous ne pouvez pas éliminer entièrement le CSS et le JavaScript inutilisés sur Shopify — l'architecture de la plateforme charge les styles et scripts globaux par conception. Mais vous pouvez faire une vraie différence en trois étapes : nettoyez le code d'applications orphelin (gratuit, immédiat), réduisez les applications installées au strict nécessaire (gratuit, fort impact) et différez tout le reste avec Thunder Page Speed Optimizer (60 secondes, impact maximal).

Les avertissements « Réduisez le CSS/JS inutilisé » de PageSpeed Insights ne disparaîtront peut-être jamais complètement. C'est normal pour Shopify. Concentrez-vous sur les vraies métriques : un LCP sous 2.5 secondes, un CLS sous 0.1 et un chargement perçu rapide.

Testez votre boutique maintenant et vérifiez combien de code inutilisé bloque votre rendu. Pour la stratégie complète d'optimisation de la vitesse, consultez notre guide complet d'optimisation de la vitesse Shopify.