+ Rispondi alla Discussione
Pagina 1 di 7 123 ... UltimaUltima
Risultati da 1 a 15 di 102

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

Ultimo Messaggio di tremendo il:
  1. #1
    Moderatore
    Data Registrazione
    Mar 2010
    Località
    Cattolica
    Messaggi
    341
    Segui cardy su Twitter Aggiungi cardy su Google+

    [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:

    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:

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

  2. #2
    Utente Premium L'avatar di klyde
    Data Registrazione
    Jan 2007
    Località
    Torino
    Messaggi
    690
    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
    Nokia N97 il touch screen innovativo.

  3. #3
    Utente Premium
    Data Registrazione
    Nov 2008
    Messaggi
    269
    Ovviamente con Aruba non funziona poiché non è un server dedicato... c'è la possibilità di farlo andare ugualmente?

  4. #4
    User
    Data Registrazione
    May 2010
    Messaggi
    10

    perplessità

    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.

  5. #5
    User
    Data Registrazione
    May 2010
    Messaggi
    10
    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

  6. #6
    User
    Data Registrazione
    May 2010
    Messaggi
    10
    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?^

  7. #7
    Moderatore
    Data Registrazione
    Mar 2010
    Località
    Cattolica
    Messaggi
    341
    Segui cardy su Twitter Aggiungi cardy su Google+
    Citazione Originariamente Scritto da klyde Visualizza Messaggio
    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:
    Codice:
    <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"

  8. #8
    Moderatore
    Data Registrazione
    Mar 2010
    Località
    Cattolica
    Messaggi
    341
    Segui cardy su Twitter Aggiungi cardy su Google+
    Citazione Originariamente Scritto da starfaq Visualizza Messaggio
    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:
    Codice:
    <FilesMatch "\.(jpg|jpeg|png|gif)$">
    
    Header set Cache-Control "max-age=37739520, public"
    </FilesMatch>
    Questo è un esempio di come dovrebbe essere:
    Codice:
    <FilesMatch "\.(jpg|jpeg|png|gif|swf|css)$">
    
    Header set Cache-Control "max-age=37739520, public"
    </FilesMatch>

  9. #9
    Moderatore
    Data Registrazione
    Mar 2010
    Località
    Cattolica
    Messaggi
    341
    Segui cardy su Twitter Aggiungi cardy su Google+
    Citazione Originariamente Scritto da starfaq Visualizza Messaggio
    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)

  10. #10
    User
    Data Registrazione
    May 2010
    Messaggi
    10
    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!

  11. #11
    Moderatore
    Data Registrazione
    Mar 2010
    Località
    Cattolica
    Messaggi
    341
    Segui cardy su Twitter Aggiungi cardy su Google+
    Citazione Originariamente Scritto da starfaq Visualizza Messaggio
    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...

  12. #12
    ModSenior L'avatar di marcocarrieri
    Data Registrazione
    Jul 2009
    Località
    Rovigo
    Messaggi
    15,894
    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...

  13. #13
    Utente Premium L'avatar di klyde
    Data Registrazione
    Jan 2007
    Località
    Torino
    Messaggi
    690
    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.
    Nokia N97 il touch screen innovativo.

  14. #14
    Moderatore
    Data Registrazione
    Mar 2010
    Località
    Cattolica
    Messaggi
    341
    Segui cardy su Twitter Aggiungi cardy su Google+
    Citazione Originariamente Scritto da klyde Visualizza Messaggio
    ***
    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ì...
    Ultima modifica di Leonov; 17-05-10 alle 22:55 Motivo: Si prega di evitare lo stile da telefonino e i quote dell'intero post precedente; grazie.

  15. #15
    Moderatore
    Data Registrazione
    Mar 2010
    Località
    Cattolica
    Messaggi
    341
    Segui cardy su Twitter Aggiungi cardy su Google+
    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

+ Rispondi alla Discussione
Pagina 1 di 7 123 ... UltimaUltima

Tag per Questa Discussione

^ Permessi di Scrittura

  • Tu non puoi inviare nuove discussioni
  • Tu non puoi inviare risposte
  • Tu non puoi inviare allegati
  • Tu non puoi modificare i tuoi messaggi
  •  
  • Il codice BB è Attivato
  • Le faccine sono Attivato
  • Il codice [IMG] è Attivato
  • Il codice [VIDEO] è Attivato
  • Il codice HTML è Disattivato
  • Trackbacks Attivato
  • Pingback Attivato
  • Refback Attivato

SEO by vBSEO 3.6.0 PL2 ©2011, Crawlability, Inc.