Tâches longues du fil principal Shopify : comment interrompre le travail de blocage

Pourquoi les tâches longues sont importantes pour la vitesse de Shopify

Le fil principal du navigateur gère l'analyse, l'exécution de JavaScript, le calcul de style, la mise en page, la peinture et de nombreuses interactions utilisateur. Lorsqu'une tâche s'exécute trop longtemps, le navigateur ne peut pas répondre rapidement aux pressions, aux clics, au défilement ou au rendu. Les conseils de performances de Chrome recommandent de diviser les tâches longues afin que le navigateur ait la possibilité de mettre à jour la page et de gérer les entrées.

Cela compte directement pour Shopify INP et Temps de blocage total. Les tests en laboratoire Lighthouse montrent du TBT. Les données de terrain dans Core Web Vitals indiquent si les vrais acheteurs rencontrent une mauvaise réactivité.

Les tâches longues se chevauchent également avec les tâches plus larges. minimise le travail du thread principal avertissement et réduit le temps d'exécution de JavaScript. Considérez le travail sur le fil principal comme le coût total du processeur et les tâches longues comme les éléments qui bloquent le plus les acheteurs.

Sources courantes de tâches longues dans les thèmes Shopify

Les pages de produits exécutent souvent ensemble la logique des variantes, les galeries multimédias, les abonnements, les avis, les recommandations, la personnalisation, les analyses et le code du tiroir de panier. Les pages de collection exécutent des filtres, un tri, une recherche, une hydratation des fiches produits et un suivi. Les pages d'accueil exécutent des curseurs, des sections vidéo, des blocs de création de pages, des intégrations d'applications et des pixels marketing.

Les scripts tiers sont souvent ceux qui gagnent le plus rapidement. Klaviyo, GTM, Meta Pixel, TikTok Pixel, les widgets d'avis, les outils de chat, les fenêtres contextuelles et les applications d'attribution peuvent tous ajouter du travail sur le fil principal. Utilisez les guides sur JavaScript tiers, GTM ralentit Shopify, et Widgets de chat en direct pour les correctifs spécifiques à l'application.

Manuel étape par étape : diviser les longues tâches du fil principal sur Shopify

1. Enregistrez une trace de performances mobile

Ouvrez Chrome DevTools, limitez le processeur, enregistrez le chargement de la page et recherchez les longs blocs de script jaunes. Cliquez sur un bloc pour voir la pile d'appels de fonction. Comparez cela avec les diagnostics de PageSpeed ​​et le tableau de bord des performances Web de Shopify.

2. Retarder les widgets qui ne sont pas nécessaires pour la première vue

Le chat, les enquêtes, les cartes thermiques et certains widgets d'évaluation doivent rarement être exécutés avant le rendu du héros et du contenu du produit. Chargez-les après l'intention de l'utilisateur ou après une période d'inactivité.

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

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

3. Initialisez JavaScript uniquement sur les pages qui en ont besoin

N'exécutez pas de filtres de collection sur les pages de produits ou le code média du produit sur les articles de blog. Protégez les initialiseurs en vérifiant le DOM concerné avant d'exécuter une configuration coûteuse.

if (document.querySelector('[data-product-form]')) {
  initProductForm();
}

if (document.querySelector('[data-collection-filters]')) {
  initCollectionFilters();
}

4. Divisez les boucles coûteuses en morceaux plus petits

Si le code personnalisé traite plusieurs fiches produits, variantes, avis ou options de filtrage à la fois, divisez le travail afin que le navigateur puisse respirer entre les morceaux. Utiliser requestIdleCallback là où il est pris en charge, avec un délai d'attente de secours.

const cards = Array.from(document.querySelectorAll('[data-product-card]'));

function hydrateCards(start = 0) {
  const end = Math.min(start + 8, cards.length);
  for (let i = start; i < end; i += 1) {
    hydrateProductCard(cards[i]);
  }
  if (end < cards.length) {
    const schedule = window.requestIdleCallback || ((cb) => setTimeout(cb, 50));
    schedule(() => hydrateCards(end), { timeout: 500 });
  }
}

hydrateCards();

5. Move non-visual calculations away from first load

La notation des recommandations, la personnalisation, les badges d'inventaire et l'enrichissement des analyses ne devraient pas bloquer le premier rendu, à moins que les acheteurs n'aient besoin du résultat immédiatement. Rendu par défaut stable, puis amélioré une fois que la page est utilisable.

6. Protéger les scripts critiques pour les revenus

Ne retardez pas aveuglément la sélection de variantes, les formulaires de produits, les mises à jour du tiroir de panier, les sélecteurs d'abonnement, le consentement, le transfert de paiement ou les événements d'attribution. Les changements rapides doivent préserver le comportement d’achat. Testez l'ajout au panier, les modifications de variantes, les flux de remises, le suivi et le paiement après chaque modification de script.

Correction manuelle vs Thunder Fix

Comment confirmer l'amélioration des tâches longues du thread principal

Retestez avec PageSpeed Insights et le test de vitesse Shopify gratuit. Recherchez un TBT inférieur, moins de tâches longues dans DevTools, un temps d'exécution JavaScript réduit et une réactivité améliorée lorsque vous appuyez sur des filtres, des variantes, des accordéons et des boutons d'ajout au panier.

Pour le système plus large, suivez les guide complet d'optimisation de la vitesse Shopify. Si vous avez d'abord besoin d'automatisation, comparez les options dans le meilleures applications d'optimisation de vitesse Shopify guide ou chèque Tarification Thunder.

FAQ