Shopify Riduci i JavaScript inutilizzati: correggi il gonfiore del codice

Quale PageSpeed viene realmente segnalato

Lighthouse segnala JavaScript inutilizzato quando uno script contiene una quantità significativa di codice che non viene utilizzato durante il caricamento iniziale della pagina. Le indicazioni di Chrome indirizzano gli sviluppatori a DevTools Coverage per un'indagine riga per riga. Su Shopify, questo spesso espone un grande pacchetto di temi che alimenta ogni modello, oltre a script di app per recensioni, popup, abbonamenti, personalizzazione, chat, analisi e consigli sui prodotti.

L'avvertimento è facile da fraintendere. Uno script della galleria di prodotti potrebbe non essere utilizzato su una pagina di raccolta ma richiesto su una pagina di prodotto. Uno script popup potrebbe non essere utilizzato per i primi secondi ma essere necessario dopo un certo ritardo. Uno script di monitoraggio potrebbe non influire sul layout ma consumare comunque tempo di rete e thread principale. La soluzione non è la cancellazione cieca. La correzione sta caricando meno codice in precedenza.

JavaScript non utilizzato si connette direttamente a Ottimizzazione INP di Shopify, Tempo di esecuzione JavaScript, attività lunghe del thread principalee Tempo di blocco totale. Anche se i byte vengono memorizzati nella cache, il browser può comunque analizzare, compilare ed eseguire il codice prima che l'acquirente possa toccare un pulsante.

Fonti Shopify comuni di JavaScript inutilizzato

Un pacchetto di temi per ogni modello

Molti temi vengono spediti singolarmente File tema.js che include caroselli, fisarmoniche, supporti di prodotto, ricerca predittiva, localizzazione, cassetti del carrello, intestazioni fisse e animazioni. Ciò è conveniente per lo sviluppo ma costoso per il primo caricamento quando è necessario solo un piccolo sottoinsieme.

Snippet dell'app rimasti dopo la disinstallazione

Le app possono lasciare snippet, tag di script, blocchi di estensioni di app a tema, metafield e codice globale dopo la disinstallazione. Se il JavaScript di un'app rimossa viene ancora visualizzato in DevTools, consideralo come una pulizia a basso rischio dopo il test. Questo si sovrappone a Pulizia CSS e JavaScript non utilizzata.

Pixel e tag caricati troppo presto

GTM, Meta Pixel, TikTok Pixel, Pinterest Tag e gli strumenti di attribuzione possono tutti aggiungere JavaScript inutilizzato durante il primo caricamento. Mantieni il monitoraggio fondamentale per l'azienda, ma non caricare ogni esperimento, tag legacy e pixel duplicati su ogni pagina.

Manuale passo passo: riduci i JavaScript inutilizzati su Shopify

1. Misura in base al modello, non solo alla home page

Testa separatamente la home page, la pagina del prodotto, la pagina della collezione, il carrello e le pagine di destinazione ad alto traffico. Uno script inutilizzato sulla home page può essere essenziale sulle pagine dei prodotti. Utilizza la copertura di Chrome DevTools e il file Test di velocità Shopify gratuito per confrontare i modelli.

2. Script del tema dell'inventario

In un tema duplicato, sono inclusi i file di layout e sezione di ricerca per JavaScript. Cerca file globali che potrebbero essere caricati in modo condizionale solo dove necessario.

<!-- Before: loads product media code everywhere -->
{{ 'product-media.js' | asset_url | script_tag }}

<!-- Better: load only on product templates -->
{% if template.name == 'product' %}
  {{ 'product-media.js' | asset_url | script_tag }}
{% endif %}

3. Rimanda il codice non necessario per il primo rendering

JavaScript che alimenta recensioni, consigli, chat, controlli video, popup di newsletter o sezioni sotto la piega spesso non ha bisogno di bloccare la prima schermata. Utilizzare differimento per script locali che non devono essere eseguiti prima del termine dell'analisi HTML.

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

4. Lazy inizializza le funzionalità sotto la piega

Parte del codice deve essere caricata prima o poi, ma non immediatamente. Inizializza slider, video, widget di consigli o tabelle di confronto quando la relativa sezione si avvicina al viewport.

const sections = document.querySelectorAll('[data-lazy-module]');

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

    const section = entry.target;
    const moduleName = section.dataset.lazyModule;
    const module = await import('/assets/' + moduleName + '.js');
    module.init(section);
    observer.unobserve(section);
  });
}, { rootMargin: '300px' });

sections.forEach((section) => observer.observe(section));

5. Rimuovi attentamente i residui dell'app

Controlla i file di layout del tema per le vecchie inclusioni, quindi controlla gli incorporamenti dell'app Shopify. Disabilita un sospetto alla volta su un tema duplicato e testa l'aggiunta al carrello, la selezione delle varianti, il cassetto del carrello, il monitoraggio e il trasferimento alla cassa. Per gli store ricchi di app, leggi il Guida all'ottimizzazione della velocità dell'app Shopify prima di tagliare il codice.

6. Ritesta le azioni dell'utente, non solo i punteggi

Dopo ogni pulizia, testa il percorso di acquisto principale su dispositivo mobile. Tocca i selettori delle varianti, le tabelle delle taglie, le fisarmoniche, l'aggiunta rapida, il cassetto del carrello, le scatole degli sconti, le opzioni di ritiro e i pulsanti di pagamento. Un rapporto PageSpeed ​​più pulito non è una vittoria se interrompe il comportamento delle entrate.

Correzione manuale vs. Correzione Thunder

Cosa risolvere dopo JavaScript inutilizzato

Se la pulizia JavaScript aiuta ma la pagina continua a non funzionare con PageSpeed, continuare lavoro del filo principale, facciate di terzi, Correzioni JavaScript di terze partie il guida completa all'ottimizzazione della velocità di Shopify. JavaScript è solitamente uno strato in uno stack più grande che include immagini, CSS, caratteri, stabilità del layout e governance delle app.

Per i negozi che non possono permettersi una settimana di chirurgia manuale a tema, Thunder offre un percorso più rapido verso una linea di base più pulita. Recensione Prezzi tempestosi, installalo nello store e mantieni la rimozione manuale del codice per i vecchi snippet e la logica specifica del modello di cui un'app non dovrebbe indovinare.

FAQ