In questo articolo non verranno descritti dei metodi per la riduzione delle richieste HTTP ma parlerò delle modifiche e degli strumenti che ti permetteranno di ottimizzare i componenti della pagina per velocizzarne le relative richieste HTTP.

Ottimizzare le immagini

Anche se l’ottimizzazione non riduce le richieste http, è comunque importante per abbassare i tempi di caricamento delle pagine.

Ottimizzare un’immagine non è immediato; spesso sono necessarie molte prove e test per individuare il giusto bilanciamento fra qualità e dimensione del file.

Generalmente la compressione di un immagine è un’operazione da eseguire manualmente prima di caricare l’immagine nel proprio sito. Per fare ciò esistono numerosi script e tool gratuiti. Eccone alcuni.

Compressione di file CSS e Javascript

Questa pratica (in inglese chiamata “minification”) consiste nel rimuovere dal codice tutti i caratteri non necessari in modo da ridurre la dimensione del file. Tecnicamente avviene quanto segue:

• vengono ristretti i nomi di variabili
• caratteri di spaziatura come tab, a capo e spazio vengono eliminati (dove possibile)
• vengono cancellati tutti i commenti

ATTENZIONE. Dopo la compressione il funzionamento degli script e i nomi delle funzioni rimangono invariati, quindi non è necessario modificare i file di template. In altre parole, i nomi delle variabili che vengono modificati sono i parametri locali delle funzioni, che non influenzano la modalità di chiamata delle funzioni.

Offuscare il codice Javascript

Offuscare il codice (in inglese “obfuscate”, “obfuscation”) significa comprimerlo e trasformarlo in modo che risulti illeggibile (per i programmatori) per evitare che venga effettuato il cosiddetto reverse engineering, il procedimento attraverso cui è possibile leggere, capire ed utilizzare il codice di uno script.

PRO: si raggiunge un ottimo livello di compressione, riducendo notevolmente la dimensione dello script.

CONTRO: è un procedimento molto complesso attraverso cui si rischia di generare bug e malfunzionamenti; pertanto si consiglia di limitarsi esclusivamente a comprimere il codice anziché offuscarlo.

Servizi web, librerie, software

Ecco un po’ di strumenti e servizi web per la compressione e l’offuscamento di file Javascript e CSS. Inizialmente trovi quelli riguardanti Javascript; in basso potrai vedere tutti quelli per la compressione di CSS.

YUI Compressor

YUI Compressor è la più famosa libreria (open source) per la compressione di file CSS e Javascript. La compressione Javascript elimina commenti, caratteri di spaziatura e accorcia i nomi delle variabili. La compressione CSS utilizza un compressore basato su espressioni regolari.

JSMin

JSMin è un filtro che rimuove commenti e caratteri di spaziatura dai file Javascript. Generalmente la dimensione del file viene dimezzata. Questa libreria incoraggia i programmatori a esprimersi liberamente evitando che si preoccupino di risparmiare spazio. In fondo alla pagina puoi trovare i link per scaricare l’eseguibile MS-DOS.exe oppure i codici sorgenti in C, C#, Java, JavaScript, Perl, PHP, Python, OCAML, Ruby.

DojoToolkit ShrinkSafe

Dojo, il famoso toolkit javascript, utilizza uno strumento per ridurre la dimensione, e quindi il tempo di caricamento, dei file Javascript. La particolarità sta nel fatto che invece di ricorrere alle solite espressioni regolari, Dojo Compressor è basato su Rhino, un javascript engine del progetto Mozilla. Quindi, poiché legge il flusso effettivo del codice javascript, può avere una visione migliore del contesto in cui una variabile viene letta e/o scritta, rispetto alle espressioni regolari.

Packer

Semplice servizio web per la compressione e l’offuscamento di codice Javascript. La libreria è disponibile anche per PHP e .NET. Download: http://dean.edwards.name/download/#packer.

JavaScript Obfuscator and Minifier

Librerie PHP per l’esecuzione da riga di comando. Richiedono la versione 5.2 (o superiore) di PHP CLI binary. Windows non è supportato e, a detta dello sviluppatore, non lo sarà mai.

jsobf: compressa e offusca codice Javascript.

jsfmt: effettua il processo inverso su un codice che ha subito compressione e offuscamento.

Download: http://web.2point1.com/2008/09/07/jsfmt-and-jsobf-available-for-download/.

Demo: http://timwhitlock.info/plug/examples/JavaScript/j_obfuscate.php.

SmartOptimizer

SmartOptimizer (precedentemente chiamata JSmart) è una libreria PHP che si occupa di comprimere, offuscare, memorizzare in cache, fondere più file o stampare gli script direttamente nella pagina.

pack:tag

Libreria JSP che compressa e combina risorse (come Javascript e CSS) e li memorizza nella cache del browser o in un file generato dinamicamente. Questo script si può inserire facilmente all’interno delle pagine e lavora in maniera trasparente sia all’utente sia allo sviluppatore.

ObfuscateJS

Progetto Java per la compressione e l’offuscamento di codice javascript. Si occupa di rimuovere caratteri di spaziatura e commenti, e di accorciare i nomi delle variabili locali.

JsCompress

Servizio web per la compressione di codice javascript. Si può scegliere di eseguire la compressione con JsMin o con Packer. Molto interessante.

Javascript Minifier

Servizio web (basato su JsMin) per la compressione di codice javascript. Puoi decidere se effettuare direttamente il download oppure visualizzare il risultato in una textarea.

Free Javascript Obfuscator

Servizio web che si occupa di comprimere e offuscare codice javascript. Offrendo diverse opzioni ti lascia libero di decidere completamente l’aspetto finale del codice.

Online Javascript Obfuscator

Servizio web per la compressione e l’offuscamento di codice javascript.

PHP CSS Compressor

In questo articolo vengono fornite alcune righe di codice PHP da inserire direttamente nei file CSS. Questo codice provvede automaticamente alla compressione del contenuto del file CSS. In fondo all’articolo vengono descritte le modifiche da apportare al file .htaccess in modo che il file .css venga elaborato come file .php.

CSS Compressor

Servizio web per la compressione di codice CSS. L’applicazione è un’applet Java.

CSS Tidy

Software, eseguibile da riga di comando, per la compressione di file CSS. La pagina del progetto è completa di tutta la documentazione necessaria per iniziare a utilizzarlo.

Conclusione

Imparare a utilizzarli tutti è impossibile. Quindi, prima perder tempo tra download e righe di codice ti consiglio di analizzare il tuo sito per individuare i componenti che ne influenzano maggiormente le prestazioni.

Ad esempio, se il tuo sito è una galleria di immagini gestita con un paio di file javascript la cosa migliore da fare è scegliere il miglior tool per ottimizzare le foto, considerando anche il loro formato. Se, invece, hai un sito dinamico che fa un largo uso di javascript e tecniche Ajax, comprimere (e offuscare) il codice dei tuoi file javascript sarà fondamentale per migliorare il caricamento e la reattività del tuo sito web.

Crediti

• Yahoo! Developer Network – Best Practices for Speeding Up Your Web Site
• Foto1: forty-nine: compressed work week di dead_squid
• Foto2: fog over Istanbul skyscrapers di WhatCouldPossiblyGoWrong?
• Foto3: MAGNIFYING GLASS di andercismo

Il Mime HTML e lo schema data:URL sono due importanti ingredienti nella ricetta che ti permetterà di ridurre le richieste HTTP.

• Una pagina Mime HTML è un tipo di pagina web in cui è possibile scriverci sia il codice html sia dei dati come immagini, oggetti flash, file audio
• Lo schema data:URL è una tecnica grazie alla quale è possibile inserire i dati nella pagina web (che abbiamo già visto nell’articolo Ridurre le richieste HTTP (parte 2): come unire e combinare immagini, script, css e che riprenderò per evitarti di fare su e giù per il blog)

Non utilizzeremo queste due tecniche separatamente ma ci serviranno per creare il mix esplosivo per caricare quanti più dati possibile in una sola richiesta http: quella della pagina web.

Lo schema data:URL

Per capire bene il Mime HTML è necessario sapere come codificare i file in base64 e come utilizzarli all’interno della pagina per poi vedere l’intera struttura di un documento MHTML.

Il vantaggio fondamentale di questa tecnica consiste nel risparmio di tante richieste http quanti sono gli oggetti e le immagini codificati in base64 che inseriamo nella pagina.

Vediamo subito un esempio.

<IMG ALT="Foto" SRC="data:image/gif; base64,
	R0lGODdhMAAwAPAAAAAAAP///ywAAAAAMAAwhhx4dbgYKAAA7B72VFgl2Tf7452
	AAAC8IyPqcvt3wCcDkiLc7C0qwyGHhSWpjQu5yqmCYsapyuvUUlvONmOZtfzgFz
	ByTB10QgxOR0TqBQejhRNzOfkVJ+5YiUqrXF5Y5lKh/DeuNcP5yLWGsEbtLiOSp
	a/TPg7JpJHxyendzWTBfX0cxOnKPjgBzi4diinWGdkF8kjdfnycQZXZeYGejmJl
	ZeGl9i2icVqaNVailT6F5iJ90m6mvuTS4OK05M0vDk0Q4XUtwvKOzrcd3iq9uis
	F81M1OIcR7lEewwcLp7tuNNkM3uNna3F2JQFo97Vriy/Xl4/f1cf5VWzXyym7PH" />

Dopo la paura iniziale, in genere ci si domanda: cosa sono quei caratteri e come faccio a inserirli?

Quell’ammasso di caratteri è la codifica in base64 dell’immagine. In pratica, è il contenuto del file immagine codificato in base64.

Per codificare un’immagine in base64 si utilizza una semplice funzione php: base64_encode.

L’ultima questione riguarda il tipo MIME che si può ottenere in due modi:

• utilizzando la funzione mime_content_type, dopo aver abilitato l’estensione php_mime_magic.dll.
• leggendo le informazioni del file grazie le funzioni File Information di php. Era un’estensione PECL, ma ora non lo è più. Bisogna utilizzare la libreria esterna magic_open

Nel caso non si possano utilizzare queste funzioni si dovrà scrivere manualmente, il che presuppone che si conosca il tipo dell’oggetto o dell’immagine da inserire.

Come inserire un’immagine in base64 (senza funzioni per il tipo MIME)

<img src="data:image/jpeg;base64,<?
echo base64_encode(file_get_contents("img.jpg")); ?>" alt="Immagine" />

Come inserire un’immagine in base64 (con funzioni per il tipo MIME)

<? $mime = mime_content_type("img.jpg"); ?>
<img src="data:<? echo $mime; ?>;base64,<?
echo base64_encode(file_get_contents("img.jpg")); ?>" alt="Immagine" />

Script, demo e download

Per vedere lo script vai a http://test.jblog.it/img_base64/index.txt

Per vedere una demo vai a http://test.jblog.it/img_base64/

Per scaricare l’esempio vai a http://download.jblog.it/img_base64.zip

Mime HTML

Il termine “Mime HTML” sta per “Multipurpose Internet Mail Extensions HyperText Markup Language“.

Per avere un’idea di quella che può essere una pagina mhtml (di estensione .mht) pensiamo ad un’email con dei file allegati (che possono essere anche delle immagini presenti all’interno del testo). I file che vengono inviati tramite email, sottoforma di allegati, vengono codificati in base64 e successivamente inseriti nell’intestazione dell’email. Quando il nostro client riceve l’email, prima decodifica gli allegati per renderli fruibili ed eventualmente pronti per il download. Una pagina MHTML funziona grosso modo così.

ATTENZIONE. Una pagina MHTML non deve necessariamente essere quella in cui viene scritto il codice html. Infatti può esserlo anche un file css che utilizza delle immagini (che vedremo successivamente).

Struttura di una pagina MHTML

Generalmente una pagina di questo tipo è composta da 3 mattoni fondamentali:

• nell’intestazione si specifica che il file è di tipo “multipart/related”, il separatore dei dati codificati in base64 e il tipo di contenuto del file (es. “text/html”)
• la seconda parte è quella relativa ai dati codificati in base 64 separati dal separatore specificato nell’intestazione e definiti dai rispettivi campi “Content-Location”, “Content-Type” e “Content-Transfer-Encoding” (naturalmente, quest’ultimo viene impostato con “base64″). Possono trovarsi anche in fondo alla pagina, il che è meglio poiché si da priorità al caricamento del codice
• nella terza parte viene scritto il corpo della pagina (o del messaggio, nel caso delle email) in html, css o altro, all’interno del quale verranno richiamati i dati specificati nella seconda parte del documento

Esempio di documento

L’esempio seguente è una pagina web con allegate 2 immagini, e segue lo schema in figura.

Purtroppo Internet Explorer gestisce diversamente i dati allegati e ci costringe a scrivere due versioni di codice. Tuttavia, questa è una delle rare volte in cui preferisco IE poiché con il browser Microsoft i dati in base64 vengono scritti una sola volta e possono essere richiamati infinite volte all’interno del documento grazie alla stringa specificata in “Content-Location”. Con gli altri browser (Firefox, Opera, Safari, Chrome) è necessario scrivere i dati codificati per ogni utilizzo dell’oggetto o immagine, il che rende il tutto più pesante e ci costringe a pensare due volte prima di decidere di inviare un’oggetto all’interno del documento MIME Html.

<!--
MIME-Version: 1.0
Content-Type: multipart/related; boundary="|b|o|u|n|d|a|r|y|"

--|b|o|u|n|d|a|r|y|
Content-Location:2bmp24869
Content-Type:image/bmp
Content-Transfer-Encoding:base64

Qk0eCgAAAAAAADYEAAAoA[...caratteri...]QEBAQEBAQEBZA==
--|b|o|u|n|d|a|r|y|
Content-Location:1bmp21242
Content-Type:image/bmp
Content-Transfer-Encoding:base64

Qk12CwAAAAAAAD[...caratteri...]JCQkJCQkJ
-->
<!--
--|b|o|u|n|d|a|r|y|
Content-Location:5bmp92853
Content-Type:image/bmp
Content-Transfer-Encoding:base64

DCwmoA2NiOAKioQ[...caratteri...]QDz87gA0dGCALq6X
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"  dir="ltr" lang="en-US">
<head>
  <title>Titolo pagina</title>
</head>
<body>

	<object data="data:image/bmp;base64,Qk0eCgAAAAAAADYEAAAoA[...caratteri...]QEBAQEBAQEBZA==">
		<img src="mhtml:http://localhost/jblog_script/mhtml_dataurl/index2.php!2bmp24869" alt="img3" />
	</object>

	<div style=" width:200px; height:200px; background-image:url(data:image/bmp;base64,Qk12CwAAAAAAAD[...caratteri...]JCQkJCQkJ); *background-image:url(mhtml:http://localhost/jblog_script/mhtml_dataurl/index2.php!1bmp21242);"></div>

</body>
</html>

Il fatto che queste immagini abbiano questo “strano” formato non ci deve assolutamente far preoccupare. Gli utilizzi sono quelli di sempre: all’interno del tag <img>, come sfondo di un elemento grazie alle regole css, ecc.

Compatibilità con IE. Per gestire la compatibilità con il browser Internet Explorer è necessario inserire l’immagine compatibile con IE all’interno dei tag <object> in cui viene specificata l’immagine in un formato compatibile con i restanti browser. I risultati sono i seguenti:

• se si accede alla pagina con un browser diverso da IE, il tag object funzionerà correttamente mostrando l’immagine; il tag <img> al suo interno non verrà preso in considerazione dal browser
• nel caso in cui si acceda con Internet Explorer, poiché il tag <object> non funzionerà verrà considerato il tag <img> in cui l’immagine specificata è in un formato compatibile con IE

Regole da rispettare. Per concludere vorrei evidenziare alcune importanti caratteristiche riguardo il formato di un documento MHTML:

• “Mime Version” e “Content-Type” devono trovarsi obbligatoriamente in testa alla pagina, prima del <!Doctype…>
• Il primo separatore può essere separato a piacere dall’intestazione del documento
• Il separatore (boundary) deve trovarsi esattamente fra i dati in base64 dell’oggetto precedente e le intestazioni dell’oggetto successivo, senza ulteriori “a capo”, “spazi”, “tab”, e altri caratteri
• I vari oggetti possono essere separati solo da “fine” (–>) e “inizio” (<!–) commenti, stando attenti a non inserire altri caratteri tra <!– e il separatore; invece, fra il contenuto in base64 e –> possono esserci caratteri di escape (a capo, tab, ecc.)
• Prima del separatore è necessario inserire due trattini “–”
• Riguardo IE, l’indirizzo da scrivere dopo mhtml: deve essere identico all’indirizzo visibile nella barra degli indirizzi. Questo indirizzo si ottiene dalla variabile riservata $_SERVER['REQUEST_URI']

Utilizzare concretamente Mime HTML e data:URL

Ecco come immagino la generazione di un documento Mime HTML con lo schema data:URL.

Prima fase. Gli oggetti e le immagini vengono codificati in base64 e sistemati all’interno del documento.

Seconda fase. Il browser legge il codice html e decodifica i dati allegati portandoli al loro formato primitivo: le immagini ritornano immagini, gli oggetti flash ritornano animazioni, ecc.

La classe MimeHtmlHandler

Per automatizzare il tutto ho sviluppato una piccola classe PHP che con un paio di righe ti permetterà di inserire all’interno del documento MHtml un’immagine precedentemente allegata.

N.B. la proprietà *background-image serve per rimpiazzare la prima background-image nel caso questa non funzionasse. In particolare, la proprietà *background-image viene utilizzata per IE mentre background-image funziona con i restanti browser.

Il codice dell’esempio precedente è stato ottenuto da questo script PHP:

<?
// ( 1 ) Crea l'oggetto
$mhh = new MimeHtmlHandler("http://test.jblog.it","|b|o|u|n|d|a|r|y|","MIME Version 1.0");

// ( 2 ) Header "Content-Type" e "MIME Version"
$mph->printHeader();

?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"  dir="ltr" lang="en-US">
<head>
  <title>mhtml test page</title>
</head>
<body>
  <div id="test1">test #1</div>
  <div id="test2">test #2</div>

  <object data="<? $mhh->inc("2.bmp","image/bmp"); ?>">
	  <img src="<? $mhh->incIE("2.bmp"); ?>" alt="img3" />
  </object>

 <div style=" width:200px; height:200px; background-image:url(<? $mhh->inc("1.bmp","image/bmp"); ?>); *background-image:url(<? $mhh->incIE("1.bmp"); ?>);"></div>

</body>
</html>
<?
// ( 3 ) Crea la lista dei dati (per IE)
$mhh->incAll();
?>

Caratteristiche principali della classe MimeHtmlHandler

La classe ha due array privati: il primo è quello in cui vengono conservati gli oggetti che vengono inseriti nella pagina in modo da evitare di codificarli e impostarli nuovamente per un successivo inserimento; il secondo è quello relativo ai nomi in codice specificati in “Content-Location” quando si stampa la lista dei dati codificati che verrà utilizzata solo da Internet Explorer.

Le funzioni da utilizzare sono solo due: inc e incIE. Queste due funzioni permettono di inserire oggetti in formati compatibili con tutti i browser e con IE. Inoltre, in base al tipo e al numero di argomenti passati è possibile creare da zero un oggetto o richiamarne uno già inserito.

Quando si vuole stampare un’oggetto già inserito precedentemente il nome del file verrà cercato nell’array degli oggetti. La ricerca viene effettuata a partire dall’ultimo elemento in quanto sono molto più probabili gli inserimenti consecutivi di immagini rispetto a quelli richiesti in punti molto diversi e lontani di una pagina.

Le 3 istruzioni fondamentali

1. Crea l’oggetto della classe specificando l’url di base delle immagini, il separatore (boundary) e la versione MIME
2. Stampa l’intestazione “Content-Type” e “MIME Version”
3. In fondo alla pagina viene stampata la lista dei dati in base64 che servono a Internet Explorer, mentre per gli altri browser i dati codificati vengono specificati all’interno del tag in cui si utilizzano

Come inserire un’immagine

Sono state create due funzioni distinte per l’inserimento di un’immagine compatibile con IE o con gli altri browser (rispettivamente incIE e inc). Analizziamo i casi più comuni relativi all’utilizzo di queste funzioni.

• Inserire un’immagine in modo che sia compatibile con tutti i browser. Richiamare la funzione inc() all’interno dell’attributo “data” del tag <object>, passando come parametri il percorso del file e il tipo mime. All’interno dei tag <object> e </object> inserire il tag <img> richiamando la funzione incIE() all’interno dell’attributo “src”. Alla funzione incIE basterà passare solo il nome del file grazie al quale verranno recuperati gli altri dati relativi all’oggetto da stampare.
• Inserire un’immagine esistente. Alle funzioni inc() e incIE() basterà passare il nome del file.

Demo e download

Per vedere una demo vai su http://test.jblog.it/mhtml1/

Per scaricare la classe MimeHtmlHandler e l’esempio vai su http://download.jblog.it/mhtml1.zip

Esempio2. CSS e data:URL

Per utilizzare la classe MimeHtmlHandler all’interno di un file CSS, la prima operazione da fare è impostare il server Apache in modo che processi i file CSS come file PHP. Per fare ciò basterà aggiungere queste righe:

<FilesMatch "myfile.css$">
	AddHandler application/x-httpd-php .css
</FilesMatch>

Infine componiamo il file css:

• processandolo come file php si perde la natura del file css che ripristiniamo inviando l’header “Content-Type:text/css”
• includiamo la classe MimeHtmlHandler, e richiamiamo le prime due funzioni fondamentali (costruttore e printHeader() )
• componiamo il corpo del file css utilizzando, dove occorrono, le funzioni inc() e incIE()
• infine, richiamiamo l’ultima funzione fondamentale incAll() per stampare la lista dei file che servirà ad Internet Explorer

<? header("Content-Type: text/css"); ?>
/*<?
include("MimeHtmlHandler.php");

// ( 1 ) Crea l'oggetto
$mhh = new MimeHtmlHandler("http://localhost","|b|o|u|n|d|a|r|y|","");

// ( 2 ) Header "Content-Type" e "MIME Version"
$mhh->printHeader();
?>*/

#test1 {
  background-image: url("<? $mhh->inc("2.bmp","image/bmp"); ?>"); /* normal */
  *background-image: url(<? $mhh->incIE("2.bmp"); ?>); /* IE < 8 */
}

#test2 {
  background-image: url("<? $mhh->inc("1.bmp","image/bmp"); ?>"); /* normal */
  *background-image: url(<? $mhh->incIE("1.bmp"); ?>); /* IE < 8 */
}

div {
  width: 100px;
  height: 100px;
  font: bold 24px Arial;
}
/*<?
// ( 3 ) Crea la lista dei dati (per IE)
$mhh->incAll();

?>*/

Demo e download

Per vedere una demo vai su http://test.jblog.it/mhtml2/

Per scaricare la classe MimeHtmlHandler e l’esempio vai su http://download.jblog.it/mhtml2.zip

Considerazioni finali

Nei precedenti esempi abbiamo visto solo come utilizzare queste tecniche per allegare le immagini, anche perché è questa la situazione più frequente. Tuttavia, nello stesso modo potresti allegare facilmente oggetti flash e applet Java: nello stesso modo!

Compatibilità IE. Ho testato queste tecniche con Internet Explorer, dalla versione 5.5 alla 8 e non ho riscontrato grossi problemi. Una piccola anomalia si verifica quando si aggiorna la pagina più volte e le immagini non vengono caricate. Sinceramente non so da cosa può dipendere.

Queste tecniche, in confronto ai CSS Sprite sembrano “roba da smanettoni” a causa dell’ammasso di numeri e lettere che genera la codifica in base64 e dell’utilizzo (leggero) di php. Non farti ingannare… In fondo cosa c’è di così difficile?!? Dovrai solo pensare alcuni minuti alle immagini da allegare ai documenti (html, css, ecc.) e analizzare un po’ le velocità di caricamento per capire fino a che punto potranno avvantagiarti. Io dico di provarci!

Non escludo che nella classe MimeHtmlHandler ci possano essere dei bug. Per qualsiasi problema, chiarimento e curiosità sarei felice se mi contattattassi. Dimmi com’è andata e se queste tecniche ti sono state utili: non vedo l’ora di sapere gli esiti dei tuoi esperimenti!

Crediti

Phpied.com – data:urls – what are they and how to use them

Phpied.com – MHTML – when you need data: URIs in IE7 and under

Foto1. Vientiane 04 – Pink Dragonfruit shake di Ben Beiske

Gestire la cache è fatica sprecata?

Assolutamente no! Il fatto è che ogni utente che accede al sito la prima volta deve comunque attendere il caricamento completo della pagina e dei suoi componenti, che vengono subito memorizzati in cache. Il miglioramento di prestazioni si verifica a partire dalla seconda pagina che viene visitata in quanto i componenti vengono letti dalla cache, evitando di effettuare nuove (e inutili) richieste http.

Vantaggi immediati

Diminuire i componenti di una pagina consente di avere un notevole aumento delle prestazioni che migliora l’esperienza tutti gli utenti, vecchi e nuovi, dalla prima all’ultima pagina.

In questo articolo vedremo alcune tecniche che riducono drasticamente il numero e il tempo di caricamento relativo a immagini, script e css. Queste tecniche non fanno altro che combinare questi componenti in modo da caricarne pochi ma più pesanti anziché molti ma leggeri. Parleremo di image maps, sprite css, dello schema data:URL, di generatori di sprite css, di come combinare automaticamente javascript e css, vedremo che a volte è meglio inserire il codice direttamente nella pagina html, e come è possibile evitare gli script duplicati.

Pochi ma buoni

A primo impatto potrebbe sembrare un’assurdità affermare che “è meglio caricare un file da 300 kbyte anziché 10 file da 40kb”. Fortunatamente non lo è!

Infatti, se prendiamo 10 immagini e le copiamo all’interno di un solo file immagine, quest’ultimo file occuperà molto meno rispetto alla somma delle 10 immagini. Il motivo è che nei file vengono memorizzate tantissime informazioni oltre al contenuto che i software ci mostrano.

Ad esempio, se apriamo una fotografia quello che vediamo è semplicemente un’immagine. Tuttavia, quel file contiene anche una serie di informazioni come: modello fotocamera, altezza, larghezza, risoluzione, ecc.

Caricare una sola immagine (ed un set di informazioni) è meglio che caricare dieci immagini (e dieci set di informazioni) perché:

• la dimensione del file più grosso è minore della somma di tanti file più piccoli
• tante richieste http si riducono a una sola

Mentre sulla riduzione delle richieste http possiamo essere d’accordo, credo che tu abbia qualche dubbio sul fatto che diminuisca la dimensione del file più grande. Bene, fai questo semplice esperimento:

• prendi un’immagine e fanne 10 copie
• crea un’immagine grande abbastanza da contenere perfettamente 10 immagini uguali
• confronta la dimensione dei 10 file immagine con quella del file immagine più grande

I componenti incriminati

Generalmente si focalizza l’attenzione su immagini, javascript e css perché sono presenti in tutte le pagine e, se mal gestiti, non solo provocano un eccessivo numero di richieste http ma rallentano il normale caricamento delle pagine.

Combinare le immagini: “image maps”

Se vogliamo inserire due immagini affiancate basta combinarle in un unico file immagine e inserire quest’ultimo all’interno della pagina.

I problemi nascono nel momento in cui, ad esempio, vogliamo applicare un diverso link a ciascuna immagine. Infatti, essendo un’unica immagine, non possiamo racchiuderla all’interno di un tag <a>, ma dobbiamo “mappare” le immagini.

Prima di illustrare i tre metodi è necessario descrivere gli strumenti a nostra disposizione.

Il tag <area>

Serve per creare le singole aree, cliccabili o meno, dell’immagine. Non richiede il tag di chiusura completo (</area>).

Formato. <area shape="..." coords="..." href="http://example.com/link1.html">

Per creare documenti più accessibili, si può utilizzare il tag <a>…</a> con gli stessi attributi di <area>. Infatti, grazie al tag <a> si può specificare un testo alternativo per l’area.

Formato. <a href="http://example.com/link1.html" shape="..." coords="..." />Area1</a>


shape: (default, rect, circle, poly), cioè (default, rettangolo, cerchio, poligono). Specifica la forma di una regione.

coords: coordinate. Specificano la posizione e la sagoma. Il numero e l’ordine dei valori dipendono dalla forma specificata da shape.

• rect: left-x, top-y, right-x, bottom-y. I vertici opposti del rettangolo.
• circle: center-x, center-y, radius. Coordinate del centro e lunghezza del raggio.
• poly: x1, y1, x2, y2, …, xN, yN. Coordinate di tutti i vertici del poligono.

href: link associato alla regione.

nohref: impostare con true per specificare che la regione non ha link associati, altrimenti non impostare.

Il tag <map>

Specifica una mappa da far richiamare da un oggetto. È richiesto il tag di chiusura </map>.

All’interno dei tag <map>…</map> si inseriscono tutte le aree relative alla mappa.

name. Assegna un nome alla mappa.

Associare una mappa a un elemento

Utilizzare l’attributo usemap fra gli attributi dell’elemento, specificando un URI.

Ricorda che un URI può essere un indirizzo del tipo http://www.example… o un id del tipo #nome-mappa.

Formato. <img src="foto.jpg" alt="La mia foto" usemap="mappafoto" />

Image maps lato client

La presenza di usemap implica che l’oggetto sia un immagine. Se non lo è, i browser potrebbero comunque implementare un’interazione con l’utente simile a quella per le immagini. Purtroppo non tutti i browser eseguono correttamente la mappatura di un immagine o di un oggetto.

Un blocco <map> può contenere sia elementi <area> sia elementi a livello di blocco come <a> per aumentare la compatibilità con i browser più datati.

Alcune osservazioni

1. Se sono presenti contemporaneamente <a> ed <area>, i browser recenti ignorano il tag <area>
2. Se due o più regioni si sovrappongono, la prima regione avrà la precedenza sulle altre
3. L’elemento <map> non è compatibile con i browser HTML 2.0

Demo e download

Per vedere una demo vai a http://test.jblog.it/imagemap_cs/

In quest’altro esempio le aree sono rettangolari, circolari e poligonali. http://test.jblog.it/imagemap_cs2/

Per scaricare entrambi gli esempi vai a http://download.jblog.it/imagemap_cs_cs2.zip

Esempio 1

Classico esempio con <map> all’interno dell’oggetto, ed i tag <a> all’interno di <map>.

<HTML>
	<HEAD><TITLE>The cool site!</TITLE></HEAD>
	<BODY>
	<P><OBJECT data="navbar1.gif" type="image/gif" usemap="#map1">
		<MAP name="map1">
			Navigate the site:
			<A href="guide.html" shape="rect" coords="0,0,118,28">Access Guide</a> |
			<A href="shortcut.html" shape="rect" coords="118,0,184,28">Go</A> |
			<A href="search.html" shape="circle" coords="184,200,60">Search</A> |
			<A href="top10.html" shape="poly" coords="276,0,276,28,100,200,50,50,276,0">Top Ten</A>
		</MAP>
	</OBJECT></P>
	</BODY>
</HTML>

Esempio 2

Come utilizzare la mappa richiamandola con usemap, senza inglobarla all’interno dei tag <object>.

<HTML>
	<HEAD><TITLE>The cool site!</TITLE></HEAD>
	<BODY>
	<P><OBJECT data="navbar1.gif" type="image/gif" usemap="#map1"></OBJECT></P>
	<MAP name="map1">
		Navigate the site:
		<A href="guide.html" shape="rect" coords="0,0,118,28">Access Guide</a> |
		<A href="shortcut.html" shape="rect" coords="118,0,184,28">Go</A> |
		<A href="search.html" shape="circle" coords="184,200,60">Search</A> |
		<A href="top10.html" shape="poly" coords="276,0,276,28,100,200,50,50,276,0">Top Ten</A>
	</MAP>
</HTML>

Esempio 3

Utilizzo degli elementi <area>.

<HTML>
	<HEAD><TITLE>The cool site!</TITLE></HEAD>
	<BODY>
	<P><OBJECT data="navbar1.gif" type="image/gif" usemap="#map1"></OBJECT></P>
	<MAP name="map1">
		Navigate the site:
		<AREA href="guide.html" alt="Access Guide" shape="rect" coords="0,0,118,28">
		<AREA href="search.html" alt="Search" shape="rect" coords="184,0,276,28">
		<AREA href="shortcut.html" alt="Go" shape="circle" coords="184,200,60">
		<AREA href="top10.html" alt="Top Ten" shape="poly" coords="276,0,276,28,100,200,50,50,276,0">
	</MAP>
</HTML>

Esempio 4

Questo è un utilizzo concreto della condivisione di una mappa fra più immagini. Questo codice carica l’immagine più interna (navbar1.gif) se l’immagine esterna (navbar1.png) non viene processata correttamente dal browser. Ad entrambe le immagini viene associata la stessa mappa.

<HTML>
	<HEAD><TITLE>The cool site!</TITLE></HEAD>
	<BODY>
	<P><OBJECT data="navbar1.png" type="image/png" usemap="#map1">
		<OBJECT data="navbar1.gif" type="image/gif" usemap="#map1"></OBJECT>
	</OBJECT></P>
	<MAP name="map1">
		Navigate the site:
		<A href="guide.html" shape="rect" coords="0,0,118,28">Access Guide</a> |
		<A href="shortcut.html" shape="rect" coords="118,0,184,28">Go</A> |
		<A href="search.html" shape="circle" coords="184,200,60">Search</A> |
		<A href="top10.html" shape="poly" coords="276,0,276,28,100,200,50,50,276,0">Top Ten</A>
	</MAP>
</HTML>

Esempio 5

Utilizzo combinato di <area> e <a> per avere una maggiore compatibilità. I browser più recenti non considerano gli elementi <area>.

<HTML>
	<HEAD><TITLE>The cool site!</TITLE></HEAD>
	<BODY>
	<P><OBJECT data="navbar1.gif" type="image/gif" usemap="#map1"></OBJECT></P>
	<MAP name="map1">
		Navigate the site:
		<AREA href="guide.html" alt="Access Guide" shape="rect" coords="0,0,118,28">
		<AREA href="search.html" alt="Search" shape="rect" coords="184,0,276,28">
		<AREA href="shortcut.html" alt="Go" shape="circle" coords="184,200,60">
		<AREA href="top10.html" alt="Top Ten" shape="poly" coords="276,0,276,28,100,200,50,50,276,0">
		<A href="guide.html" shape="rect" coords="0,0,118,28">Access Guide</a> |
		<A href="shortcut.html" shape="rect" coords="118,0,184,28">Go</A> |
		<A href="search.html" shape="circle" coords="184,200,60">Search</A> |
		<A href="top10.html" shape="poly" coords="276,0,276,28,100,200,50,50,276,0">Top Ten</A>
	</MAP>
</HTML>

Esempio 6

Come sovrapporre due aree. Da notare l’ultima coordinata specificata, il raggio). I due cerchi hanno lo stesso centro, ma il primo ha un raggio minore del secondo.

Il risultato è che posizionandosi sul primo (che non ha link) non appare la “manina”. Spostandosi leggermente fuori dal primo ci si posiziona sul secondo (che ha un link) ed appare la “manina”. In pratica, l’area specificata prima ha la precedenza sulle altre che sovrascrive.

<MAP name="map1">
	<A shape="circle" coords="100,200,50">Non ho link</A>
	<A href="outer-ring-link.html" shape="circle" coords="100,200,250">Ho un link</A>
</MAP>

Image maps lato server

A volte la mappatura delle immagini può essere troppo complicata da scrivere come html.

In questi casi è meglio ricorrere a tecniche lato server.

Partiamo dal codice html. Da notare l’attributo ismap.

<HTML>
	<HEAD><TITLE>The cool site!</TITLE></HEAD>
	<BODY>
	<A href="map_script.php">
		<IMG src="navbar1.png" alt="Navigazione" ismap />
	</A>
</HTML>

Come funziona? Quando ci si posiziona sull’immagine, il browser aggiunge all’url di <a>, quindi a map_script.php, le due coordinate. Ad esempio, se ci posizioniamo sul pixel di coordinate (18,46), il link del tag <a> verrà trasformato automaticamente da map_script.php a map_script.php?18,46.

Lo script lato server ha il compito di leggere i due parametri $_GET relativi alle coordinate e comportarsi a seconda dei valori letti.

<?php
/* $_GET array associativo. Ottiene le chiavi dell'array. */
$keys = array_keys($_GET);

/* Prende la prima chiave, la divide e inserisce i due valori in $x e $y */
list($x,$y) = explode(",",$keys[0]);

/* Comportamenti */
if(($x>=0 && $x<=118) && ($y>=0 && $y<=28))	 include("guide.html");
elseif(($x>118 && $x<=184) && ($y>=0 && $y<=28)) include("shortcut.html");
elseif( ($x>=(184-30) && $x<=(184+30)) && ($y>=(200-30) && $y<=(200+30)) ) include("search.html");
elseif(($x>220 && $x<=280) && ($y>=30 && $y<=54)) include("top10.html");
?>

Nel codice dell’esempio 1, l’area relatva a top10.html è un poligono. Non è semplice controllare se un punto è presente in un poligono. Bisogna trovare e utilizzare appositi algoritmi e funzioni. Potresti trovarli su geometryalgorithms.com (che nel momento in cui scrivo è “temporaneamente sospeso”).

Script, demo e download

Per vedere e scaricare lo script vai a http://test.jblog.it/imagemap_ss/map_script.txt

Per vedere una demo vai a http://test.jblog.it/imagemap_ss/

Per scaricare l’esempio vai a http://download.jblog.it/imagemap_ss.zip

Image maps lato client e lato server

Per avere la compatibilità con i vecchi browser è bene combinare le due tecniche.

<HTML>
	<HEAD><TITLE>The cool site!</TITLE></HEAD>
	<BODY>
	<A href="map_script.php">
		<IMG src="navbar1.gif" alt="Navigazione" usemap="#map1" ismap />
	</A>
	<MAP name="map1">
		Navigate the site:
		<A href="guide.html" shape="rect" coords="0,0,118,28">Access Guide</a> |
		<A href="shortcut.html" shape="rect" coords="118,0,184,28">Go</A> |
		<A href="search.html" shape="circle" coords="184,200,60">Search</A> |
		<A href="top10.html" shape="poly" coords="276,0,276,28,100,200,50,50,276,0">Top Ten</A>
	</MAP>
	</BODY>
</HTML>

Il testo alternativo

I tag <a> con il testo all’interno si utilizzano per avere un testo alternativo nel caso in cui l’immagine non venga caricata.

Naturalmente questo comportamento non è gestito dal browser, infatti il testo dei link appare sempre.

Per nasconderlo è necessario operare con i css. Consiglio anche di guardare le tecniche di “image replacement”.

Script, demo e download

Per vedere lo script vai a http://test.jblog.it/imagemap_css/map_script.txt

Per vedere una demo vai a http://test.jblog.it/imagemap_css/

Per scaricare l’esempio vai a http://download.jblog.it/imagemap_css.zip

Lo schema data:URL

Questa tecnica permette di inserire i dati direttamente nel codice html, risparmiando quindi la relativa richiesta http.

Scopriamo le carte e vediamo subito un esempio.

<IMG ALT="Foto" SRC="data:image/gif; base64,
	R0lGODdhMAAwAPAAAAAAAP///ywAAAAAMAAwhhx4dbgYKAAA7B72VFgl2Tf7452
	AAAC8IyPqcvt3wCcDkiLc7C0qwyGHhSWpjQu5yqmCYsapyuvUUlvONmOZtfzgFz
	ByTB10QgxOR0TqBQejhRNzOfkVJ+5YiUqrXF5Y5lKh/DeuNcP5yLWGsEbtLiOSp
	a/TPg7JpJHxyendzWTBfX0cxOnKPjgBzi4diinWGdkF8kjdfnycQZXZeYGejmJl
	ZeGl9i2icVqaNVailT6F5iJ90m6mvuTS4OK05M0vDk0Q4XUtwvKOzrcd3iq9uis
	F81M1OIcR7lEewwcLp7tuNNkM3uNna3F2JQFo97Vriy/Xl4/f1cf5VWzXyym7PH" />

Dopo la paura iniziale, in genere ci si domanda: cosa sono quei caratteri e come faccio a inserirli?

Quell’ammasso di caratteri è la codifica in base64 dell’immagine. In pratica, è il contenuto del file immagine codificato in base64.

Per codificare un’immagine in base64 si utilizza una semplice funzione php: base64_encode.

L’ultima questione riguarda il tipo MIME che si può ottenere in due modi:

• utilizzando la funzione mime_content_type. Deve essere abilitata l’estensione php_mime_magic.dll.
• leggendo le informazioni su un file grazie le funzioni File Information di php. Era un’estensione PECL, ma ora non lo è più. Bisogna utilizzare la libreria esterna magic_open

Nel caso non si possano utilizzare queste funzioni si dovrà scrivere manualmente.

Come inserire un’immagine in base64 (senza funzioni per il tipo MIME)

<img src="data:image/jpeg;base64,<?
echo base64_encode(file_get_contents("img.jpg")); ?>" alt="Immagine" />

Come inserire un’immagine in base64 (con funzioni per il tipo MIME)

<? $mime = mime_content_type("img.jpg"); ?>
<img src="data:<? echo $mime; ?>;base64,<?
echo base64_encode(file_get_contents("img.jpg")); ?>" alt="Immagine" />

Script, demo e download

Per vedere lo script vai a http://test.jblog.it/img_base64/index.txt

Per vedere una demo vai a http://test.jblog.it/img_base64/

Per scaricare l’esempio vai a http://download.jblog.it/img_base64.zip

Gli sprite CSS

Partiamo dalla situazione più comune. Supponiamo di voler realizzare un menù composto da 5 pulsanti grafici che cambino colore quando si passa sopra col mouse. La cosa più logica sarebbe quella di creare 10 immagini: 5 per il pulsante in modalita “normale”, 5 per il pulsante in modalità “mouse sopra”.

Poiché caricare 10 immagini significa effettuare 10 richieste http, utilizziamo la tecnica degli sprite CSS.

Questa tecnica consiste nel:

• creare un file immagine abbastanza grande da contenere tutte e 10 le immagini del menù (come ho detto all’inizio dell’articolo, è meglio un’immagine grande anziché tante piccole immagini)
• impostare questa immagine come sfondo agli elementi del menù (cioè <a>, <li>, <div>, ecc.)
• per ogni elemento impostare la proprietà background-position per spostare lo sfondo all’interno dell’elemento in modo da avere l’immagine desiderata

Gli utilizzi di questa tecnica sono infiniti: dal menù al singolo rollover, dalla serie di immagini allineate al contenitore con gli angoli arrotondati.

VANTAGGI

• riduce notevolmente le richieste http e migliora il caricamento delle pagine
• elimina del tutto i ritardi relativi ai rollover poiché non viene caricata una nuova immagine ma viene spostato lo sfondo

SVANTAGGI

• richiede un po’ più di lavoro nell’impostazione dei css e nella creazione delle immagini
• non è sempre possibile combinare in una sola immagine tutte le immagini del sito, a causa delle difficoltà che si incontrano nel posizionamento dello sfondo con le regole dei css

Esempio 1

Inserire le immagini con il tag <img>. Questo metodo è a dir poco geniale poiché permette di inserire le immagini come si è sempre fatto col vantaggio di ridurre le richieste http. In pratica viene impostato lo sfondo al tag <img>.

L’articolo completo è di CssGlobe. Lo puoi trovare qui.

Abbiamo bisogno di un’immagine gif trasparente 1px x 1px (spacer.gif), e l’immagine sprite (tuttelefoto.jpg).

tuttelefoto.jpg – L’immagine sprite che utilizzeremo

<html>
<head><title>Sprite CSS - Esempio 1</title></head>
<body>
	<img src="spacer.gif" id="foto1" alt="Foto1" />
	<img src="spacer.gif" id="foto2" alt="Foto2" />
	<img src="spacer.gif" id="foto3" alt="Foto3" />
</body>
</html>

L’immagine trasparente serve per far assumere al tag <img> il suo normale comportamento (ad es. in modo che quando selezioni l’immagine si colora l’area di <img>).

Codice css

#foto1, #foto2, #foto3 { background:url(tuttelefoto.jpg) no-repeat; }
#foto1 { width:100px; height:50px; background-position:0px 0px; }
#foto2 { width:120px; height:90px; background-position:0px -50px; }
#foto3 { width:90px; height:130px; background-position:-120px 0px; }

Demo e download

Per vedere una demo vai a http://test.jblog.it/img_sprite1/

Per scaricare l’esempio vai a http://download.jblog.it/img_sprite1.zip

Esempio 2

Un’altro modo per inserire delle immagini è impostarle come sfondo ad elementi flottanti.

spriteimg.png – L’immagine sprite che utilizzeremo

<html>
<head><title>Sprite CSS - Esempio 2</title></head>
<body>
	<a href="#" id="feedburner"></a>
	<a href="#" id="subscribe"></a>
	<a href="#" id="bookmarks"></a>
</body>
</html>

Demo e download

Per vedere una demo vai a http://test.jblog.it/img_sprite2/

Per scaricare l’esempio vai a http://download.jblog.it/img_sprite2.zip

Codice css

#feedburner { margin-right:20px; background:url(spriteimg.png) no-repeat -5px -5px; float:left; width:91px; height:29px; }
#subscribe { margin-right:20px; background:url(spriteimg.png) no-repeat -5px -35px; float:left; width:127px; height:18px; }
#bookmarks { background:url(spriteimg.png) no-repeat -5px -55px; float:left; width:127px; height:18px; }

Esempio 3

Gli sprite css sono ideali per sviluppare menù di navigazione.

spritemenu.png – L’immagine sprite che utilizzeremo

<html>
<head><title>Sprite CSS - Esempio 3</title></head>
<body>
	<ul id="navmenu">
		<li id="nav_homepage"><a href="#"></a></li>
		<li id="nav_informazioni"><a href="#"></a></li>
		<li id="nav_catalogo"><a href="#"></a></li>
		<li id="nav_indirizzi"><a href="#"></a></li>
		<li id="nav_contact"><a href="#"></a></li>
	</ul>
</body>
</html>

Codice css

#navmenu ul { list-style:none; }
#navmenu li { float:left; list-style:none; }
#navmenu a { display:block; height:30px; width:135px; background:url(spritemenu.png) no-repeat;  }

#nav_homepage a:link, #nav_homepage a:visited { background-position:0px 0px; }
#nav_informazioni a:link, #nav_informazioni a:visited { background-position:-270px 0px; }
#nav_catalogo a:link, #nav_catalogo a:visited { background-position:-560px 0px; }
#nav_indirizzi a:link, #nav_indirizzi a:visited { background-position:-420px 0px; }
#nav_contact a:link, #nav_contact a:visited { background-position:-135px 0px; }

#nav_homepage a:hover, #nav_homepage a:focus, #nav_homepage a:active { background-position:0px -30px; }
#nav_informazioni a:hover, #nav_informazioni a:focus, #nav_informazioni a:active { background-position:-270px -30px; }
#nav_catalogo a:hover, #nav_catalogo a:focus, #nav_catalogo a:active { background-position:-560px -30px; }
#nav_indirizzi a:hover, #nav_indirizzi a:focus, #nav_indirizzi a:active { background-position:-420px -30px; }
#nav_contact a:hover, #nav_contact a:focus, #nav_contact a:active { background-position:-135px -30px; }

Demo e download

Per vedere una demo vai a http://test.jblog.it/img_sprite3/

Per scaricare l’esempio vai a http://download.jblog.it/img_sprite3.zip

Generatori di Sprite CSS

I generatori di sprite css semplificano la creazione di un’immagine abbastanza grande da contenere tutte le immagini da utilizzare nel proprio sito. Questi, secondo me, sono i migliori.

Generatore di Sprite CSS
http://spritegen.website-performance.org/
https://launchpad.net/css-sprite-generator (codice sorgente)

CSS Sprites Generator
http://www.csssprites.com/

CSS sprites for humanoid beings (and the like)
http://printf.ru/spritr/

SmartSprites (Alpha!)
http://smartsprites.osinski.name/

Combinare javascript e css

Spesso una pagina richiama più di uno script e più di un css. Per ridurre le richieste http relative ai css (o agli script) basta copiare il contenuto di tutti i file css (o script) in un unico file.

Il bello di questa tecnica è che, a differenza delle immagini, è quasi sempre possibile combinare tutti i file dello stesso tipo in un unico file. Il “quasi” è dovuto al fatto che alcuni script, se inseriti nello stesso file, potrebbero dare dei problemi. Quindi è sempre meglio testare il funzionamento dello script combinato. Se si verificano dei problemi, basta escludere dalla fusione i file “incompatibili”.

La combinazione degli script in un unico file può essere eseguita in due modi:

• manualmente, cioé copiando il contenuto di ogni script all’interno di un file più grande
• dinamicamente, ricorrendo a semplici script lato server

Gli script lato server che vedremo sono strutturati in 5 fasi:

• lettura dei nomi dei file da includere passati come parametri $_GET
• impostazione delle opzioni
• inclusione effettiva dei file
• stampa dei campi di intestazione con la funzione header() per la gestione della cache, il tipo mime, ETag
• stampa del contenuto finale del file

Script php: combinare più file css

La particolarità dello script relativo ai file css è che per ogni file da includere è necessario specificare l’attributo media (all, screen, print, ecc.), cioé quell’attributo che indica il tipo di dispositivo per cui deve valere quel file css. Non è necessario specificare l’estensione dei file poiché viene aggiunta automaticamente all’interno dello script.

Attenzione. Non passare nomi di file contenenti il carattere “.” in quanto, nelle richieste $_GET, viene convertito automaticamente in “_”.

Codice html

<link rel="stylesheet" type="text/css"
href="combined.css?file1:all&file2:screen&file3:print" />

Impostare Apache

Poiché lo script che ha l’estensione .css è necessario impostare il server Apache affinché processi il file combined.css come un file .php. Basterà aggiungere un paio di righe.

<FilesMatch "combined.css$">
	AddHandler application/x-httpd-php .css
</FilesMatch>

Script, demo e download

Per vedere lo script vai a http://test.jblog.it/combine_css/combine.txt

Per vedere una demo vai a http://test.jblog.it/combine_css/combine.css?file1:all&file2:screen&file3:print

Per scaricare l’esempio vai a http://download.jblog.it/combine_css.zip

Script php: combinare più file javascript

Non è necessario specificare l’estensione dei file poiché viene aggiunta automaticamente all’interno dello script.

Attenzione. Non passare nomi di file contenenti il carattere “.” in quanto, nelle richieste $_GET, viene convertito automaticamente in “_”.

Codice html

<script type="application/javascript" src="combined.js?file1&file2&file3"></script>

Impostare Apache

Poiché lo script che ha l’estensione .js è necessario impostare il server Apache affinché processi il file combined.js come un file .php. Basterà aggiungere un paio di righe.

<FilesMatch "combined.js$">
	AddHandler application/x-httpd-php .js
</FilesMatch>

Script, demo e download

Per vedere lo script vai a http://test.jblog.it/combine_js/combine.txt

Per vedere una demo vai a http://test.jblog.it/combine_js/combine.js?file1&file2&file3

Per scaricare l’esempio vai a http://download.jblog.it/combine_js.zip

Stampare javascript e css nel codice html

Sappiamo che per utilizzare codice javascript o css ci sono 3 modi:

1. stamparli direttamente nel codice html
2. dividerli su più file esterni (da richiamare)
3. stamparne alcuni e richiamare gli altri

Il terzo metodo

Come succede in tante occasioni, la “via di mezzo” è da preferire. La successiva domanda è: su che criterio si scelgono i file da stampare nel codice html e quelli da richiamare esternamente?

Sinceramente, non saprei dirlo con precisione. Probabilmente esistono degli studi che potrebbero aiutarti in questo. Secondo me, il codice da stampare nel documento html è quello che presumibilmente potrebbe essere utilizzato prima. Ad esempio:

• per javascript, il codice e le funzioni che verranno eseguite nell’evento “onload” dell’oggetto “document”
• per i css, il codice che serve a formattare gli elementi principali della pagina, come html, layout, contenitori, ecc.

Come automatizzare il tutto

Fortunatamente, questa tecnica si può automatizzare con un paio di righe di codice lato server (php).

<html>
<head>
<title>Javascript e Css nella pagina</title>

<style type="text/css">
<?
	/* Array dei file css */
	$css_array = array("file3.css","file2.css");
	foreach($css_array as $css)
	{
		if(file_exists($css))
		include($css);
		echo "\n\n";
	}
?>
</style>

<script type="application/javascript">
//<![CDATA[
<?
	/* Array dei javascript */
	$js_array = array("file1.js","file3.js");
	foreach($js_array as $js)
	{
		if(file_exists($js))
		include($js);
		echo "\n\n";
	}
?>
//]]>
</script>

<!-- File css esterni -->
<link rel="stylesheet" type="text/css" href="file1.css" />

<!-- File javascript esterni -->
<script type="application/javascript" src="file2.js"></script>

</head>
<body>
	<h1>Javascript e Css nella pagina</h1>
	<p>Guarda il codice html</p>
</body>
</html>

Script, demo e download

Per vedere lo script vai a http://test.jblog.it/inhtml/inhtml.txt

Per vedere una demo vai a http://test.jblog.it/inhtml/

Per scaricare l’esempio vai a http://download.jblog.it/inhtml.zip

Eliminare gli script duplicati

Quando si gestiscono grandi progetti si rischia di stampare e richiamare gli stessi script.

Alcuni browser, come Firefox, evitano di effettuare una nuova richiesta http per un file che è stato già scaricato. Purtroppo Internet Explorer non lo fa. Allora è necessario trovare una soluzione che valga per tutti.

Una semplice soluzione consiste nel fare una funzione php che riceva il nome del file da linkare e si occupi di stampare i tag <script>. Per registrare gli script che vengono inseriti di volta in volta si utilizza un array in modo che la funzione, prima di inserire uno script, controlla se il nome dello script non è già presente nell’array.

Normalmente per inserire script e css si dovrebbe scrivere:

<link rel="stylesheet" type="text/css" href="print_style.css" media="print" />
<script src="library.js" type="application/javascript"></script>

Classe PHP: noDuplicate (per php 4 e php 5)

Ti descrivo brevemente la classe “noDuplicate”.

La struttura

class noDuplicate
{
	/* Array dei file javascript */
	var $js_array = array();

	/* Array dei file css */
	var $css_array = array();

	/* Stampa i file specificati. */
	function incScript() { ... }

	/* Privata: registra il file e stampa il link al file javascript */
	function __js($file) { ... }

	/* Privata: registra il file stampa il link al file css */
	function __css($file) { ... }
}

Creare l’oggetto

$noDuplicateObj = new noDuplicate();

La funzione incScript()

• il primo argomento deve essere “js” o “css”
• dal secondo argomento in poi accetta da uno a più file dello stesso tipo
• se si devono inserire file .css è necessario passarli nella forma [nomefile]:[media] (ad es. “style.css:print”). Se vengono passati nella forma normale (“style.css”,”file.css”) verrà automaticamente impostato “all” come media

// singolo file
$noDuplicate->incScript("css","file2.css:all");
$noDuplicate->incScript("js","file1.js");

// più di un file
$noDuplicate->incScript("css","file2.css:all","mystyle.css:screen");
$noDuplicate->incScript("js","file1.js","jquery.js","prototype.js");

// file css senza specificare il "media"
$noDuplicate->incScript("css","file1.css","file3.css");

Risultato

<!-- singolo file -->
<link rel="stylesheet" type="text/css" href="file2.css" media="all" />
<script src="file1.js" type="application/javascript"></script>

<!-- più di un file -->
<link rel="stylesheet" type="text/css" href="file2.css" media="all" />
<link rel="stylesheet" type="text/css" href="mystyle.css" media="screen" />
<script src="file1.js" type="application/javascript"></script>
<script src="jquery.js" type="application/javascript"></script>
<script src="prototype.js" type="application/javascript"></script>

<!-- file css senza specificare il "media" -->
<link rel="stylesheet" type="text/css" href="file1.css" media="all" />
<link rel="stylesheet" type="text/css" href="file3.css" media="all" />

Script, demo e download

Per vedere lo script vai a http://test.jblog.it/rem_duplicate/rem_duplicate.txt

Per vedere una demo vai a http://test.jblog.it/rem_duplicate/

Per scaricare l’esempio vai a http://download.jblog.it/rem_duplicate.zip

Conclusione

Queste tecniche esprimono la massima utilità e potenza se utilizzate contemporaneamente. La riduzione di richieste http e, quindi, l’abbassamento dei tempi di caricamento saranno notevoli.

Spero di essere stato abbastanza esaustivo e chiaro. Se non lo sono stato basterà dirmelo in modo da ritoccare l’articolo nelle sezioni meno comprensibili.

Hai mai utilizzato una di queste tecniche? Gli script hanno funzionato correttamente? È stato semplice metterle in pratica? Hai avuto concreti miglioramenti?

Prossimo appuntamento

L’ultima questione sull’ottimizzazione dei siti web riguarda appunto l’ottimizzazione dei componenti da caricare cioé:

• compressione delle immagini, degli script e dei css
• offuscamento del codice javascript
• utilizzo di gzip per la compressione delle pagine html, script e css

Non perdere il prossimo articolo sull’ottimizzazione dei componenti delle pagine web: codice html, immagini, script e css.

Crediti

• Libro. Creare siti web ad alte prestazioni di Steve Soulders
• WebSiteOptimization – Combine Images to Save HTTP Requests
• Yahoo Developer Network – Best Practices for Speeding Up Your Web Site
• W3C – Objects, Images, and Applets: Image maps
• The Internet Engineering Task Force – The “data” URL scheme
• CssGlobe – Creating easy and useful CSS Sprites
• Foto1: Mast Farm Picnic – 030 di JasonBechtel
• Foto2: Davide Rebellin Argento, la prima medaglia italiana di queste Olimpiadi di olimpiadi.blogosfere.it
• Foto3: Cats Puzzle di kaibara87
• Foto4: icone per sviluppatori
• Foto5: Puzzle di Egan Snow
• Foto6: Do not duplicate di Sam UL

Ajax è una tecnica di programmazione (non un linguaggio) che ti permette di sviluppare applicazioni web interattive. In pratica, grazie ad Ajax puoi aggiornare alcuni dati della pagina senza ricaricare completamente la pagina, migliorando le prestazioni del tuo sito.

In questo articolo: effettuare le richieste e gestire le risposte, formati per lo scambio dati, utilizzare librerie e framework javascript, memorizzare Ajax in cache, evitare risposte duplicate, migliorare l’usabilità delle applicazioni ajax.

Il termine “Ajax” è l’acronimo di Asynchronous JavaScript and XML.

Vedremo che, nonostante la tecnica Ajax preveda l’utilizzo di XML, si potranno utilizzare altri formati per lo scambio dati.

Il termine “Ajax” è stato coniato da Jesse James Garret nel post “Ajax: A New Approach to Web Applications“, il 18 febbraio 2005.

Cosa succede con e senza Ajax

Supponiamo di avere una pagina con un form composto da tre campi di testo: nome, cognome e telefono. Lo script lato-server deve ricevere i tre dati, cercarli nel database e stampare l’indirizzo associato.

Importante. Generalmente, lo script utilizzato con una chiamata Ajax è diverso da quello utilizzato per l’esecuzione senza javascript.

L’esecuzione standard dello script

N.B. i rettangoli tratteggiati indicano cosa viene caricato.

Prima fase. Si carica la pagina html, si scrivono i dati nel form e si inviano al server premendo il pulsante “invia”. Oltre a quelle dei dati, il server riceverà le richieste http degli altri componenti della pagina che dovranno essere ricaricati.

Seconda fase. Il server cerca l’indirizzo nel database, e il browser ricarica completamente la pagina con i nuovi dati o con un messaggio di errore (es. “indirizzo non trovato”).

L’esecuzione dello script utilizzando Ajax

Prima fase. Si carica la pagina html, si scrivono i dati nel form e si inviano al server premendo il pulsante “invia”. Al server arriva solo una richiesta http: quella dei dati inviati. Inoltre vengono stampati i componenti da mostrare successivamente (“tutto ok!”, “i dati … correttamente”, ecc.) nascondendoli con le regole dei css.

Seconda fase. Il server cerca l’indirizzo nel database e, una volta trovato, viene rispedito al browser che aggiornerà il componente riservato all’indirizzo. Gli altri contenuti stampati precedentemente (“tutto ok!”, “i dati … correttamente”, ecc.), vengono resi visibili, mentre i componenti relativi al form vengono nascosti. Per nascondere e mostrare i componenti si utilizzano le regole dei css.

Framework e librerie javascript

Un framework javascript è un insieme di librerie che facilita la scrittura di codice e applicazioni javascript.

Perché utilizzare un framework?

• Ti permette di scrivere in poche righe quello che in javascript “puro” richiderebbe centinaia di righe
• Elimina il problema della compatibilità browser-javascript eseguendo istruzioni diverse a seconda del browser che si sta utilizzando

Ecco i framework più famosi.

Prototype

Prototype is a JavaScript Framework that aims to ease development of dynamic web applications.

http://www.prototypejs.org/

jQuery

jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.

http://jquery.com/

MooTools

MooTools is a compact, modular, Object-Oriented JavaScript framework designed for the intermediate to advanced JavaScript developer. It allows you to write powerful, flexible, and cross-browser code with its elegant, well documented, and coherent API.

http://mootools.net/

Dojo

Solve problems faster. Create better user experiences. Liberally licensed. Everything you need, all in one place.

http://dojotoolkit.org/

Ajax, jQuery e Php all’opera

Generalmente un’applicazione Ajax è composta dalla pagina html e dallo script lato-server da richiamare successivamente via javascript.

Il framework che utilizzo è jQuery, soprattutto perché, nel complesso, è molto più leggero e veloce rispetto agli altri.

Analizziamo ora il codice dell’applicazione Ajax di cui ho parlato prima.

Requisiti. Php 5.2, MySql 5, jQuery 1.3.

Demo dell’applicazione. Puoi provare l’applicazione Ajax qui.

Pagina html e codice javascript

Questa pagina si può dividere in due parti.

• codice html
• codice javascript per la gestione delle chiamate ajax e del codice html

Puoi vedere il file completo qui.

Html

All’interno del tag <body> si possono distinguere due <div>. Il primo (id=”form_panel”) ospita il form e un <h3> per la scrittura degli errori (id=”errors”); il secondo (id=”address_panel”) ospita un <div> (id=”the_address”) in cui si scriverà l’indirizzo trovato.

<body>
	<!-- Area del form -->
	<div id="form_panel">
		<h1>INSERISCI I DATI</h1>
		<h3 id="errors" style="display:none;color:#CC0000;"></h3>
		<form action="">
			<p>
				<div><b>Nome</b> <small>(solo lettere)</small></div>
				<input id="firstname" name="firstname" type="text" value="" />
				<small id="firstname_msg" style="color:#CC0000;"></small>
			</p>
			<p>
				<div><b>Cognome</b> <small>(solo lettere)</small></div>
				<input id="lastname" name="lastname" type="text" size="30" value="" />
				<small id="lastname_msg" style="color:#CC0000;"></small>
			</p>
			<p>
				<div><b>Telefono</b> <small>(numeri, trattino "-", parentesi "(" e ")", spazio " ")</small></div>
				<input id="phone" name="phone" type="text" value="" />
				<small id="phone_msg" style="color:#CC0000;"></small>
			</p>
			<p><input id="send" name="send" type="button" value="Invia" /></p>
		</form>
	</div>

	<!-- Area dell'indirizzo (trovato) -->
	<div id="address_panel" style="display:none;">
		<h1>INDIRIZZO</h1>
		<p id="the_address"></p>

		<a href="#" id="back_to_form">&lt; indietro</a>
	</div>
</body>

Javascript

Il codice javascript viene scritto direttamente nel codice html, ma potrebbe essere scritto in un file esterno (.js).

Vengono specificate 3 funzioni e 3 variabili.

$(document).ready(function(){ … }). In realtà, questa non è una funzione, ma un metodo di jQuery che, al posto dei “…”, consente di specificare il codice javascript da eseguire quando la pagina ha completato il caricamento.

function form_check(). Esegue dei controlli sui valori dei campi e restituisce “true” se non ci sono errori, altrimenti “false”.

function form_ajax_send(). Invia i dati del form allo script “myscript.php”, attende e gestisce la risposta.

var form_msgs = new Array(…). Array degli errori relativi al form (es. “dati non corretti”).

var error_msgs = new Array(…). Array degli errori relativi all’invio e alla risposta dei dati (es. “errore del db”).

var regexps = new Array(…). Espressioni regolari utilizzate in form_check() per controllare i caratteri dei dati inseriti.

L’oggetto XMLHttpRequest

Per inviare richieste http dinamiche bisogna utilizzare l’oggetto XMLHttpRequest. Questo oggetto ha una serie di proprietà e metodi.

Uno dei principali svantaggi legati all’utilizzo di questo oggetto sta nel fatto che non è standardizzato, quindi non è riconosciuto universalmente da tutti i browser. Infatti, Internet Explorer 6 e precedenti lo vedono come un ActiveX da richiamare in maniera diversa rispetto ai browser Mozilla.

La soluzione è quella di utilizzare un framework e lasciare che sia lui a occuparsi di effettuare i controlli di compatibilità e differenziare la chiamata e il funzionamento dell’oggetto XMLHttpRequest.

Per conoscere meglio l’oggetto XMLHttpRequest puoi consultare la pagina ufficiale del w3c (in inglese) oppure la pagina su Wikipedia.

Per approfondire la gestione di Ajax con jQuery puoi leggere la pagina della documentazione ufficiale di jQuery relativa ad Ajax: http://docs.jquery.com/Ajax.

Ajax

Analizziamo le righe di codice javascript relative alla gestione della richiesta e della risposta asincrona.

$.get("myscript.php",{firstname_get:firstname,lastname_get:lastname,phone_get:phone},
	// funzione "callback", cioé eseguita quando vengono restituiti i dati dallo script "myscript.php"
	function(data,status)
	{
		if(status=="success") { ... }
		else { ... } // status=="failure"
	}
);

$.get. Questa funzione effettua una richiesta GET. Alternativamente si poteva utilizzare $.post. A seconda del tipo di richiesta, nell0 script lato server bisogna utilizzare gli array $_GET e $_POST per ottenere i dati inviati.

“myscript.php”. Il primo argomento della funzione $.get. Specifica lo script da utilizzare.

{firstname_get:firstname,lastname_get:lastname,phone_get:phone}. Il secondo argomento della funzione $.get. Questo è un tipo di dati chiamato “Map”, dove “firstname”, “lastname” e “phone” sono le variabili riempite con i valori del form, e “firstname_get”, “lastname_get” e “phone_get” sono i nomi delle variabili passate allo script. Quindi, in myscript.php per leggere il cognome non utilizzeremo $_GET['lastname'] ma $_GET['lastname_get'].

function(data,status). Il terzo argomento della funzione $.get. Rappresenta la funzione “callback”, ovvero la funzione da utilizzare quando si riceve la risposta. Poiché la risposta è asincrona, cioé avviene in un secondo momento rispetto all’invio dei dati, non possiamo scrivere:

if(form_check())
{
	ajax_invia_dati();
	ajax_gestisci_risposta();
}

poiché, quando verrà chiamata la funzione ajax_gestisci_risposta() sicuramente la risposta non sarà ancora arrivata.

Per questo motivo è necessario specificare la cosiddetta funzione “callback” che verrà eseguita non appena ajax fornirà una risposta. Questa funzione ha due parametri: data (dati ricevuti), status (stato della risposta). Se status è “success” significa che tutto è andato a buon fine, altrimenti status sarà “failure”.

Come ottenere l’oggetto XMLHttpRequest. Le funzioni $.get, $.post, ecc. restituiscono l’oggetto XMLHttpRequest che potrà essere utilizzato con tutti i suoi metodi e le sue proprietà.

Script lato server (php)

• Effettua una connessione al database
• Esegue la query con i dati ricevuti
• Stampa una stringa fra queste: “db error”, “no data”, o l’indirizzo trovato

Puoi vedere il file completo qui.

<?php

header('Expires:'.date("D, d M Y H:i:s",time()+2600000).' GMT');
header('Cache-Control:public,max-age=2600000');

$mydb = @new mysqli('localhost', 'root', 'root', 'mydb');

if(mysqli_connect_errno()!=0) { echo 'db error'; }
else
{
	// effettua la query
	$result = @$mydb->query("
	SELECT	`Address`
	FROM	`info`
	WHERE	`Lastname`='".$_GET['lastname_get']."' AND
		`Firstname`='".$_GET['firstname_get']."' AND
		`Phone`='".$_GET['phone_get']."'		;");

	// controlla quanti record sono stati trovati (se 0: indirizzo non trovato)
	if($mydb->affected_rows==0)	{ echo 'no data'; }

	// indirizzo trovato
	else
	{
		$address = $result->fetch_array(MYSQLI_NUM);
		echo $address[0];
	}
}
?>

Dati restituiti dallo script

• “db error”, se si verifica un errore relativo al database (in fase di connessione)
• “no data”, se non viene trovato l’indirizzo
• stringa dell’indirizzo, se viene trovato l’indirizzo

Come impostare lo script per i test

Se vuoi testare lo script è necessario effettuare alcune semplici operazioni.

• All’interno di myscript.php individua la riga $mydb = @new mysqli(‘localhost’, ‘root’, ‘root’, ‘mydb’); e sostituisci i valori del tuo database: host, username, password, database.
• Crea la tabella “info” nel tuo database. Nello script c’è una query (CREATE TABLE … ) da copiare e far eseguire subito dal tuo dbms (es. phpMyAdmin). Se la crei manualmente è necessario creare 5 campi chiamati ID, Lastname, Firstname, Phone, Address.
• Infine, inserisci un paio di record in modo che l’applicazione Ajax possa trovare qualc0sa nella tabella.

Formati di scambio dati

Per i dati da inviare come risposta possono essere utilizzati vari formati: testo semplice, html, xml, json, ebml.

Lo script dell’esempio precedente stampa testo semplice.

Testo semplice e html

Preferibile se si devono sviluppare applicazioni semplici che non richiedono massicci scambi di dati e complesse elaborazioni.

Il maggior vantaggio sta nel fatto che testo semplice e codice html non richiedono ulteriori elaborazioni per rendere i dati rappresentabili all’interno di una pagina xhtml o html.

Json

Json, acronimo di JavaScript Object Notation,  è un ottimo formato per lo scambio dati.

Si possono rappresentare oggetti e array:

var object = { name : "Giacomo", phone: "123456789", object2: { msg: "Ciao" } };
var array = ["mystring", 100, { msg: "Ciao" }, object, 5*2, 0.134];

Per processare una risposta in formato Json, anziché $.get è necessario utilizzare$.getJson. Questa funzion processa automaticamente una risposta in formato Json in modo da poter utilizzare subito i dati.

Ad esempio, se la risposta è:

var object = { name : "Giacomo", phone: "123456789", object2: { msg: "Ciao" } };
var array = ["mystring", 100, { msg: "Ciao" }, object, 5*2, 0.134];

all’interno della funzione “callback” potremmo utilizzare le due variabili scrivendo semplicemente:

object.name.length; // per ottenere la lunghezza della stringa "Giacomo"
alert(object.object2.msg); // per stampare un alertbox con il messaggio "Ciao"
newvar = array[4] + 3; // per assegnare alla variabile newvar il valore (5*2)+3, cioé 13

Per saperne di più vai alla pagina ufficiale di Json: http://json.org/.

XML

XML, acronimo di eXtensible Markup Language, è un metalinguaggio di markup che permette di definire tag personalizzare per strutturare documenti complessi. Una volta ottenuta una risposta formattata in XML è necessario elaborarla per poterla gestire.

La lettura e l’elaborazione di un testo XML consiste nello scorrere la struttura del documento per recuperare i dati contenuti nei tag XML. Per scorrere la struttura del documento esistono librerie javascript che consentono di farlo semplicemente.

Utilizzare questo formato è vantaggioso nel caso in cui ci siano molti dati da ricevere, mentre è sconsigliabile nel caso in cui ricevano pochi dati in quanto i caratteri per i tag XML potrebbero superare quelli per i dati effettivi.

Memorizza le risposte Ajax in cache per evitare richieste duplicate

Come detto prima, le risposte Ajax non sono altro che risposte HTTP e, come in tutte le risposte HTTP, possono essere inviati gli header.

Naturalmente, gli header devono essere inviati dallo script lato server, prima di qualsiasi output.

Per memorizzare le risposte Ajax nella cache si possono utilizzare i campi di intestazione Cache-Control, Expires, Pragma, ETag. Nei casi in cui non si possa utilizzare la cache del browser ricorreremo a una tecnica javascript.

Per approfondire la gestione della cache dai uno sguardo al post precedente: http://jblog.it/2009/04/24/ridurre-richieste-http-come-utilizzare-cache-browser_124.html.

Richieste GET e POST: come si comporta il browser

Nell’esempio, utiliziamo un solo script lato server che restituisce 3 output diversi a seconda dell’esito dell’operazione: “db error” per l’errore del database, “no data” se non è stato trovato l’indirizzo, e la stringa dell’indirizzo trovato nel database.

Ti consiglio di leggere questo interessante articolo (in inglese) del w3c: URI, indirizzabilità, e l’uso di GET e POST.

Il comportamento del browser cambia in base al tipo di richiesta (GET e POST) e agli header inviati dallo script lato server. Analizziamo alcuni casi più da vicino.

Le richieste GET

L’indirizzo di una richiesta GET ha la forma:

http://localhost/ajax_phone/myscript.php?par1=ciao&par2=hello

Il comportamento di default del browser consiste nell’inviare sempre una nuova richiesta.

Tuttavia, se vogliamo che il browser memorizzi per 1 ora la risposta dello script lato server, inviamo i seguenti header:

header('Expires:Sun, 03 May 2009 23:18:45 GMT');
header('Cache-Control:public,max-age=3600');
header('Pragma:public');

In questo caso, quando l’applicazione Ajax invia la prima richiesta, il browser legge lo script e lo memorizza in cache. La volta successiva possono verificarsi due casi:

• se si inviano dei dati diversi (ad es., se invece di “par2=hello” inviamo “par2=welcome”) il browser effettua una nuova richiesta e la memorizza in cache
• se si inviano gli stessi dati, il browser si accorge che l’indirizzo della richiesta è uguale, quindi legge i dati dalla cache evitando di effettuare una nuova richiesta

Differenziare gli header. Se alcune richieste non devono essere memorizzate in cache, puoi inviare degli header diversi a seconda dell’ouput generato dallo script (prima di stampare qualsiasi output). Ad esempio:

if($output!="error")
{
	header('Expires:Sun, 03 May 2009 23:18:45 GMT');
	header('Cache-Control:public,max-age=3600');
	header('Pragma:public');
}
else
{
	header('Expires:Sun, 01 Jan 1970 02:00:00 GMT');
	header('Cache-Control:no-cache');
	header('Pragma:no-cache');
}

Forzare la richiesta. Per fare in modo che il browser effettui una nuova richiesta, anche se questa è già presente nella cache, basta inviare un ulteriore parametro con un valore variabile, ad esempio un numero casuale.

$.get("myscript.php",{firstname_get:firstname,lastname_get:lastname,phone_get:phone,random:Math.random()},
	function(data,status){...});

Le richieste POST

L’indirizzo di una richiesta POST ha la forma:

http://localhost/ajax_phone/myscript.php

E i parametri? Vengono inviati tramite protocollo HTTP, ma non sono visibili al browser.

Le richieste POST non possono essere memorizzate in cache.

Come evitare le richieste duplicate

Abbiamo visto che le richieste POST non possono essere memorizzate in cache.

Tuttavia è possibile evitare le richieste duplicate grazie a qualche riga di javascript.

Questa tecnica consiste nel memorizzare i dati inviati e ricevuti in un array, in modo che, prima di inviare una richiesta, si controlla se i dati da inviare sono già presenti nell’array. Se sono presenti, si leggono i dati ricevuti in corrispondenza dei dati richiesti e si procede con l’esecuzione dell’applicazione.

var my_array() = new Array();

/* Una volta riempito l'array avrà questo aspetto
myarray = Array(
	Array( Array('Mario','Rossi',3429752370), 'no data' ),
	Array( Array('Giacomo','Ratta',4325233), 'Via Beethoven, 21' ),
);
*/

Ogni elemento dell’array è un array di due elementi. Il primo è l’array dei dati inviati; il secondo è la stringa dell’output restituito.

// Esegue le operazioni con i dati ricevuti
function esegui_le_operazioni(data) { ... }

if(form_check())
{
	// Leggo i valori dei 3 campi del form
	firstname = $('#firstname').val();
	lastname = $('#lastname').val();
	phone = $('#phone').val();

	// Indica se sono state trovate i dati da inviare
	// Contiene l'indice dell'elemento contenente dati inviati e dati ricevuti
	found = -1;

	// Cerco i dati nell'array
	for(i=0;i<my_array.length;i++)
	{
		// (riga da adattare in base alle proprie esigenze)
		if(my_array[i][0][0]==firstname && my_array[i][0][1]==lastname && my_array[i][0][1]==phone)
		{ found=i; break; }
	}

	// I dati sono stati trovati
	if(found>=0)
	{
		esegui_le_operazioni(my_array[found][1]);
	}

	// Dati non trovati: nuova richiesta
	else {
		$.get("myscript.php",{firstname_get:firstname,lastname_get:lastname,phone_get:phone},
		// funzione "callback", cioé eseguita quando vengono restituiti i dati dallo script "myscript.php"
		function(data,status)
		{
			if(status=="success")
			{
				// Inserisco dati inviati e dati ricevuti nell'array
				// riga da adattare in base alle proprie esigenze)
				my_array.push(new Array(new Array(firstname,lastname,phone), data));

				esegui_le_operazioni(data);
			}
			else { ... } // status=="failure"

		}); //end-callback

	} //end-if
}

Quando utilizzare GET e quando POST

• Il metodo GET è da preferire quando si devono inviare dati per il normale funzionamento della pagina e degli script
• Il metodo POST si deve utilizzare quando quelli da scambiare sono dei dati sensibili (username, password, telefono)

Migliorare l’usabilità e l’accessibilità delle applicazioni Ajax

Spesso nella progettazione delle applicazioni Ajax l’usabilità lascia un po’ a desiderare: nessun messaggio di successo/errore, caricamenti infiniti senza segni di vita, ecc.

Certo, l’usabilità è un tema complesso e progettare siti e applicazioni usabili richiede tempo e buone competenze.

Tuttavia, ci sono alcune cose che devono essere fatte e che, fortunatamente, non richiedono troppo tempo.

Potrai vedere queste modifiche nello script di esempio.

Errori e messaggi

• Ogni campo di input deve avere la relativa area dedicata ai messaggi di errore (“dati obbligatori”, “caratteri non validi”, ecc.)
• La pagina deve avere un’area destinata ad ospitare i messaggi relativi all’esecuzione dello script (“ricerca eseguita con successo”, “errore dell’applicazione”, “errore del database”, ecc.)

Barra di caricamento

Nella maggior parte della applicazioni, per motivi tecnici, non è possibile inserire una barra di caricamento che rilevi la percentuale reale dei dati caricati fino a quel momento.

Generalmente, si preferisce mostrare un’immagine gif che può essere una barra di caricamento o un’animazione generica in modo che faccia sapere all’utente che l’applicazione sta lavorando.

Svantaggio. Durante il caricamento dei dati si potrebbe verificare un malfunzionamento che non blocca la richiesta. In questo caso il caricamento sarebbe infinito provocando l’abbandono del sito da parte dell’utente.

Soluzione 1. Puoi inserire un pulsante da far premere all’utente per fermare la richiesta http.

<button type="button" onclick="stopAjaxRequest();">Stop</button>

Soluzione 2. Analizza il tuo script e prevedi un tempo massimo entro cui restituire l’output, e, con javascript, impostare un timer che faccia fermare la richiesta Ajax una volta trascorso il tempo previsto.

// esegue la funzione stopAjaxRequest() dopo 10 secondi
setTimeout(stopAjaxRequest(),10000);

Come creare la funzione stopAjaxRequest().

• L’oggetto XMLHttpRequest ha il metodo abort() che permette di fermare una richiesta http.
• Le funzioni $.ajax, $.get, $.post, $.getScript, $.getJSON di jquery restituiscono un oggetto XMLHttpRequest.

1. Creiamo una variabile globale per l’oggetto XMLHttpRequest, che chiamiamo XHR

var XHR;

2. Creiamo la funzione stopAjaxRequest() che richiama XHR ed esegue il metodo abort()

function stopAjaxRequest() { XHR.abort(); }

3. Assegnamo a XHR l’oggetto restituito dalla funzione $.get che utilizziamo per inviare i dati

XHR = $.get("myscript.php",{firstname_get:firstname,lastname_get:lastname,phone_get:phone},
	function(data,status) { ... });

Se javascript è disabilitato…

Purtroppo, ancora oggi ci sono utenti che utilizzano browser che non eseguono codice javascript, che hanno scarsa compatibilità oppure con javascript disattivato.

La soluzione è quella di progettare applicazioni che funzionino sia con javascript che senza.

Questo potrebbe andare bene per la piccola applicazione Ajax realizzata per questo post. Tuttavia, se le applicazioni sono di un certo livello, il carico di lavoro aumenta notevolmente. Quindi progettare applicazioni ibride ha senso solo quando le applicazioni da realizzare devono offrire il massimo della compatibilità con i browser usati dagli utenti (ad es. siti governativi, pubblica amministrazione, ecc.)

Secondo me, data la piccola percentuale di browser non compatibili e di utenti che disattivano (erroneamente) javascript, e la presenza di siti importanti come ebay, microsoft, youtube che non offrono l’alternativa “no javascript”, si può benissimo sviluppare un sito senza preoccuparsi degli utenti che non potranno eseguire javascript.

Nel tag <noscript> è possibile inserire il codice html da eseguire in caso di “javascript disabilitato”.

Alcune volte l’ho utilizzato per nascondere dei componenti che avevano senso solo con javascript disabilitato. Lo so… sintatticamente non è corretto, però potrebbe esserti utile.

Supponiamo di avere un link che fa apparire un alert:

<a id="alert_click" href="#" onclick="javascript:alert('Ciao!');">Clicca qui</a>

Per nasconderlo, in caso di javascript disabilitato, scriviamo:

<noscript>
<style type="text/css">
#alert_click { display:none; }
</style>
</noscript>

Svantaggi di Ajax

• Le chiamate effettuate non vengono registrate nella cronologia, a differenza di quanto avviene utilizzando iframe nascosti
• I pulsanti “avanti” e “dietro” non sono utilizzabili poiché le chiamate Ajax non vengono memorizzate nella cronologia
• L’utilizzo esclusivo di javascript viola il requisito 15 della legge Stanca: “la pagina deve essere fruibile anche in assenza di script”
• L’oggetto XMLHttpRequest non è compatibile con tutti i browser. Internet Explorer 6 e precedenti lo vedono come oggetto ActiveX, e il browser potrebbe essere impostato a un livello di sicurezza tale da non permettere l’esecuzione di controlli ActiveX
• L’oggetto XMLHttpRequest può comunicare solo all’interno del dominio. Se la destinazione è esterna al dominio bisogna creare un proxy lato server per poter comunicare all’esterno.
• Poiché i motori di ricerca non eseguono codice javascript, essi non possono indicizzare i contenuti generati dinamicamente con javascript e Ajax

Libri e risorse utili

Ajax. Guida per lo sviluppatore. Seconda edizione. Hoepli (2007).

Con Ajax guida per lo sviluppatore scoprirete come sfidare le regole tradizionali di quello che può accadere sul Web e come liberarvi del consueto approccio “click and wait”, approfondendo le tecniche, i pattern e i casi di utilizzo di Ajax, così da crearvi un’esperienza d’uso senza precedenti nelle vostre applicazioni.

Link: http://www.hoepli.it/editore/visbook.asp?id=978-88-203-3923-4.

Ajax e Php. Sviluppare applicazioni web dinamiche. Hoepli (2007)

AJAX e PHP. Sviluppare applicazioni web dinamiche è la risorsa più pratica ed efficiente che possiate utilizzare per entrare nell’entusiasmante mondo di AJAX. Questo libro vi spiegherà infatti come creare applicazioni web in PHP che sfruttino al massimo le tecnologie Ajax.

Link: http://www.hoepli.it/libro/ajax-php.asp

Siti e pagine

Ajax: A New Approach to Web Applications

W3C: The XMLHttpRequest Object

Wikipedia: l’oggetto XMLHttpRequest

jQuery: Ajax

JSON.org

Ridurre le richieste HTTP (parte 1): come utilizzare la cache del browser

W3C: URIs, Addressability, and the use of HTTP GET and POST

In questo articolo parlo della cache dei browser, come e perché gestirla. Vedrai cos’è una richiesta http, un’intestazione http e le tre tecniche principali per istruire il browser su come dovrà comportarsi con gli elementi di una pagina, cioé, quando leggerli dal server d’origine e quando caricarli dalla cache.

Cos’è una richiesta http?

Quando il browser visita un sito apre una connessione con l’host (il server che ospita il sito), composta da una richiesta e da una risposta. Supponiamo di voler visitare la pagina http://jblog.it/informazioni.html.

La richiesta http che invia il browser

GET /informazioni HTTP/1.1
Host: jblog.it
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; it; rv:1.9.0.8) Gecko/2009032609 Firefox/3.0.8
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: it
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive: 300
Connection: keep-alive

La risposta http

HTTP/1.1 200 OK
Date: Fri, 24 Apr 2009 10:26:08 GMT
Server: Apache
Keep-Alive: timeout=15, max=100
Connection: Keep-Alive
Transfer-Encoding: chunked
Content-Type: text/html; charset=UTF-8

Le informazioni inviate e restituite potrebbero essere molte di più, ognuna ha un suo preciso significato, e possono essere controllate e gestite via codice (lato client e lato server). Sul sito del w3c puoi trovare l’elenco completo dei campi di intestazione delle connessioni http: http://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html.

La prima riga della richiesta: GET /informazioni HTTP/1.1

In questa riga si trovano sostanzialmente tre informazioni: il tipo della richiesta (GET, POST, HEAD, PUT, DELETE, OPTIONS, TRACE), l’indirizzo della risorsa (/informazioni) e il protocollo con cui si effettua la richiesta (HTTP/1.1).

La prima riga della risposta: HTTP/1.1 200 OK

Il codice 200 indica il successo della risposta http. Esistono vari codici numerici per indicare l’esito della risposta http. Ad esempio, il classico codice 404 indica che non è stata trovata la risorsa specificata nella richiesta http. Se ti interessa puoi trovare una lista completa su wikipedia: http://it.wikipedia.org/wiki/Elenco_dei_codici_di_stato_HTTP.

Perché bisogna ridurre le richieste http?

Il numero di richieste http dipende dal numero di elementi da caricare. Ad esempio, se in una pagina ci sono 2 immagini e 1 foglio di stile il browser effettuerà 4 richieste http (una è per il codice html della pagina).

Come avrai ben capito, la regola è “ridurre gli elementi della pagina”, o meglio “ottimizzare gli elementi di una pagina senza eliminarne nessuno”. Con “ottimizzare” non intendo “ridurre la loro dimensione”. Infatti riducendo la dimensione degli elementi avresti un miglior tempo di caricamento mantenendo lo stesso numero di richieste http.

Ottimizzare o ridurre?

Senza dubbio è importantissimo ottimizzare la qualità e le dimensioni dei componenti di una pagina, ma una singola richiesta http è molto più gravosa di qualche kbyte in più. Ecco perché ridurre le richieste http è fondamentale.

I campi di intestazione del protocollo HTTP per gestire la cache

Il protocollo HTTP 1.1 ha alcuni campi di intestazione (o header fields) che consentono di fornire alcune informazioni riguardo un file (data, ultima modifica, periodo, ecc.) e controllare la cache.

Cache-Control

Specifica le direttive che devono rispettare tutti i metodi di caching dei componenti restituiti. Le direttive di cache-control:

1. sovrascrivono gli algoritmi di caching di default
2. non possono essere specificate per una singola cache (se si utilizza un proxy o un gateway)
3. sono unidirezionali, cioè non implicano che la risposta abbia le stesse direttive

Alcune direttive possono essere utilizzate solo in fase di richiesta o solo in fase di risposta.

• direttive di richiesta: no-cache, no-store, max-age, max-stale, min-fresh, no-transform, only-if-cached, cache-extension.
• direttive di risposta: public, private, no-cache, no-store, no-transform, must-revalidate, proxy-revalidate, max-age, s-maxage, cache-extension.

public. La risposta può essere memorizzata in qualsiasi cache. Utile se si utilizza una cache condivisa.

private. La risposta non deve essere memorizzata nella cache condivisa.

no-cache. Evita che la risposta venga memorizzata in cache. SOLO in fase di risposta è possibile scrivere no-cache="field-name", dove field-name è il nome di un campo di intestazione che non si vuole memorizzare in cache. In pratica, quando una risposta (ad es. una pagina) viene memorizzata in cache, vengono memorizzati anche i suoi campi di intestazione. Se uno di quei campi è “Set-Cookie” e non vogliamo che venga memorizzato in cache basterà scrivere no-cache="Set-Cookie". In tal modo la pagina verrà comunque memorizzata in cache senza il campo di intestazione “Set-Cookie”. L’utilità? Dato che “Set-Cookie” crea un cookie, memorizzandolo con la pagina, quando si riutilizzerà la versione in cache verrà creato nuovamente il cookie.

no-store. Evita che la risposta venga memorizzata permanentemente nella memoria non-volatile. Questa direttiva si applica a qualsiasi tipo di cache (condivisa e non). La sua utilità consiste nel fatto che si impedisce la memorizzazione di vecchie versioni di pagine e documenti che vengono costantemente aggiornati.

s-maxage. Specifica il periodo (in secondi) dopo il quale devono essere aggiornate le risposte nella cache condivisa. Questa direttiva sovrascrive la direttiva max-age e il campo di intestazione expires.

max-age. Indica che il client è disposto ad accettare una risposta con un periodo (in secondi) maggiore di quello specificato. Se non è specificata la direttiva max-stale, il client non accetterà una risposta datata.

min-fresh. Indica che il client è disposto ad accettare una risposta che sia aggiornata almeno a un dato periodo (in secondi).

max-stale. Indica che il client è disposto ad accettare una risposta che supera la sua scadenza di un certo numero di secondi.

only-if-cached. Consente di caricare un contenuto solo se in cache è presente una sua versione, altrimenti non viene restituita alcuna risposta. Questa direttiva è utile nelle reti particolarmente lente.

must-revalidate. Poichè una cache può essere configurata in modo che ignori il tempo di scadenza di una risposta, questa direttiva consente di forzare l’aggiornamento di una risposta già memorizzata in cache. Questa direttiva viene sempre rispettata dal browser.

proxy-revalidate. Ha gli stessi effetti di must-revalidate, ma solo sulla cache condivisa.

no-transform. Evita che una cache intermedia (ad es. di un proxy) manipoli la risposta per risparmiare risorse. Infatti può succedere che un proxy comprima un’immagine per risparmiare spazio. Questa direttiva è utile nel caso di immagini da trasmettere fedelmente (ad es. in campo medico) in cui ogni pixel deve rimanere al suo posto.

Expires

Indica una data (con l’ora) a partire dalla quale la risposta memorizzata in cache deve essere considerata “vecchia”, quindi essere aggiornata.

La data deve essere espressa in un preciso formato definito dal protocollo HTTP. Ad esempio: Tue, 03 Nov 2007 17:30:00 GMT.

Expires: Tue, 03 Nov 2007 17:30:00 GMT

Pragma

Indica che la risposta non deve essere memorizzata in cache. L’unica direttiva è appunto “no-cache”.

In pratica esegue la stessa funzione di cache-control=”no-cache”, ma è necessario utilizzarla per mantenere la compatibilità con la versione 1.0 del protocollo HTTP.

Pragma: no-cache

ETag

Gli ETag o Entity Tag rappresentano un modo semplice ed efficiente per determinare se la risposta nella cache corrisponde a quella che si trova nel server di origine. Concretamente un ETag non è altro che una stringa che identifica univocamente una risposta memorizzata in cache.

Com’è composta la stringa? Non ha dei valori predefiniti ma deve essere creata in base a dei valori che potrebbero identificare la versione di una risposta. Generalmente si preferisce identificare le risposte in base alla data dell’ultima modifica e alla dimensione. Queste due informazioni vengono compresse in modo da formare un’unica stringa di dimensioni contenute, ad esempio utilizzando algoritmi di hashing come md5.

Gli svantaggi. L’unico svantaggio è che il formato e il valore di un ETag cambia da server a server. Se un determinato file risiede su più server nella stessa directory, con identiche dimensioni, permessi, timestamp, a seconda del server da cui si legge. La soluzione consiste nel creare il valore dell’ETag con un semplice script lato-server. In pratica, per avere dei benefici dagli ETag è necessario gestirli completamente con degli script lato-server, altrimenti è meglio non utilizzarli. Ecco un esempio di script.

ETag: "0401g4ff812fgk12gqg2g4j7"

Last-Modified

Rappresenta la data e l’ora dell’ultima modifica del file sul server d’origine nella forma, ad esempio, Tue, 03 Nov 2007 17:30:00 GMT.

Questo campo di intestazione è utile soprattutto nelle pagine dinamiche in cui vengono stampati dei dati ricavati da un database, o nei file creati dinamicamente (ad es. un foglio di stile che ne unisce 5 per evitare di avere 5 richieste http).

If-Match

Fornisce un metodo efficiente per controllare se la risposta ottenuta corrisponde a quella memorizzata in cache, utilizzando gli ETag, ed eventualmente aggiornarla. Viene anche usata per evitare modifiche accidentali sull’errata versione di una risorsa.

If-Match:* oppure If-Match:0401g4ff812fgk12gqg2g4j7

Nel primo caso, il carattere “*” è un carattere speciale e il campo fa corrispondere tutti i componenti di una risposta.

Nel secondo caso, il campo di intestazione fa corrispondere l’ETag con la stringa specificata.

If-None-Match

Fornisce un metodo efficiente per controllare se la risposta ottenuta corrisponde a quella memorizzata in cache, utilizzando gli ETag, ed eventualmente aggiornarla.

Al contrario di If-Match non si deve avere la corrispondenza con l’ETag confrontato o con il carattere “*”.

If-None-Match:* oppure If-Match:0401g4ff812fgk12gqg2g4j7

If-Modified-Since

Fornisce un metodo automatico per aggiornare la versione in cache di una risposta che non è stata modificata da una certa data (e ora) nel formato: Tue, 03 Nov 2007 17:30:00 GMT. Se la risposta è stata modificata a partire dalla data specificata si effettua l'aggiornamento della versione in cache, altrimenti viene restituita la versione memorizzata in cache.

If-Modified-Since: Sat, 12 Oct 2008 20:12:00 GMT

If-Unmodified-Since

Fornisce un metodo automatico per aggiornare la versione in cache di una risposta che non è stata modificata da una certa data (e ora) nel formato: Tue, 03 Nov 2007 17:30:00 GMT. Se la risposta NON è stata modificata a partire dalla data specificata si effettua l'aggiornamento della versione in cache, altrimenti viene restituita la versione memorizzata in cache.

If-Unmodified-Since: Sat, 12 Oct 2008 20:12:00 GMT

If-Range

Se la versione in cache di una risposta è parziale, questo campo di intestazione permette di ottenere solo la parte mancante. La condizione fallisce se la risorsa richiesta è stata modificata. In questo caso sarà effettuata una seconda richiesta per ottenere una risposta completa che aggiorni la versione memorizzata in cache.

If-Range: Sat, 12 Oct 2008 20:12:00 GMT

If-Range: 0401g4ff812fgk12gqg2g4j7

Nel primo caso si confronta la data dell’ultima modifica, mentre nel secondo caso si confronta la stringa dell’ETag.

Come utilizzare i campi di intestazione

In questo paragrafo non troverai una ricetta pronta per gestire la cache perché non so quali sono le tue esigenze. Leggi attentamente il paragrafo precedente per decidere le operazioni da effettuare in ogni pagina e risorsa del tuo sito.

Il mio consiglio è quello di analizzare i contenuti delle tue pagine (attuali e futuri) e decidere se memorizzare in cache una particolare risorsa, come gestire la versione della cache, il tempo di validità, ecc.

Se nel paragrafo precedente alcuni punti sono spiegati male, manca qualcosa o ci sono errori  fammelo sapere e correggerò tutto al più presto.

Ci sono tre metodi per impostare i campi di intestazione:

1. impostando il tag <meta>
2. all’interno del proprio codice lato-server (php, asp, cgi, ecc.)
3. configurando il web server Apache tramite il file .htaccess o il file principale httpd.conf

1. Impostare i tag <meta>

Sicuramente conoscerai già il tag <meta>. Probabilmente l’avrai utilizzato per inserire description e keywords nelle tue pagine web, per migliorare l’indicizzazione del tuo sito da parte dei motori di ricerca.

Per ogni campo di intestazione che decidi di utilizzare devi:

• creare un tag <meta> con gli attributi “http-equiv” e “content”
• scrivere il nome del campo nell’attributo ”http-equiv”, rispettando le lettere maiuscole e minuscole
• scrivere il valore del campo nell’attributo “content”

Esempi

<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="Tue, 03 Nov 2007 17:30:00 GMT" />

2. Il codice lato-server

Ogni linguaggio di programmazione ha la sua funzione per inviare un campo di intestazione.

Al momento l’unico linguaggio che conosco è PHP, con cui basterà scrivere header("Cache-Control: no-cache"); .

I campi di intestazione vanno scritti prima di qualsiasi output sulla pagina, altrimenti si verifica un errore che in sostanza dice “impossibile modificare l’intestazione – gli header sono stati già inviati”.

Tutto qui? In teoria non ci sarebbe altro… Posso solo aggiungere delle situazioni in cui diventa fondamentale utilizzare la funzione header.

Combinare più fogli di stile

Per diminuire le richieste http è una buona abitudine combinare più fogli di stile in uno solo. Si potrebbe fare manualmente, ma se in futuro vorrai effettuare delle modifiche dovrai modificare i singoli file e ricombinarli oppure modificare il file grande con la difficoltà di aver a che fare con centinaia di righe di codice.

Il metodo è quello di creare un file .css in cui inserire uno script php che permetta di stampare al suo interno tutti i file .css da te specificati. Dovrai inoltre impostare Apache affinché processi i file .css come file .php .

Per file dinamici di questo tipo sarà necessario richiamare più volte la funzione header all’inizio del file in modo da inviare i campi di intestazione riguardanti la gestione della cache.

Questo argomento farà parte del prossimo articolo su come combinare e ottimizzare immagini, css e script.

Ecco un semplice script php.

< ?
$files = array("css1.css","css2.css");
$mtime = 0;
$this_mtime = 0;
ob_start();
foreach($files as $file)
{
	if(file_exists($file))
	{
		include($file); /* includo il file */
		$this_mtime = filemtime($file); /* leggo la data dell'ultima modifica */
		if($mtime < $this_mtime) $mtime=$this_mtime;
	}
}
$lenght = ob_get_length(); /* lunghezza del contenuto */
$content = ob_get_contents(); /* il contenuto nella variabile $content da stampare successivamente */ ob_end_clean();

/* Headers */
header("Content-Type: text/css");
header("Last-Modified: ".date("D, d M Y H:i:s",$mtime)." GMT");
header("Content-Length",$lenght);
header("ETag: ".md5("compressed.css".$lenght.$mtime)); /* il file si chiama compressed.css */
header("Cache-Control: max-age=345600");

/* Stampo il contenuto */
echo $content;
?>

• per calcolare l’ultima modifica da inviare nel campo di intestazione “Last-Modified” sarà quella del file che è stato modificato più recentemente
• nell’ETag inserisco anche il nome del file per aumentare l’univocità dell’ETag

Come ultima operazione inserire nel file .htaccess la riga:

AddHandler application/x-httpd-php .css

Questa riga fa in modo che Apache processi i file css come file php.

Pagine dinamiche e database

Quando una pagina “dinamica” ha sempre gli stessi dati per diversi giorni è importante fare in modo che un utente, a partire dalla seconda visita, non ricarichi una nuova versione di quella pagina ma legga la versione memorizzata in cache.

Nei cms, come in Wordpress, c’è una netta separazione fra template e codice. In alcuni non è possibile creare un template per una singola pagina per altri, come Wordpress, si. Tuttavia, secondo me, è totalmente inutile creare un template per scrivere solo i tag <meta> e avere una gestione personalizzata della cache per quella pagina. Per questo motivo conviene inviare i campi di intestazione all’interno del codice.

Una prima idea è quella di definire delle condizioni per cui dei record restituiti dal database devono essere considerati “vecchi”, e in base a queste ed altre condizioni inviare gli opportuni valori dei campi di intestazione.

3. Configurare il web server Apache

Per gestire la cache con Apache è necessario caricare i moduli mod_expires e mod_headers.

Caricare i moduli

• cerca e apri il file httpd.conf
• individua la lunga lista di “mod_…”
• individua le righe con “mod_expires” e “mod_header”
• elimina (se c’è) il carattere “#” che si trova prima del nome dei moduli che vuoi attivare
• riavvia il server Apache

A questo punto, nel file .htaccess bisogna definire le regole che consentono di gestire la cache a seconda del tipo o estensione dei file richiesti durante le connessioni http.

Il modulo mod_expires

Per conoscere meglio questo modulo ti consiglio di andare a leggere la guida ufficiale di Apache (in inglese): http://httpd.apache.org/docs/2.2/mod/mod_expires.html.

Il modulo mod_headers

Per conoscere meglio questo modulo ti consiglio di andare a leggere la guida ufficiale di Apache (in inglese): http://httpd.apache.org/docs/2.2/mod/mod_headers.html.

Gestione della cache in base all’estensione

ExpiresActive On
ExpiresDefault A300
<FilesMatch ".html$">
	Expires A86400
</FilesMatch>
<FilesMatch ".(gif|jpg|png|js|css)$">
	Expires A2592000
</FilesMatch>

• la prima riga (ExpiresActive) attiva il modulo “mod_expires”
• la seconda riga (ExpiresDefault) imposta un valore di default del campo di intestazione “Expires” pari a 300 secondi
• il primo blocco <FilesMatch> fa in modo che tutti i file html abbiano il campo di intestazione “Expires” con il valore 86400 secondi
• il secondo blocco <FilesMatch> fa in modo che tutti i file gif, jpg, png, js, css abbiano il campo di intestazione “Expires” con il valore 2592000 secondi
• la lettera A indica che il valore viene impostato dopo l’accesso al file, mentre la lettera M imposterebbe il valore dopo la modifica al file

Svantaggi. Spesso capita che alcuni file, benché siano dello stesso tipo, abbiano estensioni diverse. Ad esempio, le immagini con una compressione Jpeg possono avere l’estensione jpg oppure jpeg. Quindi se capitasse un file jpeg non si avrebbe la corrispondenza.

Gestione della cache in base al tipo MIME

Per assicurarci di individuare tutti i file di un certo tipo è necessario leggere il loro tipo MIME.

ExpiresActive On
ExpiresDefault A300
ExpiresByType text/css "access plus 1 day"
ExpiresByType text/javascript "access plus 3 days"
ExpiresByType image/png "access plus 2 months"

Forzare l’aggiornamento dei componenti

Se si utilizzano dei componenti che devono essere sempre aggiornati spesso non basta scrivere i campi di intestazione "Cache-Control: no-cache" e "Pragma: no-cache". Esistono infatti prove documentate sul fatto che a volte questi campi vengono ignorati dai browser.

Quando utilizzavo un script captcha notavo che non si aggiornava l’immagine, il che era davvero un problema in quanto se l’utente sbagliava il codice doveva ricaricarsi la pagina con una nuova immagine.

La soluzione consiste nello scrivere l’indirizzo dell’immagine con un elemento dipendente dal tempo. Quindi, invece di scrivere:
<img src="myimage.jpg" alt="La mia immagine" />

si cambierà l’indirizzo in:
<img src="myimage.jpg?<? echo time(); ?>" alt="La mia immagine" />
dove la funzione time() restituisce data e ora attuali in numeri interi (ad es. 11022103710).

Nel caso si utilizzi l’immagine come sfondo, anziché scrivere:
<div style="background:#000 url('img/blackback.png') no-repeat left bottom"></div>

si dovrà modificare l’indirizzo in:
<div style="background:#000 url('img/blackback.png?<? echo time(); ?>') no-repeat left bottom"></div>

Uno dei possibili svantaggi sta nel fatto che non tutti i file possono essere processati con il compilatore php. Se vuoi che un file .js (javascript) o .css (foglio di stile) venga processato come un file php basterà aggiungere al file .htaccess le seguenti righe:

AddHandler application/x-httpd-php .css
AddHandler application/x-httpd-php .js

Per concludere, scrivendo questo articolo ho scoperto un mondo riguardo la cache e la sua gestione, ed ho capito che gestire adeguatamente la cache permette di ottimizzare notevolmente il caricamento delle pagine di un sito web.

Come utilizzavi la cache fino ad oggi? Ti limitavi a scrivere i tre tag <meta> o avevi già pensato di iniziare a utilizzare la cache più seriamente? Ti sembra importante o è solo una mia impressione? L’articolo è scritto bene o manca qualcosa?

Non perdere il prossimo articolo: “Ridurre le richieste HTTP (parte 2): combinare e ottimizzare immagini, script e css”.

Crediti

• Libro. Creare siti web ad alte prestazioni: http://www.tecnichenuove.com/libri/creare_siti…
• Guida ufficiale di Apache: http://httpd.apache.org/docs/2.2/
• Use Server Cache Control to Improve Performance: http://websiteoptimization.com/speed/tweak/cache/
• Foto1: http://www.flickr.com/photos/aureusbay/297387489/
• Foto2: http://www.flickr.com/photos/thingsarebetterwithaparrott/1054908626/
• Foto3: http://www.flickr.com/photos/galopoulos/567890941/