Miglioramento delle performance del negozio online

Il tuo negozio online è costituito da una serie di funzionalità, come il codice del tema, le app, le immagini, i video, i caroselli, i feed dei social media e le analisi. Queste funzionalità possono migliorare l'esperienza del visitatore e ampliare le capacità del tuo sito.

Tuttavia, ogni funzionalità che aggiungi al negozio online può influire sulle sue performance. Alcune funzionalità possono rallentare il sito o creare comportamenti imprevisti che possono influire sulla user experience.

Le performance web si concentrano sull'ottimizzazione della user experience. Attualmente, le performance web si concentrano su tre aree principali, che si riflettono anche nei Core Web Vitals:

Velocità di caricamento, misurata tramite il Largest Contentful Paint (LCP)
Stabilità del layout, misurata tramite il Cumulative Layout Shift (CLS)
Reattività all'interazione dell'utente, misurata tramite l'Interaction to Next Paint (INP)

Ottimizzare le performance web significa che è più probabile che i clienti rimangano sul tuo sito e convertano.

In questa pagina

Ottimizzazioni per il negozio online

Il tuo negozio online integra l'ottimizzazione web, che è presente anche in tutte le nuove funzionalità. Non devi fare nulla di speciale per usufruire delle seguenti funzionalità:

Il tuo negozio online è ospitato su server veloci e globali e non limita la larghezza di banda del negozio. Puoi controllare lo stato del tuo negozio Shopify su Shopify Status.
Il tuo negozio online dispone di una rete per la distribuzione dei contenuti (CDN) gestita da Cloudflare, che garantisce il caricamento rapido del negozio online in tutto il mondo. Puoi controllare lo stato della CDN sulla pagina di stato di Cloudflare.
Per mantenere bassi i tempi di caricamento, le immagini vengono ottimizzate automaticamente utilizzando la CDN per immagini. In combinazione con il codice del tema, la CDN per immagini può fornire il formato di immagine migliore, che viene anche ridimensionato e compresso per mantenere ridotte le dimensioni dei file.

Fattori che influiscono sulle performance web

Per i negozi Shopify, i fattori principali che influiscono sulle performance web sono i seguenti:

Il tema del negozio online
Le app che hai installato
Qualsiasi codice aggiuntivo di terze parti che hai aggiunto manualmente al negozio, inclusi i gestori di tag e i tag al loro interno

Ciò significa che, per migliorare le performance web, dovresti concentrarti sui seguenti aspetti:

Usa un tema aggiornato e ottimizzato. Tutti i temi della famiglia Horizon e i temi di Online Store 2.0 di Shopify sono gratuiti e ottimizzati per le performance web. Inoltre, anche molti altri temi di terze parti sono ottimizzati per le performance web. Puoi consultare i dati più recenti sulle performance dei temi.
Se il tuo tema offre transizioni di pagina o altre animazioni, confronta le performance web prima e dopo la loro attivazione. Le animazioni possono rallentare le pagine.
Evita di aggiungere troppe sezioni ai modelli di pagina del tema. Un numero elevato di sezioni nelle pagine può ridurre le performance web.
Se hai collezioni con un gran numero di prodotti, valuta la possibilità di attivare l'impaginazione per limitare il numero di prodotti caricati contemporaneamente.
Valuta le app installate e il codice di terze parti per assicurarti che creino un valore sufficiente a compensare eventuali cali di performance.
Controlla il gestore di tag per rimuovere eventuali tag inutilizzati o di scarso valore. Scopri di più sulle best practice per i tag e i gestori di tag.

Strumenti di test

Puoi utilizzare i seguenti strumenti per analizzare le performance del tuo negozio online:

Report sulle performance web: i report sulle performance web di Shopify utilizzano i Core Web Vitals per misurare l'esperienza degli utenti reali sul tuo negozio online.
PageSpeed Insights: puoi eseguire i tuoi report utilizzando PageSpeed Insights di Google per visualizzare metriche più dettagliate per le pagine del tuo negozio.

Comprensione dei suggerimenti di terze parti sulle performance

Gli strumenti di analisi delle performance di terze parti potrebbero suggerire modifiche per migliorare la velocità del tuo negozio. Tuttavia, molti di questi suggerimenti sono già implementati da Shopify o non sono applicabili ai negozi Shopify.

Ottimizzazioni già incluse in Shopify

Il tuo negozio Shopify include automaticamente le seguenti ottimizzazioni delle performance:

Rete per la distribuzione dei contenuti (CDN): Shopify offre una CDN di prim’ordine senza costi aggiuntivi, garantendo performance veloci a livello globale. Tutti gli asset vengono forniti tramite HTTP/2, riducendo l’overhead rispetto ai protocolli meno recenti.

Caching del browser: Shopify imposta il caching del browser per le risorse memorizzabili nella cache su un anno, la durata massima possibile. Ciò significa che i visitatori abituali del tuo negozio riscontreranno tempi di caricamento più rapidi.

Compressione Gzip: Shopify utilizza la compressione Gzip su CSS, JavaScript, documenti e pagine per ridurre la larghezza di banda e migliorare i tempi di caricamento. La funzione Keep-alive è inoltre abilitata per il recupero di più file.

Ottimizzazione delle immagini: Shopify comprime automaticamente le immagini JPG utilizzando algoritmi avanzati, bilanciando la compressione e l’impatto visivo. Le immagini vengono spesso fornite in formato WebP per una migliore compressione e un caricamento più rapido.

Minimizzazione dei file: Shopify minimizza automaticamente i file CSS e JavaScript quando vengono richiesti dalla tua vetrina virtuale, riducendo le dimensioni dei file senza comprometterne la funzionalità.

Quando i suggerimenti di terze parti non sono applicabili

Gli strumenti di analisi di terze parti potrebbero suggerire modifiche non pertinenti per i negozi Shopify:

Configurazioni a livello di server: i suggerimenti sulla configurazione del server, sugli header HTTP o sulle policy di caching sono già ottimizzati dall’infrastruttura di Shopify.
Implementazione della CDN: i suggerimenti per l’aggiunta di una CDN non sono necessari, poiché Shopify include già una CDN ad alte performance.
Impostazioni di compressione: i suggerimenti sull’abilitazione della compressione sono già implementati sulla piattaforma Shopify.

Come agire in base ai suggerimenti pertinenti

Concentrati sulle raccomandazioni relative ai contenuti e alle funzionalità specifici del tuo negozio:

Ottimizzazione delle immagini: assicurati che le immagini caricate abbiano dimensioni appropriate e utilizzino i formati consigliati.
Valutazione delle app: valuta se le app installate offrono un valore sufficiente a compensare un eventuale impatto sulle performance.
Ottimizzazione del tema: scegli temi ottimizzati per le performance e limita il numero di sezioni nei modelli di pagina.

Risoluzione dei problemi delle pagine a caricamento lento

Se il tuo negozio si carica lentamente, segui questi passaggi per identificare e risolvere il problema:

Passaggio 1: verifica il problema

Testa personalmente la velocità di caricamento del negozio da diversi dispositivi e connessioni Internet.
Chiedi ad altri di testare il tuo negozio per confermare che non si tratti di un problema locale della tua connessione Internet.
Utilizza strumenti di test come PageSpeed Insights per ottenere metriche specifiche sulle performance.

Passaggio 2: identifica la causa

Verifica la presenza di troppe app: un numero eccessivo di app che caricano risorse sulla vetrina virtuale può rallentare le performance. Controlla le app installate e rimuovi quelle non essenziali per le vendite.

Controlla le immagini di grandi dimensioni: le pagine con numerose immagini di alta qualità possono caricarsi lentamente. Ottimizza le immagini o riduci il numero di quelle visualizzate. Scopri di più sulle dimensioni consigliate per le immagini.

Identifica gli script lenti: se il tuo sito rimane una pagina vuota prima di caricarsi tutto in una volta, utilizza gli strumenti per sviluppatori del browser per identificare gli script a caricamento lento. Contatta lo sviluppatore dell’app o del tema per risolvere il problema.

Passaggio 3: intervieni

Rimuovi le app non necessarie: la disinstallazione di un’app non rimuove automaticamente il suo codice dal tema. Potrebbe essere necessario contattare lo sviluppatore dell’app per avere istruzioni complete sulla rimozione.

Ottimizza le immagini: utilizza formati di file appropriati (JPG per le foto, PNG per la grafica con trasparenza) e ridimensiona le immagini in modo che corrispondano alle dimensioni di visualizzazione.

Valuta le performance del tema: valuta la possibilità di passare a un tema ottimizzato per le performance se il tema corrente causa rallentamenti significativi.

Richiedi assistenza per le performance del negozio online

Se utilizzi un tema gratuito di Shopify, l’Assistenza Shopify potrebbe essere in grado di aiutarti con i miglioramenti di base delle performance.

Se utilizzi un tema di terze parti e hai bisogno di assistenza, devi contattare lo sviluppatore del tema, ingaggiare un esperto di performance web di Shopify o ingaggiare un Partner Shopify per le performance e la velocità del sito. Scopri di più su come ingaggiare un Partner Shopify.

Se il problema di performance deriva da un’app, puoi contattare lo sviluppatore dell’app.

Se hai un team di sviluppo o un’agenzia partner, puoi contattarli per ulteriore assistenza.

Informazioni tecniche e risorse per la risoluzione dei problemi

Se sei uno sviluppatore che cerca di migliorare le performance di una vetrina virtuale, di un tema o di un’app Shopify, puoi consultare le seguenti risorse per ogni Segnale Web Essenziale. Scopri di più sulle best practice relative alle performance per i temi di Shopify.

Velocità di caricamento

Il Largest Contentful Paint (LCP) misura la velocità di caricamento, in base alla rapidità con cui l’elemento più grande sullo schermo diventa visibile. Il Time to first byte (TTFB) e il First contentful paint (FCP) sono metriche di supporto che ti aiutano a capire meglio da dove proviene la causa principale del problema. Puoi scoprire di più sul debug delle cause comuni di caricamento lento nelle vetrine virtuali Liquid di Shopify.

Stabilità visiva

Il Cumulative Layout Shift (CLS) misura la stabilità visiva, in base a quanto il contenuto si sposta in modo imprevisto durante il caricamento. Per un’analisi approfondita sul debug del CLS, leggi Come ottimizzare il Cumulative Layout Shift (CLS) sui siti Shopify.

Interattività

L’Interaction to Next Paint (INP) misura l’interattività in base al tempo necessario affinché la pagina diventi reattiva alla maggior parte delle azioni dell’utente. Ad esempio, azioni dell’utente come cliccare su un link o un pulsante.

Se riscontri un INP scadente, molto probabilmente nel tuo negozio è presente troppo JavaScript proveniente dal codice del tema, dal codice dell’app o dal codice di terze parti/tag manager. Cerca di ripulire gli elementi che causano più problemi. Scopri di più su 3 modi per trovare gli elementi JavaScript che più influiscono sul caricamento della pagina. Se hai ancora problemi con l’INP, puoi trovare maggiori informazioni nelle risorse su web.dev.