Implementazione del caricamento differito per le immagini dei prodotti in OpenCart

Nel mondo odierno guidato da Internet, gli utenti si aspettano che i siti web si carichino all’istante. I clienti vogliono che le pagine si carichino rapidamente quando visitano il tuo OpenCart sito web. I clienti potrebbero irritarsi e la tua attività potrebbe perdere fatturato se le pagine dei tuoi prodotti impiegano troppo tempo a caricarsi, soprattutto sui dispositivi mobili dove la velocità di Internet potrebbe essere più lenta.

Immagini di grandi dimensioni o numerose sono spesso la causa principale del lento caricamento di una pagina. Le foto dei prodotti possono essere file di grandi dimensioni, ma sono una componente essenziale di qualsiasi sito di e-commerce. Il caricamento lento può essere d’aiuto.

La sfida delle prestazioni nei siti di e-commerce

Gli spot eCommerce di Moment sono davvero visivi. Un operatore di ordini standard può avere

• 20-50 immagini del prodotto
• Banners
• Miniature e icone
• Sezioni sui prodotti correlati

Se tutte le immagini vengono caricate contemporaneamente, il browser dovrà caricare ciascuna immagine prima che la pagina sia completamente interattiva. Questo comporta:

• First Contentful Paint (FCP) a un ritmo più lento
• Aumento del tempo interattivo 
• Scarse prestazioni sui dispositivi mobili
• Un carico del server più elevato
• Aumento dei tassi di rimbalzo

L’esperienza utente ne risentirà notevolmente, soprattutto sulle reti più lente.

Cos’è il caricamento lento?

La tecnica nota come “lazy loading” ritarda il caricamento delle immagini (o di altri contenuti) fino a quando non sono realmente necessari, ovvero quando l’utente è pronto a visualizzarli scorrendo la pagina. Il lazy loading attende che l’utente sia pronto a visualizzare l’immagine prima di caricarla, anziché caricarla tutte contemporaneamente.

Il caricamento differito presenta i seguenti vantaggi:

• Conservazione della larghezza di banda
• Migliori prestazioni sui dispositivi mobili
• SEO migliorata ed elementi web essenziali
• Caricamento rapido della prima pagina

Quando molte immagini vengono caricate contemporaneamente sulle pagine dei prodotti, il caricamento differito risulta particolarmente utile.

Perché il caricamento lento è importante

Immagina di sfogliare un catalogo di articoli. Anche se le immagini dei prodotti si trovano molto in basso, il tuo browser cercherà di caricarle tutte contemporaneamente quando utilizzi il caricamento tradizionale. Utilizzando il caricamento differito, inizialmente verranno caricate solo le immagini che si trovano nella parte visibile dello schermo o in prossimità di essa. Le immagini rimanenti verranno caricate gradualmente man mano che l’utente scorre la pagina.

Sia i tuoi clienti che i motori di ricerca come Google, che apprezzano i siti web che si caricano rapidamente, trarranno vantaggio da un’esperienza più rapida e fluida.

Esempio pratico: pagina di categoria senza caricamento lento

Considera questo esempio:

24 prodotti in una pagina di categoria, Ogni miniatura = 150 KB, Peso totale dell’immagine = 3.6 MB

Prima ancora di caricare banner, CSS e JavaScript, il browser deve scaricare circa 4 MB di immagini.

Ora, supponiamo che il visitatore abbia fatto scorrere la pagina solo a metà. Metà delle immagini non sono mai state visualizzate, ma sono state comunque scaricate. Pertanto,questa è larghezza di banda sprecata e 0Ed è qui che entra in gioco il caricamento differito.

Caricamento lento e Core Web Vitals

Dati Web Vitals. Le immagini di grandi dimensioni hanno un impatto diretto sui seguenti elementi:

• Vernice con il contenuto più grande (LCP)
• Spostamento nel layout cumulativo (CLS)
• Interazione con la vernice successiva (INP)

Caricare correttamente le immagini lentamente migliorerà le metriche delle prestazioni, in particolare nelle pagine di elenco di prodotti e categorie.

Tuttavia, c’è una cosa importante da tenere a mente

 Le immagini sopra il pacchetto, come l’immagine principale del prodotto in un runner di dettagli del prodotto, non dovrebbero essere caricate in modalità lazy loading.

Quando applicare il Lazy Loading?

Il caricamento differito è più adatto per:

• Pagine di elenco dei prodotti
• Pagine di categoria
• Pagine di elenco del blog
• Pagine del produttore
• Sezioni di upsell

Potrebbe non essere la soluzione più adatta per:

• Banner degli eroi sopra la piega
• Immagine principale del prodotto nella pagina del prodotto
• Immagini critiche del branding

Come implementare il caricamento differito in OpenCart

Metodo 1: Caricamento differito nei browser nativi

I browser moderni utilizzano la proprietà loading=”lazy” per fornire il caricamento differito integrato

Esempio:

<img src=”image.jpg” caricamento=”pigro” alt=”Immagine del prodotto”>

Passaggi di OpenCart:

• Apri il file del tema:

• Individua l’immagine del prodotto etichetta.
• Modificarlo come segue:

Prima:

<img src="{{ product.thumb }} alt="{{ product.name }}"  width="300"  height="300"

     titolo="{{ nome.prodotto }}">

Dopo:

<img src="{{ product.thumb }}"caricamento="pigro"  alt="{{ nome.prodotto }}" larghezza="300" altezza="300"     titolo="{{ nome.prodotto }}">

Tutto qui. JavaScript non è necessario. Inoltre, questo è il metodo più semplice e pulito.

Metodo 2: utilizzo di lazysizes (ideale per il supporto dei browser più vecchi)

Passi:

1. Aggiungere lo script lazysizes:
   

2. Apri il file del tema in base alla versione di OpenCart menzionata nel Metodo 1 e aggiorna il markup dell’immagine:

• Prima:
  

• Dopo:
  

Metodo 3: utilizzo dell’API Intersection Observer (controllo avanzato)

API JavaScript moderna per un controllo migliore.

Esempio:

const images = document.querySelectorAll(“img[data-src]”);

const observer = new IntersectionObserver((voci, osservatore) => {

  voci.perOgni(voce => {

se (voce.interseca) {

   const img = entry.target;

   img.src = img.dataset.src;

      osservatore.unobserve(img);

}

  });

});

immagini.perOgni(img => osservatore.osserva(img));

Questo metodo offre il controllo completo sul comportamento del caricamento.

Importante: filtraggio dei prodotti basato su AJAX

Quando i prodotti vengono caricati dinamicamente tramite AJAX:

Native caricamento=”pigro” funziona automaticamente.

Tuttavia, se stai usando pigroni, Osservatore di intersezione quindi Dopo il caricamento del contenuto AJAX, è necessario riattivare il caricamento differito.

Esempio:

document.addEventListener('ajaxComplete', function() {

    lazySizes.autoSizer.checkElems();

});

In caso contrario, le immagini appena inserite potrebbero non caricarsi correttamente.

I migliori metodi per il caricamento differito in OpenCart

✔ Evitare di caricare le immagini sopra la piega.

✔ Assicurati che le tue immagini abbiano le dimensioni giuste; evita di usare miniature troppo grandi.

✔ Utilizza sempre PageSpeed ​​Insights per testare e ottimizzare le immagini in formato WebP.

✔ Esegui sempre il test con PageSpeed ​​Insights

✔ Dopo aver apportato modifiche al modello, svuota la cache di OpenCart.

Misurazione delle prestazioni prima e dopo l’implementazione

Per valutare l’impatto del caricamento differito, seguire questi passaggi:

Prima dell’implementazione

Testa la tua pagina di categoria e registra le seguenti metriche:

• Dimensioni pagina
• Tempo di caricamento della pagina
• Punteggi Core Web Vitals

Dopo l’implementazione

Ripeti gli stessi test e confronta i risultati. Dovresti osservare:

• Tempo di caricamento iniziale ridotto
• Tempo di blocco totale inferiore (TBT)
• Punteggio delle prestazioni Lighthouse migliorato

Le opzioni di implementazione descritte in questa guida, dagli attributi HTML nativi ai lazysize e all’API Intersection Observer, offrono soluzioni per ogni livello di complessità tecnica. Che tu gestisca un piccolo negozio o un catalogo multicategoria ad alto traffico, esiste un approccio adatto alle tue esigenze. Inizia con il Metodo 1 per risultati immediati e passa a metodi più avanzati man mano che le tue esigenze aumentano. L’ottimizzazione delle prestazioni non è un’attività una tantum, ma un impegno continuo. Abbina il lazy loading alla compressione delle immagini, alla conversione WebP e a un caching adeguato per sfruttare appieno il potenziale della velocità del tuo negozio OpenCart.

Informazioni su Knowband

Knowband è un fornitore affidabile di plugin ed estensioni per l’e-commerce con anni di esperienza nell’aiutare i commercianti online a creare negozi più veloci, intelligenti e ricchi di funzionalità. Che tu gestisca il tuo negozio su PrestaShop, OpenCart, Shopify, WooCommerce, Magentoo qualsiasi altra piattaforma importante, Knowband offre un’ampia gamma di plugin ed estensioni pronti all’uso che ti aiutano a migliorare le funzionalità, le prestazioni e a offrire un’esperienza di acquisto migliore, senza dover partire da zero. Oltre ai plugin, Knowband offre anche una soluzione completa sviluppo di siti web e sviluppo di app mobili Servizi. Che tu abbia bisogno di un negozio eCommerce completamente personalizzato, di un’app di shopping mobile su misura per iOS e Android o di un’integrazione su misura con i tuoi sistemi esistenti, il team di sviluppatori di Knowband ha l’esperienza necessaria per dare vita alla tua visione. Se desideri ottimizzare ulteriormente il tuo negozio OpenCart o qualsiasi altra piattaforma eCommerce, esplora il marketplace dei plugin di Knowband o contatta il nostro team per discutere di una soluzione personalizzata in base ai tuoi obiettivi aziendali. Contattaci a [email protected] per servizi di sviluppo di plugin personalizzati, sviluppo di siti web e sviluppo di app per dispositivi mobili.