Ottimizzazione della velocità di Magento 2: modi semplici e avanzati

Conosci il trapano, la velocità della pagina influisce notevolmente sul successo di un negozio, poiché i negozi con prestazioni lente sono destinati ad avere tassi di conversione più bassi e di conseguenza a perdere rispetto ai loro concorrenti. E poiché eseguiamo regolarmente l'ottimizzazione della velocità per i nostri clienti, riteniamo che sia nostra competenza fornirti tecniche aggiornate sull'ottimizzazione della velocità in Magento 2.

Ottimizzazione della velocità e perché è difficile farlo bene

Ovviamente, se l'ottimizzazione della velocità nei siti Web Magento 2 fosse semplicemente l'installazione e l'abilitazione di estensioni, non ti ritroveresti a lottare con l'ottimizzazione delle prestazioni. È molto più complicato di così.

Molte variabili

È necessario prendere in considerazione le varie variabili coinvolte nella misurazione della velocità della pagina. Potrebbe essere che la velocità della tua pagina sia davvero fantastica nelle condizioni ideali, ovvero se il dispositivo dell'utente è in grado di eseguire il rendering di tutto ciò che gli lanci. Oppure potrebbe essere che la velocità della tua pagina non sia così male, ma le prestazioni percepite per l'utente sono terribili a causa del cattivo spostamento cumulativo del layout.

Ci sono molte variabili da prendere in considerazione quando ottimizzi le prestazioni del tuo negozio, motivo per cui dovresti sempre identificare prima i problemi specifici.

Priorità

E anche se hai fatto i compiti e identificato tutti i problemi di funzionamento che il tuo negozio ha attualmente, non sarebbe comunque una buona idea provare a risolverli tutti. È nella nostra esperienza che le micro ottimizzazioni non fanno quasi nulla per migliorare le prestazioni nel mondo reale e dovresti lavorare solo per ottimizzare i problemi che ritieni siano i principali ostacoli che impediscono al tuo negozio di guidare il tipo di esperienza di acquisto che desideri.

Scambio

Quando ci si avvicina davvero, l'ottimizzazione della velocità è un compromesso costante tra funzionalità e prestazioni: è sempre necessario sacrificare qualcosa per ottenere prestazioni migliori. A volte è un tema Magento allettante, a volte è un'utile estensione che è dannosa per le prestazioni del tuo negozio.

Tecniche generali di ottimizzazione

Queste tecniche di ottimizzazione generali sono indolori e non richiedono molte conoscenze tecniche per essere implementate.

1. Controlla la tua attuale versione di hosting e Magento

L'hosting gioca un ruolo cruciale nella velocità del sito Web, poiché migliore è un piano di hosting, più il tuo negozio può rimanere veloce nonostante l'aumento del traffico o i cataloghi di grandi dimensioni.

È ancora più importante per un sito Magento avere un hosting decente per facilitare la sua struttura robusta e complessa. Sebbene l'hosting Magento richieda almeno 2 GB di RAM per funzionare, il piano di hosting adatto dipende dalla scala del sito web.

Pertanto, se il tuo attuale sito Web Magento è lento e stai utilizzando un hosting di fascia bassa, è tempo di eseguire l'aggiornamento per un significativo miglioramento della velocità.

>> Vedi di più: 12 migliori provider di hosting Magento

2. Utilizzare un servizio CDN

(Foto/WPbeginner.com)

Nella catena di fornitura logistica, gli articoli vengono spediti più velocemente se è presente un magazzino situato vicino alla posizione dell'acquirente. Allo stesso modo, CDN (rete di distribuzione dei contenuti) aiuta a distribuire i contenuti più velocemente memorizzando nella cache i contenuti in un server perimetrale vicino alla geolocalizzazione dei suoi utenti.

CDN è l'ideale per i grandi negozi con visitatori internazionali, nonché per i siti Web con molti contenuti dinamici sia su desktop che su dispositivi mobili. Per questi motivi, si adatta perfettamente a molti siti Magento.

Mentre molti provider di hosting offrono servizi CDN, puoi anche scegliere i tuoi provider CDN come Fastly o Stackpath. Dopo aver impostato il servizio, devi configurare la CDN nel tuo backend Magento prima di vedere eventuali modifiche.

3. Immagini a caricamento lento

Tra tutti i tipi di risorse richieste dai siti Web più diffusi, le immagini sono il tipo di risorsa più richiesto il cui numero di richieste, in media, assorbe il 35,6% (desktop) del totale delle richieste effettuate dalla pagina. In termini di peso della pagina, le risorse di immagine occupano in media il 46,6% del peso medio della pagina, il che lo rende il frutto più basso nell'ottimizzazione della velocità che produce risultati impressionanti quando lo fai bene.

Il caricamento lento è un modo efficace per migliorare le prestazioni del tuo negozio poiché elimina la necessità di caricare tutte le immagini contemporaneamente. Con il caricamento lento, le immagini vengono caricate in un momento successivo quando l'utente ne ha bisogno, riducendo efficacemente il tempo necessario per caricare una pagina senza danneggiare l'esperienza dell'utente.

In Magento 2, puoi implementare il caricamento lento delle immagini sul tuo sito Web Magento con estensioni come Lazy Loading per Magento 2. Ci sono molte altre estensioni come questa disponibili gratuitamente sul mercato Magento.

4. Usa WebP

Spesso paragonato al coltellino svizzero dei formati immagine, WebP è un formato immagine nuovo e flessibile che sta rapidamente guadagnando popolarità e dovrebbe sostituire PNG, JPEG e GIF. Rispetto alle immagini PNG e JPG, le immagini WebP sono generalmente più piccole del 25-35% con una perdita di qualità dell'immagine prossima allo zero.

Poiché questo è ancora un formato immagine relativamente nuovo, WebP non è supportato per impostazione predefinita in Magento 2 e dovrai installare estensioni di terze parti come Magento 2 WebP Images Extension per abilitare la conversione automatica dell'immagine in WebP.

5. Usa temi leggeri

Dalle sole impressioni, puoi capire quando un tema pesante rallenta in modo significativo il tuo negozio e gli utenti con connessione Internet lenta e/o capacità hardware obsolete saranno solo ulteriormente influenzati da questo.

Per aggirare questo problema, dovrai scegliere selettivamente i tuoi temi Magento concentrandoti maggiormente sulle prestazioni. Tuttavia, capiamo che è difficile determinare con precisione se un tema è veramente leggero, motivo per cui in genere dovresti controllare se la versione demo del tema ti sembra veloce, leggere più recensioni degli utenti e se vuoi essere sicuro di it, usa PageSpeed ​​Insights per testare a fondo il tema.

6. Disattiva i cataloghi piatti

In passato abilitare il catalogo Flat era la strada da percorrere se si desidera ridurre il tempo necessario per eseguire query SQL. Tuttavia, da Magento 2.1 e versioni successive, questa non è più una procedura consigliata e dovresti astenerti dall'utilizzare qualsiasi estensione che implichi l'uso del catalogo Flat poiché questa funzionalità è nota per causare un degrado delle prestazioni e altri problemi di indicizzazione.

Per disabilitare i cataloghi piatti, assicurati di impostare Usa categoria catalogo piatto/Utilizza prodotto catalogo piatto su No in Negozi > Impostazioni > Configurazione > Catalogo.

7. Riduci le estensioni di terze parti non necessarie

Come sempre, accumulare estensioni di terze parti non è sempre una buona idea e le estensioni di terze parti possono causare ancora più problemi se scaricate/acquistate da fonti non attendibili. Per eliminare potenziali problemi, le migliori pratiche sono mantenere il numero di estensioni a un importo essenziale, aggiornarle regolarmente e scaricare/acquistare estensioni di terze parti solo da fonti attendibili.

8. Disattiva il raggruppamento di Javascript

Javascript Bundling raggruppa molti dei tuoi file Javascript in un bundle. Di conseguenza, il server deve richiedere meno file Javascript, quindi richiede meno tempo per farlo. Questo, in teoria, dovrebbe aiutare con le prestazioni.

Tuttavia, in realtà, lo strumento JS Bundling di base integrato in Magento non soddisfa del tutto tale aspettativa, ma spesso si traduce in una velocità di caricamento inferiore. Secondo un test di un membro dello scambio di stack Magento, il tempo di caricamento medio della sua pagina Web aumenta da 5 a 15 secondi dopo aver abilitato JS Bundling.

Il raggruppamento JS è disattivato per impostazione predefinita. Tuttavia, puoi verificare se era abilitato in precedenza e disabilitarlo di nuovo navigando su

Store >> Configurazione >> Avanzate >> Sviluppatore >> Impostazioni JavaScript e imposta Abilita raggruppamento JavaScript su No .

9. Ottimizza il registro dati Magento

I file di registro del tuo sito Web Magento elencano tutte le modifiche apportate al database. Nel tempo, possono accumularsi fino a pochi GB, il che rallenta le prestazioni del tuo sito.

Rimuovere i vecchi log di grandi dimensioni che non sono più rilevanti per l'attività corrente del tuo sito è un passaggio necessario per mantenere una buona prestazione di velocità.

Inoltre, Magento genera automaticamente e frequentemente nuovi file di registro, quindi la rimozione di quelli vecchi non dovrebbe causare problemi.

Per i commercianti non tecnici, puoi accedere a Store >> Configurazione >> Avanzate >> Pulizia della coda di messaggi MySQL .

La pulizia rimuoverà automaticamente i vecchi file di registro dopo un determinato periodo di tempo.

Magento ha impostato i valori predefiniti per questi attributi sopra, ma puoi cambiarli come meglio credi.

Andando un po' più avanti

10. Usa la memorizzazione nella cache di tutta la pagina di Varnish

Varnish Cache è un acceleratore di applicazioni Web open source che, a seconda dell'architettura, può accelerare la consegna dei contenuti con un fattore da 300 a 1000 volte. Questo è il motivo per cui Magento stesso consiglia vivamente Varnish in quanto è un'opzione molto migliore rispetto alla memorizzazione nella cache a pagina intera integrata. Inoltre, poiché Varnish è progettato per accelerare il traffico HTTP, è possibile ridurre notevolmente i tempi di risposta del server e il consumo di larghezza di banda della rete su richieste ripetute.

Per configurare e utilizzare Varnish, segui la guida dettagliata per far volare il tuo sito Web Magento 2.

Alimentato da Varnish, Fastly ti aiuta a ottenere di più a un costo

Per Magento Commerce Cloud in particolare, Fastly è necessario per l'uso in ambienti di staging e produzione. Rispetto all'utilizzo di Varnish da solo, è un approccio più ricco di funzionalità poiché oltre alle funzionalità di memorizzazione nella cache veloce fornite da Varnish, fornisce anche una CDN e miglioramenti della sicurezza per il tuo sito Web Magento 2 e l'infrastruttura cloud.

I commercianti su Magento Open Source sono invitati a utilizzare Fastly, ma dovresti comunque notare che, a differenza di Varnish, Fastly non è una soluzione gratuita e ha tariffe basate sulla larghezza di banda e sull'utilizzo della richiesta per regione.

Per configurare Fastly, consulta la guida ufficiale su Magento DevDocs.

11. Configura Memcached/Redis

La memorizzazione nella cache è nota per essere una soluzione efficace per ottimizzare la velocità e ridurre drasticamente i tempi di caricamento.

Sebbene Varnish sia una soluzione di memorizzazione nella cache per il front-end, Memcached e Redis aiutano con la memorizzazione nella cache del back-end, che è fortemente consigliata per applicazioni Web su larga scala con database dinamici.

Redis è più potente e più flessibile di Memcached e può fare tutto ciò che Memcached può fare. Pertanto, è una scelta più popolare tra gli sviluppatori. Tuttavia, Memcached è più semplice da configurare e utilizzare e in casi specifici può essere più vantaggioso di Redis.

Si consiglia di approfondire per scoprire quale funziona meglio per l'ambiente del tuo sito Web prima di provare a configurare Memcached, Redis o entrambi.

12. Passa a HTTP/2

Rilasciato nel febbraio 2015, HTTP/2 è un nuovo miglioramento apportato al protocollo HTTP esistente. Ora è utilizzato dal 49,9% di tutti i siti Web e d'ora in poi vedrà solo più adozioni, soprattutto perché i test hanno dimostrato che HTTP/2 offre un miglioramento fino al 14% nel caricamento della pagina e altri vantaggi.

Ad esempio, nel video dimostrativo di seguito puoi vedere come HTTP/2 consente prestazioni maggiori quando viene spinto al limite:

In questo video, ogni immagine è suddivisa in 379 piccoli riquadri, che richiedono quindi 379 connessioni separate da effettuare al server. Questo è uno scenario altamente improbabile, ma ci fornisce informazioni su come funziona il multiplexing HTTP/2 e su come può offrire prestazioni molto più veloci rispetto a HTTP/1.

Per abilitare HTTP/2 per il tuo sito Web Magento, devi configurarlo tramite la tua CDN (es. Fastly) o tramite i tuoi server web (Apache). Ad esempio, ecco come farlo in Apache e Nginx.

13. Minimizzazione

La minimizzazione, come suggerisce il nome, è un metodo per minimizzare il codice della tua pagina. Durante il processo di minimizzazione, tutte le parti non necessarie nei tuoi file HTML, JavaScript o CSS verranno rimosse, assicurando che le risorse della tua pagina siano mantenute il più snelle possibile. La minimizzazione è una pratica standard al giorno d'oggi e ogni sito Web dovrebbe applicarla nella propria infrastruttura poiché è essenzialmente un aumento delle prestazioni gratuito.

Per abilitare la minimizzazione per il tuo sito Web Magento, puoi fare affidamento su estensioni prontamente disponibili come Minify HTML CSS JS o abilitare la minimizzazione CSS e JavaScript direttamente tramite il backend Magento. Con quest'ultimo metodo, dovrai:

• Imposta il tuo negozio Magento 2 in modalità produzione
• Quindi vai su Negozi > Configurazione > Avanzate > Sviluppatore
• Impostare Minimizza file HTML/Riduci file CSS/Riduci file JavaScript su Sì
• Ricordarsi di svuotare la cache in seguito tramite Sistema > Gestione cache

14. Vai senza testa con una vetrina PWA

Poiché la maggior parte dei siti Web Magento che abbiamo in questo momento sono ancora basati sull'architettura tradizionale, sei più limitato dall'infrastruttura in uso più che altro, poiché l'architettura tradizionale stessa è rigida, conservativa e soggetta a rallentamenti nel tempo. L'architettura headless risolve più o meno questo problema, poiché è un approccio che cerca di portare maggiore flessibilità, maggiore scalabilità e maggiori miglioramenti delle prestazioni alle vetrine.

Questo è il motivo per cui i marchi stanno optando per le vetrine PWA (che è una vetrina senza testa) come un modo per apportare maggiori miglioramenti delle prestazioni, ed è davvero un dormiente che otterrà più riconoscimenti solo nel prossimo futuro.

Poiché andare senza testa spesso comporta importanti modifiche all'infrastruttura del tuo sito Web, ti suggeriamo di affidarti solo a un fornitore di soluzioni Magento PWA di fiducia per eseguire l'intero processo per te.

 Letture consigliate: Vantaggi di PWA per il tuo business

15. Rimuovere i caratteri inutilizzati

È comune provare diversi tipi di carattere prima di decidere quali stanno meglio sul tuo sito Web, quindi dimenticarli. Tuttavia, questi caratteri vengono ancora aggiunti al tuo "default_head_blocks.xml" e vengono ancora scaricati.

Se vuoi ottimizzare la velocità per il tuo sito Magento, è necessario eliminare tutti i font non utilizzati.

Allo stesso modo, se utilizzi un font personalizzato, dovresti rimuovere altri font predefiniti del tuo tema (ad es. Open Sans, Helvetica, ecc.).

Puoi risolvere questo problema sovrascrivendo _typography.less nel tuo tema.

Trasferisci semplicemente il

 /vendor/magento/theme-frontend-blank/web/css/source/_typography.less

Per

 /app/design/frontend/Vendor/Theme/web/css/source/_typography.less

Quindi elimina tutti i caratteri non necessari nei nuovi file _typography.less.

Inoltre, dovrai rimuovere i caratteri nel file default_head_blocks.xml in modo che non venga più scaricato.

 <testa>
...
<remove src="fonts/helvetica/regular/helvetica-400.woff2"/> 
<remove src="fonts/helvetica/bold/helvetica-700.woff2"/> 
...

16. Usa il raggruppamento Javascript avanzato

Nel passaggio 8, suggeriamo di disattivare il raggruppamento JS nativo di Magento per la sua mancanza di efficienza. Tuttavia, JS Bundling è ancora una pratica efficace per ottenere una migliore velocità di Magento 2 se si sa come personalizzarlo.

Ma prima, parliamo di come il bundling predefinito di Magento JS differisce da quelli avanzati:

Per il bundle JS di base di Magento, puoi raggruppare o unire tutti i file JS in un solo bundle jumbo. Di conseguenza, quando è richiesta una pagina, il browser deve caricare questo grosso e pesante bundle JS, che inevitabilmente aumenta il tempo di caricamento.

Nel frattempo, con il raggruppamento JS avanzato, puoi personalizzare i tuoi pacchetti in modo che il browser debba scaricare solo un pacchetto rilevante per il contenuto di ciascuna pagina. Poiché questi bundle sono più piccoli e leggeri, non causeranno ulteriori problemi di velocità.

In modo flessibile, puoi creare pacchetti per ogni tipo di pagina o per scopi diversi.

Ad esempio, personalizza un pacchetto per le pagine delle categorie e un altro per le pagine di pagamento.

Per quanto riguarda le istruzioni dettagliate, puoi fare affidamento sulla guida ufficiale di Magento per il pacchetto JS avanzato.

17. Utilizzare il caricamento JS posticipato

Quando un browser carica una pagina, carica tutti i file Javascript, HTML e CSS della pagina posizionati dall'alto verso il basso. I file Javascript, che spesso si trovano in cima, vengono caricati per primi. Una volta caricato Javascript, il browser continua a eseguire il rendering di file HTML e CSS.

Tuttavia, Javascript è un linguaggio più complicato, che generalmente richiede più tempo per il caricamento rispetto all'HTML. Pertanto, per ottimizzare la velocità per Magento 2, si consiglia di spostare il Javascript in basso in modo che venga caricato solo dopo il rendering dei file HTML e CSS.

Puoi farlo seguendo la guida ufficiale di Magento o utilizzando un'estensione di differimento JS per Magento 2.

18. Abilita percorso critico CSS

È una pratica comune per i programmatori memorizzare CSS in un file esterno. Tuttavia, secondo Magento, tutti gli stili CSS da fonti esterne bloccheranno il rendering. Per dirla in altro modo, la tua pagina non visualizzerà nulla se tutti questi file non vengono caricati.

Di conseguenza, aumenta la prima metrica di pittura significativa nelle informazioni sulla velocità della pagina di Google e rallenta il caricamento della pagina.

Il percorso critico CSS consente la selezione di CSS critici differendo tutti gli stili non importanti. Questi stili CSS critici vengono quindi minimizzati e assemblati in linea in <head> .

Pertanto, aiuta a migliorare il tempo necessario per eseguire il rendering di una pagina la prima volta. Magento ha riscontrato un calo di First Significato Paint da 3.5s a 2.3s abilitando questa funzione e puoi capire come lo fanno seguendo la loro guida al percorso critico CSS.

19. Assicurati che sia in modalità produzione

Magento ha tre modalità operative: modalità predefinita, sviluppatore e produzione.

La modalità di produzione, che è ottimizzata per le prestazioni abilitando la memorizzazione nella cache di pagina intera, bundle JS e altro, è consigliata per tutti i siti live di Magento. È la modalità Magento più veloce, che è del 20%-30% più veloce della modalità sviluppatore.

Controlla la tua modalità corrente eseguendo il comando:

 bin/magento deploy:mode:show

Riceverai un messaggio come questo:

Modalità dell'applicazione corrente: {modalità}. (Nota: le variabili di ambiente possono sovrascrivere questo valore.)

Se la modalità corrente non è produzione, è possibile passare alla modalità produzione eseguendo il comando:

 bin/magento deploy:mode:set {mode} [-s|--skip-compilation]

Conclusione

Con tutte queste tecniche, ora puoi lavorare per rendere il tuo Magento più veloce e, quindi, ottenere un vantaggio competitivo migliore rispetto ai tuoi concorrenti. Tuttavia, dovresti notare che l'ottimizzazione delle prestazioni non vale sempre la pena andare fino in fondo, poiché le micro ottimizzazioni sono il più delle volte uno sforzo sprecato e rimangono impercettibili nell'utilizzo nel mondo reale. La migliore strategia, secondo la nostra esperienza, è identificare prima i problemi di impatto e concentrarsi solo su di essi fino a quando non si ottengono i risultati desiderati.

Per i commercianti Magento che stanno lottando con le prestazioni, qui su SimiCart offriamo una vasta gamma di servizi, inclusa l'ottimizzazione della velocità per la tua attività. Inizia subito a esplorare le tue opzioni e raggiungi prestazioni del negozio leader del settore.