Permettere all’utente di avere un’esperienza semplice e coinvolgente sul vostro E-commerce è fondamentale per aumentare le vendite, il tasso di conversione e per la fidelizzazione dei clienti. Le prestazioni dell'E-commerce hanno un’importante influenza su questa tematica e, come già sappiamo, Magento 1 non era il massimo.
Magento 2 ha migliorato le sue prestazioni rispetto a Magento 1; dal confronto eseguito su due versioni di Magento, Magento Enterprise 1.14 e Magento Enterprise 2.0, è risultato che nell'ultima versione gli ordini processati per ora hanno subito una variazione di +39%, il tempo per terminare un checkout si è ridotto di -51%, il tempo per aggiungere un prodotto al carrello è calato del -66% e i tempi di risposta per la navigazione catalogo sono migliorati.
Inoltre, Magento 2 è compatibile e ben documentato con tecnologie come Nginx, Redis e Varnish, sistemi di Full page cache integrati che permettono di avere un’ulteriore miglioramento delle prestazioni.
In un E-commerce Magento 2 il caricamento di una pagina di un prodotto può impiegare anche più di 3 secondi, questo non garantisce all’utente un’ottima esperienza di navigazione. Vediamo step by step come migliorare le performance al fine di ottenere un tempo di caricamento minore.
Il caricamento dei dati dal database può essere ottimizzato abilitando l’opzione Flat Catalog. La Flat Catalog permette di ridurre realmente su MySQL la complessità delle query al fine di caricare i dati presenti nelle pagine dell’E-commerce Magento 2.
Per farlo bisogna andare nel backend:
Stores > Configuration > Catalog > Catalog > Storefront > Use Flat Catalog Category > Yes
Successivamente bisogna unire e minificare i file JSS e i file CSS del tema Magento 2. Effettuando questo step diminuiscono drasticamente le richieste di risorse inviate al browser durante il caricamento delle pagine e per questo motivo la velocità di caricamento subisce un miglioramento, in quanto il browser dovrà scaricare meno risorse.
Per unire i file JS e CSS, dovremo attivare da Backend questa serie du opzioni andando in:
Stores > Configuration > Advanced > Developer > Css Settings > Merge CSS Files > Yes
Stores > Configuration > Advanced > Developer > Css Settings > Minify CSS Files > Yes
Stores > Configuration > Advanced > Developer > JavaScript Settings > Minify JavaScript Files
Stores > Configuration > Advanced > Developer > Css Settings > Merge JavaScript Files[epcl_box type="error"]Attenzione! Il Merge dei files CSS e JS in alcuni casi potrebbe creare degli artefatti e/o errori di funzionamento. Verifica sempre il funzionamento del tuo store dopo aver modificato queste impostazioni.[/epcl_box]
Una volta salvato, dovremmo poi rendere effettive le modifiche appena fatte sul Backend andando a compilare i contenuti statici del nostro Store Magento2, mettendo quindi la modalità Production. Per farlo ci basterà lanciare da shell:
php bin/magento deploy:mode:set production
La full page cache permette che ci sia una distribuzione dei contenuti presenti nell’e-Commerce Magento 2 in modo diretto dalla cache interna, in questo modo si velocizza il tempo di caricamento della pagina. Magento 2, rispetto al precedente Magento 1 Community, ha già un sistema di full page cache che è possibile abilitare:
System > Cache ManagementLa questione immagini, come in tutti gli E-commerce, è critica. Spesso le immagini caricate sugli E-commerce hanno un peso e dimensioni elevate e questo comporta dei rallentamenti nel caricamento del proprio sito. E per questo motivo che è indispensabile ottimizzare al massimo le immagini. Per farlo bisogna ricorrere a degli strumenti per ottimizzare le immagini, visto che le pagine con immagini non ottimizzate vengono penalizzate da Google. Quindi, come primo step prima del caricamento su Magento 2, è necessario ottimizzare le immagini con API terza parti o con servizi come TinyPNG. Quest’ultimo offre un servizio gratuito fino a 500 immagini al mese, che permette un’ottimizzazione automatizzata e continua nel tempo.
Un’importante ottimizzazione server richiesta da Google è possibile attuarla abilitando forme di compressione come quella GZIP. La compressione GZIP è un sistema che permette al Server di ridurre le dimensioni della pagina web e quindi il tempo di scaricamento della pagina web da parte dell'utente, soprattutto Mobile. Questo comporta una riduzione dei tempi di caricamento. Per attivare la compressione Gzip su Apache, ci basterà aggiungere queste stringhe direttamente in .htaccess sul nostro Sito :
# GZIP compression for text files: HTML, CSS, JS, Text, XML, fonts
<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE font/opentype
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml
</IfModule>
Il tempo di risposta del server (TTFB), con tutte le cache abilitate, in Magento 2 dovrebbe essere di intorno ai 0,5 secondi, all’apparenza un buon tempo ma Google lo percepisce come non ottimale. Per avere un’ottimizzazione Google Pagespeed ed arrivare fino a 0,1 secondi bisogna abilitare la Full page cache di Magento 2 con Varnish. Per attivarlo bisogna andare su:
Stores > Configuration > Advanced > System > Full page Cache > Caching application > Varnish Cache.
Attenzione, per poter attivare la tecnologia Varnish sul tuo sito Magento2 il tuo Hosting deve essere predisposto con Varnish installato ed ottimizzato per Magento2. Se il tuo Hosting non prevede Varnish, contattami e scopri come attivarlo.
Hai seguito i miei suggerimenti ed hai ancora problemi di Performance? contattami per una consulenza e per capire insieme come migliorare le Performance del tuo sito ed incrementare le vendite fino al 50%.
