Shopify Riduci il tempo di esecuzione di JavaScript: correggi l'avviso di PageSpeed

Perché i negozi Shopify ricevono questo avviso JavaScript

Lighthouse segnala il tempo di esecuzione di JavaScript quando il browser impiega una grande quantità di tempo nel thread principale per valutare gli script. I negozi Shopify sono particolarmente esposti perché tema, app, pixel di analisi, strumenti di consenso, widget di recensione, strumenti di ricerca, filtri di raccolta, generatori di pagine e cassetti del carrello spesso vengono eseguiti sulla stessa pagina.

La guida Core Web Vitals di Google separa caricamento, reattività e stabilità visiva. JavaScript pesante danneggia la reattività più direttamente perché clic e tocchi attendono dietro attività lunghe. Può anche ritardare LCP quando gli script competono con l'immagine hero, i CSS e il rendering dei caratteri. Se visualizzi anche un INP o un tempo di blocco totale scarsi, leggi il Guida Shopify INP e Guida al tempo di blocco totale di Shopify.

L'avviso non ti dice di eliminare tutti gli script. Ti sta dicendo di decidere quali script sono fondamentali per la prima visualizzazione e quali possono attendere. Una pagina di prodotto richiede la selezione delle varianti, lo stato del prezzo, i media del prodotto, l'aggiunta al carrello e talvolta gli abbonamenti. Probabilmente non ha bisogno di chat, recensioni, consigli, mappe di calore e ogni tag di marketing prima della prima interazione.

Come trovare il JavaScript Shopify che conta

Test the homepage, a best-selling product page, a collection page, and a landing page. Product pages often have the worst script mix because reviews, media galleries, subscriptions, recommendations, and product options all load there. Collection pages often suffer from filters, search, sorting, personalization, and large DOM updates.

In Chrome DevTools, apri il pannello Prestazioni, registra un carico limitato su dispositivi mobili e cerca lunghi blocchi di scripting gialli. In PageSpeed ​​Insights, seleziona "Riduci il tempo di esecuzione di JavaScript", "Riduci al minimo il lavoro del thread principale" e "Riduci JavaScript inutilizzato". La Web Performance Dashboard di Shopify fornisce le tendenze sui campi, mentre PageSpeed ​​fornisce una diagnostica specifica della pagina.

Utilizza sempre gli stessi URL. I punteggi di PageSpeed ​​variano perché variano la posizione del test, la cache, la limitazione, le risposte dell'app e lo stato della pagina. L'articolo su perché i punteggi dei test di velocità di Shopify variano spiega come confrontare i test senza inseguire movimenti casuali.

Manuale passo dopo passo: riduci il tempo di esecuzione di JavaScript su Shopify

1. Rimuovi le app e gli snippet che non usi più

Inizia con l'elenco delle app, gli incorporamenti delle app dei temi e i vecchi snippet. Le app disinstallate possono lasciare codice all'interno tema.liquid, sezioni, snippet o pixel di eventi del cliente. Rimuovi il codice solo dopo aver duplicato il tema e confermato che l'app non è attiva.

<!-- theme.liquid: remove old scripts only after confirming the app is gone -->
<!-- Example of stale code to investigate, not blindly delete -->
<script src="https://cdn.old-widget.example/app.js"></script>
{% render 'old-reviews-widget' %}

Se questo è un problema ricorrente, leggi la guida agli avanzi dell'app Shopify prima di modificare i file dei temi di produzione.

2. Rimandare gli script non necessari per la prima interazione

Nativo differimento è sicuro per molti script di proprietà del tema che non necessitano di bloccare l'analisi. Mantiene l'ordine di esecuzione per gli script differiti e viene eseguito dopo l'analisi HTML. Non aggiungerlo ciecamente alla logica adiacente al checkout, al codice di consenso o agli script che devono essere inizializzati prima che la pagina sia utilizzabile.

<!-- Better for non-critical theme JS -->
<script src="&lbrace;&lbrace; 'theme.js' | asset_url &rbrace;&rbrace;" defer></script>

<!-- Avoid async for scripts that depend on execution order -->
<script src="&lbrace;&lbrace; 'product-form.js' | asset_url &rbrace;&rbrace;" defer></script>

3. Carica widget opzionali secondo l'intento dell'utente

Chat, sondaggi, mappe di calore e alcuni widget di personalizzazione possono spesso attendere fino alla prima visualizzazione, scorrimento, tempo di inattività o clic specifico. Ciò riduce la coda del thread principale al primo caricamento mantenendo lo strumento a disposizione degli acquirenti che ne hanno bisogno.

function loadChatWidget() {
  if (window.__chatLoaded) return;
  window.__chatLoaded = true;
  const script = document.createElement('script');
  script.src = 'https://example-chat-cdn.com/widget.js';
  script.async = true;
  document.head.appendChild(script);
}

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

Questo modello è utile per i widget di supporto, ma non per il codice che deve registrare il consenso o l'attribuzione delle entrate prima che gli eventi vengano attivati. Per gli store ricchi di app, confronta questo con correzione degli script delle app che rallentano Shopify.

4. Smetti di inizializzare ogni componente su ogni pagina

Molti temi Shopify forniscono un file JavaScript di grandi dimensioni che inizializza slider, supporti di prodotto, cassetti del carrello, filtri di raccolta, fisarmoniche, modali e ricerca predittiva ovunque. Proteggi questi inizializzatori in modo che le pagine eseguano solo ciò di cui hanno bisogno.

if (document.querySelector('[data-product-form]')) {
  import('./product-form.js').then(({ initProductForm }) => initProductForm());
}

if (document.querySelector('[data-collection-filters]')) {
  import('./collection-filters.js').then(({ initFilters }) => initFilters());
}

Le ​​importazioni dinamiche richiedono una pipeline di creazione, quindi sono più semplici nei temi personalizzati rispetto alla modifica di base dei temi Shopify. Se il tuo tema non supporta il raggruppamento, dividi gli script per modello e includi solo ciò di cui ha bisogno ciascun modello.

5. Utilizzare ascoltatori passivi per il lavoro di scorrimento e tocco

I gestori di scorrimento e tocco possono bloccare il browser se il browser deve attendere per sapere se l'evento chiama preventDefault(). Utilizza ascoltatori passivi quando il conduttore osserva solo l'interazione.

window.addEventListener('scroll', updateStickyHeader, { passive: true });
window.addEventListener('touchstart', trackTouchIntent, { passive: true });

Vedi il Guida agli ascoltatori di eventi passivi se PageSpeed segnala anche problemi del listener di eventi.

Correzione manuale vs. Correzione Thunder

Cosa non rompere

Il lavoro di velocità più rischioso è il differimento dello script che interrompe accidentalmente il comportamento di acquisto. Prova modifiche alle varianti, aggiunta al carrello, aggiornamenti del cassetto del carrello, immissione di codici di sconto, selezioni di abbonamenti, pulsanti di pagamento dinamico, consigli sui prodotti, recensioni, consenso, analisi e pixel degli annunci. Una pagina più veloce che perde il monitoraggio delle conversioni o il comportamento di aggiunta al carrello rappresenta un'ottimizzazione non riuscita.

Evita anche di impilare più app di velocità. Più app che tentano di rinviare lo stesso script possono causare bug di timing difficili da eseguire il debug. Se hai bisogno di un piano ampio, usa il file guida completa all'ottimizzazione della velocità di Shopify e confronta le opzioni nel migliore guida alle app veloci di Shopify.

Come verificare che la correzione abbia funzionato

Esegui PageSpeed Insights o a Test di velocità di Shopify sugli stessi URL, mobile first. Cerca tempi di esecuzione JavaScript inferiori, meno attività lunghe, tempo di blocco totale inferiore e tendenze INP migliori una volta aggiornati i dati sul campo. Quello di Google Guida ai Core Web Vitals recommends evaluating page experience at the 75th percentile, so do not judge long-term success from one lab run.

Se JavaScript è solo una parte del rallentamento, continua Risorse che bloccano il rendering, grandi carichi utili di retee Ottimizzazione LCP. Most real Shopify speed wins come from fixing the stack, not one isolated warning.

FAQ