• User Attivo

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

    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:

    • 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]
    • 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:

    • Lanciate firefox e page speed sulla pagina che intendete velocizzare.
    • 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.z:porta** 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

    Inserendo il codice qui sopra su hosting condiviso o su hosting con porta diversa dalla 80 otterrete come risultato una bella pagina bianca.:D
    
    Spero di aver aiutato qualcuno.
    Per chiarimenti, etc rimango a disposizione.;)

  • User Attivo

    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


  • User Attivo

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


  • User Newbie

    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.


  • User Newbie

    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

  • User Newbie

    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?^


  • User Attivo

    @klyde said:

    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"


  • User Attivo

    @starfaq said:

    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>
    

  • User Attivo

    @starfaq said:

    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)


  • User Newbie

    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!:):):)


  • User Attivo

    @starfaq said:

    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!:):):)
    :quote: 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...;)


  • ModSenior

    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...


  • User Attivo

    😢 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.


  • User Attivo

    @klyde said:


    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ì...


  • User Attivo

    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


  • User Attivo

    Cardy, sapresti dirmi come ottimizzare un sito su aruba (non su dedicato)?

    Sto testando il tema nuovo per pausaxn.it ecco i miei problemi:

    [INDENT]Page Speed Score: 69/100
    [Significant performance improvements are possible]

    [Score: 19/100]

    Leverage browser caching
    [Score: 0/100]

    Minimize DNS lookups
    [Score: 47/100]

    Minimize request size
    [Score: 0/100]

    Specify image dimensions
    [Score: 0/100]

    Parallelize downloads across hostnames
    [Score: 79/100]

    Avoid bad requests
    [Score: 65/100]

    Combine external CSS
    [Score: 79/100]

    Combine external JavaScript
    [Score: 55/100]

    Optimize the order of styles and scripts
    [Score: 79/100]

    Remove unused CSS
    [Score: 0/100]

    Serve static content from a cookieless domain
    [Score: 0/100]

    Use efficient CSS selectors
    [/INDENT]
    Grazie per il tempo.


  • User Attivo

    @Redemption said:

    Cardy, sapresti dirmi come ottimizzare un sito su aruba (non su dedicato)?

    Sto testando il tema nuovo per pausaxn.it ecco i miei problemi:
    [INDENT]Page Speed Score: 69/100
    [Significant performance improvements are possible]

    [Score: 19/100]
    Non lo rilevo con il mio pagespeed

    Leverage browser caching
    [Score: 0/100]
    **Questo è spiegato sopra... aggiungi la regola inserendo nel FileMatch le estensioni delle immagini, dei javascript e dei file flash
    **
    Minimize DNS lookups
    [Score: 47/100]
    Cerca di servire i files del sito dallo stesso dominio o cmq limita il numero di domini esterni (l'ideale sarebbe non + di 4 compreso il tuo)

    Minimize request size
    [Score: 0/100]
    **Non lo rilevo cn il mio pagespeed
    **
    Specify image dimensions
    [Score: 0/100]
    Qui modifica il template e il codice html dei post... tutte le immagini devono avere l'altezza e la larghezza specificata
    [HTML]<img width='50' height='100 src="immagine.ext" />[/HTML]

    Parallelize downloads across hostnames
    [Score: 79/100]
    Questo è in parte in conflitto con quanto detto sopra...Poter scaricare i files da domini diversi porta all'aumento dei downloads in parallelo (con l'ultima versione di FF è 12 files alla volta). L'ideale sarebbe avere dei domini di 3° livello che ospitino i tuoi files. Ad esempio css[punto]tuodominio[punto]it x i css, images[punto]tuodominio[punto]it x le immagini e via dicendo...Essendo un dominio di 3° livello il lookup dei DNS è sempre a carico del tuo server, x cui se non si esagera può portare dei vantaggi (l'ideale è fare delle prove)

    Avoid bad requests
    [Score: 65/100]
    Questo potrebbe dipendere da un url con troppi parametri passati con il GET.

    Combine external CSS
    [Score: 79/100]
    Dove possibile unisci i css in un unico file. Controlla che i nomi non vadano in conflitto

    Combine external JavaScript
    [Score: 55/100]
    Idem come sopra. Limita anche dove possibile l'utilizzo di troppi script. Considera che tutti i framework javascript fanno le stesse cose, x cui per esempio orientati su uno e sfrutta solo quello (ad es. jquery) invece che utilizzarne molteplici...>(può anke dipendere dai plugin che utilizzi in Wordpress)

    Optimize the order of styles and scripts
    [Score: 79/100]
    Inserisci nel <head> prima tutti i css e poi tutti i js. Se possibile inserisci addirittura i js prima di </body> in modo da velocizzare al max la pagina...

    Remove unused CSS
    [Score: 0/100]
    Controlla di non avere dei css inutilizzati, che sprecano banda inutilmente. Rimuovi quelli non necessari.

    Serve static content from a cookieless domain
    [Score: 0/100]
    **Questo può dipendere da molti fattori. §Se il tuo dominio invia dei cookie questi vengono ritrasmessi ad ogni richiesta. Un esempio palese è quello dei cookie di google analytics
    **
    Use efficient CSS selectors
    Ottimizza i css raggruppando gli attributi comuni ai selettori e utilizza gli id o le classi dove possibile. Es non ottimizzato:
    [HTML]
    .classe{
    color:red
    float:left;
    height:30px;
    }
    .classe2{
    color:blue
    float:left;
    height:30px;
    }
    /*esempio ottimizzato+/
    .classe{
    color:red

    }
    .classe2{
    color:blue;
    }
    .classe,.classe2{
    float:left;
    height:30px;
    }

    [/HTML]
    [/INDENT]Grazie per il tempo.

    Figurati;)


  • User Attivo

    Cardy sei stato veramente fenomenale. Grazie.

    Comunque il tema nuovo non è visibile, per questo non lo riscontri. Io vorrei eliminare il problema del Leverage browser caching, ma anche seseguendo le tue istruzioni non riesco. Il mio sito non è su un dedicato ma su un condiviso di Aruba. C'è un modo per risolvere il problema?


  • User Attivo

    @Redemption said:

    Cardy sei stato veramente fenomenale. Grazie.

    Comunque il tema nuovo non è visibile, per questo non lo riscontri. Io vorrei eliminare il problema del Leverage browser caching, ma anche seseguendo le tue istruzioni non riesco. Il mio sito non è su un dedicato ma su un condiviso di Aruba. C'è un modo per risolvere il problema?
    Chiedi al supporto di aruba se è attivo il mod_expire, eventualmente fattelo attivare... (penso sia fattibile). Idem per la compressione gzip...


  • User Attivo

    Cardy sei stato davvero gentilissimo. Grazie.
    Spero di riuscire ad arrivare ad un punteggio quantomeno decente 🙂 .