Spiegazione dell'ottimizzazione delle prestazioni di Magento

Pubblicato: 2022-03-11

Le prestazioni di Magento sono di fondamentale importanza. La velocità di caricamento ha un impatto diretto e misurabile sul tasso di conversione del tuo sito Web, quindi avere un'installazione Magento ottimizzata è fondamentale per il successo del tuo negozio Magento e forse anche della tua attività in generale.

In questo articolo presenterò alcuni modi in cui gli sviluppatori Magento possono ottimizzare la loro installazione di Magento 2 e spiegherò come fare quanto segue:

  • Controlla i moduli di terze parti e trova i colli di bottiglia
  • Abilita cache a pagina intera
  • Vernice, non file per la cache a pagina intera
  • Assicurati che la cache a pagina intera funzioni, può essere rotta così facilmente
  • Abilita la modalità Produzione
  • Minimizzazione CSS/JS
  • Abilita tabelle piatte
  • Ottieni l'hosting più veloce che ti puoi permettere
  • Ottimizza le immagini
  • Indicizzatori per "Aggiornare nei tempi previsti"
  • Compressione GZIP
  • Usa Elasticsearch sulle pagine del catalogo e cerca.
  • Verifica la presenza di chiamate Ajax non necessarie al server dopo il caricamento della pagina (può causare blocchi di sessione)
  • Redis per la cache della pagina e l'archiviazione della sessione

Controlla i moduli di terze parti e trova i colli di bottiglia

Esistono molti moduli Magento di terze parti con codice errato, che utilizzano metodi deprecati o che presentano problemi di compatibilità con l'ultima versione stabile di Magento. Il modo migliore per identificare le richieste pesanti è utilizzare un profiler. Questo ti aiuta a identificare quante query MySQL hai in una pagina e quante sono identiche. Sapendo questo, puoi compattare quelle query in una e quindi accelerare Magento.

Una delle cose principali che gli sviluppatori junior stanno sbagliando in Magento è caricare i modelli all'interno dei loop. Cerca di evitarlo il più possibile. Carica l'intera raccolta con tutto ciò di cui hai bisogno e poi scorrela. Tieni sempre a mente la complessità del tempo e dello spazio e costruisci il tuo algoritmo in modo ottimizzato.

Grafico delle prestazioni di Magento

Guarda come viene caricato il tuo layout e quali sono i blocchi modello che funzionano più lentamente, quindi esamina quel codice. Esamina le metriche Model CRUD in cui puoi trovare dati approfonditi come caricare le chiamate nei loop.

Magento Cache a pagina intera

Quando un utente accede al tuo negozio, viene inviata una richiesta al server. Questa richiesta viene elaborata da PHP eseguendo operazioni specifiche e query di database, quindi restituendo il codice HTML corrispondente da visualizzare all'utente. La cache a pagina intera memorizza quella risposta HTML, in modo che la successiva richiesta identica la restituisca direttamente saltando tutte le query di elaborazione e database di back-end. Ciò rende la risposta del sito Web molto più veloce.

L'utilizzo della cache a pagina intera come parte dei tuoi sforzi di ottimizzazione di Magento può aumentare enormemente la velocità del tuo sito web. Questo creerà versioni cache delle tue pagine e le consegnerà all'utente invece di eseguire tutte le query per ogni richiesta. Naturalmente, non tutte le pagine sono memorizzate nella cache. Ad esempio, la pagina del carrello non verrà memorizzata nella cache, altrimenti tutti gli utenti vedranno la prima versione della pagina memorizzata nella cache. Si tratta di pagine dinamiche o sezioni di pagine specifiche dell'utente e della sessione.

Per abilitare la cache a pagina intera di Magento puoi eseguire il seguente comando CLI:

php bin/magento cache:enable full_page

Per abilitare i tipi di cache puoi eseguire il comando CLI:

php bin/magento cache:enable

Puoi farlo anche da Magento Admin accedendo come amministratore:

  1. Vai a Sistema > Strumenti > Gestione cache
  2. Seleziona il tipo di cache che desideri attivare
  3. Nel menu a discesa Azioni seleziona Abilita e fai clic su Invia

Schermata di ottimizzazione delle prestazioni di Magento

Usa vernice per cache a pagina intera

Quando abiliti la cache a pagina intera, usa Varnish per gestirla, non i file. Magento consiglia vivamente di utilizzare Varnish (o Redis) in produzione. La memorizzazione nella cache a pagina intera integrata (nel file system o nel database) è molto più lenta di Varnish e Varnish è progettato per accelerare il traffico HTTP.

Puoi trovare una guida completa su come installare e configurare Varnish nella documentazione ufficiale di Magento 2.

Per configurare Magento per utilizzare Varnish, accedi all'amministratore Magento come amministratore:

  1. Vai a Negozi > Configurazione > Avanzate > Sistema > Cache a pagina intera
  2. Dall'elenco delle applicazioni di memorizzazione nella cache, fare clic su Varnish Caching
  3. Immettere un valore nel campo TTL per contenuto pubblico
  4. Espandi Configurazione vernice e inserisci le informazioni specifiche sulla tua configurazione vernice

Screenshot della cache a pagina intera per l'ottimizzazione delle prestazioni di Magento

Assicurati che la cache a pagina intera funzioni: si rompe facilmente

La cache a pagina intera può essere facilmente interrotta in Magento 2. Ad esempio, se si desidera escludere un blocco dalla cache non utilizzare l'attributo cacheable="false" nel layout XML quando si dichiara il blocco. Ciò disabiliterà la cache per l'intera pagina che contiene quel blocco, non solo per quel blocco. Questo è un errore che ho visto fare dalla gente.

Cerca l'attributo cacheable="false" nei tuoi layout e guarda su quali blocchi sono impostati e su quali pagine vengono chiamati quei blocchi. Pertanto, puoi identificare se le pagine banali hanno problemi con la cache.

Puoi anche verificare se la tua pagina è memorizzata nella cache manualmente. Metti il ​​negozio in modalità sviluppatore nel tuo ambiente locale o sul palco:

  1. Svuota la cache di Magento
  2. Carica la pagina nel browser
  3. Ispeziona le intestazioni delle pagine nella scheda della rete di debug del browser.
  4. Cerca X-Magento-Cache-Debug: MISS
  5. Aggiorna la pagina, dovrebbe cambiare in HIT

Se non cambia in HIT significa che la pagina non è memorizzata nella cache e la cache non funziona.

Non dimenticare di abilitare la modalità di produzione

Magento ha tre modalità di esecuzione, predefinita , sviluppatore e modalità di produzione .

La modalità di produzione è concepita per la distribuzione su un sistema di produzione. Questa modalità nasconde le eccezioni, serve solo i file statici dalla cache e non consente di abilitare o disabilitare i tipi di cache in Magento Admin. Impedisce inoltre la compilazione automatica del file di codice.

Durante il lavoro e lo sviluppo del negozio, la modalità sviluppatore è attiva. Non dimenticare di passare alla modalità di produzione quando distribuisci il tuo sito al server live!

Il comando CLI per vedere la modalità corrente è:

php bin/magento deploy:mode:show

Il comando CLI per passare alla modalità produzione è:

php bin/magento deploy:mode:set production

Il comando CLI per passare alla modalità sviluppatore è:

php bin/magento deploy:mode:set developer

Puoi trovare informazioni più dettagliate sulle diverse modalità Magento qui.

Minimizzazione CSS/JS

La minimizzazione dei file CSS e JS è un elemento importante dell'ottimizzazione della velocità di Magento 2. Riducendoli al minimo, rimuoviamo tutti gli spazi, le schede e le nuove righe nei file. I file risultanti avranno meno caratteri e quindi una dimensione inferiore, quindi verranno scaricati più velocemente.

Magento ha questa funzione integrata e puoi abilitare la minimizzazione CSS/JS in Admin. Per abilitare la minimizzazione di JavaScript, procedi nel seguente modo:

  1. metti Magento in modalità produzione
  2. Vai a Negozi > Configurazione > Avanzate > Sviluppatore
  3. Impostare l'opzione Minimizza file Javascript su
  4. Salva configurazione
  5. Svuota cache nella pagina Sistema > Gestione cache

Schermata della modalità di produzione Magento

Per abilitare la minimizzazione CSS, sono necessari i seguenti passaggi:

  1. metti Magento in modalità produzione
  2. Vai a Negozi > Configurazione > Avanzate > Sviluppatore > Impostazioni CSS
  3. Imposta l'opzione Minimizza file CSS su
  4. Salva configurazione
  5. Svuota cache nella pagina Sistema > Gestione cache

Schermata di minimizzazione CSS Magento

Nota: non unire file JS: riducili a icona .

Abilita tabelle piatte

Magento utilizza il modello EAV (entity attribute value) che memorizza gli attributi delle sue entità in più tabelle a seconda del tipo di valore. Utilizzando più tabelle, sono necessari join e richieste su più tabelle per recuperare i dati, il che può rallentare le query.

Magento ha la possibilità di utilizzare tavoli piatti per catalogo e prodotti. Le tabelle flat vengono create unendo tutti gli attributi di un'entità in un'unica tabella. Quando richiediamo i dati, dobbiamo interrogare una tabella, rendendola molto più veloce.

Magento genera e aggiorna tabelle flat su ogni indicizzazione. Puoi abilitare le tabelle flat accedendo a Magento Admin come amministratore:

  1. Vai a Negozi > Configurazione > Catalogo > Catalogo > Vetrina
  2. Selezionare per utilizzare la categoria del catalogo piatto
  3. Selezionare per utilizzare il prodotto catalogo piatto
  4. Salva configurazione

Schermata dei tavoli piatti Magento

Scegli Hosting Magento veloce

Controlla i requisiti minimi di Magento e verifica se il tuo server li soddisfa. Puoi vedere i requisiti ufficiali dello stack tecnologico Magento 2.2.x qui.

La configurazione dell'hosting è molto importante per le prestazioni di Magento 2. Esistono anche servizi di hosting dedicati per Magento, anche se possono riguardare più il marketing che altro.

In conclusione: ottieni la soluzione di hosting più veloce che puoi permetterti a meno che non sia eccessiva per il tuo progetto.

Ottimizzazione dell'immagine Magento

La dimensione delle tue immagini ha ovviamente un impatto sulla velocità del tuo sito web. Ad esempio, se hai una pagina di catalogo con 20 prodotti e ogni immagine di prodotto ha una dimensione di 1 Mb, ciò significa che è possibile scaricare un totale di 20 Mb quando la pagina viene caricata, e questo potrebbe ovviamente essere un problema in alcuni scenari (dispositivi mobili, larghezza di banda limitata in alcune regioni, ecc.).

Controlla se le tue immagini sono ottimizzate correttamente e se hanno un buon rapporto tra qualità e dimensioni. Inoltre, assicurati che le tue immagini non vengano ridimensionate dai CSS ma che il file sorgente sia ridimensionato alla dimensione specifica di cui hai bisogno.

Un'altra tecnica consiste nell'utilizzare il caricamento lento, che significa caricare le immagini dopo che la pagina è stata completamente caricata o mentre l'utente scorre il catalogo.

Puoi anche utilizzare AWS o una CDN per distribuire i tuoi contenuti molto più velocemente. Diamo una rapida occhiata alle differenze tra AWS, CDN e hosting tradizionale da una prospettiva di ottimizzazione bitmap.

Ospitalità tradizionale

Il modo tradizionale è archiviare i tuoi contenuti come le immagini sullo stesso server del tuo sito web. Questo può occupare spazio su disco e una buona parte della tua larghezza di banda, creando un notevole carico del server. Ovviamente, il ridimensionamento con l'hosting tradizionale può essere un problema.

CDN (rete di distribuzione dei contenuti)

Una rete di distribuzione dei contenuti viene solitamente utilizzata per ridurre il carico di un server servendo parte del contenuto del sito Web. Oltre a ciò, offre prestazioni elevate fornendo rapidamente i tuoi contenuti e un'elevata disponibilità utilizzando più reti a cui rivolgersi.

AWS (Amazon CloudFront)

Amazon CloudFront è una rete per la distribuzione di contenuti (CDN) altamente sicura che fornisce protezione a livello di rete e applicazione. Consulta questo tutorial su come iniziare con AWS e distribuire i contenuti più velocemente.

Inoltre, puoi utilizzare AWS per ridimensionare le immagini al volo in base alle dimensioni passate tramite un parametro di query. Per ulteriori informazioni, consulta questo tutorial sul ridimensionamento delle immagini con Amazon CloudFront e Lambda@Edge.

Imposta gli indicizzatori su "Aggiorna nei tempi previsti"

Gli indicizzatori Magento possono essere impostati su due modalità: " Aggiorna su salvataggio " o " Aggiorna su pianificazione ".

Quando sono impostati su "Aggiorna al salvataggio" ogni volta che salvi un prodotto, un attributo o una categoria, l'indice specifico inizia a essere eseguito. Gli indicizzatori possono consumare risorse e ciò potrebbe rallentare il tuo server.

La modalità migliore per impostare gli indicizzatori è "Aggiorna in base alla pianificazione". In questo modo, sei sicuro che vengano eseguiti dal lavoro cron in un momento specifico che hai impostato. Scegli un momento in cui il traffico sul tuo sito web è basso.

È possibile visualizzare la modalità corrente degli indicizzatori eseguendo il comando:

php bin/magento indexer:show-mode

Oppure in Magento Admin andando su:

Sistema > Gestione indice

È possibile modificare la modalità degli indicizzatori in "Aggiorna in base alla pianificazione" eseguendo il comando:

php bin/magento indexer:set-mode schedule

È possibile modificare la modalità degli indicizzatori in "Aggiorna al salvataggio" eseguendo il comando:

php bin/magento indexer:set-mode realtime

Ed eccolo in Magento Admin:

Sistema > Gestione indici: seleziona tutti gli indicizzatori e dal menu a tendina Azioni seleziona "Aggiorna secondo pianificazione"

testo alternativo immagine

Puoi anche configurare le attività pianificate andando in Admin per:

Store > Impostazioni > Configurazione > Avanzate > Sistema > Cron (attività pianificate)

Espandi "Opzioni di configurazione Cron per il gruppo: indice"

Finestra di configurazione del cron Magento

Compressione GZIP

Gzip è un metodo di compressione dei file per trasferimenti di rete più veloci. La compressione consente al tuo server web di fornire file di dimensioni inferiori che si caricano più velocemente per gli utenti del tuo sito web. Tuttavia, questo ha un costo.

Durante la compressione di un file si carica la CPU e più si comprime un file più tempo è necessario. Anche se ciò può aumentare il carico della CPU del server, potrebbe anche ridurre sostanzialmente l'utilizzo della larghezza di banda. Con gzip puoi scegliere tra diversi livelli di compressione, da 1 a 9.

Al livello 1 hai il tempo di compressione più veloce, ma un rapporto di compressione inferiore. Sul lato opposto, al livello 9 hai il tasso di compressione più alto ma una velocità inferiore. La configurazione predefinita di gzip utilizza il livello 6, favorendo la compressione rispetto alla velocità. Nginx utilizza però il livello 1, favorendo la velocità rispetto alle dimensioni del file.

Per attivare la compressione gzip e attivare il modulo mod_deflate di Apache, puoi aggiungerlo aggiornando il tuo file .htaccess e decommentare le righe appropriate come mostrato di seguito. Il modulo mod_deflate comprime le risorse statiche in file più piccoli prima di trasferirli al browser.

 <IfModule mod_deflate.c> ############################################ ## enable apache served files compression ## http://developer.yahoo.com/performance/rules.html#gzip # Insert filter on all content SetOutputFilter DEFLATE # Insert filter on selected content types only AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/javascript application/javascript application/x-javascript application/json image/svg+xml # Netscape 4.x has some problems... BrowserMatch ^Mozilla/4 gzip-only-text/html # Netscape 4.06-4.08 have some more problems BrowserMatch ^Mozilla/4\.0[678] no-gzip # MSIE masquerades as Netscape, but it is fine BrowserMatch \bMSIE !no-gzip !gzip-only-text/html # Don't compress images SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png)$ no-gzip dont-vary # Make sure proxies don't deliver the wrong content Header append Vary User-Agent env=!dont-vary </IfModule>

Usa Elasticsearch nelle pagine del catalogo e nella ricerca

Un altro modo per aumentare la velocità del tuo sito Web è utilizzare Elasticsearch per le pagine del catalogo e i risultati di ricerca. Configura il tuo server Elasticsearch e collega il tuo negozio Magento ad esso. La ricerca diventa molto più veloce utilizzando Elasticsearch.

Questa guida ufficiale spiega come configurare Magento con Elasticsearch.

Per configurare Magento per l'utilizzo di Elasticsearch, accedi a Magento Admin come amministratore:

  1. Fare clic su Negozi > Impostazioni > Configurazione > Catalogo > Catalogo > Ricerca catalogo .
  2. Dall'elenco dei motori di ricerca , fare clic su Elasticsearch o Elasticsearch 5.0+ come mostra la figura seguente. (L'opzione Elasticsearch 5.0+ non è disponibile per Magento 2.1.)

Configurazione di Elasticsearch in Magento

Controlla le chiamate Ajax non necessarie

Le richiamate al server dopo il caricamento della pagina possono causare blocchi di sessione. Un modo per verificare tutte le chiamate Ajax che la tua pagina sta facendo è utilizzare DevTools in Chrome. Puoi aprirlo facendo clic con il tasto destro sulla pagina e selezionando Ispeziona.

Vai alla scheda rete e lì puoi filtrare la richiesta per XHR. Ora puoi vedere tutte le richieste Ajax della pagina e controllarle per vedere quali di esse sono necessarie in quella particolare pagina.

Ajax chiama a Magento

Redis per la cache della pagina e l'archiviazione della sessione

Redis è una soluzione cache back-end opzionale per sostituire Zend_Cache_Backend_File , utilizzato in Magento 2 per impostazione predefinita.

Perché usare Redis?

L'utilizzo di Redis può avere molteplici vantaggi:

  • Puoi sostituire memcached con Redis perché può essere utilizzato anche per l'archiviazione di sessioni PHP.
  • Redis supporta il salvataggio su disco e la replica master/slave, che è una funzionalità molto richiesta che non è supportata da memcached. La replica evita un singolo punto di errore e fornisce un'elevata disponibilità.
  • Le operazioni sui tag non richiedono una scansione completa di ogni file di cache perché Redis funziona indicizzando i tag nei file.
  • Il back-end supporta la pulizia della cache basata su tag senza cicli foreach.

C'è anche uno svantaggio principale:

  • Poiché Redis è un archivio in memoria, tutti i tuoi dati devono rientrare nella memoria, il che significa che è limitato solo dalla velocità e dalla capacità della RAM.

Configura Magento per utilizzare Redis per l'archiviazione delle sessioni

Di seguito è riportata una configurazione di esempio da aggiungere a <your Magento install dir>app/etc/env.php :

 'session' => array ( 'save' => 'redis', 'redis' => array ( 'host' => '127.0.0.1', 'port' => '6379', 'password' => '', 'timeout' => '2.5', 'persistent_identifier' => '', 'database' => '2', 'compression_threshold' => '2048', 'compression_library' => 'gzip', 'log_level' => '1', 'max_concurrency' => '6', 'break_after_frontend' => '5', 'break_after_adminhtml' => '30', 'first_lifetime' => '600', 'bot_first_lifetime' => '60', 'bot_lifetime' => '7200', 'disable_locking' => '0', 'min_lifetime' => '60', 'max_lifetime' => '2592000' ) ),

Puoi controllare qui tutti i dettagli sui parametri e come eseguire una verifica di base che la tua installazione Redis funzioni correttamente insieme al tuo Magento.

Configura Magento per utilizzare Redis per la pagina e la cache predefinita

Esistono due modi per configurare Redis per la pagina e la cache predefinita. Puoi modificare manualmente il file <Magento install dir>app/etc/env.php oppure puoi usare la riga di comando, che è il metodo consigliato perché fornisce anche la convalida.

Per la cache predefinita eseguire il comando:

php bin/magento setup:config:set --cache-backend=redis --cache-backend-redis-<parameter_name>=<parameter_value>...

Specificare parametri specifici per la memorizzazione nella cache predefinita di Redis.

Per la cache della pagina eseguire il comando:

Php bin/magento setup:config:set --page-cache=redis --page-cache-redis-server=redis.example.com --page-cache-redis-db=1

Questo comando abilita la memorizzazione nella cache della pagina Redis, imposta l'host su redis.example.com e assegna il numero del database a 1. Puoi controllare tutti i dettagli su Magento DevDocs.

Riassunto dell'ottimizzazione delle prestazioni di Magento

Abbiamo coperto alcuni approcci all'ottimizzazione delle prestazioni di Magento 2, quindi facciamo un breve riepilogo.

Identificare e risolvere i colli di bottiglia farà un'enorme differenza nell'elaborazione dei dati. L'uso della cache a pagina intera e di Varnish migliorerà anche la velocità del tuo sito Web e accelererà il traffico HTTP. Dovresti sempre usare Magento in modalità produzione sul tuo server live, senza scuse. Usa la minimizzazione per ridurre le dimensioni dei file CSS e JS, un file più piccolo verrà scaricato più velocemente e consumerà meno larghezza di banda.

Abilita le tabelle flat per ridurre le richieste del database e migliorare i tempi di risposta del database. Ottimizza le tue immagini e usa una CDN se possibile. Imposta gli indicizzatori per l'aggiornamento nei tempi previsti e abilita il cron Magento. L'abilitazione della compressione gzip ridurrà anche la dimensione dei file da scaricare. L'utilizzo di Elasticsearch aumenterà la velocità delle pagine del tuo catalogo e la pagina dei risultati di ricerca verrà caricata molto più velocemente. Usa Redis per la cache delle pagine e l'archiviazione delle sessioni che è significativamente più veloce del memcache predefinito.

Puoi implementare tutti questi consigli o solo alcuni che non hai utilizzato finora. Anche un paio dovrebbero essere sufficienti per migliorare le prestazioni di Magento, che si spera si trasformino in più conversioni.