Shopify Minify JavaScript : corrigez l'avertissement PageSpeed

Que signifie l'avertissement Minify JavaScript Shopify

La documentation Lighthouse de Chrome décrit la minification JavaScript comme la suppression des espaces et du code qui ne sont pas nécessaires pour créer un fichier de script plus petit mais toujours valide. PageSpeed ​​rapporte les fichiers concernés et les économies de transfert estimées. Sur Shopify, ce diagnostic pointe souvent vers le thème JavaScript, les anciennes bibliothèques de fournisseurs, les extraits personnalisés ou les scripts laissés après les expériences d'applications.

L'avertissement est important car JavaScript est en concurrence pour la bande passante du réseau et le temps du thread principal. Les fichiers plus petits sont téléchargés et analysés plus rapidement et laissent moins de pression sur les appareils mobiles. Mais ne confondez pas la minification avec un travail plus approfondi sur les performances JavaScript. Un petit fichier minifié peut toujours bloquer l'interaction s'il exécute une tâche longue, et un fichier volumineux peut être inoffensif s'il se charge plus tard et s'exécute uniquement en cas de besoin.

Si PageSpeed signale également réduit le temps d'exécution de JavaScript, tâches longues du thread principal, ou Rembourrage répartition du travail du thread principal, donnez la priorité à ceux-ci aux côtés de la minification.

Fichiers JavaScript Shopify courants à vérifier

Offres groupées thématiques

Fichiers tels que thème.js, global.js, produit-form.js, recherche-prédictive.js, et cart-drawer.js peuvent être des atouts thématiques locaux. Ce sont les candidats les plus sûrs si vous avez un thème en double et pouvez tester chaque parcours d'achat.

Anciennes bibliothèques

Les anciens plugins jQuery, les bibliothèques de carrousel, les outils d'animation et les scripts de fournisseurs copiés sont courants dans les anciens magasins. Si le fichier est local et lisible, réduisez-le. Si la fonctionnalité n’est plus utilisée, supprimez-la à la place. Le guide de nettoyage CSS et JavaScript inutilisés couvre la même idée pour les extraits abandonnés.

Scripts d'applications tierces

Vous ne pouvez généralement pas minifier en toute sécurité les fichiers servis depuis le CDN d'une application. Demandez au fournisseur, désactivez les intégrations d'applications inutiles ou remplacez l'application. Ne téléchargez pas un script de fournisseur et ne servez pas votre propre copie à moins que le fournisseur ne prenne explicitement en charge ce chemin, car vous pourriez interrompre les mises à jour, la gestion du consentement ou la logique liée au paiement.

Manuel étape par étape : réduire JavaScript sur Shopify

1. Dupliquer le thème live

Travaillez dans un thème en double. JavaScript contrôle les variantes de produits, l'ajout au panier, les mises à jour du tiroir du panier, les filtres, la recherche, les sélecteurs de quantité, les abonnements et le suivi. Un test visuel de fumée ne suffit pas ; vous devez tester le comportement d'achat.

2. Identifiez les fichiers locaux de PageSpeed

Développez le diagnostic PageSpeed de minification JavaScript. Les fichiers Shopify locaux incluent souvent un chemin CDN Shopify et un nom de fichier d'actif. Les fichiers d'application proviennent généralement de domaines distincts ou de chemins spécifiques à l'application. Corrigez d'abord les actifs de thème locaux et gardez les fichiers du fournisseur hors de votre passe de minification manuelle.

3. Réduire uniquement le fichier servi

Conservez la source lisible dans votre flux de travail de développement et servez une version minifiée. Un exemple simple :

// Before
function openCartDrawer() {
  const drawer = document.querySelector('[data-cart-drawer]');

  if (!drawer) {
    return;
  }

  drawer.classList.add('is-open');
}

// After
function openCartDrawer(){const drawer=document.querySelector("[data-cart-drawer]");drawer&&drawer.classList.add("is-open")}

4. Référencer un actif minifié en Liquid

Téléchargez le fichier minifié en tant qu'élément distinct et mettez à jour la référence du thème. Faites-le d'abord dans un thème en double :

<!-- theme.liquid or a section file -->
<script src="{{ 'theme.min.js' | asset_url }}" defer></script>

Utilisation différé pour les scripts qui n'ont pas besoin de bloquer l'analyse HTML. Ne différez pas aveuglément les scripts qui doivent être exécutés avant le contenu visible ou avant la configuration critique du formulaire de produit.

5. Code spécifique au modèle de garde

La minification réduit les octets, mais ignorer les initialisations inutiles réduit le travail réel du processeur. Le code de la galerie de produits ne doit pas s'exécuter sur les articles. Les filtres de collection ne doivent pas s'exécuter sur la page d'accueil.

if (document.body.dataset.template === 'product') {
  import('./product-gallery.js').then(({ initProductGallery }) => {
    initProductGallery();
  });
}

if (document.querySelector('[data-faceted-filters]')) {
  import('./filters.js').then(({ initFilters }) => {
    initFilters();
  });
}

6. Testez le parcours d'achat avant de publier

Testez les modifications des variantes, l'ajout au panier, le tiroir du panier, le bouton de paiement, les remises, les abonnements, la recherche prédictive, les filtres, les galeries d'images, les widgets d'avis et le consentement/suivi. Comparez ensuite PageSpeed, le temps de blocage total, l'INP et le Rapport de vitesse Shopify.

Correction manuelle vs Thunder Fix

Que faire si l'avertissement persiste

Si l'avertissement minify JavaScript Shopify persiste après le nettoyage local, vérifiez si PageSpeed signale les scripts tiers. Si tel est le cas, vous ne pourrez peut-être pas réparer le fichier directement. Concentrez-vous sur la question de savoir si ce script se charge sur chaque modèle, s'il peut être retardé et si l'application est toujours nécessaire. Le Guide JavaScript tiers et Guide des façades tierces affiche des chemins plus sûrs.

Pour un forfait complet, utilisez le guide complet d'optimisation de la vitesse Shopify, benchmark avec le test de vitesse gratuit, puis comparez le coût en temps du nettoyage manuel JavaScript avec Tarification Thunder. La minification est utile, mais le magasin plus rapide provient du contrôle de la quantité de JavaScript qui se charge et du moment où il s'exécute.

FAQ