[GUIDA] Ottenere punteggio 100/100 "Leverage Browser Caching" in Google Page Speed

[cardy]

Ciao a tutti, mi sono iscritto ieri e oggi ho deciso di scrivere la mia prima mini-guida, non avendo trovato niente in giro. Dopo essermi scontrato con il punteggio di Google Page Speed ho deciso di postare come migliorare le prestazioni del sito e il punteggio della voce Leverage Browser Caching di Google Page Speed.
Il punteggio di una pagina con 130 immagini e un peso complessivo di 660kb (d cui 560kb di immagini ) è passato da 0/100 a 90/100. Al momento non può aumentare per una limitazione che spiegherò successivamente in questa guida. Alcuni di voi suppongo che potranno ottenere anche il punteggio di 100/100.
La pagina inoltre con primed cache ( dopo la prima visita) pesa solo 3kb.
La soluzione è applicabile ad un server con Apache 2.x.

PREREQUISITI:

• Apache 2.x (testato su 2.2.3)
• Diritti di accesso/modifica al file .htaccess

• Modulo mod_headers, mod_expires
• Pagina con contenuto statico(=ovvero che non cambia frequentemente)

TOOLS PER VERIFICARE I MIGLIORAMENTI:

• Firefox (>3.x)
• Add-on Google Page Speed

ERRORI/WARNING RISOLTI AL TERMINE DELLA GUIDA:

1. The following resources specify a "Vary" header that disables caching in most versions of Internet Explorer. Fix or remove the "Vary" header for the following resources:[elenco risorse di cui non è possibile effettuare il caching]
2. The following resources are missing a cache expiration. Resources that do not specify an expiration may not be cached by browsers. Specify an expiration at least one month in the future for resources that should be cached, and an expiration in the past for resources that should not be cached: [elenco risorse senza data di scadenza]

PROCEDIMENTO:

1. Lanciate firefox e page speed sulla pagina che intendete velocizzare.
2. Aprite il file .htaccess della root e inserite il seguente codice:

<FilesMatch "\.(jpg|jpeg|png|gif)$">

Header set Cache-Control "max-age=37739520, public"
</FilesMatch>

3. Salvate e chiudete il file.
4. Fatto.

Ri-eseguite il test e notere un aumento del punteggio:io da 80/100 sono passato a 90/100. (La home di google è 95/100 NDR).

Con il codice scritto sopra ,Apache comunica al browser che il contenuto con le estensioni specificate ( ne potete aggiugnere secondo necessità) deve essere salvato nella cache per il periodo di tempo specificato. (max-age=37739520 che corrisponde ad un anno, il periodo max consentito dalle specifiche HTTP/1.1). Si può impostare una scadenza diversa per ogni tipo di file volendo. Per semplicità, ho impostato tutti le estensioni con la stessa scadenza.

Sicuramente avrete aumentato il punteggio e google page speed non segnalerà più lil messaggio 2, ma altrettanto sicuramente sarà ancora presente il messaggio 1, almeno che il vostro dominio non abbia un IP dedicato.
Per farla breve il warning evidenzia un bug che afflige il meccanismo di gestione della cache di internet explorer sicuramente fino alla v7 e probabilmente anche la 8.
Il problema è causato dalla presenza di determinati valori nel Response Header Vary. Internet Explorer effettua il caching dei dati SE e SOLO SE trova come valore Accept-Encoding e User-Agent. Se trova degli altri valori ( ce ne possono essere diversi, ma per l'elenco e le specifiche c'è Google) non effettua il caching annullando il lavoro fatto fino adesso.
Il contenuto dell'header Vary è verificabile tramite un qualsiasi analizzatore di traffico http. Giusto per citarne due, fiddler e live http headers (tutti e 2 integrabili con FF)
Cosa c'entra l'ip dedicato? beh il problema è che su hosting condiviso al vostri sito è assegnato un indirizzo ip (condiviso appunto) e un numero di porta univoco: per esempio a x.y.w.zorta corrisponde sito . it a x.y.w.z:2247 corrisponde unaltrosito . it

Nell'header Vary sarà quindi presente il valore Host che ha il compito di comunicare al browser il numero di porta per le richieste http, che sarà sicuramente diverso da quello di default (80).
Se avete l'ip dedicato invece e non avete configurazioni strane, le vostre richieste saranno mandate sulla porta 80, di conseguenza non sarà presente il valore Host all'interno dell'header Vary.
Per rimuovere tutti i valori non necessari è suffcente aggiungere nel file .htaccess:

Header unset Vary Host

e ripetere eventualmente la riga specificando il nome di tutti i valori indesiderati. Ripeto devono rimanere solo Accept-Encoding e User-Agent per avere una pagina cachabile anche da IE.
Inserendo il codice qui sopra su hosting condiviso o su hosting con porta diversa dalla 80 otterrete come risultato una bella pagina bianca.

Spero di aver aiutato qualcuno.
Per chiarimenti, etc rimango a disposizione.

	IP Indirizzo numerico che identifica ogni computer collegato a Internet in maniera univoca

	Browser Un browser web (sfogliatore di documenti web) è un programma che interpretail codice delle pagine web e lo visualizza in forma di ipertesto

	Google Google (pronuncia gùgol) è un motore di ricerca per Internet.

	Hosting Servizio che consiste nell'allocare su un server web le pagine di un sito web, rendendolo cosí accessibile dalla rete internet.

	Server Ogni coppia hardware-software che fornisce appunto servizi ad utenti chiamati tradizionalmente clienti (clients) attraverso una rete.

	http Protocollo progettato per migliorare la qualità e ottimizzare le prestazioni di sistemi distribuiti per la collaborazione e la condivisione delle informazioni. Utilizzato anche come protocollo generico nelle connessioni internet che devono attraversare strati software quali proxy e gateway.

[klyde]

Ciao Cardy, innanzitutto grazie mille per questa guida molto utile.
Non ho ben capito una cosa, per chi ha il sito su server condiviso può solo mettere in pratica la prima soluzione relativa alla scadenza della cache?

Mettendo in pratica il tuo consiglio sono passato da un valore di 75/100 a 80/100, un piccolo passo verso il risultato ottimale.
Per testare l'ottimizzazione del sito ai vini della velocizzazione uso anche Yslow, il quale mi da un voto massimo di 67 che non è migliorato neanche dopo la modifica al file htaccess., in particolare ho un voto molto basso per i seguenti fattori:

- Make fewer HTTP requests;
- Use a Content Delivery Network (CDN);
- Add Expires headers;
- Put JavaScript at bottom;
- Minify JavaScript and CSS;
- Reduce the number of DOM elements.

Cosa posso fare per migliorare questi elementi? Non so se è importante, il mio sito è stato realizzato con Joomla. Grazie

	CSS Fogli di Stile

	Javascript JavaScript è un linguaggio di scripting orientato agli oggetti comunemente usato nei siti web

	Joomla Joomla è un CMS per costruire siti internet

	Server Ogni coppia hardware-software che fornisce appunto servizi ad utenti chiamati tradizionalmente clienti (clients) attraverso una rete.

	DOM Un API di PHP5 che permettere di operare con documenti XML. Grazie a questa libreria è possibile trattare documenti XML con l'approccio di Programmazione Orientata ad Oggetti.

	http Protocollo progettato per migliorare la qualità e ottimizzare le prestazioni di sistemi distribuiti per la collaborazione e la condivisione delle informazioni. Utilizzato anche come protocollo generico nelle connessioni internet che devono attraversare strati software quali proxy e gateway.

[Redemption]

Ovviamente con Aruba non funziona poiché non è un server dedicato... c'è la possibilità di farlo andare ugualmente?

	Server Ogni coppia hardware-software che fornisce appunto servizi ad utenti chiamati tradizionalmente clienti (clients) attraverso una rete.

[starfaq]

Ciao Cardy,
e grazie della tua guida! ho seguito passo passo tutti i tuoi cvonsigli...solo che il punteggio di page speed è sceso...sapresti aiutarmi?Grazie.

[starfaq]

Perdona l'ignoranza, ma:
- come posso sapere qunanto pesa la mia pagina? e il valore di primed cache, dove lo trovo?
- Modulo mod_headers, mod_expires dove dovrei averli?
- Pagina con contenuto statico; la mia è dinamica ma ho deciso di provare lo stesso perchè la maggior part dei contenuti sono img

[starfaq]

Ok scusa, ho ricontrollato, non mi ha aumentato il punteggio ma ha eliminato dalla voce leverage tutte le img, ora riporta però fils js css e swf...perchè non è aumentato il punteggio?^

	CSS Fogli di Stile

	SWF SWF è l'acronimo di ShockWave Flash.

[cardy]

Ciao Cardy, innanzitutto grazie mille per questa guida molto utile.
Non ho ben capito una cosa, per chi ha il sito su server condiviso può solo mettere in pratica la prima soluzione relativa alla scadenza della cache?

Mettendo in pratica il tuo consiglio sono passato da un valore di 75/100 a 80/100, un piccolo passo verso il risultato ottimale.
Per testare l'ottimizzazione del sito ai fini della velocizzazione uso anche Yslow, il quale mi da un voto massimo di 67 che non è migliorato neanche dopo la modifica al file htaccess., in particolare ho un voto molto basso per i seguenti fattori:

- Make fewer HTTP requests;
- Use a Content Delivery Network (CDN);
- Add Expires headers;
- Put JavaScript at bottom;
- Minify JavaScript and CSS;
Reduce the number of DOM elements.

Cosa posso fare per migliorare questi elementi? Non so se è importante, il mio sito è stato realizzato con Joomla. Grazie

L'essere o meno su un server condiviso o per essere più preciso, avere uno spazio web raggiungibile da un ip statico, incide solo in Google Page Speed e solo per l'errore/warning relativo all'header Vary.

- Make fewer HTTP requests;

La pagina richiede troppi files per essere caricata. Per cui o riduci il numero di files presenti (immagini,flash,css,js etc) oppure puoi provare a i file .css in unico file. Idem per i files .js
Es. invece ch avere file1.js, file2.js, file3.js, crea un unico file .js che contenga gli altri files.
Ripeti la stessa cosa per i file css. Naturalmente controlla che i nomi siano univoci.

- Add Expires headers;

Questo è spiegato sopra:

<FilesMatch "\.(jpg|jpeg|png|gif)$">

Header set Cache-Control "max-age=37739520, public"
</FilesMatch>

Aggiungi eventualmente le estensioni per gli altri file presenti nella pagina (ad. esempio swf)

- Minify JavaScript and CSS;

Esistono dei tools appositi per eseguire il "minify". Tra l'altro in YSLOW->Tools trovi già tutto l'occorente. Sostanzialmente sono dei file js e css, senza spazi e nel caso dei js con dei nomi di variabile abbreviati. I files minified ti fanno in risparmiare "banda" poichè i files risultano più piccoli..

- Use a Content Delivery Network (CDN);

Ignora semplicemente questa voce poichè una cdn non è economicamente abbordabile. Controlla solo se le librerie javascript che usi sono disponibili su Google CDN (ad. es jquery e mootools ci sono)

Reduce the number of DOM elements.

Questo dipende dalla complessità della pagina, per cui meno oggetti hai, meglio è (es. riduci se possibile il numero di div o span o altri elementi html favorendo invece i fogli di stile)

- Put JavaScript at bottom;

Se possibile sposta i tag <script type='text/javascript'> prima del tag </body> in questo modo la pagina sarà più bveloce poichè il caricamento dei js è una delle operazioni pià lente nel rendering della pagina...

Visto che hai joomla, eliminerei anche dei plugin inutili che appesantiscono inutilmente il caricamento della pagina.. lascia attivo solo quello che ti serve... Prova anche a cambiare template... alcuni sono fatti male e ti penalizzano nelle voci "Reduce dom elements" e" make fewer http requests"

	CSS Fogli di Stile

	Javascript JavaScript è un linguaggio di scripting orientato agli oggetti comunemente usato nei siti web

	IP Indirizzo numerico che identifica ogni computer collegato a Internet in maniera univoca

	Flash Flash è il programma multimediale per antonomasia di internet. Ormai conosciuto e riconosciuto da moltissimi utenti di internet

	Google Google (pronuncia gùgol) è un motore di ricerca per Internet.

	HTML HTML (HyperText Markup Language) nasce per mano di Tim Berners-Lee, il costruttore del primo webserver e del primo browser, come estensione di SGML (Standard Generalized Markup Language) nel 1990.

	Joomla Joomla è un CMS per costruire siti internet

	Tag tag sono le marcature del linguaggio che permettono la formattazione della pagina

	SWF SWF è l'acronimo di ShockWave Flash.

	Server Ogni coppia hardware-software che fornisce appunto servizi ad utenti chiamati tradizionalmente clienti (clients) attraverso una rete.

	DOM Un API di PHP5 che permettere di operare con documenti XML. Grazie a questa libreria è possibile trattare documenti XML con l'approccio di Programmazione Orientata ad Oggetti.

	plugin O plug-in, o add-in o add-on, rappresenta una particolare applicazione aggiuntiva che ha il compito di interagire con un programma-padre (senza il quale non potrebbe funzionare) per integrarne funzioni e personalizzazioni.

	http Protocollo progettato per migliorare la qualità e ottimizzare le prestazioni di sistemi distribuiti per la collaborazione e la condivisione delle informazioni. Utilizzato anche come protocollo generico nelle connessioni internet che devono attraversare strati software quali proxy e gateway.

	JQuery Framework per Javascript realizzato da John Resig. La caratteristica fondamentale della libreria è la manipolazione degli elementi del DOM garantendo la corretta renderizzazione con tutti i browser.

	Mootools Framework per Javascript nato da un programmatore italiano, Valerio Proietti. La sua caratteristica peculiare è l'OOP, l'orientamento agli oggetti, che consente di scrivere pochissimo codice per eseguire anche operazioni complicate.

[cardy]

Ok scusa, ho ricontrollato, non mi ha aumentato il punteggio ma ha eliminato dalla voce leverage tutte le img, ora riporta però fils js css e swf...perchè non è aumentato il punteggio?^

Aggiungi in questo codice le estensioni da te citate:

<FilesMatch "\.(jpg|jpeg|png|gif)$">

Header set Cache-Control "max-age=37739520, public"
</FilesMatch>

Questo è un esempio di come dovrebbe essere:

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

Header set Cache-Control "max-age=37739520, public"
</FilesMatch>

[cardy]

Perdona l'ignoranza, ma:
- come posso sapere qunanto pesa la mia pagina? e il valore di primed cache, dove lo trovo?
- Modulo mod_headers, mod_expires dove dovrei averli?
- Pagina con contenuto statico; la mia è dinamica ma ho deciso di provare lo stesso perchè la maggior part dei contenuti sono img

Per il peso della pagina utilizza YSLOW->Statistics
mod_headers e mod_expires di solito sono già abilitati, e visti i tuoi post direi di si che lo sono. Ad ogni modo rivolgiti al tuo provider per sapere se è abilitato o meno.

Per pagina statica intendo con contenuto statico ovvero che cambia poco frequentemente (almeno una settimana o 2 per intenderci) oppure in cui il nuovo contenuto si va ad aggiungere a quello già esistente (ad es. homepage di wordpress con gli ultimi N articoli).

Consigilio anche di abilitare la compressione gzip (mod_gzip)

	Post Post è il termine utilizzato per segnalare la scrittura e pubblicazione di un messaggio testuale in un determinato spazio web.

	WordPress WordPress è una piattaforma per la gestione dei contenuti e la creazione di un blog

[starfaq]

Wow Cardy... grazie mille!
Sei un pozzo di scienza... prima di risponderti, potrebbero passare settimane...il tempo di capire quello che hai scritto! sono solo tre mesi che mi dedixco al webmastering...e di seo e server non so nulla... l'unica cosa che mi preocupa è la durata della cache: perchè un anno?
grazie mille!

	Server Ogni coppia hardware-software che fornisce appunto servizi ad utenti chiamati tradizionalmente clienti (clients) attraverso una rete.

[cardy]

Wow Cardy... grazie mille!
Sei un pozzo di scienza... prima di risponderti, potrebbero passare settimane...il tempo di capire quello che hai scritto! sono solo tre mesi che mi dedixco al webmastering...e di seo e server non so nulla... l'unica cosa che mi preocupa è la durata della cache: perchè un anno?
grazie mille!

ops spero di non aver parlato troppo in modo troppo "tecnico"... chiedi dove non è chiaro e farò il possibile per essere più "comprensibile"...
La durata della cache impostato a un anno è solo un 'esempio... impostala come ritieni più oppurtuno... se hai dei files "statici" o meglio che non cambiano spesso imposta la scadenza in base alla durata. Ad esempio se pensi che per 6 mesi non cambierai il template potresti per esempio impostare la data di scadenza dei css a 6 mesi...

E non ti preoccupare se molti termini ti suonano nuovi o difficili...in poco tempo s'imparnao molto cose avendo voglia, pazienza e soprattutto voglia di sperimentare... ma soprattutto ancora pazienza...

	CSS Fogli di Stile

	Server Ogni coppia hardware-software che fornisce appunto servizi ad utenti chiamati tradizionalmente clienti (clients) attraverso una rete.

[marcocarrieri]

Sono arrivato ad 86 qua il locale...
Pero ancora non ho attivato la compressione gzip e il fatto della cache delle immagini..
Ho tenuto l'installazione principale di XAMP...
Vedremo quando lo metto in internet quanto mi dara...

[klyde]

Io non riesco proprio a migliorare la velocità del mio sito, nonostante i tuoi consigli!!!! ho dato uno sguardo ai tool di Yslow ma non ci capisco nulla.

[cardy]

***

Scusate l'assenza ma sono alle prese con un restyling di un portale turistico per cui il tempo per rispondere scarseggia in questo periodo...
Comunque che cosa non ti è chiaro? Dai inizia con il dirmi un punto non chiaro che partiamo da lì...

[cardy]

Per inciso,con un adeguata ottimizzazione, una pagina da 790k con 130 immagini e jquery si carica in 7 secondi. 94/100 con google page speed e 91/100 (A) con YSlow

	Google Google (pronuncia gùgol) è un motore di ricerca per Internet.

	JQuery Framework per Javascript realizzato da John Resig. La caratteristica fondamentale della libreria è la manipolazione degli elementi del DOM garantendo la corretta renderizzazione con tutti i browser.