Tempo di blocco totale di Shopify: Come ridurre il TBT (2026)

Correzione rapida con Thunder

Cosa misura il tempo di blocco totale

Il tempo di blocco totale è la somma delle parti di blocco delle attività lunghe tra la prima verniciatura con contenuto e il tempo di interattività. Un'attività lunga è qualsiasi attività del thread principale di durata superiore a 50 ms. Se un'attività dura 120 ms, la parte di blocco è di 70 ms. Lighthouse aggiunge insieme quelle parti bloccanti.

Ciò è importante perché il browser non può rispondere a un tocco mentre il thread principale è occupato. Una pagina può sembrare caricata ma sembrare comunque interrotta se il cliente tocca un selettore di varianti, un menu o un cassetto del carrello mentre JavaScript è ancora in esecuzione.

TBT non è una metrica Core Web Vitals per utenti reali. Ma è strettamente correlato alla reattività. La metrica di campo da tenere d'occhio è INP, dove Google considera buono un valore inferiore a 200 ms. Se il TBT è terribile in Lighthouse, anche il rischio INP è solitamente più elevato.

Perché il tempo di blocco totale di Shopify diventa elevato

Passaggio 1: trova i compiti lunghi dietro 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.

Passaggio 2: rinviare gli script dell'app e dei temi 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>

Fai attenzione all'ordine. differire preserva l'ordine di esecuzione dopo l'analisi. asincrono Attributi no. Per gli script delle app, non modificare ciecamente i file che non possiedi. Utilizza Thunder per il differimento in base alle dipendenze e quindi rimuovi le app di basso valore che creano comunque un lavoro pesante.

Passaggio 3: carica i widget dopo l'intento o la visibilità

Chat, recensioni, consigli, incorporamenti di video e widget di personalizzazione raramente devono essere inizializzati prima della prima verniciatura. Caricali quando il cliente scorre vicino alla sezione o interagisce con la funzionalità.

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);
}

Questo modello riduce il TBT iniziale perché JavaScript esiste ancora, ma non viene eseguito durante la finestra più sensibile. Abbinalo al nostro Guida agli script di terze parti e Guida all'impatto della velocità Hotjar se gli strumenti di tracciamento fanno parte dello stack.

Passaggio 4: suddividere le attività a tema lungo in blocchi

Alcuni codici dei temi Shopify funzionano in modo legittimo ma in cattive condizioni. Il filtraggio dei prodotti, il rendering dei risultati di ricerca, gli aggiornamenti dei consigli del carrello e l'impostazione delle opzioni delle varianti possono scorrere centinaia di elementi in un'unica attività. Suddividi il lavoro in blocchi in modo che il browser possa rispondere tra un batch e l'altro.

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));
    }
  }
}

Ciò non riduce la dimensione totale del codice, ma riduce il tempo di blocco perché il browser ha la possibilità di dipingere e rispondere. È particolarmente utile nelle pagine di raccolta, nelle pagine di ricerca e nei modelli di prodotti ricchi di app.

Passaggio 5: riduci DOM e JavaScript inutilizzato

Un DOM di grandi dimensioni rende JavaScript più lento perché query, delega di eventi, ricalcolo dello stile e layout toccano tutti più elementi. Se PageSpeed mostra avvisi TBT più DOM, leggi il nostro Shopify Guida alle dimensioni DOM eccessive e riduci le griglie dei prodotti, il markup mobile/desktop duplicato, i mega menu e i wrapper per la creazione di pagine.

JavaScript non utilizzato è l'altro costo TBT silenzioso. I vecchi frammenti di app, le funzionalità dei temi inutilizzati, i dispositivi di scorrimento legacy e il codice di test A/B abbandonato continuano ad essere analizzati ed eseguiti. Puliscili con il nostro Guida CSS e JavaScript non utilizzata.

Se anche le immagini sono enormi, TBT non sarà il tuo unico collo di bottiglia. Usa il guida sugli enormi carichi utili della rete dopo che il lavoro della sceneggiatura principale è sotto controllo.

Correzione manuale vs. Correzione Thunder

Ripeti il test del TBT senza inseguire il rumore

I punteggi del laboratorio Lighthouse variano, in particolare nei test mobili di Shopify. Esegui diversi test, confronta la mediana e concentrati sullo stesso modello. Guarda insieme il TBT, il lavoro del thread principale, il tempo di esecuzione di JavaScript e i dati del campo INP.

Se il TBT migliora ma l'LCP rimane debole, spostatevi a Ottimizzazione LCP di Shopify. Se il TBT rimane elevato dopo il differimento dell'app, il problema è probabilmente il codice del tema personalizzato o un'app necessaria che necessita di un lavoro più approfondito. Per l'automazione, cfr Caratteristiche di Thunder e prezzi.

Riferimenti e validazione

Utilizzare Documentazione sul tempo di blocco totale di Chrome come fonte di verità su come viene calcolato il TBT. Per la reattività dell'utente reale, confrontalo con Guida INP di web.dev.

Gli esempi della community di Shopify tendono a fornire consigli generali come comprimere immagini o rimuovere app. Ciò può aiutare, ma il TBT riguarda specificamente il blocco del lavoro del thread principale. La soluzione migliore è precisa: trovare attività lunghe, rinviare script non critici, rimuovere JavaScript di basso valore e suddividere il lavoro personalizzato in blocchi più piccoli.