La velocità di un e-commerce è un fattore importantissimo nella riuscita di un progetto. Ogni secondo che la pagina impiega a caricare fa perdere circa il 7% delle conversioni (Se ne parla in maniera approfondita sul blog di Inchoo).

I fattori che possono incidere negativamente sulle prestazioni di un sito Magento sono diversi e non tutti dipendono dal front end, ma il template ha spesso enormi responsabilità sui tempi di risposta sia del server che del client.

Ecco una lista degli accorgimenti più importanti da osservare durante lo sviluppo del tema Magento e un po' di risorse per facilitarvi il lavoro:

1. Ottimizza i javascript

Posiziona, ovunque possibile, i tuoi file javascript alla fine del documento (regola valida per qualsiasi sito web). Se uno script è presente solo in una parte del sito, ad esempio le schede prodotto, usa i layout xml per caricare il file solo lì

<action method="addItem">
     <type>skin_js</type>
     <name>js/myfile.js</name>
</action>

Ricorda che anche per le singole pagine e per le singole categorie è possibile creare degli appositi layout update.

Non ripetere trecento volte il tuo codice, fai dei modelli (come fanno i grandi framework). A tutti noi piacerebbe passare le giornate a creare fantastiche interfacce interattive ma purtroppo, nella maggior parte dei casi, ci tocca aprire e chiudere finestre. Non c'è alcun motivo ragionevole per scrivere una cosa così:

$(".pulsante-rosso-grande").click(function() {
      $(".finestra-con-tantooo-testo").show();
});
$(".pulsante-verde-chiaro").click(function() {
      $(".finestra-con-tantooo-testo").hide();
});
$(".link-con-sctitto-apri").click(function() {
      $(".dropdown").show();
});
$(".link-con-sctitto-chiudi").click(function() {
      $(".dropdown").hide();
});
//E via andare all'infinito..

Quando puoi scrivere solo tre righe e riutilizzarle ogni volta che servono. Es:

    $('.trigger').click(function() {         
       $(this).find('.dropdown').toggle();
    });

In produzione minimizza i file javascript in questo modo:

Sistema -> Configurazione -> Avanzate -> Sviluppatore -> Unisci file JavaScript -> SI

2. Ottimizza i css

Anche per i css la regola è non ripetersi. Creare dei moduli da riutilizzare in aree diverse del layout può essere molto utile per risparmiare qualche byte (e rendere il tuo codice scalabile e manutenibile, ma questo è un altro discorso). 

Con i preprocessori è molto semplice creare dei modelli da riutilizzare, i mixins sono uno strumento formidabile a questo scopo, ma occhio al numero di righe di css che state generando perché è molto facile ritrovarsi involontariamente con file lunghi 6km.

In produzione unisci e minifica i css in questo modo:

Sistema -> Configurazione -> Avanzate -> Sviluppatore -> Unisci file CSS -> SI

3. Carica quanto più possibile le tue risorse da CDN (forse)

Anche usare le CDN invece che caricare tutte le risorse dal server può rappresentare un risparmio. Questo perché, ad esempio, è molto probabile che l'utente che atterra sul sito abbia già nella cache del client diverse versioni di jquery e non sarebbe necessario fargliene scaricare un'altra. Se vuoi essere molto scrupoloso potresti prevedere una fallback nel caso in cui la risorsa esterna dovesse essere bloccata o indisponibile.

Siamo sicuri che questo velocizzerà il caricamento della tua pagina? NO.

Ogni volta che includi una risorsa via CDN stai facendo una richiesta http, anche questo influenza le prestazioni. Valuta caso per caso e fai dei test.

4. Non filtrare mai le collection nei file di template

Tieni fuori la logica dal tuo template. Sempre. Se devi realizzare una selezione di prodotti per categoria/e o per attributo/i non cercare di farlo tramite i file di template sovraccaricando il server di richieste che magari restano anche fuori dalla cache. Usa un modulo.

5. Usa quanto più possibile l'xml per inserire i blocchi statici

In Magento ci sono due modi per inserire blocchi statici nel template. Da .phtml:

<?php echo $this->getLayout()->createBlock('cms/block')->setBlockId('id-blocco')->toHtml(); ?>

 Oppure da .xml

<block type="cms/block" name="nome-blocco">
        <action method="setBlockId">
                 <block_id>id-blocco</block_id>
         </action>
</block>

Per sfruttare al massimo la cache di Magento usa il secondo sistema. Certo, alcune volte capita di dover mettere dei blocchi in angoli di Magento che sarebbe proibitivo raggiungere dall' .xml, allora usa pure la stringa di php (c'è di peggio nella vita) ma non farlo solo perché hai bisogno di markup che non vuoi mettere (giustamente) all'interno del blocco statico. Se hai un layout complesso e vuoi inserire il tuo markup crea una nuova reference con un suo .phtml e lì dentro inserisci i tuoi blocchi (E' un po' lunga da spiegare adesso, ne scriverò in futuro)

6. Ottimizza le immagini

Le immagini saranno il tuo tallone d'Achille, sono una delle cose più importanti per un sito e-commerce e la più pesante da caricare per il browser. 

Non ridimensionare le immagini tramite css, sfrutta il resize di Magento per dimensionare le foto dei prodotti dell'esatta dimensione in cui devono essere visualizzate.

Carica subito solo quello che è visibile subito. Usa il lazy load dove è possibile per scaricare le immagini solo quando servono. 

Usa sfondi diverse per diverse dimensioni del monitor (lapalissiano, direi)

Limita il numero delle richieste http per le icone e gli elementi grafici. Usa le sprite più che puoi. Anzi, meglio ancora, usa una sola sprite per tutto il template. Se ti secca farle a mano, ci sono ottimi plugin sia per gulp che per grunt.

7. Non imbarcare roba inutile

Centellina ogni riga di codice che inserisci nel tuo template, non caricare tutti i moduli di bootstrap se ti serve solo griglia, non includere jquery se devi solo nascondere un div. 

8. Ma sopratutto, non seguire alla lettera questa lista!

Secondo me ogni sforzo che viene fatto all'interno di un progetto deve essere proporzionato al vantaggio che ne deriva. Nessuno di questi accorgimenti, da solo, trasforma un template lento in una scheggia. Fai dei test, cura le performance nel complesso, inizia a curarle da quando imposti il lavoro, quando scegli le tecnologie a cui affidarti. Dopodiché permettiti pure di sgarrare un po'.   

Irene Iaccio

Developer

chi sono