Shopify réduit le temps d'exécution de JavaScript : corrigez l'avertissement PageSpeed

Pourquoi les boutiques Shopify reçoivent cet avertissement JavaScript

Lighthouse signale le temps d'exécution de JavaScript lorsque le navigateur passe une grande partie du temps du thread principal à évaluer les scripts. Les boutiques Shopify sont particulièrement exposées car le thème, les applications, les pixels d'analyse, les outils de consentement, les widgets d'avis, les outils de recherche, les filtres de collection, les générateurs de pages et les tiroirs de panier s'exécutent souvent sur la même page.

Les conseils Core Web Vitals de Google séparent le chargement, la réactivité et la stabilité visuelle. Un JavaScript lourd nuit plus directement à la réactivité, car les clics et les pressions attendent derrière de longues tâches. Cela peut également retarder le LCP lorsque les scripts entrent en concurrence avec le rendu de l'image du héros, du CSS et des polices. Si vous constatez également un INP ou un temps de blocage total médiocre, lisez le Guide Shopify INP et Guide du temps de blocage total Shopify.

L'avertissement ne vous demande pas de supprimer tous les scripts. Il vous demande de décider quels scripts sont critiques pour la première vue et lesquels peuvent attendre. Une page de produit nécessite une sélection de variantes, un état de prix, des supports produits, un ajout au panier et parfois des abonnements. Il n’a probablement pas besoin de chat, d’avis, de recommandations, de cartes thermiques et de toutes les balises marketing avant la première interaction.

Comment trouver le JavaScript Shopify qui compte

Test the homepage, a best-selling product page, a collection page, and a landing page. Product pages often have the worst script mix because reviews, media galleries, subscriptions, recommendations, and product options all load there. Collection pages often suffer from filters, search, sorting, personalization, and large DOM updates.

Dans Chrome DevTools, ouvrez le panneau Performances, enregistrez une charge limitée par mobile et recherchez de longs blocs de script jaunes. Dans PageSpeed ​​Insights, cochez « Réduire le temps d'exécution de JavaScript », « Réduire le travail du thread principal » et « Réduire le JavaScript inutilisé ». Le tableau de bord des performances Web de Shopify donne les tendances sur le terrain, tandis que PageSpeed ​​donne des diagnostics spécifiques à la page.

Utilisez les mêmes URL à chaque fois. Les scores PageSpeed ​​varient en raison de la variation de l'emplacement du test, du cache, de la limitation, des réponses des applications et de l'état de la page. L'article sur pourquoi les résultats des tests de vitesse Shopify varient explique comment comparer les tests sans rechercher de mouvements aléatoires.

Manuel étape par étape : réduisez le temps d'exécution de JavaScript sur Shopify

1. Supprimez les applications et les extraits que vous n'utilisez plus

Commencez par la liste des applications, les intégrations d'applications thématiques et les anciens extraits. Les applications désinstallées peuvent laisser du code dans thème.liquide, sections, extraits ou pixels d'événement client. Supprimez le code uniquement après avoir dupliqué le thème et confirmé que l'application n'est pas active.

<!-- theme.liquid: remove old scripts only after confirming the app is gone -->
<!-- Example of stale code to investigate, not blindly delete -->
<script src="https://cdn.old-widget.example/app.js"></script>
{% render 'old-reviews-widget' %}

S'il s'agit d'un problème récurrent, lisez le guide des restes de l'application Shopify avant de modifier les fichiers de thème de production.

2. Différer les scripts qui ne sont pas nécessaires pour la première interaction

Natif différé est sans danger pour de nombreux scripts appartenant à un thème qui n'ont pas besoin de bloquer l'analyse. Il conserve l'ordre d'exécution des scripts différés et s'exécute après l'analyse HTML. Ne l’ajoutez pas aveuglément à la logique adjacente à la caisse, au code de consentement ou aux scripts qui doivent s’initialiser avant que la page ne soit utilisable.

<!-- Better for non-critical theme JS -->
<script src="&lbrace;&lbrace; 'theme.js' | asset_url &rbrace;&rbrace;" defer></script>

<!-- Avoid async for scripts that depend on execution order -->
<script src="&lbrace;&lbrace; 'product-form.js' | asset_url &rbrace;&rbrace;" defer></script>

3. Charger les widgets facultatifs selon l'intention de l'utilisateur

Le chat, les enquêtes, les cartes thermiques et certains widgets de personnalisation peuvent souvent attendre après la première vue, le défilement, le temps d'inactivité ou un clic spécifique. Cela réduit la file d'attente du fil de discussion principal de premier chargement tout en gardant l'outil disponible pour les acheteurs qui en ont besoin.

function loadChatWidget() {
  if (window.__chatLoaded) return;
  window.__chatLoaded = true;
  const script = document.createElement('script');
  script.src = 'https://example-chat-cdn.com/widget.js';
  script.async = true;
  document.head.appendChild(script);
}

window.addEventListener('scroll', loadChatWidget, { once: true, passive: true });
window.addEventListener('pointerdown', loadChatWidget, { once: true });

Ce modèle est utile pour les widgets de support, mais pas pour le code qui doit enregistrer le consentement ou l'attribution des revenus avant le déclenchement des événements. Pour les magasins riches en applications, comparez cela avec correction des scripts d'application qui ralentissent Shopify.

4. Arrêtez d'initialiser chaque composant sur chaque page

De nombreux thèmes Shopify contiennent un seul gros fichier JavaScript qui initialise les curseurs, les supports de produits, les tiroirs de panier, les filtres de collection, les accordéons, les modaux et la recherche prédictive partout. Protégez ces initialiseurs afin que les pages n'exécutent que ce dont elles ont besoin.

if (document.querySelector('[data-product-form]')) {
  import('./product-form.js').then(({ initProductForm }) => initProductForm());
}

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

Les importations dynamiques nécessitent un pipeline de construction, elles sont donc plus faciles dans les thèmes personnalisés que l'édition de base du thème Shopify. Si votre thème ne prend pas en charge le regroupement, divisez les scripts par modèle et incluez uniquement ce dont chaque modèle a besoin.

5. Utilisez des auditeurs passifs pour le travail de défilement et de toucher

Les gestionnaires de défilement et de toucher peuvent bloquer le navigateur si celui-ci doit attendre pour savoir si l'événement appelle PreventDefault(). Utilisez des auditeurs passifs lorsque le gestionnaire observe uniquement l’interaction.

window.addEventListener('scroll', updateStickyHeader, { passive: true });
window.addEventListener('touchstart', trackTouchIntent, { passive: true });

Voir le si PageSpeed signale également des problèmes d'écoute d'événements.

Correction manuelle vs Thunder Fix

Ce qu'il ne faut pas casser

Le travail rapide le plus risqué est le report de script qui interrompt accidentellement le comportement d'achat. Testez les modifications de variantes, les ajouts au panier, les mises à jour du tiroir de panier, la saisie de codes de réduction, les sélections d'abonnement, les boutons de paiement dynamiques, les recommandations de produits, les avis, le consentement, les analyses et les pixels publicitaires. Une page plus rapide qui perd le suivi des conversions ou le comportement d'ajout au panier est une optimisation ratée.

Évitez également d'empiler plusieurs applications de vitesse. Plusieurs applications essayant de différer le même script peuvent provoquer des bugs de synchronisation difficiles à déboguer. Si vous avez besoin d'un plan général, utilisez le guide complet d'optimisation de la vitesse Shopify et comparez les options dans le meilleur guide des applications rapides Shopify.

Comment confirmer que le correctif a fonctionné

Exécutez PageSpeed Insights ou un Test de vitesse Shopify sur les mêmes URL, mobile first. Recherchez un temps d'exécution JavaScript inférieur, moins de tâches longues, un temps de blocage total inférieur et de meilleures tendances INP une fois les données de terrain mises à jour. celui de Google Conseils Core Web Vitals recommends evaluating page experience at the 75th percentile, so do not judge long-term success from one lab run.

Si JavaScript n'est qu'une partie du ralentissement, continuez ressources bloquant le rendu, charges utiles de grand réseau, et Optimisation LCP. Most real Shopify speed wins come from fixing the stack, not one isolated warning.

FAQ