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

You usually cannot safely minify files served from an app's CDN. Ask the vendor, disable unnecessary app embeds, or replace the app. Do not download a vendor script and serve your own copy unless the vendor explicitly supports that path, because you can break updates, consent handling, or checkout-related logic.

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. Identify local files from PageSpeed

Expand the PageSpeed minify JavaScript diagnostic. Local Shopify files often include a Shopify CDN path and an asset filename. App files usually come from separate domains or app-specific paths. Fix local theme assets first and keep vendor files out of your manual minification pass.

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. Minification is useful, but the faster store comes from controlling how much JavaScript loads and when it runs.

FAQ