Magento 2: come ottimizzare i caricamenti

Rendere l’esperienza utente sul vostro e-Commerce fruibile e coinvolgente è un aspetto fondamentale per aumentare il tasso di conversione, le vendite e fidelizzare i clienti. Le performance dell’e-Commerce hanno un’influenza importante su questo tema e come tutti ben sappiamo Magento 1 fa un po’ più di fatica su questo punto rispetto a Magento 2.

Magento 2 ha migliorato sensibilmente le sue performance rispetto a Magento 1, dai benchmark effettuati su due versioni out-of-the-box di Magento (Magento Enterprise 2.0 e la Magento Enterprise 1.14) sono emersi alcuni interessanti miglioramenti su diverse metriche:

1. +39% di ordini processati per ora.
   2. -66% di tempo per aggiungere al carrello un prodotto.
   3. -51% di tempo per concludere un checkout.
   4. Tempi di risposta migliorati per la navigazione catalogo.

Oltre a ciò, vi sono diverse tecnologie integrate con Magento 2, come ad esempio Varnish, Redis, Nginx, sistemi di Full page cache che consentono un miglioramento ulteriore delle performance di Magento 2.

Come ottimizzare Magento 2

Il caricamento di una pagina prodotto in un e-Commerce Magento 2 può richiedere anche più di 3 secondi, di sicuro troppo per garantire all’utente un’esperienza di navigazione ottimale. Vediamo gli step per migliorarlo, con l’obiettivo finale di ottenere un tempo di caricamento inferiore al secondo:

1. Abilitare le tabelle flat per categorie e prodotti.
2. Unire file CSS e file JS.
3. Step 4: Abilitare Full page cache.
5. Ottimizzare le immagini.
6. Abilitare compressione.
7. Ridurre tempo di risposta del server.

Abilitare le tabelle flat di Magento 2 per categorie e prodotti

Per ottimizzare il caricamento dei dati dal database è necessario abilitare l’opzione Flat Catalog. Questa opzione consente di ridurre in modo concreto la complessità delle query su MySQL per caricare i vari dati presenti nelle pagine del vostro e-Commerce Magento 2.

Per farlo potete andare su nel backend: Stores > Configuration > Catalog > Catalog > Storefront, ed impostate su Yes il campo Use Flat Catalog Category.

Unire file CSS e file JS

Nello step successivo è necessario effettuare l’unione e dei file CSS e dei file JSS del tema Magento 2. In questo modo, le richieste di risorse al caricamento delle pagine diminuiscono in modo drastico e perciò migliorano la velocità di caricamento delle pagine.

Per effettuare questa ottimizzazione, è necessario impostare Magento 2 in modalità produzione, eseguendo questo comando sulla vostra shell: /bin/magento deploy:mode:set production. Dopo di che abbiamo diverse configurazioni da abilitare in backend.
Javascript
1. Stores -> Configuration > Advanced > Developer > JavaScript Settings
2. Impostare Merge JavaScript Files su Yes
3. Avviare JavaScript Files su Yes

CSS File
1. Stores > Configuration > Advanced > Developer > CSS Settings
2. Impostare Merge CSS Files su Yes
3. Avviare Minify CSS Files su Yes

Una volta completate le due operazioni basterà salvare e ricreare la cache.

Abilitare Content Delivery Network

La Content Delivery Network, meglio conosciuta come CDN è un sistema che consente di connettere i contenuti media, js e css del sito e-Commerce Magento 2 a dei server geograficamente distribuiti che offrono contenuti in cache con tempi di caricamento molto performanti.

Per abilitare la CDN, molto semplicemente, vanno impostati nel backend in: Stores -> Configuration -> General -> Web -> Base URL (Secure), gli indirizzi della o delle diverse CDN sui Static View Files e sugli User Media Files.

Abilitare Full Page Cache su Magento 2

La full page cache consente di distribuire dei contenuti delle pagine dell’e-Commerce Magento 2 direttamente da una cache interna, andando perciò a velocizzare il tempo di caricamento della pagina. Rispetto a Magento 1 Community, Magento 2 offre già un sistema di full page cache che potete abilitare nel backend da System -> Cache Management.

Ottimizzare le immagini

Come in ogni e-commerce, la questione delle immagini si rivela critica. L’inserimento da parte degli amministratori dell’e-commerce è spesso fallace, ed è di conseguenza necessario abilitare strumenti, anche di terze parti per ottimizzare le immagini al meglio, considerando che Google penalizza le pagine con immagini non ottimizzate.

Abilitare compressione

Una piccola modifica lato server, importante e richiesta da Google è quella di abilitare forme di compressione come ad esempio la compressione GZIP. Per farlo basta inserire in Nginx la seguente impostazione.

• gzip_types: text/plain application/x-javascript text/javascript text/xml text/css image/x-icon image/bmp image/png image/gif; to
• gzip_types: *;

Ridurre tempo di risposta del server

In Magento 2, con tutte le cache abilitate, il tempo di risposta del server si assesta usualmente attorno a 0,5 secondi, un tempo che apparentemente può sembrare buono, ma che viene percepito da Google come non ottimale.

Per avere un netto miglioramento di questo dato, ed arrivare sino a 0,1 secondi è necessario abilitare Varnish per la Full page cache. Per farlo basta attivare la funzionalità da: Stores -> Configuration -> Advanced -> System -> Full page Cache impostando Caching application su Varnish Cache.

 

Possiamo dunque affermare che rispetto a Magento 1, la nuova struttura di Magento e le diverse tecnologie messe a disposizione consentono di ottenere in modo molto più semplice e rapido prestazioni ottime per il vostro e-Commerce.