Come Migliorare il Tuo Punteggio di Velocità di Shopify 2023
📋 Contenuti
- Introduzione
- Valutare le app installate sul tuo negozio Shopify
- Rimuovere il codice residuo delle app disinstallate
- Ottimizzare le immagini per migliorare la velocità di caricamento
- Utilizzare il lazy loading per evitare blocchi di elementi
- Ottimizzare i file di font per accelerare il caricamento
- Differire i carichi di script per migliorare le prestazioni
- Ritardare l'applicazione dei file CSS non visibili all'avvio
- Caricare gli script delle app solo all'interazione dell'utente
- Conclusioni
📝 Articolo
💡 Valutare le app installate sul tuo negozio Shopify
Molte volte gli esercenti tendono ad installare un numero eccessivo di app sul proprio negozio Shopify. Tuttavia, tutte queste app richiedono il download di file da vari server, rallentando significativamente il caricamento dello store. Pertanto, è importante valutare l'utilità di ogni app installata e rimuovere quelle che non hanno un impatto diretto sulla conversione o sull'esperienza dell'utente.
💡 Rimuovere il codice residuo delle app disinstallate
La disinstallazione di un'app può lasciare codice residuo nel tuo tema Shopify. È fondamentale rimuovere ogni script relativo alle app disinstallate dai file theme.liquid, head.liquid e footer.liquid. In questo modo, puoi migliorare la velocità di caricamento e le prestazioni generali del tuo negozio.
💡 Ottimizzare le immagini per migliorare la velocità di caricamento
Molti esercenti credono che le immagini di dimensioni maggiori abbiano una qualità superiore. Tuttavia, caricare immagini ad alta risoluzione direttamente dalla fotocamera DSLR sul tuo negozio Shopify può rallentare il tempo di caricamento. È consigliato utilizzare immagini JPG compressi, con una dimensione inferiore a un megabyte, per garantire una buona esperienza su qualsiasi dispositivo. In caso sia necessario un fondo trasparente, è possibile utilizzare PNG, ma evitare gli GIF animati, in quanto possono influire negativamente sulla professionalità del tuo sito e sul tempo di caricamento. Se necessario, è consigliato caricare un video MP4 compresso utilizzando l'HTML video tag.
💡 Utilizzare il lazy loading per evitare blocchi di elementi
Per prevenire che gli assets bloccino altri elementi sulla pagina, è consigliato utilizzare la proprietà "preload=non" sui video in modo da caricarli senza interrompere il caricamento degli altri elementi. Inoltre, è possibile utilizzare la proprietà "loading=lazy" sulle immagini che non sono immediatamente visibili. È possibile installare plugin come "lazy sizes" per rendere il processo ancora più efficiente. Tuttavia, è importante non utilizzare il lazy loading sulle immagini direttamente visibili, come l'immagine iniziale o le immagini dei prodotti.
💡 Ottimizzare i file di font per accelerare il caricamento
I file di font possono essere piuttosto grandi e spesso vengono utilizzati più font personalizzati per ottenere un design unico per il tuo negozio. Per ottimizzare il caricamento dei font, è consigliato controllare le regole @font-face all'interno dei file CSS. Se le regole non contengono ancora la proprietà "font-display: swap", è consigliato aggiungerla. Questa proprietà consente di mostrare un font predefinito mentre viene scaricato il font personalizzato, migliorando così l'esperienza dell'utente.
💡 Differire i carichi di script per migliorare le prestazioni
Spesso il tuo negozio Shopify utilizza numerosi script per implementare la sua funzionalità, inclusi quelli delle app installate, dei plugin o delle funzionalità di base del negozio. È indispensabile identificare quali script possono essere differiti, consentendo al sito di caricare prima gli elementi essenziali come l'immagine iniziale e quindi attivare le funzionalità aggiuntive. È possibile utilizzare la proprietà "defer" per caricare gli script dopo che il sito è completamente caricato, ad eccezione forse dei pixel di tracciamento. Inoltre, è possibile utilizzare la proprietà "async" per caricare gli script contemporaneamente agli elementi essenziali, senza bloccarne il caricamento.
💡 Ritardare l'applicazione dei file CSS non visibili all'avvio
Anche i file CSS possono essere voluminosi e spesso contengono regole che fanno riferimento a elementi non visibili durante il caricamento della pagina. È possibile utilizzare la proprietà "media=onload print" per ritardare l'applicazione dei file CSS fino al completo caricamento della pagina. Questo metodo garantisce che i file CSS vengano applicati solo quando necessario, riducendo il tempo di caricamento della pagina e migliorando le prestazioni complessive del negozio.
💡 Caricare gli script delle app solo all'interazione dell'utente
Per ottenere una visualizzazione iniziale del tuo negozio il più veloce possibile, puoi optare per un caricamento iniziale senza alcuno script di app o plugin. Gli script delle app possono essere caricati solo quando l'utente interagisce con il negozio, ad esempio facendo clic o scorrendo. Questo garantisce che ogni elemento dello store sia reso il più velocemente possibile e, al tempo stesso, consente agli script delle app di iniziare il download e l'inizializzazione solo quando necessario. Tuttavia, per applicare questa soluzione, potresti aver bisogno dell'aiuto di un esperto in grado di creare una soluzione specifica per il tuo caso.
🔔 In evidenza
- Valuta le app installate per ottimizzare le prestazioni
- Rimuovi il codice residuo delle app disinstallate
- Ottimizza le immagini per ridurre il tempo di caricamento
- Utilizza il lazy loading per una visualizzazione più rapida
- Ottimizza i file di font per migliorare le prestazioni
- Differisci i carichi di script essenziali
- Ritarda l'applicazione dei file CSS non visibili
- Carica gli script delle app solo all'interazione dell'utente
🙋♀️ Domande frequenti
Q: Posso rimuovere le app dal mio negozio Shopify senza conseguenze?
A: La rimozione delle app non necessarie può migliorare la velocità di caricamento e le prestazioni del tuo negozio. Tuttavia, assicurati di rimuovere anche il codice residuo delle app disinstallate per evitare problemi.
Q: Quali formati di immagine sono consigliati per un caricamento più veloce?
A: È consigliato utilizzare immagini JPG compressi per minimizzare la dimensione dei file. Evita GIF animate, a meno che non siano strettamente necessarie. Utilizza PNG solo quando hai bisogno di un fondo trasparente.
Q: Perché è importante differire i carichi di script?
A: Differire i carichi di script consente di caricare prima gli elementi essenziali del tuo negozio, migliorando l'esperienza dell'utente. Gli script delle app possono essere caricati solo dopo che la pagina è stata completamente caricata.
Q: Cosa posso fare per ottimizzare il caricamento dei font personalizzati?
A: Puoi controllare le regole @font-face dei tuoi file CSS e aggiungere la proprietà "font-display: swap" se manca. Questo permette di mostrare un font predefinito finché il font personalizzato viene scaricato.
ℹ️ Risorse
AI SEO Assistant
WHY YOU SHOULD CHOOSE Proseoai
