Google page speed "tutto verde"

La sfida di questi giorni è stata portare il sito di Infonet al più alto livello di valutazione possibile da parte dei tool che misurano la velocità e la qualità dei siti web.
Il sito (www.infonet-online.it) partiva già da una valutazione tutto sommato accettabile: 65/100 per il desktop e 56/100 per il mobile.
Il sito possedeva già una valutazione di esperienza utente superiore a 90 e, possiamo dire, che fosse già ottimizzato seppur senza una attenzione maniacale.

Teniamo presente che, a parità di altri parametri, nelle serp di google vincono i siti veloci.
Non a caso google propone ai webmaster un tool per la valutazione della velocità del proprio sito.
La tendenza sembra essere quella di assegnare sempre più importanza al ranking factor (o al set di ranking factors) legati alla velocità del sito web, tanto su desktop quanto su mobile.

Il tool di google si chama Page speed ed è severissimo nel valutare la velocità di un sito, tanto quella assoluta quanto quella così detta “above the fold”. Anzi, è proprio questa ultima alla quale google page speed dedica la gran parte della sua attenzione, visto e considerato che è quella che si riflette in modo immediato sulla esperienza utente.

In ogni caso, almeno per ora, non pare essere fondamentale per il posizionamento di un sito web, una attenzione maniacale al ranking factor velocità. Importante è non avere valori troppo bassi, ma dato che la maggior parte dei siti non presta attenzione a questo aspetto, non è necessario per forza avere le luci verdi accese, … gialle sono sufficienti.

Ma cosa dà fastidio al tempo di caricamento di una pagina?

Gli script di terze parti
Certamente l’elemento più fastidioso è la chiamata di file residenti su siti terzi. Il più pesante di tutti è senza dubbio facebook con i suoi plug-in che richiedono tempi infiniti per il loro caricamento.
Seguono poi gli altri social network, nonché i tool analytics e gli stili di testo google font ed altri.

Mettere script del genere nella header della pagina produce un danno rilevante, lasciarli invece nel codice html nella parte finale della pagina ha un impatto meno dirompente.

In ogni caso, abusare di script esterni ha effetti negativi sui tempi di caricamento complessivi della pagina.
Gli script vanno quindi inseriti solo se necessari, valutando con attenzione cosa inserire e cosa tralasciare!

Above the fold ovvero, sopra la piega del tappeto
Il famigerato above the fold è un modo di dire utilizzato dai googler (quelli che lavorano per google) nelle comunicazioni via social network.
Indica la parte di pagina immediatamente visibile senza bisogno di fare scroll alcuno.

Se su desktop è abbastanza semplice raggiungere buoni livelli di velocità, su mobile la cosa è decisamente più difficile; del resto occorre tenere presente che mentre il livello tecnologico dei desktop è mediamente elevato, quello dei mobile e degli smartphone in particolare è straricco di dispositivi poco carrozzati dal punto di vista dell’hardware ed ancor meno della qualità della banda disponibile.

Rilasciare elementi della pagina non al momento opportuno, può quindi significare un ritardo sensibile nel caricamento della pagina intera.
Per esempio erogare javascript nella header che non sono utilizzati nella parte della pagina above the fold, blocca il caricamento di questa ultima fino alla fine del caricamento di tutti i file richiamati nella header.
Non è tanto la dimensione dei file a dare fastidio ma il loro numero, infatti i browser normalmente li scaricano a blocchi di sei alla volta, mettendo in attesa tutto ciò che non fa parte dello slot.

Anche gli scriprt inseriti nella header, spostati nella parte bassa dell’html, producono effetti positivi sulla velocità di caricamento della parte above the fold.

Spostando l’inclusione dei file esterni nella parte finale dell’html abbiamo guadagnato circa 6 punti.
Spostando poi anche il jquery e tutti gli script relativi in fondo alla pagina abbiamo guadagnato altri 2 punti.

Leverage browser caching
Il caching del browser consente al client di memorizzare i contenuti testuali, le immagini ed i file esterni alla pagina ma non al sito, per utilizzarli ogni volta che vengono richiamati. Ciò consente un grande risparmio di tempo nel caricamento delle pagine successive alla prima; pensiamo ad esempio al risparmio di tempo determinato dal fatto che il layout intero non debba essere più scaricato.

Normalmente i server, sia iis di microsoft che apache per linux, consentono di indicare una scadenza della cache, rendendo possibile modulare il chaching sulla base della tipologia di sito.

Quindi il caching è fondamentale per accelerare il caricamento della pagina. Attivandolo abbiamo guadagnato una decina di punti.

Compressione gZip
La compressione gzip, configurata sul server che eroga il sito, è anch’essa fondamentale per ridurre la qualità di byte trasmessi, e quindi per ottenere una sostanziale velocizzazione della pagina.

Consiste nel restituire i file ai client in formato compresso, quindi con dimensioni ridotte rispetto ai files originali. Normalmente i browser sono in grado di gestire direttamente la decompressione dei gzip ricevuti senza che il navigatore abbia la minima percezione del processo in corso.

Attivando la compressione gzip, abbiamo guadagnato circa 10 punti, soprattutto nel mobile.

Fogli stile
I fogli stile, oltre ad essere ottimizzati e ridotti di dimensioni, possono, se non troppo grossi, essere inseriti direttamente nel codice della pagina. Facendo così si riducono sensibilmente i tempi di caricamento, dato che la richiesta di risorse esterne alla pagina si riduce di numero.

Google nelle sue best practice relative ai fogli stile non dichiara quale sia la dimensione massima di un css inserito direttamente nel codice della pagina, suggerendo comunque di utilizzare file separati per fogli stile di grandi dimensioni.
Sul nostro sito c’erano 6 fogli stile richiamati nella header, di questi 4 sono stati inseriti direttamente nel codice della pagina, e due sono stati accodati l’uno all’altro in un solo file .css.

L’unico file di stile esterno contine solo le definizioni dei colori, delle immagini di sfondo, dei font e delle formattazioni del testo, tutti gli altri elementi che definiscono la struttura della pagina sono invece stati inseriti direttamente del codice.

Il risultato finale di questa operazione è stato il punteggio di 94/100 sul desktop e di 88/centesimi sul mobile!

GTmetrix
La conferma del buon lavoro eseguito arriva da gtmetrix che assegna un punteggio da categoria A al Page speed grade (91%) ed un 89% al Yslow grade!
Grandioso risultato!

Ok ragazzi, la pagnotta oggi ce la siamo guadagnata!

I link:
page speed google https://goo.gl/61C1Xv
GtMetrix: www.grmetrix.com