Miglioramento della velocità del negozio online
Diversi fattori influiscono sulla velocità del negozio online e alcuni di questi possono essere gestiti.
Se non conosci la performance attuale del tuo negozio online, puoi visualizzare il report Velocità del negozio online.
Fattori al di fuori del tuo controllo
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 nel punteggio di velocità.
Di seguito sono riportate alcune funzionalità che influiscono sulla velocità del tuo negozio online.
Content Delivery Network (CDN)
CDN sta per Content Delivery Network. Shopify fornisce ai merchant una CDN di livello internazionale gestita da Fastly, che garantisce che il tuo negozio online si carichi rapidamente in tutto il mondo. Puoi controllare lo stato della CDN sulla pagina di stato Fastly.
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 puoi controllare
Di seguito sono riportati alcuni fattori che possono influire sulla velocità 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:
- Disabilita 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, considera la possibilità di rimuovere il codice che è stato aggiunto come parte del processo di installazione. Alcune app ti aiutano in questo procedimento, eseguendo il wrapping del codice in tag
{% comment %}che menzionano il nome dell'app.
Rimuovere il codice di un'app inutilizzata è una procedura consigliata che evita l'esecuzione di codice per le funzionalità inutilizzate e semplifica la lettura del codice del tema.
- Consulta lo sviluppatore di app.
- Contatta un Esperto Shopify per ricevere ulteriore assistenza. Maggiori informazioni sulla possibilità di contattare Esperti Shopify.
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 velocità del negozio.
Se ritieni che qualcosa nel tema stia rallentando il negozio, procedi come segue:
- Disabilita le funzionalità del tema che non utilizzi. Valuta un possibile equilibrio tra funzionalità e velocità del negozio online.
- Valuta l'uso di un font di sistema.
- Consulta lo sviluppatore del tema. Se utilizzi un tema gratuito di Shopify, puoi contattare l'assistenza per informazioni.
- Se utilizzi un tema di terze parti, puoi contattare lo sviluppatore del tema o rivolgerti a un Esperto Shopify.
- Valuta la possibilità di installare un tema con performance ottimizzata, ad esempio Dawn.
- Contatta un Esperto Shopify per ricevere ulteriore assistenza. Maggiori informazioni sulla possibilità di contattare Esperti Shopify.
Funzionalità del tema o dell'app
Alcune funzionalità, quando abilitate, potrebbero influire sulla velocità 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:
- Usa uno strumento di mappa termica per verificare se i clienti utilizzano determinate funzionalità. Disabilita le funzionalità se non vengono utilizzate.
- Disabilita la funzionalità se non ne hai bisogno. Valuta un possibile equilibrio tra funzionalità e velocità del negozio online.
- Consulta lo sviluppatore di temi e app e chiedi se sta pre-caricando i dati.
- Contatta un Esperto Shopify per ricevere ulteriore assistenza. Maggiori informazioni sulla possibilità di contattare Esperti Shopify.
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 operazioni complesse ripetutamente può aumentare il tempo di rendering del Liquid e questo influisce sulla velocità complessiva del negozio.
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 Esperto 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.
- Contatta un Esperto Shopify per ricevere ulteriore assistenza. Maggiori informazioni sulla possibilità di contattare Esperti Shopify.
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 velocità 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.
Lighthouse
Il report Velocità del negozio online di Shopify utilizza Lighthouse per misurare la velocità del negozio. Puoi eseguire il tuo report Lighthouse con Google PageSpeed Insights per visualizzare metriche più dettagliate relative alle pagine del negozio. Per maggiori informazioni su queste metriche, consulta la documentazione sui punteggi delle performance di Google Lighthouse. Puoi anche contattare un Esperto Shopify che ti aiuti a capire le metriche e ti suggerisca miglioramenti. Maggiori informazioni sulla possibilità di contattare Esperti Shopify.
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 riguardo alla velocità 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 Esperto Shopify. Maggiori informazioni sulla possibilità di contattare Esperti Shopify.
Se disponi di un team di sviluppo o di un partner di agenzia, contattalo per ulteriore assistenza.