
guide
Tutti i linguaggi per diventare uno sviluppatore di app per Android.
Come utilizzare il modulo open source mod_pagespeed per Apache 2.2 e velocizzare la visualizzazione dei propri siti Web. Istruzioni pratiche ed esempi di configurazione
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:
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.
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:
$ rpm -ivh mod-pagespeed-beta_current_x86_64.rpm
Verifichiamo subito gli effetti dell’operazione: innanzitutto in /usr/lib64/httpd/modules noteremo, accanto agli altri moduli, anche mod_pagespeed.so. Nella directory /etc/httpd/conf.d troveremo il file pagespeed.conf su cui agire per modificare i parametri di configurazione predefiniti. Infine in /var/www balza all’occhio la creazione di due nuove directory funzionali al modulo: mod_pagespeed e mod_pagespeedcache.
Il modulo è già attivo e funzionante sarà necessario personalizzarlo per ottenere il massimo dalle sue potenzialità.
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:
LoadModule pagespeed_module /usr/lib64/httpd/modules/mod_pagespeed.so
subito dopo viene attivato mod_deflate, se non è già all’opera:
<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>
troviamo le direttive che consentono di personalizzare il funzionamento del modulo. Più che analizzare le configurazioni ad una ad una, è meglio inquadrarle logicamente ed analizzarne alcune a titolo esemplificativo. Del resto il file pagespeed.conf risulta abbondantemente commentato e la documentazione on line, in stile Google, è completa e dettagliata.
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 di Google:
ul li a {...}
risulta molto inefficiente. Primo perché un tag, elemento molto generico, viene usato come selettore. Secondo perché il navigatore dovrà risalire l’albero per valutare ogni progenitore. Molto meglio in questa particolare ottica, utilizzare una classe o un id. L’azione dei filtri di questa categoria tende a semplificare il lavoro del navigatore per esempio con l’attribuzione automatica delle dimensioni ai tag <img>
.Dopo tante considerazioni teoriche passiamo ora ad una configurazione pratica. La vedremo nella prossima pagina che sarà pubblicata il prossimo lunedì.
Vediamo alcune direttive del modulo, iniziando con la sua attivazione o disattivazione (on
/off
):
ModPagespeed on
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 con un max-age=31536000 che porta ad un anno il tempo di vita della copia locale. In secondo luogo viene operata una riscrittura degli URL che referenziano le risorse cui viene attribuito un codice univoco mediante una funzione di hash. Ad esempio un’immagine che inizialmente nel codice HTML era richiamata così:
<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
per controllare periodicamente la risorsa e verificare se sia stata modificata. In tal caso le attribuirà un nuovo codice hash modificandone il nome. Per il browser del navigatore risulterà diversa e quindi la preleverà nuovamente dal server. Nell’esempio si può notare anche l’attribuzione delle dimensioni al tag <img>
: questo filtro è abilitato di default.
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 mod_pagespeed suddividerà gli URL su cui effettua riscritture tra static1.miosito.it e static2.miosito.it. Ad esempio il risultato potrà essere:
<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
oltre ad agire sui tag <img>
andrà ad intervenire sulle proprietà CSS background-image
, background
, list-style-image
e list-style
. In realtà tale direttiva è una scorciatoia per abilitare più filtri contemporaneamente:
ModPagespeedEnableFilters insert_image_dimensions,inline_images,recompress_images,resize_images
Il primo, insert_image_dimensions
, inserisce gli attributi width=""
and height=""
, se mancanti, con i valori corrispondenti all’immagine. Il secondo, inline_images
, sostituisce i riferimenti a piccole immagini con la codifica inline in base 64, eliminando la necessità di una connessione HTTP per scaricarle:
<img src="data:image/png;base64,iVBORw0KGgoAAAA........BJRU5ErkJggg==" alt="mia immagine">
Il filtro recompress_images
, ricomprime le immagini ed elimina i metadati inutili, la sostituzione dell’originale viene fatta solo se il risultato è migliorativo. Inoltre sostituisce i formati gif con png. Da ultimo resize_images
riduce le immagini le cui dimensioni effettive siano maggiori di quelle richiamate con gli attributi width=""
e height=""
. Anche in questo caso la sostituzione avviene solo se il file risulta alleggerito. Entrambi i filtri ricorrono alle librerie libjpeg e libpng.
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.
Se vuoi aggiornamenti su Mod_pagespeed: modulo Apache per velocizzare i siti inserisci la tua email nel box qui sotto:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
La tua iscrizione è andata a buon fine. Se vuoi ricevere informazioni personalizzate compila anche i seguenti campi opzionali:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
Alessandro Manfredi – FileRock
Tutti i linguaggi per diventare uno sviluppatore di app per Android.
Come creare applicazioni per il Web con PHP e MySQL per il DBMS.
Tutte le principali tecnologie per diventare uno sviluppatore mobile per iOS.
I fondamentali per lo sviluppo di applicazioni multi piattaforma con Java.
Diventare degli esperti in tema di sicurezza delle applicazioni Java.
Usare Raspberry Pi e Arduino per avvicinarsi al mondo dei Maker e dell’IoT.
Le principali guide di HTML.it per diventare un esperto dei database NoSQL.
Ecco come i professionisti creano applicazioni per il Cloud con PHP.
Lo sviluppo professionale di applicazioni in PHP alla portata di tutti.
Come sviluppare applicazioni Web dinamiche con PHP e JavaScript.
Fare gli e-commerce developer con Magento, Prestashop e WooCommerce.
Realizzare applicazioni per il Web utilizzando i framework PHP.
Creare applicazioni PHP e gestire l’ambiente di sviluppo come un pro.
Percorso base per avvicinarsi al web design con un occhio al mobile.
Realizzare siti Web e Web application con WordPress a livello professionale.
Sviluppare App HTML5 ibride per iOS e Andoid senza dover installare e configurare i relativi SDK e testare tutto direttamente sul telefono, grazie alla compilazione su cloud
Il monitoring dei nostri server web può essere un task arduo. Vediamo come alleggerirci il compito grazie a Logstalgia, che simula una partita a Pong.
Apache Ant è uno degli strumenti di build più diffusi: permette di definire diverse operazioni (task) per la gestione del […]
Apache è uno dei principali web server disponibili sul mercato, usati sia in contesti professionali che amatoriali. Questa guida offre una panoramica completa all’uso di Apache: rivolta ad utenti e professionisti, è corredata di esempi pratici e spiegazioni per apprendere come configurare e gestire i parametri di questo famoso web server.