Temps de blocage total de Shopify : Comment réduire le TBT (2026)

Solution rapide avec Thunder

Que mesure le temps de blocage total

Le temps de blocage total est la somme des portions de blocage des tâches longues entre First Contentful Paint et Time to Interactive. Une tâche longue est toute tâche du thread principal d’une durée supérieure à 50 ms. Si une tâche prend 120 ms, la partie bloquante est de 70 ms. Lighthouse ajoute ces parties bloquantes ensemble.

Cela est important car le navigateur ne peut pas répondre à une pression lorsque le fil de discussion principal est occupé. Une page peut sembler chargée mais néanmoins sembler cassée si le client appuie sur un sélecteur de variante, un menu ou un tiroir de panier pendant que JavaScript est toujours en cours d'exécution.

TBT n'est pas une métrique Core Web Vitals pour les utilisateurs réels. Mais c’est étroitement lié à la réactivité. La métrique de champ à surveiller est INP, où Google considère que moins de 200 ms sont bons. Si le TBT est terrible à Lighthouse, votre risque INP est généralement également plus élevé.

Pourquoi le temps de blocage total de Shopify devient élevé

Étape 1 : Trouvez les tâches longues derrière TBT

Open Chrome DevTools -> Performance, record a mobile-like page load, and look for long yellow tasks. Click each task and inspect the call stack. The domain or file name often tells you whether the work comes from your theme, an app, a tag manager, or a third-party widget.

new PerformanceObserver((list) => {
  for (const task of list.getEntries()) {
    console.log('Long task:', Math.round(task.duration), 'ms');
  }
}).observe({ type: 'longtask', buffered: true });

This small observer does not replace DevTools, but it gives you a quick feel for whether long tasks are happening during load. If most long tasks come from third-party domains, start with app loading. If they come from your theme bundle, inspect custom JavaScript.

Étape 2 : Différer les scripts d'application et de thème Shopify

The fastest TBT win is usually to stop non-critical scripts from running during the first load. For theme scripts that are not needed before content appears, use defer:

<script src="{{ 'theme.js' | asset_url }}" defer></script>

Attention à la commande. différer préserve l'ordre d'exécution après l'analyse. asynchrone Attributs ne le fait pas. Pour les scripts d'application, ne modifiez pas aveuglément les fichiers qui ne vous appartiennent pas. Utilisez Thunder pour un report tenant compte des dépendances, puis supprimez les applications de faible valeur qui créent encore un travail fastidieux.

Étape 3 : Charger les widgets après l'intention ou la visibilité

Les widgets de chat, d'avis, de recommandations, d'intégrations de vidéos et de personnalisation doivent rarement être initialisés avant la première peinture. Chargez-les lorsque le client fait défiler la section ou interagit avec la fonctionnalité.

const target = document.querySelector('[data-recommendations]');

if (target) {
  const observer = new IntersectionObserver((entries) => {
    if (!entries.some((entry) => entry.isIntersecting)) return;

    import('./recommendations.js').then((module) => {
      module.init(target);
    });

    observer.disconnect();
  }, { rootMargin: '400px' });

  observer.observe(target);
}

Ce modèle réduit le TBT initial car le JavaScript existe toujours, mais il ne s'exécute pas pendant la fenêtre la plus sensible. Associez-le à notre Guide des scripts tiers et Guide d'impact de vitesse Hotjar si les outils de suivi font partie de la pile.

Étape 4 : Divisez les tâches thématiques longues en morceaux

Certains codes de thème Shopify fonctionnent légitimement en mauvais état. Le filtrage des produits, le rendu des résultats de recherche, les mises à jour des recommandations de panier et la configuration des options de variantes peuvent parcourir des centaines d'éléments en une seule tâche. Divisez le travail en morceaux afin que le navigateur puisse répondre entre les lots.

async function hydrateCards(cards) {
  for (let index = 0; index < cards.length; index += 12) {
    cards.slice(index, index + 12).forEach(hydrateCard);

    if ('scheduler' in window && 'yield' in scheduler) {
      await scheduler.yield();
    } else {
      await new Promise((resolve) => setTimeout(resolve, 0));
    }
  }
}

Cela ne réduit pas la taille totale du code, mais cela réduit le temps de blocage car le navigateur a la possibilité de peindre et de répondre. Il est particulièrement utile sur les pages de collection, les pages de recherche et les modèles de produits contenant beaucoup d'applications.

Étape 5 : Réduire le DOM et le JavaScript inutilisé

Un DOM volumineux ralentit JavaScript car les requêtes, la délégation d'événements, le recalcul de style et la mise en page touchent tous plus d'éléments. Si PageSpeed affiche des avertissements TBT plus DOM, lisez notre Guide des tailles DOM excessives Shopify et réduisez les grilles de produits, dupliquez le balisage mobile/ordinateur de bureau, les méga menus et les wrappers du générateur de pages.

JavaScript inutilisé est l'autre coût discret du TBT. Les anciens extraits d'application, les fonctionnalités de thème inutilisées, les curseurs hérités et le code de test A/B abandonné sont toujours analysés et exécutés. Nettoyez-les avec notre guide CSS et JavaScript inutilisé.

Si les images sont également énormes, le TBT ne sera pas votre seul goulot d'étranglement. Utilisez le énorme guide des charges utiles du réseau après que le travail du script principal soit sous contrôle.

Correction manuelle vs Thunder Fix

Retestez le TBT sans courir après le bruit

Les scores du laboratoire Lighthouse varient, en particulier sur les tests mobiles Shopify. Exécutez plusieurs tests, comparez la médiane et concentrez-vous sur le même modèle. Observez ensemble le TBT, le travail du thread principal, le temps d'exécution de JavaScript et les données du champ INP.

Si le TBT s'améliore mais que le LCP reste faible, passer à Optimisation Shopify LCP. Si le TBT reste élevé après le report de l'application, le problème vient probablement d'un code de thème personnalisé ou d'une application nécessaire qui nécessite un travail plus approfondi. Pour l'automatisation, voir Fonctionnalités de Thunder et .

Références et Validation

Utilisation Documentation sur le temps de blocage total de Chrome comme source de vérité sur la manière dont le TBT est calculé. Pour la réactivité d'un utilisateur réel, comparez-le avec web.dev.

Les exemples de la communauté Shopify ont tendance à donner des conseils généraux comme compresser des images ou supprimer des applications. Cela peut aider, mais TBT vise spécifiquement à bloquer le travail du thread principal. La meilleure solution est précise : recherchez les tâches longues, différez les scripts non critiques, supprimez le JavaScript de faible valeur et divisez le travail personnalisé en morceaux plus petits.