Shopify Minimizza JavaScript: correggi l'avviso PageSpeed

Cosa significa l'avviso Minify JavaScript Shopify

La documentazione di Lighthouse di Chrome descrive la minimizzazione di JavaScript come la rimozione degli spazi bianchi e del codice non necessari per creare un file di script più piccolo ma comunque valido. PageSpeed ​​segnala i file interessati e il risparmio stimato sul trasferimento. Su Shopify, questa diagnostica spesso indica JavaScript del tema, librerie di vecchi fornitori, snippet personalizzati o script lasciati dopo gli esperimenti sull'app.

L'avviso è importante perché JavaScript compete per la larghezza di banda della rete e il tempo del thread principale. I file più piccoli vengono scaricati più velocemente, analizzati più velocemente e lasciano meno pressione sui dispositivi mobili. Ma non confondere la minimizzazione con un lavoro più approfondito sulle prestazioni JavaScript. Un piccolo file minimizzato può comunque bloccare l'interazione se esegue un'attività lunga, mentre un file di grandi dimensioni può essere innocuo se viene caricato in seguito ed eseguito solo quando necessario.

Se anche PageSpeed riporta riduce il tempo di esecuzione di JavaScript, attività lunghe del thread principale, o Ripartizione del lavoro del thread principale, dai la priorità a quelli accanto alla minimizzazione.

File JavaScript Shopify comuni da controllare

Pacchetti tematici

File come tema.js, global.js, prodotto-form.js, predittivo-search.jse carrello-cassetto.js potrebbero essere risorse tematiche locali. Questi sono i candidati più sicuri se hai un tema duplicato e puoi testare ogni percorso di acquisto.

Vecchie biblioteche

Plugin jQuery legacy, librerie di caroselli, strumenti di animazione e script di fornitori copiati sono comuni nei negozi più vecchi. Se il file è locale e leggibile, minimizzalo. Se la funzionalità non viene più utilizzata, rimuovila. Il Guida alla pulizia di CSS e JavaScript non utilizzati copre la stessa idea per gli snippet abbandonati.

Script di app di terze parti

You usually cannot safely minify files served from an app's CDN. Ask the vendor, disable unnecessary app embeds, or replace the app. Do not download a vendor script and serve your own copy unless the vendor explicitly supports that path, because you can break updates, consent handling, or checkout-related logic.

Manuale passo passo: minimizza JavaScript su Shopify

1. Duplica il tema live

Lavora in un tema duplicato. JavaScript controlla le varianti del prodotto, l'aggiunta al carrello, gli aggiornamenti del cassetto del carrello, i filtri, la ricerca, i selettori di quantità, gli abbonamenti e il monitoraggio. Un test visivo del fumo non è sufficiente; è necessario testare il comportamento di acquisto.

2. Identify local files from PageSpeed

Expand the PageSpeed minify JavaScript diagnostic. Local Shopify files often include a Shopify CDN path and an asset filename. App files usually come from separate domains or app-specific paths. Fix local theme assets first and keep vendor files out of your manual minification pass.

3. Minimizza solo il file servito

Mantieni la fonte leggibile nel flusso di lavoro di sviluppo e offri una build ridotta. Un semplice esempio:

// Before
function openCartDrawer() {
  const drawer = document.querySelector('[data-cart-drawer]');

  if (!drawer) {
    return;
  }

  drawer.classList.add('is-open');
}

// After
function openCartDrawer(){const drawer=document.querySelector("[data-cart-drawer]");drawer&&drawer.classList.add("is-open")}

4. Fai riferimento a un asset minimizzato in Liquid

Carica il file minimizzato come risorsa separata e aggiorna il riferimento al tema. Fallo prima in un tema duplicato:

<!-- theme.liquid or a section file -->
<script src="{{ 'theme.min.js' | asset_url }}" defer></script>

Usa differimento per script che non necessitano di bloccare l'analisi HTML. Non rimandare ciecamente gli script che devono essere eseguiti prima del contenuto visibile o prima dell'impostazione critica del modulo del prodotto.

5. Codice specifico del modello di guardia

La minimizzazione riduce i byte, ma saltare l'inizializzazione non necessaria riduce il lavoro reale della CPU. Il codice della galleria prodotti non deve essere eseguito sugli articoli. I filtri della raccolta non devono essere eseguiti sulla home page.

if (document.body.dataset.template === 'product') {
  import('./product-gallery.js').then(({ initProductGallery }) => {
    initProductGallery();
  });
}

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

6. Testare il percorso di acquisto prima di pubblicare

Prova modifiche alle varianti, aggiunta al carrello, cassetto del carrello, pulsante di pagamento, sconti, abbonamenti, ricerca predittiva, filtri, gallerie di immagini, widget di revisione e consenso/tracciamento. Quindi confronta PageSpeed, Tempo di blocco totale, INP e Rapporto sulla velocità di Shopify.

Correzione manuale vs. Correzione Thunder

Cosa fare se l'avviso persiste

Se l'avviso Minify JavaScript Shopify rimane dopo la pulizia locale, controlla se PageSpeed sta segnalando script di terze parti. In tal caso, potresti non essere in grado di correggere direttamente il file. Concentrati sul fatto se lo script viene caricato su ogni modello, se può essere ritardato e se l'app è ancora necessaria. Il Guida JavaScript di terze parti e guida facciate conto terzi mostra percorsi più sicuri.

Per un piano completo, utilizzare il file guida completa all'ottimizzazione della velocità di Shopify, punto di riferimento con il test di velocità libera, quindi confronta il costo in termini di tempo della pulizia manuale di JavaScript con Prezzi tempestosi. Minification is useful, but the faster store comes from controlling how much JavaScript loads and when it runs.

FAQ