Come aumentare la velocità di PrestaShop 1.7

La velocità di caricamento delle pagine di un sito è un fattore importantissimo per due motivi:

  • Google lo considera come fattore di ranking
  • Gli utenti, impazienti per definizione, abbandonano le pagine che non si caricano velocemente

Come procedere nell’ottimizzare le prestazioni di un sito web, in particolare di uno basato su PrestaShop?

Analisi dello stato attuale del sito

Il primo passo è analizzare la situazione attuale del proprio sito. Questo serve a:

  • capire se è necessario eseguire delle operazioni per aumentare le performance,
  • avere un punto di partenza e valutare l’efficacia delle nostre modifiche passo dopo passo.

Esistono molti strumenti, on line e gratuiti, per eseguire questa analisi. Ecco i principali.

Page Speed Insights di Google

https://developers.google.com/speed/pagespeed/insights/

Si inserisce l’indirizzo del proprio sito e si clicca il bottone azzurro ANALIZZA.

Page Speed Insight fornisce risultati per la versione mobile e desktop dell’indirizzo della pagina web inserita.

e

I risultati sono espressi in centesimi e colorati di verde, giallo o rosso a seconda della bontà o meno della velocità di download della pagina.

Page Speed Insights di Google non è l’unico tool per la misurazione delle prestazioni di un sito. Esistono anche:

GT Metrix

https://gtmetrix.com/

Anche qui si inserisce l’URL della home page o della pagina che si intende sottoporre a test e si clicca sul pulsante Analyze.

Per esempio

GTmetrix fornisce in voti da A (ottimo) a F (insufficiente) i risultati sono espressi in centesimi e colorati di verde, giallo o rosso a seconda della bontà o meno della velocità di download della pagina.

Pingdom Website Speed Test

https://tools.pingdom.com/

Anche qui si inserisce l’URL della home page o della pagina che si intende sottoporre a test e si clicca sul pulsante verde START TEST.

Esempio

Come GTmetrix, anche Pingdom fornisce una valutazione in voti A-F, fornendo anche molte indicazioni dettagliate su quali aspetti migliorare.

Webpagetest

https://www.webpagetest.org/

Stesso funzionamento degli altri tool visti: inserimento dell’URL da analizzare e click sul bottone giallo START TEST.

Esempio

Come migliorare la velocità del sito?

Adesso che abbiamo capito che il nostro sito è lento, come aumentarne la velocità?

Ecco alcuni consigli che possono portare fin da subito notevoli miglioramenti, senza essere necessariamente sistemisti esperti.

Ricorda: ogni volta che viene implementata una misura, abbi cura di rieseguire il test di velocità su almeno uno e due dei tool on line indicati sopra.

La pagina Performance di PrestaShop

PrestaShop permette di gestire alcune opzioni riguarda la cache da Parametri avanzati > Prestazioni.

Sezione SMARTY

La prima sezione “SMARTY”, di default ha una serie di opzioni già attivate. Comunque:

  • Per Compilazione del template, lasciare Ricompila i file del template se sono stati aggiornati. Se invece il design dello store è definitivo e non prevedete di cambiarlo, selezionare “Never recompile template files”
  • Per Tipo di cache, lasciare File system
  • Infine per Pulisci la cache, lasciare Pulisci la cache ogni volta che qualcuno ha fatto delle modifiche

E salvare.

Sezione CCC

Esiste anche, in questa pagina (Parametri avanzati > Prestazioni), una sezione chiamata “CCC (COMBINAZIONE, COMPRESSIONE E CACHE)” che dovrebbe permettere di caricare più velocemente il front-end. Queste impostazioni sono disattivate di default e conviene testarle per vedere gli effetti sulle performance. Se non ci sono controindicazioni, andrebbero attivate tutte, eccetto forse Ottimizzazione Apache.

Sezione Cache

Sempre in questa pagina, Parametri avanzati > Prestazioni, un’altra sezione (Cache) riguarda il modo in cui PrestaShop gestisce il caching, che è uno degli aspetti principali riguardo la velocità del sito:

Secondo molti invece non conviene attivare il sistema di caching “built-in” del file system, perché molto spesso il sito tende a rallentare invece che a velocizzarsi. Secondo gli sviluppatori di PrestaShop, se la versione di MySQL è inferiore alla 8 e MySQL è installato sulla stessa macchina, non conviene abilitare la cache, perché risulterà più efficiente la cache di MySQL. In questi casi, la scelta migliore sarebbe utilizzare APC o Xcache per siti su un solo server e Memcached per grossi siti distribuiti su più server. Da valutare anche l’impiego di servizi come Memcache o Redis.

Nel caso si selezioni APC o Xcache è necessario installare l’estensione sul web server.

Per altri sarebbe più conveniente invece utilizzare uno dei seguenti moduli (a pagamento): JPresta Page Cache, Presta-Module Cache Manager, xtendify Express Cache, Page Cache Ultimate Module.

Immagini

Per quanto riguarda le immagini, PrestaShop è ottimizzato per quello dei prodotti, ma in genere non sono ottimizzate quelle dei temi.

Le impostazioni delle immagini sono in Design > Image settings.

La soluzione migliore sarebbe utilizzare un programma di grafica specifico come Adobe Photoshop, oppure il software gratuiti ImageOptim per Windows oppure sfruttare servizi on line come Kraken.io oppure Smushit, integrabile in PrestaShop con questo plug in https://www.presteamshop.com/en/modules-prestashop/smush-optimize-image.html.

In alternativa, PrestaShop è pieno zeppo di moduli che ottimizzano l’aspetto delle immagini, implementanto il lazy loading, la compressione e altro ancora. Si può partire cercando qualcosa qui: https://addons.prestashop.com/en/432-website-performance

Ottimizzare il database

Un altro aspetto del caching riguarda il database, che si può ottimizzare seguendo questo tutorial https://www.howtogeek.com/howto/programming/speed-up-your-web-site-with-mysql-query-caching/.

Meglio ancora, iniziare subito con il modulo PrestaShop Database Optimization.

Comunque l’area di ottimizzazione del db è molto vasta, puoi iniziare leggendo qui: https://www.mysql.com/why-mysql/performance/.

Gli sviluppatore di PrestaShop consigliano i seguenti settaggi per MySQL:

query_cache_limit               = 128K

query_cache_size                = 32M

query_cache_type                = ON

e

table_open_cache                      = 1000

read_buffer_size                      = 2M

read_rnd_buffer_size                  = 1M

thread_cache_size                     = 80

join_buffer_size                      = 2M

sort_buffer_size                      = 2M

max_connections                       = 400

tmp_table_size                        = 32M

max_heap_table_size                   = 32M

table_definition_cache                = 1000

performance_schema                    = OFF

Utilizzare l’ultima versione di PHP (>=7)

Anche la versione di PHP può aiutare. La 5.5 e la 5.6 sono molto solide e consigliate. Ma meglio ancora la 7, come si vede dall’immagine sotto in termini di velocità

Immagine tratta da https://www.wpoven.com/blog/hhvm-vs-php-7-performance-showdown-wordpress-nginx

Assicurarsi che sia abilitato Zend Opcache.

Gli sviluppatori di PrestaShop consigliano la seguente configurazione di PHP:

[Date]

date.timezone = UTC

[Session]

session.auto_start = Off

[PHP]

short_open_tag = Off

realpath_cache_size = 4096K

realpath_cache_ttl = 600

display_errors = Off

magic_quotes_gpc = off

; Increase this value if you are able to do it

memory_limit = 512M

max_execution_time = 300

max_input_time = 300

upload_max_filesize = 20M

post_max_size = 22M

; Increase this value if you work with products with a lot of combinations

max_input_vars = 20000

allow_url_fopen = on

[opcache]

opcache.enable_file_override = On

opcache.interned_strings_buffer=64

opcache.fast_shutdown=1

opcache.memory_consumption=256

opcache.max_accelerated_files=20000

; Extra-optimization https://symfony.com/doc/current/performance.html#don-t-check-php-files-timestamps

; opcache.validate_timestamps=0

Proxy

Per siti con molto traffico, un reverse proxy come Varnish è indispensabile, anche se non semplice da configurare, specie per PrestaShop. Qui una guida https://dh42.com/blog/fastest-prestashop/

CDN

Per siti con utenti provenienti da tutto il mondo, settare una CDN sfruttando servizi come Meta CDN o Max CDN che possono essere configurati in Parametri avanzati > Prestazioni, sezione Media Servers.

Una buona CDN per partire, indicata anche dalla guida ufficiale di PrestaShop è Cloudflare.

Vedi anche https://www.keycdn.com/support/prestashop-cdn-integration

Gzip ed expire headers

Gzip e expire headers sono cruciali per Google, ma PrestaShop non lo consente con il core, è necessario usare uno dei moduli indicati sopra, come JPresta Page Cache.

Limitare l’impego dei filtri nello store

Se lo store usa molti filtri, utilizzare un’alternativa come Ajax Filter di Presto Changeo.

Caricamento CSS

Caricare i CSS in modo asincrono, seguendo questa guida http://keithclark.co.uk/articles/loading-css-without-blocking-render/. Il modo migliore è usare i CSS inline per i contenuti “above the fold” e “async” per gli altri CSS, come consiglia anche Google: https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery. C’è un tool gratuito che permette di individuare quelli sono i CSS che vanno caricati subito: https://jonassebastianohlsson.com/criticalpathcssgenerator/

Disabilitare i moduli relativi alle statistiche

Le statistiche di PrestaShop tendono ad appesantire il database. Meglio affidarsi a quelle di Google Analytics, configurandolo in modo corretto per un e-commerce.

Non usare troppi file da fonti esterne (fonts, CSS/JS).

Non affidarsi troppo a risorse esterne, sia perché non si ha il pieno controllo di esse, sia perché PrestaShop non può “minimizzarle”.

Per richiamare i font in locale, invece che da server esterni, seguire questo tutorial: https://www.youtube.com/watch?v=GH7UwR8wFOw

Disinstallare moduli inutilizzati

Bè, si spiega da sé!

Ottimizzo, ottimizzo, ma il sito è sempre lento

Può darsi che sia il server a essere lento! Per verificarlo, andare su https://tools.pingdom.com/ inserire l’URL del proprio store e aspettare i risultati.

Se la riga gialla (Wait) sulla prima riga (o seconda se c’è un redirect, per esempio da http a https) è molto lunga, per esempio supera il secondo, allora c’è un problema di lentezza del server.

E tu?

E tu? Quale altro sistema utilizzi per migliorare la velocità del tuo sito costruito con PrestaShop?

Segnalalo nei commenti!

Riferimenti

Dorian Banutoiu, “Prestashop Speed Optimization – How to make it insanely fast!“, Canonicalized, 13 agosto 2018


Cody Arsenault, “8 Ways to Speed Up Prestashop“, Keycdn blog, 4 ottobre 2018

La guida ufficiale di PrestaShop “How to Optimize the performance of your PrestaShop

0 commenti

Lascia un Commento

Vuoi partecipare alla discussione?
Fornisci il tuo contributo!

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *