Il modulo mod_pagespeed, per web server Apache, è nato con l'obiettivo di migliorare le prestazioni dei siti web, rendendo automatico il processo di ottimizzazione di pagine e risorse. Codice HTML, JavaScript e CSS, così come immagini JPEG o PNG, vengono elaborati tramite particolari filtri che implementano alcune best practices note per il loro impatto sulla velocità di risposta delle pagine web.
Prima di analizzare il modulo e fornire esempi pratici di configurazione, chiariamo i principi a chi non abbia dimestichezza con l'argomento. Le discussioni e gli studi sul miglioramento delle prestazioni dei siti web hanno dato vita a raccolte di regole (best practices) che consentono di affrontare con metodo un eventuale processo di ottimizzazione. Tale operazione può risultare poco gravosa se applicata dall'inizio allo sviluppo di un nuovo sito. Più impegnativa, invece, nel caso di prodotti già esistenti che debbano essere perciò rielaborati. La novità introdotta da mod_pagespeed è che un sistema automatico possa sostituire in buona parte l'attività manuale, con risparmio di tempo e fatica.
Avevamo affrontato il discorso delle best practices in un precedente articolo che aveva proprio lo scopo di aprire la strada alle considerazioni riportate in queste pagine. In particolare ci eravamo riferiti alle Web Performance Best Practices di Google.
Non a caso mod_pagespeed si sviluppa all'interno del più ampio progetto Page Speed targato Google. I componenti della famiglia sono:
- L'estensione Page Speed
- Page Speed Online
- Il modulo per Apache mod_pagespeed
- Page Speed Service
Vediamo allora come installare e configurare questo modulo open source, prendendo come riferimento un server Linux con sistema operativo Fedora 15 a 64 bit e web server Apache 2.2.21.
Installazione
Innanzitutto va rilevato che il progetto supporta solamente Apache 2.2 e non precedenti versioni. I test vengono effettuati su due distribuzioni Linux: CentOS e Ubuntu. Questo ci porta ragionevolmente a credere che il tutto funzioni anche su altre distribuzioni derivate da Debian o RedHat. Il software è disponibile per sistemi i386 e x86-64, sia pacchettizzato che in forma di codice sorgente. Per l'installazione dai sorgenti, più laboriosa, vi rimando alla documentazione ufficiale. Di seguito seguiremo la comoda via dell'installazione da rpm.
La pagina di download si riferisce a tutti i componenti Page Speed, dobbiamo dunque scorrerla fino alla dicitura mod_pagespeed for Apache. Dall'elenco dei pacchetti .deb e .rpm preleviamo la versione adatta al sistema operativo in uso, nel nostro caso mod_pagespeed 64-bit .rpm (CentOS/Fedora). Non sorprendetevi se il nome del file scaricato, mod-pagespeed-beta_current_x86_64.rpm, riporta la parola "beta", il modulo è infatti ancora giovane per quanto sufficientemente stabile.
A questo punto assumiamo i privilegi di root, spostiamoci nella directory di lavoro in cui abbiamo salvato il file e procediamo all'installazione:
Verifichiamo subito gli effetti dell'operazione: innanzitutto in /usr/lib64/httpd/modules mod_pagespeed.so /etc/httpd/conf.d pagespeed.conf /var/www mod_pagespeed mod_pagespeedcache
Il modulo è già attivo e funzionante sarà necessario personalizzarlo per ottenere il massimo dalle sue potenzialità.
Configurazione
Come già accennato il centro di controllo risiede nel file /etc/httpd/conf.d/pagespeed.conf. La prima direttiva che incontriamo al suo interno consente di caricare il modulo dinamicamente:
subito dopo viene attivato mod_deflate
<IfModule !mod_deflate.c> LoadModule deflate_module /usr/lib64/httpd/modules/mod_deflate.so </IfModule>
Ricordo brevemente che mod_deflate (ex mod_gzip per Apache 1.3) serve a comprimere le informazioni fornite al browser riducendo le dimensioni dei dati scambiati. Per approfondimenti potete consultare l'articolo Risparmiare banda con il modulo deflate di apache
Finalmente all'interno del contenitore <IfModule pagespeed_module>[...]</IfModule>
pagespeed.conf
documentazione on line
Come già anticipato mod_pagespeed filtra i contenuti richiesti dal browser del visitatore. In tal modo essi arriveranno al destinatario ottimizzati secondo i criteri delle best practices. Alcuni filtri si limitano ad alterare il codice HTML, ad esempio eliminando gli spazi in eccesso. Altri modificano le risorse producendone una versione migliorata che sostituirà l'originale.
I filtri possono essere singolarmente abilitati o disabilitati, alcuni infatti sono attivi di default. In base all'azione svolta risultano raggruppati in categorie, che poi rispecchiano l'analoga suddivisione delle Web Performance Best Practices
- Ottimizzazione del sistema di caching
- Minimizzazione degli RTT (Round Trip Times)
- Minimizzazione dei dati in eccesso nelle richieste HTTP
- Minimizzazione delle dimensioni dell'informazione trasmessa
- Ottimizzazione del rendering del browser
ul li a {...}<img>
Dopo tante considerazioni teoriche passiamo ora ad una configurazione pratica. La vedremo nella prossima pagina che sarà pubblicata il prossimo lunedì.
Esempi di configurazione
Vediamo alcune direttive del modulo, iniziando con la sua attivazione o disattivazione (on/off):
Per migliorare la permanenza in cache delle risorse abilitiamo il seguente filtro:
ModPagespeedEnableFilters extend_cache
Le azioni svolte sono sostanzialmente due: innanzitutto una modifica degli header HTTP riscrittura degli URL
<img src="/ima/logo_sito.png" />
diviene:
<img src="ima/xlogo_sito.png.pagespeed.ic.uxlq61TFfz.png" width="173" height="97"/>
Il modulo utilizzerà il valore originariamente specificato con max-age
<img>
La funzione di estensione della cache è parte integrante anche di altri filtri che nella loro azione riscrivono gli URL delle risorse mediante hash.
Un esempio di direttiva utilizzata per ridurre il numero di richieste HTTP è:
ModPagespeedEnableFilters combine_css
Supponendo che nella nostra pagina vengano richiamati vari file CSS esterni:
<link href="/css/form.css" media="screen" rel="stylesheet" type="text/css" /> <link href="/css/admin.css" media="screen" rel="stylesheet" type="text/css" />
l'azione del filtro opererà questa trasformazione del codice:
<link href="/css/form.css+admin.css.pagespeed.cc.y_GFiCdG84.css" media="screen" rel="stylesheet" type="text/css"/>
cui corrisponderà la creazione di un unico file CSS che riassumerà il contenuto di tutti gli altri.
Abbiamo parlato di parallelizzazione al fine di ridurre il numero di round trip time. Ciò si può ottenere suddividendo il download tra più hostname, anche se in realtà si riferiscono al medesimo server:
ModPagespeedShardDomain www.miosito.it static1.miosito.it,static2.miosito.it
nell'agire sull'hostname www.miosito.it
<link rel="stylesheet" type="text/css" media="screen" href="http://static2.miosito.it/css/default.css,Mcf.tMJWVe8dnX.css.pagespeed.ce.tMJWVe8dnX.css"/> <img src="http://static1.miosito.it/images/xworld_map_white_light.png.pagespeed.ic.ObCptmGWmk.png" alt="world" width="157" height="91"/>
Il numero di host specificabili, che comunque devono essere presenti e raggiungibili, è teoricamente infinito, ma allo stato attuale conviene mantenersi tra i due e i quattro al massimo.
Il filtro successivo ha lo scopo di ottimizzare le immagini con varie azioni:
ModPagespeedEnableFilters rewrite_images
Se abbiamo abilitato rewrite_css
<img>
background-image
background
list-style-image
list-style
ModPagespeedEnableFilters insert_image_dimensions,inline_images,recompress_images,resize_images
Il primo, insert_image_dimensions
width=""
height=""
inline_images
<img src="data:image/png;base64,iVBORw0KGgoAAAA........BJRU5ErkJggg==" alt="mia immagine">
Il filtro recompress_images
elimina i metadati inutili
resize_images
width=""
height=""
libjpeg
libpng
Conclusioni
In queste pagine penso di aver dato un "assaggio" delle potenzialità di mod_pagespeed, che possono essere approfondite sul sito del progetto. Pur automatizzando il processo di ottimizzazione il modulo richiede un minimo di cognizioni sugli argomenti trattati, a meno di non (sotto)utilizzarlo con le impostazioni di default. Anche in questo caso ci possono essere però delle sorprese, perché ciascun filtro ha associato un rischio basso, moderato o alto. Immaginate di utilizzare un codice JavaScript che elabori un'immagine sulla base del nome, la riscrittura degli URL pur mantenendo inalterato il file ne modificherà il nome, generando un errore di esecuzione. Il mio consiglio è dedicare un po' di applicazione allo studio delle basi teoriche dell'ottimizzazione per poi spingere più a fondo l'acceleratore nell'applicazione dei filtri.
