Sebbene le velocità di internet a livello globale siano migliorate in modo significativo—raggiungendo una media di 90,67 Mbps per la banda larga fissa e 44,67 Mbps per le connessioni mobili a inizio 2024—molti clienti continuano a sperimentare connessioni più lente in base alla loro posizione e alle condizioni della rete. Per questo, è fondamentale assicurarsi che le pagine prodotto si carichino il più rapidamente possibile per tutti i clienti.
Una soluzione semplice è aggiungere il lazy load alle tue pagine. Il lazy loading è una strategia che identifica le risorse come non bloccanti e le carica solo quando necessario, accorciando il critical rendering path e riducendo i tempi di caricamento della pagina. È utilizzato principalmente per le immagini su un sito web.
Vantaggi del Lazy Loading
Da un lato, migliora prestazioni e velocità. Il lazy loading influisce direttamente sulle prestazioni dello store riducendo i tempi di caricamento iniziali, migliorando le metriche dei Core Web Vitals come il Largest Contentful Paint (LCP) e minimizzando l’uso delle risorse del server—metriche cruciali che Google considera quando classifica i siti web. Dall’altro, fa percepire ai clienti che i prodotti si caricano più rapidamente, grazie a un fenomeno chiamato performance percepita.
Puoi aggiungere il lazy load al tuo store Shopify nei seguenti modi.
Usa il Lazy Loading nativo in HTML
Il lazy loading nativo è ormai supportato da tutti i principali browser, come Chrome, Firefox, Safari ed Edge. L’approccio più semplice e moderno è aggiungere l’attributo loading=”lazy” direttamente ai tag immagine. Ecco come fare:
- Vai nel pannello di amministrazione Shopify e seleziona Online Store.
- Seleziona Themes e scegli il tema che intendi modificare.
- Seleziona Actions e clicca su Edit Code.
- Trova i tag immagine nei file del template (come template prodotto, pagine collezione, ecc.).
- Aggiungi l’attributo loading=”lazy” ai tag immagine per le immagini che compaiono sotto la piega (below the fold).
<img src="image.jpg" loading="lazy" alt="Product image" />Importante: Non applicare il lazy-load alle immagini che probabilmente saranno visibili (in-viewport) quando la pagina si carica, soprattutto alle immagini LCP (Largest Contentful Paint), perché può peggiorare le prestazioni. Per le immagini above the fold, usa invece loading=”eager”.
Aggiungi uno script di lazy loading (Metodo legacy)
Se devi supportare browser più datati o vuoi usare un approccio con libreria JavaScript, puoi ancora utilizzare questo metodo. Ecco come fare:
- Vai nel pannello di amministrazione Shopify e seleziona Online Store.
- Seleziona Themes e scegli il tema che intendi modificare.
- Seleziona Actions e clicca su Edit Code.
- Vai nella directory Layouts .
- Clicca su themes.liquid.
- Poi incolla il seguente codice prima del tag </head> nell’editor di codice online.
{{ '//cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js' | script_tag }}Salva le modifiche. Ora, le immagini con la classe lazyload verranno caricate in lazy load.
Aggiungi il lazy loading a immagini specifiche
Puoi anche specificare quali immagini devono essere caricate in lazy load se non vuoi applicare l’impostazione a tutto lo store. Se vuoi che una specifica immagine venga caricata in lazy load, applica la classe ‘lazyload.’ Inoltre, sostituisci l’attributo src con data-src.
<!-- Before -->
<img src="image.jpg" />
<!-- After -->
<img class="lazyload" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" data-src="image.jpg" />Aggiungi il lazy loading al documento JS
Se aggiungi questo codice Javascript al file js.liquid o .js nella directory Assets del tuo store, il lazy load verrà aggiunto al sito.
$(document).ready(function(){$("img.lazyload").lazyload();});Usare un’app
Se non ti senti a tuo agio nel modificare i file del tema e ti serve una soluzione rapida, puoi dare un’occhiata alle app che offrono questa funzionalità.
Loadify
Migliora le prestazioni e l’esperienza utente del tuo store Shopify con schermate di caricamento personalizzabili e transizioni di pagina fluide grazie a Loadify. Implementa il lazy loading e la previsione dei link per aumentare la velocità delle pagine, rimandando il caricamento di immagini e video finché non sono necessari, e sfruttando la previsione dei link basata sull’hover.
Tiny SEO Image optimize
TinyIMG offre una suite completa di strumenti per l’ottimizzazione della velocità delle pagine e della SEO, inclusi testo ALT delle immagini, JSON-LD, gestione delle pagine 404, redirect 301, plugin SEO, rich snippet e un compressore SEO per le immagini. Include anche descrizioni generate dall’AI, ridimensionamento foto, compressione immagini, lazy loading, creazione della sitemap e integrazione con ChatGPT AI.
Conclusione
Il lazy loading è una tecnica efficace per migliorare le prestazioni e la velocità del tuo store Shopify, rimandando il caricamento delle immagini finché non sono necessarie. Il lazy loading delle immagini è una tecnica potente che può aiutare a migliorare le prestazioni del sito riducendo il tempo di caricamento iniziale della pagina e l’uso complessivo di banda; e grazie alla disponibilità dei browser moderni e delle API JavaScript, implementare il lazy loading è diventato più semplice che mai.
Implementando il lazy loading tramite attributi HTML nativi (l’approccio moderno consigliato) o tramite script, puoi garantire un’esperienza di navigazione più fluida per gli utenti, in particolare per chi ha connessioni internet più lente. Questo può portare a una maggiore soddisfazione dei clienti e potenzialmente a tassi di conversione più alti. Aggiungere il lazy loading al tuo store Shopify è un processo semplice che può offrire benefici significativi sia per le prestazioni del negozio sia per l’esperienza dei clienti, soprattutto mentre la velocità di caricamento continua a essere un fattore critico per il successo nell’e-commerce.
