Attività lunghe del thread principale di Shopify: come suddividere il lavoro di blocco

Perché le attività lunghe sono importanti per la velocità di Shopify

Il thread principale del browser gestisce l'analisi, l'esecuzione di JavaScript, il calcolo dello stile, il layout, il disegno e molte interazioni con l'utente. Quando un'attività viene eseguita troppo a lungo, il browser non può rispondere rapidamente a tocchi, clic, scorrimento o operazioni di rendering. Le indicazioni sulle prestazioni di Chrome consigliano di suddividere le attività lunghe in modo che il browser abbia la possibilità di aggiornare la pagina e gestire l'input.

Questo è direttamente importante per Shopify INP e Tempo di blocco totale. I test di laboratorio del faro mostrano TBT. I dati sul campo in Core Web Vitals mostrano se gli acquirenti reali riscontrano una scarsa reattività.

Anche i compiti lunghi si sovrappongono a quelli più ampi minimizza il lavoro del thread principale avviso e riduce il tempo di esecuzione di JavaScript. Pensa al lavoro del thread principale come al costo totale della CPU e alle attività lunghe come ai blocchi che bloccano maggiormente gli acquirenti.

Fonti comuni per attività lunghe nei temi Shopify

Le pagine dei prodotti spesso eseguono insieme logica delle varianti, gallerie multimediali, abbonamenti, recensioni, consigli, personalizzazione, analisi e codice del cassetto del carrello. Le pagine di raccolta eseguono filtri, ordinamento, ricerca, idratazione delle schede prodotto e monitoraggio. Le home page eseguono dispositivi di scorrimento, sezioni video, blocchi di creazione di pagine, incorporamenti di app e pixel di marketing.

Gli script di terze parti sono spesso la soluzione più rapida. Klaviyo, GTM, Meta Pixel, TikTok Pixel, widget di recensione, strumenti di chat, popup e app di attribuzione possono tutti aggiungere lavoro al thread principale. Utilizza le guide su JavaScript di terze parti, GTM rallenta Shopifye Widget di chat dal vivo per correzioni specifiche dell'app.

Manuale passo passo: suddividere le attività lunghe del thread principale su Shopify

1. Registra una traccia delle prestazioni mobili

Apri Chrome DevTools, limita la CPU, registra il caricamento della pagina e cerca lunghi blocchi di scripting gialli. Fare clic su un blocco per visualizzare lo stack di chiamate della funzione. Confrontalo con la diagnostica di PageSpeed ​​e la Web Performance Dashboard di Shopify.

2. Ritarda i widget che non sono necessari per la prima visualizzazione

Chat, sondaggi, mappe di calore e alcuni widget di recensione raramente devono essere eseguiti prima del rendering dell'eroe e del contenuto del prodotto. Caricarli dopo l'intento dell'utente o il tempo di inattività.

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. Inizializza JavaScript solo sulle pagine che lo richiedono

Non eseguire filtri di raccolta sulle pagine dei prodotti o sul codice multimediale del prodotto sui post del blog. Proteggi gli inizializzatori controllando il DOM pertinente prima di eseguire una configurazione costosa.

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

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

4. Dividi i loop costosi in blocchi più piccoli

Se il codice personalizzato elabora molte schede prodotto, varianti, recensioni o opzioni di filtro contemporaneamente, suddividi il lavoro in modo che il browser possa respirare tra un pezzo e l'altro. Utilizzare requestIdleCallback dove supportato, con fallback di timeout.

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

Il punteggio dei consigli, la personalizzazione, i badge dell'inventario e l'arricchimento dell'analisi non dovrebbero bloccare il primo rendering a meno che gli acquirenti non abbiano bisogno immediatamente del risultato. Renderizza un'impostazione predefinita stabile, quindi migliorala quando la pagina è utilizzabile.

6. Proteggi gli script critici per le entrate

Non ritardare ciecamente la selezione delle varianti, i moduli dei prodotti, gli aggiornamenti del cassetto del carrello, i selettori degli abbonamenti, il consenso, il trasferimento del checkout o gli eventi di attribuzione. I cambiamenti di velocità devono preservare il comportamento di acquisto. Testa l'aggiunta al carrello, le modifiche alle varianti, i flussi di sconto, il monitoraggio e il pagamento dopo ogni modifica allo script.

Correzione manuale vs. Correzione Thunder

Miglioramento di come confermare attività lunghe del thread principale

Ripeti il test con PageSpeed Insights e il Test di velocità Shopify gratuito. Cerca un TBT inferiore, meno attività lunghe in DevTools, tempi di esecuzione JavaScript ridotti e reattività migliorata quando si toccano filtri, varianti, accordion e pulsanti Aggiungi al carrello.

Per il sistema più ampio, seguire il guida completa all'ottimizzazione della velocità di Shopify. Se hai bisogno prima dell'automazione, confronta le opzioni nel file migliori app per l'ottimizzazione della velocità di Shopify guida o verifica Prezzi tempestosi.

FAQ