Miglioramento della performance del negozio online

Diversi fattori influiscono sulla performance del negozio online e alcuni di questi possono essere gestiti.

Per conoscere la performance odierna del tuo negozio online, visualizza il report Web performance.

Fattori al di fuori del tuo controllo

Questi fattori possono influire sulla performance del negozio, ma non possono essere controllati tramite impostazioni o con modifiche da apportare al negozio Shopify. Sono inclusi i fattori che dipendono dai clienti, come il dispositivo o la velocità di connessione, nonché i fattori che dipendono da Shopify, come gli aggiornamenti all'infrastruttura.

Dispositivo, rete e posizione del cliente

I clienti che visitano il tuo negozio vivono in tutto il mondo e dispongono di diversi dispositivi e connessioni Internet. Questo significa che il tuo negozio potrebbe caricarsi più rapidamente o più lentamente, a seconda di questi fattori.

Se un cliente ti contatta in merito alla velocità del negozio, chiedigli se dispone della versione più recente del browser, se ha recentemente cancellato la cache e se il suo provider di servizi Internet non sta riscontrando interruzioni o una riduzione delle performance.

Infrastruttura Shopify

Shopify ospita il tuo negozio online su server globali veloci e non limita la larghezza di banda del negozio. Puoi controllare lo stato del negozio Shopify alla pagina Stato di Shopify.

Shopify migliora costantemente il suo codice e le sue infrastrutture. Alcuni di questi miglioramenti potrebbero riflettersi nelle metriche sulla performance.

Di seguito sono riportate alcune funzionalità che influiscono sulla velocità del tuo negozio online.

Content Delivery Network (CDN)

CDN sta per Content Delivery Network. La CDN memorizza immagini e altri file, come il contenuto nella pagina Contenuto > File nel pannello di controllo Shopify. Shopify offre ai merchant una CDN di livello internazionale, gestita da Cloudflare, che garantisce che il tuo negozio online si carichi rapidamente in tutto il mondo. Puoi controllare lo stato della CDN sulla pagina di stato di Cloudflare.

Cache del browser locale

Il tuo negozio memorizza nella cache o salva alcuni elementi temporaneamente nell'archiviazione locale del cliente. La prossima volta che il cliente visita il negozio online, il browser può caricare risorse dalla cache anziché inviare un'altra richiesta al server.

Shopify imposta a un anno per ciascun file la memorizzazione nella cache del browser per le risorse memorizzabili nel negozio. I file che possono essere memorizzati nella cache includono file immagine, PDF, file JS e file CSS.

Cache della pagina lato server

Oltre alla cache del browser locale, Shopify memorizza nella cache le pagine lato server. La prima volta che viene caricata una pagina, il caricamento potrebbe essere più lento, ma successivamente si velocizza perché i clienti ricevono una copia memorizzata nella cache.

Risorse all'interno dell'oggetto Liquid content_for_header

L'oggetto Liquid `` inserisce risorse utilizzate da diverse funzionalità del negozio online, tra cui analisi delle performance e funzionalità opzionali come i pulsanti di check-out dinamico. Il caricamento di questo oggetto e delle risorse correlate incide sulla velocità del tuo negozio. Shopify sta ottimizzando il tag e le sue risorse per renderlo più veloce.

Fattori che è possibile controllare

Di seguito sono riportati alcuni fattori che possono influire sulla performance del tuo negozio online e come risolverli.

App

Quando aggiungi app per modificare la funzionalità o l'aspetto del negozio online, viene aggiunto codice al tema in modo che possano essere eseguite. Alcuni codici possono essere rimossi o ordinati di nuovo per migliorare le performance del negozio online. Se non utilizzi un'app, puoi rimuoverla.

Se ritieni che un'app stia rallentando il tuo negozio, procedi come segue:

  • Disattiva le funzionalità dell'app che non utilizzi o rimuovi l'app, se non ne hai bisogno. Valuta un possibile equilibrio tra funzionalità e velocità del negozio online.
  • Se stai rimuovendo un'app, valuta la possibilità di rimuovere il codice aggiunto come parte della procedura di installazione dell'app. La maggior parte delle app rimuoverà automaticamente il codice per conto tuo, ma puoi consultare lo sviluppatore dell'app per averne la certezza. Alcune app ti aiutano con questo procedimento eseguendo il wrapping del codice nei tag {% comment %} che menzionano il nome dell'app. Rimuovere il codice di un'app inutilizzata è una best practice che evita l'esecuzione di codice per le funzionalità inutilizzate e semplifica la lettura del codice del tema.
  • Consulta lo sviluppatore di app.

Temi

I temi sono composti da codice Liquid, HTML, CSS e JavaScript. Quando modifichi o personalizzi i temi, le dimensioni dei file possono aumentare e influire sulla web performance.

Se ritieni che qualcosa nel tema stia rallentando il negozio, procedi come segue:

Funzionalità del tema o dell'app

Alcune funzionalità, quando attivate, potrebbero influire sulla performance del negozio. Ad esempio, alcuni pop-up di visualizzazione rapida pre-caricano le informazioni provenienti da ogni pagina del prodotto quando viene caricata una pagina di collezione. Il caricamento di dati aggiuntivi che i clienti non utilizzano può influire sulla velocità del tuo negozio senza dare un reale valore aggiunto.

Se ritieni che una funzionalità stia rallentando il negozio, puoi procedere come segue:

Codice Liquid complesso o inefficiente

Puoi modificare quasi interamente il Liquid utilizzato per il rendering del negozio. Esistono modi efficienti e inefficienti per scrivere il codice Liquid. Eseguire ripetutamente operazioni complesse può aumentare il tempo di rendering del Liquid e questo influisce sulla web performance complessiva.

Ad esempio, se desideri ordinare i prodotti in una collezione in base al prezzo, devi eseguire questa operazione prima di riprodurre a ciclo continuo i prodotti nella collezione e non come parte del codice del ciclo. Ciò è dovuto al fatto che l'ordine dei prodotti non cambia per ciascun prodotto e il calcolo dell'ordine dei prodotti allunga i tempi di elaborazione della richiesta.

Se temi che il tuo codice non sia ottimizzato, puoi procedere come segue:

  • Esegui l'Analisi temi per Chrome di Shopify per identificare le righe di codice che rallentano le pagine nel negozio online.
  • Contatta un Partner di Shopify per individuare codici inefficienti o inutili.

Immagini e video

Le immagini di dimensioni eccessive e quelle nascoste alla vista possono interferire con il caricamento di altre parti più importanti di una pagina. Se gli utenti devono attendere il caricamento di immagini di grandi dimensioni, possono percepire il negozio come lento.

Shopify ti impedisce di sovraccaricare il negozio online con immagini o video. Per esempio:

  • Sulla una pagina di collezione non possono essere presenti più di 50 prodotti o 25 sezioni sulla homepage.
  • Molti temi posticipano il caricamento delle immagini che non sono attualmente sullo schermo.
  • Molti temi caricano anche una dimensione specifica di immagine in base alle dimensioni dello schermo in cui viene visualizzata.

Tuttavia, queste tutele non impediscono completamente alle immagini o ai video di influire sulla performance del negozio online.

Se ritieni che le immagini stiano rallentando il negozio, procedi come segue:

  • Consulta la guida all'ottimizzazione delle immagini.
  • Mantieni le presentazioni di immagini in evidenza sulle 2-3 slide oppure utilizza un'immagine in evidenza.
  • Consulta lo sviluppatore del tuo tema per ottenere consigli sul modo migliore per usare le immagini con il tema.

Font

Per il testo nel tuo negozio online, puoi scegliere tra diversi font. Tuttavia, se utilizzi un font che non esiste ancora sul computer del cliente, è necessario scaricare il font prima di poter mostrare il testo. Questo influisce sul tempo necessario al caricamento del negozio.

Per evitare di scaricare un nuovo font sul computer del cliente, puoi utilizzare un font di sistema. Un font di sistema è un tipo di font già installato sulla maggior parte dei computer.

Puoi selezionare un gruppo di font monospazio, serif o sans-serif. Quando utilizzi uno di questi gruppi, puoi comunque utilizzare gli stili dei font, ad esempio grassetto o corsivo.

Il font che viene visualizzato sul computer del cliente dipende dal suo sistema operativo. Di seguito sono riportati alcuni esempi di font che possono essere utilizzati per il rendering del testo quando selezioni un gruppo di font di sistema:

  • Monospazio: Menlo, Consolas, Monaco, Liberation Mono o Lucida Console;
  • Sans-serif: BlinkMacSystemFont, Segoe UI, Roboto, Ubuntu o Helvetica Neue;
  • Serif: Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times o Source Serif Pro.

Strumenti per la risoluzione dei problemi

Puoi utilizzare i seguenti strumenti per conoscere la performance del tuo negozio online.

Se sei uno sviluppatore, puoi ottimizzare ulteriormente la performance del tuo tema utilizzando gli strumenti e le best practice di Shopify. Maggiori informazioni su Shopify.dev.

PageSpeed Insights

Il report della dashboard della web performance di Shopify utilizza i Core Web Vitals per misurare il modo in cui gli utenti reali si interfacciano con il tuo negozio online. Puoi eseguire i report utilizzando Google PageSpeed Insights per visualizzare metriche più dettagliate per le pagine del negozio.

Analisi temi per Chrome di Shopify

L'Analisi temi per Chrome di Shopify è uno strumento di profiling che utilizza un grafico a fiamma per mostrare le performance di rendering Liquid. Questo strumento ti aiuta a identificare le righe di codice che rallentano le pagine nel negozio online. Scopri come utilizzare l'Analisi temi di Shopify.

Ricezione di assistenza con la performance del negozio online

Se utilizzi un tema gratuito di Shopify, l'Assistenza Shopify potrebbe aiutarti a migliorare le performance di base.

Se usi un tema di terze parti e hai bisogno di assistenza, contatta lo sviluppatore del tema o un Partner di Shopify. Scopri di più su come contattare un Partner di Shopify.

Se disponi di un team di sviluppo o di un'agenzia partner, contattali per ulteriore assistenza.

Sei pronto per iniziare a vendere con Shopify?

Provalo, è gratis