Menu

Guida a prova di stupido per migliorare le prestazioni di un sito Joomla 2.5: se ci sono riuscito io in una sola giornata...

Guida a prova di stupido per migliorare le prestazioni di un sito Joomla 2.5: se ci sono riuscito io in una sola giornata...

SEO Manager, Web Master: vi Odio! Anzi, no: vi Amo! Per la nuova versione di Penguin, contenuti e prestazioni aumentano di valore per i risultati nei ranking delle ricerche, così...

Partiamo dalla fine: con l'uscita della nuova versione di Penguin, proseguendo lungo il percorso ormai tracciato da tempo, Google ha accentuato l'importanza di determinati aspetti dei siti - meglio, delle singole pagine pubblicate sui siti - a scapito di altre. Senza voler entrare troppo nel merito dei cambiamenti, mi limito a sottolineare che le prestazioni delle pagine ed il loro contenuto continuano ad aumentare di peso, quindi sono più rilevanti per apparire nelle prime posizioni delle ricerche, mentre la quantità dei Link scende di livello, a vantaggio della loro qualità.

In tale contesto, ammesso di aver dei contenuti di valore da proporre agli internauti, il punto di partenza sul quale agire sta nel verificare le prestazioni del proprio sito e, nel caso, modificarne gli elementi che lo richiedono. Così, senza avere troppe conoscenze di base, ho iniziato ad esaminare il problema in relazione al nostro sito in Joomla, navigando sul Web. Da qui, la reazione istintiva: SEO Manager, Web Master, vi Odio! Anzi, no, vi Amo!

SEO Manager, Web Master, vi Odio!

Perché vi odio? Per il semplice fatto che quasi nessuno fornisce un quadro organico del discorso, spiegando in modo più o meno esplicito come e dove intervenire. Quasi cercando di risparmiare sulle parole, si trovano frasi ed indicazioni ermetiche - spesso proposte per sigle o abbreviazioni incomprensibili - come se si stesse parlando un gergo di casta dal quale escludere tutti i possibili lettori. Una chiave moderna del dott. Azzeccagarbugli di Manzoniana memoria.

SEO Manager, Web Master, vi Amo!

Perché vi odio? E' presto detto: riuscendo a decifrare i vostri criptici messaggi e dando una visione generale a tutte le informazioni pubblicate, si riesce a dipingere un quadro organico delle azioni da svolgere, dimostrando quindi che le competenze ci sono tutte, sebbene di difficile interpretazione.

Così, mi sono proposto di condividere la mia esperienza - di nofita nell'argomento - creando una specie di guida rapida d'uso, assemblando note, suggerimenti e indicazioni provenienti da varie fonti, alla portata di tutti.

Prestazioni del sito: da 38 a 88 in un giorno!

Dico subito che partendo pressoché da zero, in una giornata sono riuscito a mettere insieme la serie di passi che ha quasi triplicato le prestazioni del nostro sito basato su Joomla 2.5, Apache e MySQL: http://www.itware.com.

Come sempre, il punto di partenza di qualsiasi azione si basa sullo stabilire da che livello ci si muove e quali traguardi ci si dà. Per fotografare la situazione di base, si possono usare due servizi OnLine, entrambi gratuiti, che oltre a dare un punteggio alle prestazioni del sito, forniscono le indicazioni da seguire per migliorarne le prestazioni:

  1. PageSpeed Insights: questo è il servizio di Google, disponibile in Google Developer tra i Web Master Tool. Il suo uso è gratuito ed immediato, dopo essersi registrati con un Account su Gmail, anch'esso gratuito. Il servizio offre un campo all'interno del quale inserire la pagina che si intende valutare e, dopo aver pressato Enter, fornisce un punteggio complessivo, che va da 0 a 100, con il dettaglio di tutte le azioni da svolgere per migliorare il proprio sito, classificate per area e valutate per impatto (H = Alto, Hight, M = Medio, L = Low, basso). Nel nostro caso, con ITware siamo partiti dal punteggio molto basso di 38. Attenzione: volendo ripetere il test, dopo aver effettuato alcune delle migliorie richieste, bisogna pulire la Cache del Browser, altrimenti vengono riproposti i dati precedenti. Diciamo subito, che alla fine della giornata siamo riusciti a migliorare la nostra posizione sino al punteggio di 88. Non male, per un giorno di lavoro, no? Val sicuramente la pena di farlo!Page Speed Insight: i risultati per http://www.itware.com al termine della giornata
  2. YSlow: è un Plug-in, disponibile sia per Chrome che per Mozilla Firefox, creato da Yahoo!, basato su punteggi che vanno da A ad F, usando però gli stessi criteri del precedente servizio di Google, ed il dettaglio delle azioni da svolgere per migliorare il proprio sito, classificate per area e valutate per punteggio (F = pessimo, A = eccellenza).

Bene, ma ora che "il dado è tratto", da dove partire e come fare?

Gli interventi preliminari per migliorare le prestazioni del sito

Come detto, entrambi i sistemi, al termine della loro diagnosi propongono un menù di interventi da effettuare, esplicitato per priorità, per cui non resta che rimboccarsi le maniche e partire. Giusto? No: prima di tutto, occorre verificare lo stato del Server, in termini di opzioni Apache, PHP e per quanto riguarda il supporto di alcune funzioni di compressione indispensabili per il sistema.

Andiamo con ordine. Il primo passo consiste nel "fotografare" lo stato di Apache e PHP e verificare che supportino la compressione GZip e Zlib.

Per chi volesse conoscere i dettagli teorici e gli assunti tecnologici, metto a disposizione i Link dai quali ho tratto le indicazioni da seguire, mentre sul piano operativo basta seguire i passi che indico.

Lo stato del PHP lo si verifica rapidamente, creando un File phpinfo.php, da caricare nella Root del proprio sistema via FTP. Una volta compilato il File basterà accedervi come una qualsiasi pagina Web ed in risposta si avranno tutte le informazioni volute. Nel nostro caso, questo vuol dire mettere nell'indirizzo del Browser: www.itware.com/phpinfo.php

Già ma cosa mettere nel File? Seguendo le indicazioni di MediaTemple.net, per avere il quadro completo della situazione (la versione di PHP in uso, le estensioni attive, tutte le informazoni sul Server, sugli Header HTTP...) usando un qualsiasi Editor di testo ASCII puro, va bene anche il Blocco Note di Windows, si dovranno inserire le seguenti istruzioni:

<?php

// Show all information, defaults to INFO_ALL
phpinfo();

?>

In realtà le informazioni che servono sono relative solo al supporto di Zlib, che troviamo praticamente in fondo alla lista.

Nel caso Zlib non fosse supportato, occorre modificare il File php.ini, mettendone in "On" il relativo campo, così come indicato nel manuale PHP. In particolare, la voce ZLib Support deve risultare "enabled". Se non si ha acceso al File php.ini, bisognerà chiedere al proprio servizo di Web Hosting di farlo.

Il supporto di Zlib, così come quello del compressore Gzip sono due tasselli fondamentali per il miglioramento delle prestazioni del sito - a scapito del Server, ma a vantaggio dei trasferimenti di dati- per cui non sono attivabili se mancano i prerequisiti di sistema. Per cui, prima di tutto verificarli!

Per rendere ancora più semplice la verifica, sul sito html.it suggeriscono di creare un File ancora più mirato, che noi abbiamo chiamato phpinfozlib.php, con il seguente codice:

<?php

echo (in_array('zlib', get_loaded_extensions())) ? 'yes' : 'no';

?>

Nel File configuration.php, controllare che sia attivata la compressione gzip. Per fare questo, verificare lo stato dell'istruzione public $gzip.

Se = '0', $gzip è disattivata. Se = "1" la funzione è attiva. Quindi, se non lo fosse, portare subito il valore a "1".

In ogni caso, è possibile controllare il supporto alle funzioni di compressione con il servizio:
http://www.whatsmyip.org/http-compression-test/

Gzip. è un meccanismo di compressione analogo a ZIP, che opera in modo trasparente per l'utente e con elevata efficacia (riducendo le dimensioni anche di 10 volte rispetto agli originali di partenza). Questo crea un sovraccarico sul Server, che dovrà di volta in volta comprimere e decomprimere il File, ma scaricando le linee, alla fine fornisce un bilancio positivo in termini di tempi di risposta. Lavora sui File di tipo HTML, CSS, JS e tutti quelli testuali, ma nonsulle immagini per le quali si usano altri strumenti.

Dalle verifche dei prerequisiti, alle azioni operative per l'effettivo miglioramento delle prestazioni del sito

Piccola premessa: da questo punto in poi, occorre disattivare tutte le cache di Joomla - quella di sistema ed il plug-in System - Cache - e, possibilmente anche quella del proprio Browser, o almeno pulirla prima di verificare gli effetti delle azioni svolte. Il rischio è di continuare a ricevere risultati inspiegabili, facendo e rifacendo delle operazioni che invece andavano benissimo...

Attivare gzip dal pannello di configurazione del server di Joomla

Dunque, verificato che gzip è supportato, come prima operazione non resta che attivarlo, intervenendo sul pannello di controllo della configurazione generale del Server. L'operazione è davvero banale e senza rischi, mentre fornisce immediatamente dei risultati di tutto rispetto.

In alternativa, o anche in aggiunta, si può attivare la compressione gzip dei dati inserendo poche linee di condice nel modulo .htaccess.

Qui il suggerimento viene da Brad Markle che in un esauriente articolo intitolato An introduction to gzip / mod_deflate, spiega come funziona il modulo mod_deflate e come attivarne le funzioni a favore del proprio sito. Le istruzioni da inserire nel File .htaccess sono pertanto le seguenti:

<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css application/x-javascript application/javascript
</IfModule>

Nuovamente, per verificare il funzionamento di gzip si può ritornare al servizio Online:

http://www.whatsmyip.org/http-compression-test/

dove basta inserire l'indirizzo della propria pagina Web per averne immediata risposta.

Prima di esser compressi, i File HTML, JS o CSS possono anche esser minimizzati, il che vuol dire resi "illegibili" all'occhio umano togliendone tutti gli spazi, gli "a capo" e le informazioni non eseguibili, ma molto più snelli per il trasferimento e l'esecuzione. Operazione che è impensabile da farsi a mano, ma per la quale si possono usare vari plug-in di buona qualità disponibili gratuitamente per Joomla. Tra i nomi più gettonati JS CSS Controljbetolo JCH Optimize. Noi abbiamo installato quest'ultimo che problmeni non ci ha dato, sebbene non siamo riusciti a fare tutto ciò che promette...

Da qui in poi, i discorsi si fanno più complicati, ma se ben organizzati e affrontati si può procedere in modo molto spedito.

Comprimere le immagini

Visto che siamo in tema di compressione, passiamo dai File alle immagini, spesso di grandi dimensioni e responsabili di forti rallentamenti nella trasmissione dei dati. Anche qui, però, prima di procedere con la compressione è importante intervenire con un'azione preliminare. 

Tra le "raccomandazioni" di Yahoo e di Google, spicca l'importanza di inserire nel sistema le immagini già nelle dimensioni fissate per gli spazi che le dovranno accogliere. Quindi, si tratta prima di ridimensionare le immagini, poi di comprimerle. Scalare le immagini alla dimensione giusta consente di realizzare due risparmi: le dimensioni dei File delle immagini saranno inferiori - visto che di solito si tende ad esagerare, mai a ridurre - per cui si risparmierà nella loro trasmissione, mentre si eviterà al Browser di doverle modificare in funzione degli spazi definiti. Per avere l'esatta dimensione, PageSpeed Insight, così come YSlow, forniscono l'elenco completo delle immagini da rivedere, con le misure esatte alle quali riportarli. Operazione che può esser fatta con Photoshop o con qualsiasi altro strumento di gestione delle immagini.

Una volta impostate tutte le immagini nelle dimesioni corrette, prima di caricarle sul Server, si potrà procedere nella loro compressione. Un sistema facile ed efficace è usare ancora una volta Photoshop, ma con una rapida verifica ci si potrà rendere conto che si può fare di meglio, o molto di meglio! 

La compressione delle immagini con PunyPNG

Al proposito, si può ricorrere al servizio OnLine PunyPNG che è disponibile gratuitamente per una compressione classica, a pagamento per compressioni di tipo Lossy. Il che vuol dire che "quando va male" i File già compressi da Photoshop vengono ulteriormente ridotti di qualche punto percentuale, mentre in molti casi si ottengono risultati ben migliori.

In versione Lossy, invece, sebbene non sia sempre efficace, quando lo è i risultati sono a dir poco sorprendenti.

Nella compressione "lossy" si ha una perdita di parte dei dati che compongono il File, ma normalmente questo viene fatto senza che l'occhio umano riesca a percepire le differenze tra l'immagine originale e quella compressa.

Comprimere Mootools. Anzi, meglio, non usare il proprio

 MooTools, acronimo di My Object-Oriented Tools, Ã¨ il Framework JavaScript standard di Joomla, che viene installato assieme al sistema, mettendo a disposizione varie funzioni già pronte all'uso. E' un componente fondamentale, che da un lato si può comprimere, dall'altro si può sostituire con suoi gemelli residenti altrove, per esempio direttamente dai Server di Google. Per farlo, così comee ben descritto da Robert Went nel suo Blog, occorre andare nella libreria del proprio Template Joomla, individuare i due File index.php e component.php e cercare l'istruzione <jdoc:include type="head" />. Attenzione, nel nostro caso, ad esempio, il Template che usiamo ha la stringa da cercare nel File component.php, mentre in altri casi può essere nell'altro.

Proprio appena sopra questa istruzione si dovrà inserire il codice seguente:

<?php $document =&amp;JFactory::getDocument();unset($document->_scripts[$this->baseurl . '/media/system/js/mootools.js']);?>

<script type="text/javascript" src="/<a href="/http://www.google.com/jsapi"></script>">http://www.google.com/jsapi"></script></a>
<script type="text/javascript">google.load("mootools", "1.4.5");</script>

avendo l'accortezza di cambiare la versione di mootools mano a mano che ne escono di nuove .

In alternativa, si può utilizzare quello pubblicato su SNIPT che si aggiorna automaticamente e che sostituisce il Mootools di Joomla! con una copia compressa delle Google AJAX Libraries API:

<?php
// Place this entire snippet into your template's index.php, component.php
// or other subtemplate php file, inside the <head>...</head> tags,
// RIGHT BEFORE the <jdoc:include type="head" /> line.
// Joomla!'s Mootools copy will be overriden with the latest 1.2 release
// from Google's CDN.
// Make sure the "Mootools Upgrade" system plugin is also enabled.

$document = JFactory::getDocument();
unset($document->_scripts[$this->baseurl.'/media/system/js/mootools.js']);
unset($document->_scripts[$this->baseurl.'/plugins/system/mtupgrade/mootools.js']);
?>

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/mootools/1.2/mootools-yui-compressed.js"></script>

Il risultato è che le dimensioni della libreria si riducono a un terzo o meno e i tempi di risposta migliorano ulteriormente.

Direi che il più è fatto, anche se si può lavorare ancora di fino, molto di fino!

Limitare il più possibile le chiamate HTML

Per chiarire ciò che segue, cito quanto scritto da Federico Capoano in un suo pezzo del 2009 intitolato "Migliorare la velocità di caricamento di Joomla 1.5". Pur riferendosi ad una vecchia versione del sistema, i concetti rimangono inalterati, mentre la loro declinazione in attività può essere aggiornata e facilitata. La dinamica del caricamento di un sito Joomla si basa sull'esecuzione di varie Query complesse al database in corrispondenza del caricamento di ogni pagina, questo significa che quante più sono le estensioni attive tanto più il numero delle query aumenterà. Ad esempio, il codice php di Joomla fa al database le seguenti domande:

  • quali sono i plugin attivi per questa pagina? forniscimi le informazioni dei plugin attivi.
  • qual'è il contenuto di questa pagina? nel caso il contenuto fosse quello di un componente, forniscimi le informazioni sul componente.
  • quali sono i moduli attivi per questa pagina? forniscimi le informazioni di ogni modulo attivo.
  • qual è il template attivo per questa pagina? 
  • l'utente è loggato? Se sì, forniscimi il suo username

 MySQL elabora le richieste e restituisce i dati. Joomla elabora i dati forniti da MySQL e restituisce i dati all'utente sotto forma di pagina HTML. L'utente scarica la pagina HTML, il css, le immagini e le eventuali istruzioni javascript.

Operazione che si ripete per il numero di utenti e le pagine che vengono caricate, aggravando i tempi di risposta ed il carico di lavoro sul Server.

Un primo obiettivo è quindi ridurre le chiamate HTTP, un secondo ridurre le Query e semplificarle. Un modo semplice per ottenere questo è, ad esempio, ridurre al minimo il numero di componenti aggiuntivi installati sul sito, le chiamate a componenti vuoti, a File inesistenti. Quindi, bisogna "tenere sempre pulito" l'ambiente. Un secondo meccanismo è utilizzare le Cache - a livello di Server e di Browser - con tutte le dovute cautele, argomento sul quale torneremo alla fine di questo lungo scritto.

Un'altra tecnica, evidenziata sia da Page Speed Insights che da Yslow, consiste nell'aggregare tra loro i File CSS e quelli JS, con il risultato che le chiamate HTTP si riducono di numero. Questa funzione può esser brillantemente svolta dagli stessi plug-in citati per la minimizzazione e compressione dei File JS CSS Controljbetolo JCH Optimize.

Combinare immagini in Sprite CSS

Rimanendo in quest'ambito e con la stessa logica di "aggregazione", si può intervenire sulle immagini che vengono richiamate più di frequente, utilizzando la tecnica detta "Sprite".

Di fatto, si tratta di "impilare" in un un'unica immagine più immagini, separate da un byte ed etichettare in modo che risultino individuabili. Le pagine che le chiamano continueranno a comportarsi in precedenza, ma invece di richiamare ogni volta un'immagine diversa, si farà riferimento sempre ad una stessa "omnicomprensiva".

Il primo passo consiste pertanto nel creare, usando il solito Photoshop o un altro strumento analogo, un'immagine larga quanto la più larga della lista (in pixel) e alta quanto la somma delle varie immagini, più 1 pixel ad immagine. Dopo di che, dovremo creare un'immagine gif trasparente di 1 pixel per 1 pixel che ci servirà per indirizzarsi all'immagine voluta all'interno del nostro sprite.

A questo punto, dovremo creare una classe ".sprite" da aggiungere ai CSS in uso nel sistema con la quale selezionare di volta in volta le immagini da utilizzare.

Si tratta di un intervento complesso, che però viene giudicato di alta priorità sia da Google che da Yahoo. In parte, il problema può esser risolto - e semplificato - da plug-in JCH Optimize, già visto per la compressione dei File CSS, che però va "maneggiato con cura". Prima di tutto, infatti, bisogna aver installato su PHP le estesioni EXIF e GD o IMAGICK, cosa verificabile con il solito phpinfo().

In secondo luogo, le immagini di sfondo devono essere perfettamente calate nei rispettivi elementi HTML, ovvero che le dimensioni altezza e larghezza devono coincidere con gli elementi che le contengono. Il rischio è che su di una stessa pagina si sovrappongano immagini diverse, con risultati totalmente negativi. Questo vuol ad esempio dire eliminare le piccole immagini che sfturrano l'effetto "repeat" per riempire gli spazi dove vengono pubblicate.

Tutte le altre indicazioni su come procedere con le opzioni ed i test sono Qui.

Ultime rifiniture: spostare Javascript e CSS, inserire le date di scadenza dei documenti

Nel suo articolo, Capoanno fornisce una serie di indizazioni su come scrivere i Template, il codice Javascript, i CSS, cose che non prendiamo neppure in considerazione, ma alle quali rimandiamo gli sviluppatori che si cimentano anche con la stesura delle parti più interne dei siti in Joomla.

In realtà, chiudiamo la rassegna delle operazioni svilte con tre interventi, due a carico del solito plugin , l'altro a livello di File .htaccess con i quali migliorare ulteriormente le prestazioni del sito.

I primi due consistono nel posizionare gli StyleSheets (CSS) in cima alle pagine e gli Script in fondo, così da rendere più rapida la comparsa delle pagine agli occhi dell'utente. Operazione che può esser svolta in automatico dal nostro JCH Optimize che dopo averli minimizzati e compressi è in grado di riposizionarli all'interno delle pagine HTLM.

L'ultimo richiede di metter di nuovo mano al File .htaccess per fissare le date di scadenza dei File e per disttivare gli ETag, altri due fattori che influenzano le prestazioni dei sistemi.

Sia YSlow che Pagespeed richiedono che gli Header dei File indichino la propria data di scadenza. Valore che può esser posto quanto si vuole in avanti nel tempo, ma che è meglio specificare. Ora, mentre nei File di contenuti la data di scadenza è facilmente inseribile, per tutto ciò che riguarda CSS, JS e File di sistema la cosa non risulta possibile. Così come suggerito dagli autori del Plug In Expires Headers l problema è tuttavia risolvibile molto più semplicemente di quanto si creda. Basta inserire nel file .htaccess le seguenti istruzioni ed il gioco è fatto:

<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">

Header set Expires "Wed, 15 Apr 2020 20:00:00 GMT"
Header set Cache-Control "public"
</FilesMatch>

Gli ETags vengono impiegati per controllare se i File nella Cache del Browser coincidono con quelli sul Server. Di fatto, però, presentano alcuni problemi di funzionamento, per cui in generale è meglio disattivarne il funzionamento. 

# Disattivare ETags

Header unset ETag
FileETag none

Infine, le Cache

Dopo ave fatto tutte le modifiche, ma proprio tutte, comprese alcune di quelle qui non citate in quanto poco influenti o molto complesse da realizzare, si può intervenire sui sistemi di Cache che di fatto sono due:

1. A livello di sistema, attivabile attraverso il pannello di controllo "Configurazione Globale".

2. A livello di Plg-In da attivarsi tramite il servizio di Gestione Plug-In.

Nel primo occorre fissare la durata della Cache, che dovrà esser proporzionale al ritmo con il quale il sito viene aggiornato: molto breve per aggiornamenti frequenti, lunga anche molto - l'unità di misura indicata sono i minuti - in caso di aggiornamenti più diradati nel tempo. C'è poi la possibilità di distinguere tra Cache Conservativa e Progressiva. La decisione fa presa in funzione del numero di accessi, per cui rimandiamo al manuale Joomla per fare la propria scelta. Noi l'abbiamo fissata su Progressiva ed i risultati sono certamente positivi.

Nel caso del Plugin System - Cache il discorso è più delicato: dopo varie prove, noi abbiamo deciso di disabilitarla visto che ci ha creato più problemi che miglioramenti delle prestazioni. Ad esempio, nel passaggio dalla versione Mobile a quella DeskTop gestita automaticamente dal Template, dopo aver consultato il sito tramite uno SmartPhone l'unico modo per ripristinare la visione in formato DeskTop è stato cancellarla. Ma forse il problema è stato nostro e non del sistema.

In conclusione, ho impiegato un'intera giornata, ma i risultati si sono visti. Per altro, ho impiegato un'intera giornata anche per scrivere questo pezzo, per cui spero la cosa risulti utile e gradita.

Buon lavoro e grazie a tutti quelli che hanno contribuito a fornirmi le informazioni che ho usato per migliorare le prestazioni del nostro sito in Joomla.

 


Ultima modifica ilSabato, 06 Luglio 2013 10:09

Aggiungi commento


Codice di sicurezza
Aggiorna

Torna in alto