Shopify Enormi carichi utili di rete: Riduci il peso della pagina (2026)

Correzione rapida con Thunder

Cosa conta come un carico utile enorme?

Il peso della pagina è il numero totale di byte scaricati dal browser: HTML, CSS, JavaScript, immagini, caratteri, video, JSON, pixel di tracciamento e risorse dell'app. Lighthouse segnala carichi utili molto grandi perché ogni megabyte in più danneggia gli utenti mobili, soprattutto su connessioni lente e telefoni di fascia media.

Una pagina di prodotto Shopify snella potrebbe caricare inizialmente circa 1-2 MB. Una home page pesante con presentazione, sfondo video, generatore di pagine, cinque app, tre famiglie di caratteri e ampie sezioni di raccolta può facilmente scaricare 6-12 MB. Al cliente non interessa che le risorse siano belle se la pagina è ancora in caricamento mentre sta provando a fare acquisti.

La dimensione del carico utile non è l'unico fattore di velocità. Una pagina da 2 MB con un JavaScript pessimo può sembrare peggiore di una pagina da 3 MB con un caricamento pulito. Ma quando PageSpeed ​​afferma che il carico utile è enorme, i byte sono il primo posto in cui guardare.

Passaggio 1: ordinare la scheda Rete in base alla dimensione di trasferimento

Open Chrome DevTools -> Rete, disabilita la cache, ricarica la pagina e ordina per dimensione trasferita. Ignora i file di piccole dimensioni per ora. I principali trasgressori sono le immagini hero, le foto dei prodotti, i video incorporati, i pacchetti di app, i file JavaScript, CSS e di caratteri di grandi dimensioni.

Usa PageSpeed ​​per il punteggio, ma usa la scheda Rete per le decisioni. Se il file più grande è un'immagine hero da 2,4 MB, non iniziare minimizzando un file CSS da 12 KB. Se i primi dieci file sono script di app, non dedicare la mattinata a comprimere le miniature dei prodotti.

Per un audit ripetibile, seguire il ns guida ai risultati del test di velocità e il completo Guida all'ottimizzazione della velocità di Shopify.

Passaggio 2: richiedi immagini Shopify più piccole

Il CDN di Shopify può fornire immagini ridimensionate, ma il tuo Liquid decide quali larghezze richiedere. Se l'eroe renderizzato è largo 1200 px e il tema scarica un originale da 4000 px, il browser spreca larghezza di banda prima di poter dipingere LCP.

{{ section.settings.image
  | image_url: width: 1600
  | image_tag:
    widths: '600, 900, 1200, 1600',
    sizes: '(min-width: 990px) 100vw, 100vw',
    loading: 'eager',
    fetchpriority: 'high',
    alt: section.settings.heading
}}

Per le griglie dei prodotti sotto la piega, utilizzare larghezze inferiori e caricamento lento. Una scheda prodotto raramente necessita di un'immagine da 2000 px. Il nostro guida rapida alla pagina del prodotto e guida rapida alla pagina di raccolta copre le scelte specifiche del modello.

Passaggio 3: caricamento lento di tutto sotto la prima finestra

La prima finestra dovrebbe caricarsi immediatamente. I media lower-the-fold dovrebbero aspettare. Ciò include le schede prodotto nella parte inferiore della pagina, le miniature delle gallerie, le sezioni dei lookbook, i caroselli di recensioni, i feed di Instagram e i video.

{{ product.featured_image
  | image_url: width: 700
  | image_tag:
    widths: '300, 500, 700',
    sizes: '(min-width: 990px) 25vw, 50vw',
    loading: 'lazy',
    alt: product.title
}}

Non caricare lentamente l'immagine dell'eroe. Questo è un errore diverso e di solito danneggia LCP. Usa il Guida al precarico dell'immagine hero per immagini sopra la piega e il file guida al caricamento lento per tutto il resto.

Passaggio 4: sostituisci i payload pesanti di video e slider

Il video è il modo più veloce per rendere enorme una pagina Shopify. Un video di sfondo può aggiungere diversi megabyte prima che il cliente veda un prodotto. Gli incorporamenti di YouTube e Vimeo possono anche inserire grandi pacchetti JavaScript prima dell'interazione.

Utilizza un'immagine poster e carica il video dopo aver fatto clic. Per le sezioni degli eroi, spesso vince un'immagine statica. Per informazioni sul prodotto, posiziona il video più in basso nella pagina e carica lentamente l'incorporamento. Per gli slider, mostra un eroe forte invece di precaricare più diapositive.

Se il video è importante per la conversione, conservalo. Basta non fare in modo che ogni visitatore mobile lo scarichi prima che possa navigare. Il nostro Guida all'ottimizzazione dei video di Shopify ha modelli specifici di incorporamento.

Passaggio 5: taglia il peso di app, carattere e tema

Le app aggiungono carico utile in modi meno ovvi: file JavaScript, file CSS, caratteri web, immagini di revisione, pixel di tracciamento e risposte API. Controlla gli incorporamenti dell'app e rimuovi tutto ciò che non è necessario su ogni pagina. Quindi cerca nei file del tema i vecchi frammenti di app lasciati dopo aver disinstallato le app.

I caratteri sono la prossima vittoria facile. Utilizza una o due famiglie, limita i pesi, precarica solo il file dei caratteri più importanti e, ove possibile, utilizza i caratteri di sistema per l'interfaccia utente di basso valore. Se PageSpeed mostra un ritardo nel caricamento dei caratteri, utilizza il nostro Guida all'ottimizzazione dei caratteri Shopify.

Per il peso del codice, pulire CSS e JavaScript non utilizzati. I page builder e le vecchie sezioni tematiche spesso forniscono risorse che non supportano più contenuti visibili.

Correzione manuale vs. Correzione Thunder

Ripeti il test per modello, non solo per home page

I problemi di carico utile variano in base al modello. La tua home page potrebbe essere ricca di immagini, le pagine dei prodotti potrebbero essere ricche di app e le pagine di raccolta potrebbero essere piene di carte. Testa almeno una home page, una pagina di prodotto e una pagina di collezione.

Se desideri il percorso automatizzato più veloce, installa Thunder e quindi ripulisci i file multimediali più grandi. Per un aiuto pratico, consulta il nostro Servizio di ottimizzazione della velocità di Shopify. Per i dettagli del piano, vedere Prezzi tempestosi.

Riferimenti e validazione

Cromato Guida al carico utile della rete Lighthouse raccomanda di rinviare le richieste non necessarie e di ridurre al minimo le risorse possibili. Ciò si associa direttamente a Shopify: ridimensiona i media, carica lentamente le sezioni non critiche, taglia gli script delle app e mantieni la pagina iniziale snella.

I thread della community di Shopify relativi a questo avviso di solito includono gli stessi consigli perché le cause sono coerenti: le immagini sono troppo grandi, le app vengono caricate ovunque, i video vengono incorporati troppo presto e il codice inutilizzato viene ancora spedito. Correggi prima i file più grandi. Le piccole ottimizzazioni contano in seguito; i carichi utili giganti necessitano di tagli diretti.