- Home
- Categorie
- Gaming, Hardware e Software
- Software (Windows - Linux - Apple) & Applicazioni
- [GUIDA] Ottenere punteggio 100/100 "Leverage Browser Caching" in Google Page Speed
-
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.
-
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
-
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?^
-
@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"
-
@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>
-
@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)
-
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!:):):)
-
@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!:):):)
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...;)
-
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...
-
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.
-
@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ì...
-
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
-
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.
-
@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 pagespeedLeverage 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 conflittoCombine 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;)
-
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?
-
@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...
-
Cardy sei stato davvero gentilissimo. Grazie.
Spero di riuscire ad arrivare ad un punteggio quantomeno decente .
-
Ciao Cardy,
ho chiesto ad Aruba e mi hanno detto che non possono attivare il mod_expire. C'è un altro modo per aumentare il leverage c. ? Magari tramite metatag?
Grazie.
-
@Redemption said:
Ciao Cardy,
ho chiesto ad Aruba e mi hanno detto che non possono attivare il mod_expire. C'è un altro modo per aumentare il leverage c. ? Magari tramite metatag?
Grazie.
L'unica soluzione che mi viene in mente è quella di caricare i files (immagini, css, swf ecc) su un altro dominio che supporti il mod_expire...
-
In questo modo funziona? Grazie.