Google Page Speed: come ottenere il 100/100.

Google Page Speed è un’estensione per Firefox che permette di analizzare le pagine web. Analisi che va a studiare il tempo di caricamento della pagina. Restituendo i difetti che quest’ultima ha e quindi dove possiamo agire per velocizzare il tempo di caricamento. Il tempo di caricamento è importantissimo per il nostro per due fattori: 1- il posizionamento nei risultati di Google; 2- risparmiare banda al nostro server!

Google ha annunciato che uno degli obbiettivi che un sito web deve raggiungere per ottenere più punti del proprio page rank, e quindi un migliore posizionamento, è proprio il tempo di caricamento delle pagine del sito. Infatti nel proprio tool online Google Webmaster ha introdotto una categoria, denominata Site Performance, la quale permette di verificare il tempo di caricamento delle pagine del proprio sito, restituendo una tabella di raffronto con la media del web. Questo a dimostrare che Google a questa cosa ci tiene, e anche molto.

Site Performance Google

INSTALLIAMO PAGE SPEED PER FIREFOX:

Prima di installare Page Speed procediamo con l’installare su Firefox, se già non lo abbiamo, la famosa estensione Firebug; necessaria ai fini di utilizzo di PageSpeed.

Per poter installare questa estensione non dobbiamo far altro che accedere alla sezione DOWNLOAD cliccare sull’icona di installazione, accettare, ed il browser procederà in modo automatico all’installazione.

UTILIZZIAMOLO:

Google Page Speed

Come potete vedere per aprire Page Speed dobbiamo prima aprire Firebug poi accedere alla scheda apposita e cliccare sul pulsante Analyze Performance. Ovviamente il tool analizza la pagina visualizzata in quel momento in quella scheda!

Una volta analizzata la pagina il tool ci mostrerà l’elenco dei risultati e un punteggio generico indicante il valore ottenuto dalla pagina e se questo risultato può essere migliorato.

Google Page Speed2

Iniziamo con l’illustrare le voci che maggiormente ci interessano, si perchè Google è tanto pignolo in questo tool e a mio avviso molte parti sono impraticabili per un webmaster che ha un sito con utenza medio-bassa… Siamo sinceri: se ho un sito con 2 o 300 utenti unici al giorno non mi sognerei mai di attivare un sottod ominio e di spostarci dentro tutte le immagini per velocizzare il caricamento della pagina applicando il Parallelize Download across Hostnames, come lo chiama Google…

OPTIMIZE IMAGES:

Questa è una delle voci più semplici da applicare ma sopratutto più utili, in quanto può veramente migliorare la velocità di caricamento e diminuire il carico di banda sul nostro server. Page Speed include un tool molto utile che permette di ottimizzare le immagini e il bello è che fa tutto da solo… Infatti l’estensione in automatico ti elabora la compressione migliore per l’immagine servendotela su un piatto d’argento. Così che a noi non rimane altro che salvarla e sostituirla con quelle presenti sul server!

Google Page Speed3

LEVERAGE BROWSER CACHING:

Nei browser di ultima generazione sono stati introdotti sistemi di caching molto validi e veloci. Ma che cos’è il caching?? Praticamente la cache è una memoria su cui il browser si appoggia per salvare i file, le immagini, i dati che ha scaricato dalla rete per poi avere un accesso più veloce senza bisogno di riscaricarlo ad ogni caricamento di pagina.

Capite che se io ho un foglio di stile e 5 immagini che compongono il template del mio sito e so che queste sono immagini fisse che non cambierò mai, o per lo meno non con frequenza, mi è molto utile che il browser le memorizzi in locale sul PC dell’utente piuttosto che tutte le volte me lo scarichi dal mio server!

Per fare questo dobbiamo agire sui META TAG, oppure agire direttamente sul Server; vediamo come:

Utilizzo dei META TAG nel codice HTML:

<meta http-equiv=”Cache-Control” content=”max-age=864000,must-revalidate”>

<meta http-equiv=”Pragma” CONTENT=”cache”>

<meta http-equiv=”Expires” CONTENT=”<?= gmdate(“D, d M Y H:i:s”, time() + 864000) ?> GMT”>

Questo codice è possibile inserirlo tra i TAG <HEADER></HEADER> di ogni pagina. Indica al browser che gli elementi nella cache devono rimanere in memoria per 10 giorni ( 1o giorni = 864.000 secondi, dato che l’opzione funziona in secondi!). Per maggiori info consiglio questo link: GOOGLE SEARCH.

Utilizzo del file .htaccess per i server Apache:

<FilesMatch “\.(jpg|jpeg|png|gif|css)$”>

Header set Cache-Control “max-age=37739520, public”

</FilesMatch>

Questa funziona ha la stessa finalità della modifica inserita prima. Però andando ad agire direttamente sulle direttive del server tende ad essere riconosciuta meglio dai browser; anche se con i moderni browser questo è un discorso non sempre vero… Per maggiori info consiglio la documentazione ufficiale: APACHE DOCS.

PARALLELIZE DOWNLOAD ACROSS HOSTNAMES:

Con questa voce il tool cosa ci vuole indicare?!? In parole povere è stato studiato che gli elementi che compongono una pagina: fogli di stile, immagini, video ecc.. possono essere suddivisi su diversi sottodomini dello stesso sito. Questo per velocizzare il caricamento della pagina, Google ci mostra un’immagine esplicativa:

Download Parallelo

Praticamento noi dovremo creare un sottodominio al nostro sito denominato, per esempio, http://img.orebla.it in cui inserire tutte le immagini che compongono le pagine del sito; sia quelle del templates che le altre. Questo migliorerebbe il caricamento della pagina.

Detto fra noi: questo è un discorso logico per siti con un’utenza molto elevata; per siti come i nostri sarebbe abbastanza assurdo. Anche perchè non tutti i contratti hosting prevedono i sottodomini, per lo meno gratuiti!.

Si potrebbe anche localizzare un server gratuito MOLTO veloce e caricare su esso le immagini per applicare lo stesso ragionamento…

ENABLE COMPRESSION:

Questa voce è abbastanza importante, dico abbastanza perchè se non abbiamo il pieno controllo del server abilitare la compressione G-Zip è impossibile. Oppure, possiamo provare ad attivarla tramite PHP, script come phpBB dispongono di una funzione apposita, però bisogna sempre vedere il server come è stato impostato.

Comunque, cos’è la compressione G-zip??

È un sistema di compressione che permette di far lavorare il server in modo che comprima i dati della pagina per poi inviarli al browser. Questo permette di ridurre il “peso” della pagina da inviare tramite richieste HTTP. Ottenendo un notevole risparmio di tempo e di banda durante le visite sulle proprie pagine.

Se prima una pagina pesava, ipoteticamente, 100Kb dopo essere compressa può pesare 50 Kb. Capite il risparmio di tempo e di banda del server.

Qui trovate un utile test per verificare che la compressione G-zip sia effettivamente attiva sul vostro sito: http://www.gidnetwork.com/tools/gzip-test.php.

Per poter attivare tale compressione vi rimando a GOOGLE SEARCH nel quale potete trovare centinaia di guide ben fatte.

ATTIVAZIONE COMPRESSIONE GZIP SCRIPT PHP:

Per poter attivare la compressione Gzip se non abbiamo la possibilità di accesso o all’uso dei file .htaccess basta inserire all’inizio dei nostri script la seguente riga:

//Attivo la compressione GZIP
//Per disabilitare cancellare la riga seguente:

ob_start( ‘ob_gzhandler’ );

//———————————————————–//

La funzione che andiamo ad utilizzare è ob_start(); tale funzione è disponibile solamente se il nostro PHP ha attivo il supporto alle librerie zlib.

ATTIVAZIONE COMPRESSIONE GZIP TRAMITE MOD_DEFLATE E .HTACCESS:

Un altro metodo è quello di lavorare direttamente sul server, Apache nel nostro caso, tramite la modifica del file .htaccess. Purtroppo tale modifica non è applicabile a tutti i server condivisi in quanto molti amministratori non permettono tali impostazioni.

Comunque per attivare la compressione GZIP tramite .htaccess dobbiamo intanto assicurarci che sul nostro server Apache 2.x sia attivo il modulo Mod_Deflate, poi creiamo o aggiungiamo al nostro .htaccess il seguente codice:

AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css

<FilesMatch “\\.(js|css|html|htm|php|xml)$”>

SetOutputFilter DEFLATE

</FilesMatch>

ATTIVAZIONE COMPRESSIONE GZIP SU WORDPRESS SENZA PLUG-IN:

Dato che moltissimi webmaster, come me, utilizzano WordPress per gestire il proprio sito, voglio illustrarvi come poter attivare la compressione GZIP anche sul vostro blog WordPress senza Plugin esterni.

Ecco come attivare la compresisone Gzip su WordPress:

1. Apriamo la cartella del nostro template \wordpress\wp-content\themes\NOME TEMPLATE;
2. Apriamo il file header.php con un’editor;
3. Inseriamo proprio come primissima riga, subito prima di tutto il seguente codice:

<?php

//Attivo la compressione GZIP su WordPress

//Per disabilitare cancellare la riga seguente:

ob_start( ‘ob_gzhandler’ );

//———————————————————–//

?>

Ed ecco attiva la compressione su WordPress!

Il rovescio della medaglia del G-Zip è che attivandolo si fa lavorare molto di più il processore del Server. Questo comporta alcuni problemi se il lavoro diventa molto elevato nei Server condivisi; patria della maggior parte dei siti di medie-piccole dimensioni. Se gli amministratori del server vedono un aumento del carico del processore a causa di uno dei siti condivisi possono ( e lo fanno senza avvertimenti, nda!) spegnere il sito e metterlo off-line sino a che non si sia scoperto e risolto il problema!

Con questa voce penso di avervi illustrato le voci che considero importanti, ma sopratutto semplici per chi non è esperto di server o modifiche in codice HTML. Buon lavoro e buon miglioramento di velocità!!

<meta http-equiv="Cache-Control" content="max-age=300,must-revalidate">
<meta http-equiv="Pragma" CONTENT="cache">
<meta http-equiv="Expires" CONTENT="<?= gmdate("D, d M Y H:i:s", time() + 300)  ?> GMT">