Ripartizione del lavoro del thread principale di Shopify: leggi la diagnostica PageSpeed

Cosa significa la suddivisione del lavoro del thread principale

Il thread principale del browser coordina l'analisi HTML, l'analisi CSS, l'esecuzione di JavaScript, il calcolo dello stile, il layout, il disegno e la maggior parte della gestione delle interazioni. Quando PageSpeed ​​segnala un totale elevato del thread principale, significa che la pagina chiede al browser di svolgere troppo lavoro sulla CPU durante il caricamento. Ciò può ritardare il primo rendering, bloccare i tocchi e rendere le pagine dei prodotti persistenti sui dispositivi mobili.

La documentazione di Lighthouse di Chrome raggruppa il lavoro del thread principale in categorie: valutazione degli script, stile e layout, rendering, analisi di HTML e CSS, analisi e compilazione di script e garbage collection. Su Shopify, queste categorie si adattano perfettamente ai problemi reali del negozio: script di app, pacchetti di temi di grandi dimensioni, CSS complessi, enormi alberi DOM, sezioni animate, markup del generatore di pagine, filtri di raccolta e widget di personalizzazione.

Questa diagnostica è correlata a minimizza il lavoro del thread principale, attività lunghe del thread principalee Tempo di blocco totale. Una pagina può avere un totale elevato senza un'attività massiccia o un totale modesto con un'attività brutta che danneggia INP. Leggi entrambi i punti di vista.

Come leggere ciascuna categoria del thread principale di Shopify

Valutazione del copione

La valutazione dello script è il tempo impiegato nell'esecuzione di JavaScript. Questa è spesso la categoria Shopify più grande perché la vetrina carica codice del tema, incorporamenti di app, recensioni, cassetti del carrello, personalizzazione, analisi, pixel, chat, filtri e widget di creazione di pagine. Se questa categoria domina, controlla prima le app, quindi i pacchetti di temi.

Le correzioni comuni includono il rinvio di script non critici, la rimozione del codice dell'app inutilizzato, l'inizializzazione del codice solo sui modelli che lo richiedono e la sostituzione di incorporamenti pesanti con facciate di terzi.

Stile e layout

Stile e layout sono il tempo che il browser impiega per calcolare i CSS e la geometria della pagina. Le pagine della collezione Shopify con molte schede prodotto, filtri, badge, campioni ed elementi adesivi possono spendere molto qui. Lo stesso possono fare i temi con markup di creazione di pagine profondamente annidato.

Risolvi questo problema riducendo la complessità del DOM, semplificando i selettori, evitando il thrashing del layout e impostando dimensioni stabili per immagini, contenuti multimediali e slot per app inseriti. Se PageSpeed contrassegna anche la dimensione DOM, utilizza il file Shopify Guida alle dimensioni DOM eccessive.

Rendering

Il rendering include il lavoro di verniciatura e compositing. Ombre di grandi dimensioni, filtri, video di sfondo, sezioni animate e sovrapposizioni di immagini di grandi dimensioni possono rendere costoso il rendering. Utilizza le trasformazioni e l'opacità per l'animazione, mantieni le aree di disegno più piccole ed evita le proprietà di animazione che modificano il layout.

Analisi di HTML e CSS

Il costo di analisi aumenta quando la pagina contiene troppo codice HTML o CSS. I temi Shopify spesso accumulano sezioni inutilizzate, wrapper di creazione di pagine, CSS di app e file di stile duplicati. Pulisci attentamente i CSS non utilizzati, concentrati sui CSS critici e rimuovi i residui dell'app dopo aver disinstallato gli strumenti.

Analisi e compilazione degli script

Prima che JavaScript venga eseguito, il browser deve analizzarlo e compilarlo. I bundle di grandi dimensioni danneggiano anche quando viene eseguita solo una parte del codice. Questo è il motivo per cui è importante rimuovere il codice inutilizzato e suddividere il codice specifico del modello. Il riduce la guida al tempo di esecuzione di JavaScript copre il livello successivo.

Raccolta rifiuti

La Garbage Collection viene visualizzata quando gli script allocano e puliscono la memoria. Caroselli pesanti, filtri, widget di personalizzazione e ripetute ricostruzioni del DOM possono attivarlo. Se questa categoria è elevata, cerca il codice che crea ripetutamente array, ricostruisce le schede prodotto o esegue nuovamente il rendering dei widget durante lo scorrimento e il ridimensionamento.

Manuale passo passo: riduci il lavoro del thread principale su Shopify

1. Prova i modelli giusti

Testa la home page, la pagina del prodotto principale, la pagina della collezione principale e un blog o una pagina di destinazione. Una home page può essere ricca di video mentre una pagina di raccolta è ricca di filtri. Non mediare il problema. Associa i test di laboratorio alla Web Performance Dashboard di Shopify e al Guida al monitoraggio delle prestazioni di Shopify.

2. Inizia con la categoria più grande

Se la valutazione dello script è 2.800 ms e il layout è 400 ms, non dedicare la giornata a minimizzare i CSS. Se lo stile e il layout dominano, non rimandare solo i pixel. La diagnostica è utile perché ti dice dove dovrebbe andare l'ora successiva.

3. Ritarda gli script non critici in modo sicuro

Move optional scripts away from the first render. Keep product forms, variant selection, cart behavior, consent, and checkout handoff safe.

function loadAfterFirstInteraction(src) {
  const load = () => {
    const script = document.createElement('script');
    script.src = src;
    script.async = true;
    document.head.appendChild(script);
  };

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

loadAfterFirstInteraction('https://example.com/reviews-widget.js');

4. Inizializza il codice del tema solo dove è necessario

Molti temi caricano un pacchetto globale che inizializza ogni funzionalità su ogni modello. Proteggi il codice costoso dietro i controlli DOM in modo che il codice multimediale del prodotto non venga eseguito sui post del blog e i filtri della raccolta non vengano eseguiti sulle pagine dei prodotti.

if (document.querySelector('[data-product-gallery]')) {
  initProductGallery();
}

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

if (document.querySelector('[data-cart-drawer]')) {
  initCartDrawer();
}

5. Il layout batch legge e scrive

Il layout thrashing si verifica quando il codice legge ripetutamente il layout e scrive gli stili nello stesso ciclo. Leggere prima le misurazioni, quindi scrivere le modifiche in un riquadro separato.

const cards = Array.from(document.querySelectorAll('[data-product-card]'));
const heights = cards.map((card) => card.offsetHeight);
const maxHeight = Math.max(...heights);

requestAnimationFrame(() => {
  cards.forEach((card) => {
    card.style.minHeight = maxHeight + 'px';
  });
});

6. Suddividi attività personalizzate di grandi dimensioni

Se il codice elabora centinaia di schede prodotto, campioni o filtri contemporaneamente, suddividi il lavoro in blocchi. Ciò aiuta il browser a rispondere tra batch e protegge INP.

const items = Array.from(document.querySelectorAll('[data-filter-option]'));

function hydrateBatch(start = 0) {
  const batch = items.slice(start, start + 20);
  batch.forEach(hydrateFilterOption);

  if (start + 20 < items.length) {
    setTimeout(() => hydrateBatch(start + 20), 0);
  }
}

hydrateBatch();

Correzione manuale vs. Correzione Thunder

Come confermare il guasto migliorato

Testare nuovamente la stessa pagina, modalità dispositivo e condizioni di rete. Il totale del thread principale dovrebbe diminuire, la categoria più grande dovrebbe ridursi e i parametri correlati dovrebbero migliorare. Per i test di laboratorio, guarda Total Blocking Time e attività lunghe. Per le prestazioni sul campo, osserva INP, LCP e il comportamento di conversione.

Tieni a mente buone soglie: LCP dovrebbe essere 2,5 secondi o più veloce, INP dovrebbe essere 200 ms o più veloce e CLS dovrebbe essere 0,1 o inferiore per almeno il 75% delle visite. Se il livello di suddivisione è ancora elevato dopo la pulizia dell'app e dello script, continua con guida completa all'ottimizzazione della velocità di Shopify, confronta l'automazione nel migliori app per l'ottimizzazione della velocità di Shopifyo revisione ottimizzazione della velocità professionale per la pulizia del codice personalizzato.

FAQ