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
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
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
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à
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”
Lascia un commento