Riduci al minimo il lavoro del thread principale su Shopify: Correggi l'avviso PageSpeed (2026)

Correzione rapida con Thunder

Cosa fa effettivamente il thread principale

Il thread principale del browser è l'unica corsia in cui avviene il lavoro più visibile sulla pagina. Analizza HTML, analizza CSS, calcola quali stili applicare, calcola il layout, dipinge i pixel, gestisce l'input ed esegue JavaScript. Quando JavaScript è in esecuzione, il browser non può rispondere contemporaneamente a un tocco, aggiornare il layout o disegnare un nuovo frame.

Lighthouse lo suddivide in categorie come valutazione dello script, analisi e compilazione dello script, stile e layout, rendering, analisi di HTML e CSS e raccolta dei rifiuti. I commercianti Shopify spesso vedono la valutazione degli script dominare il report perché gli script delle app vengono eseguiti su ogni pagina anche quando il cliente non apre mai il widget.

Ecco perché l'avvertimento conta oltre il punteggio di laboratorio. Un lavoro elevato sul thread principale aumenta il tempo di blocco totale e il tempo di blocco totale è un forte segnale di laboratorio per un vero dolore di interazione. La soglia INP di Google per una buona esperienza è inferiore a 200 ms; se il thread principale è occupato, il clic attende.

Perché i negozi Shopify attivano questo avviso

Passaggio 1: trova le attività lunghe

Apri Chrome DevTools, vai su Prestazioni, registra il caricamento di una pagina e cerca attività lunghe gialle. Qualsiasi attività superiore a 50 ms blocca il thread principale abbastanza a lungo da essere conteggiata nel tempo di blocco totale.

// Quick field debugging in the browser console
new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    console.log('Long task:', Math.round(entry.duration), 'ms');
  }
}).observe({ type: 'longtask', buffered: true });

If the worst tasks come from third-party domains, use our Guida agli script di terze parti. If they come from your own theme bundle, continue below.

Passaggio 2: rinviare gli script di temi non critici

Gli script in testa senza differimento bloccano l'analisi e competono presto per il thread principale. Per gli script dei temi che non devono essere eseguiti prima che venga visualizzato il contenuto, utilizzare defer:

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

Fai attenzione alle dipendenze. Se un selettore di varianti dipende da una libreria globale caricata prima, preserva l'ordine. Non aggiungere ciecamente asincrono a tutto; async può eseguire file fuori ordine. Thunder gestisce il differimento in base alle dipendenze per gli script delle app, che di solito è dove risiede il guadagno maggiore.

Passaggio 3: carica i widget solo quando necessario

Chat, caroselli di recensioni, blocchi di consigli e incorporamenti di video spesso non necessitano di inizializzazione al caricamento della pagina. Caricali quando visibili o dopo l'interazione.

const widget = document.querySelector('[data-reviews-widget]');

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

  import('./reviews-widget.js').then((module) => {
    module.init(widget);
  });

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

if (widget) observer.observe(widget);

Questo modello mantiene JavaScript inutilizzato fuori dal percorso critico. Per immagini e incorporamenti, abbinalo al nostro Guida al caricamento lento di Shopify.

Passaggio 4: suddividere le attività JavaScript lunghe

Se il tuo tema scorre attraverso centinaia di nodi DOM, ricalcola i prezzi, aggiorna i filtri o visualizza i risultati della ricerca in un grande blocco, restituisci al browser tra i blocchi.

async function renderProducts(products) {
  for (let i = 0; i < products.length; i += 12) {
    renderProductBatch(products.slice(i, i + 12));

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

This does not reduce total work, but it prevents one long task from blocking input. That helps INP, especially on mobile where CPU throttling makes every millisecond of script work more expensive. For deeper JavaScript cleanup, use our Guida all'ottimizzazione JavaScript di Shopify.

Passaggio 5: evitare problemi di layout

Il thrashing del layout si verifica quando il codice legge ripetutamente i valori del layout e scrive le modifiche del DOM nello stesso ciclo. Ogni lettura può forzare il browser a ricalcolare il layout in modo sincrono.

// Bad: read and write in the same loop
cards.forEach((card) => {
  const height = card.offsetHeight;
  card.style.minHeight = height + 20 + 'px';
});

// Better: batch reads, then batch writes
const heights = cards.map((card) => card.offsetHeight);
cards.forEach((card, index) => {
  card.style.minHeight = heights[index] + 20 + 'px';
});

Questo è importante per le pagine di raccolta, i cassetti ad aggiunta rapida, le intestazioni adesive e le gallerie multimediali dei prodotti. Se PageSpeed ​​mostra sia il lavoro del thread principale che i costi elevati di stile/layout, ispeziona prima questi componenti interattivi.

Correzione manuale vs. Correzione Thunder

Testa nuovamente le metriche giuste

Dopo le modifiche, ripetere prima il test mobile. Guarda il tempo di blocco totale in Lighthouse, l'INP nei dati sul campo e la suddivisione per categorie del thread principale. Non inseguire un punteggio perfetto in una corsa sintetica; confronta diverse esecuzioni e utilizza il dashboard Prestazioni Web di Shopify per le tendenze degli utenti reali.

Se anche il tuo LCP è alto, il prossimo collo di bottiglia potrebbe essere l'immagine del tuo eroe. Utilizza il nostro Guida al precaricamento dell'immagine Hero di Shopify e il più ampio Guida all'ottimizzazione della velocità di Shopify. Se anche PageSpeed segnala tempo di blocco totale Shopify elevato, catene di richieste critiche, o enormi carichi utili di rete, correggi la diagnostica nello stesso passaggio di audit. Per le opzioni di prezzo e automazione, vedere Prezzi tempestosi.

Riferimenti e validazione

Utilizzare Ripartizione del lavoro del thread principale di Lighthouse come fonte di verità per ciò che misura la diagnosi. Separa la valutazione degli script, l'analisi, lo stile e il layout, il rendering e altri lavori del browser in modo da poter capire se il problema è il codice del tema, lo stack dell'app o la quantità di DOM che il browser deve elaborare.

Per la reattività, effettuare un controllo incrociato con Guida INP di web.dev. Un negozio può sembrare visivamente carico pur sembrando rotto se il thread principale è occupato quando il cliente tocca una variante, apre il cassetto del carrello o fa clic sulla cassa. Questo è il motivo per cui Thunder si concentra così tanto sul differimento degli script di terze parti: dà al browser spazio per rispondere prima che il visitatore perda la pazienza.