Come avere un sito in pole position

Google ha ammesso che la velocità è un fattore determinante per il posizionamento di un sito. Per questo motivo, e per venire incontro alle esigenze degli esperti SEO, il colosso di Mountain View ha introdotto nel Webmaster Tools, oggi Search Console, un nuovo strumento chiamato Page Speed Insight. Questo tool permette di analizzare i problemi di performance di una pagina Web in modo intuitivo e direttamente dal browser Mozilla Firefox. Lo strumento, oltre a segnalare i potenziali problemi, dà anche suggerimenti e funzioni utili per risolverli.

Alcune delle pecche riscontrabili con Page Speed sono facilmente risolvibili durante la fase di design del frontend di un sito. Altre, al contrario, necessitano di qualche conoscenza in più a livello di sistema.

Andando più nel dettaglio, i fattori che possono dipendere dalle configurazioni del sistema sono:

• caching;
• compressione;

Quelle relative al frontend e alla strutturazione del sito, invece sono:

• riduzione delle risoluzioni Dns e dei Redirect
• minificazione dei file Css/Js/Html;
• ottimizzazione delle immagini;
• ordine di caricamento degli elementi della pagina;
• parallelizzazione e la riduzionedelle richieste Http.
• Analizziamo nel dettaglio questi aspetti.
  

Fase uno: Caching

La stragrande maggioranza delle pagine Web hanno al loro interno risorse come file Javascript, Css, immagini che compongono il layout e altre tipologie di file che vengono modificati di rado. Nonostante queste risorse cambino, appunto, raramente, ogni volta che un utente richiede con il suo browser la pagina web vengono, comunque, nuovamente scaricate. Questo va ad aumentare il tempo di caricamento della pagina. Ebbene l’Http caching permette di salvare queste risorse nel browser dell’utente che visita il sito oppure nei server proxy del provider. Il risultato è che, ad esempio, l’immagine in cache non verrà più servita dal sito Web, ma direttamente dal Pc dell’utente o dal Proxy.

Questo dà un doppio vantaggio: riduce il round-trip time (il tempo che serve ai dati per fare andata e ritorno da un client a un server), eliminando moltissime richieste Http necessarie a ottenere tutte le risorse e, di conseguenza, riduce la dimensione complessiva della risposta del server. La riduzione del peso totale della pagina per ogni visitatore di ritorno riduce notevolmente anche l’uso della banda e i costi di caricamento del sito. 

Compressione in corso..

La compressione delle pagine Web può essere ottenuta, utilizzando i sistemi gzip o deflate. Tutti i moderni browser in circolazione, infatti, supportano la compressione dei file Html, Css e Javascript e, dunque permettono di inviare in Rete file più piccoli senza perdere informazioni. Il processo di compressione avviene lato server, tramite l’abilitazione di alcuni moduli, oppure uilizzando script appositi.

La compressione è consigliata per risorse non troppo piccole, in quanto questo processo ha un suo carico sulla macchina. La soluzione ideale, quindi, è combinarlo con meccanismi di caching. Altro aspetto da tenere presente è evitare la compressione dei file in formato binario (come immagini, video, archivi e pdf) e, quindi, praticamente già compressi.

Risoluzioni DNS e Redirect

Sul tempo di scaricamento della pagina influiscono in modo notevole anche il numero di risoluzioni Dns e il numero dei Redirect. Vediamo in dettaglio di cosa si tratta:

La risoluzione Dns è il tempo impiegato dal browser per identificare la provenienza di ogni singolo hostname che serve le risorse, a cui si aggiunge il ritardo causato dal round-trip time. Per intenderci, l’utilizzo di molti widget all’interno della pagina causa un forte aumento delle risoluzioni Dns. Di conseguenza, è bene utilizzare questi oggetti con consapevolezza e solo se portano beneficio effettivo ai visitatori.

Stesso discorso vale ovviamente per i redirect: è consigliabile di cercare di includere risorse che non rimandano ad altre. Va detto che, in alcuni casi, come ad esempio siti che includono molti video e immagini, si possono trarre benefici dall’utlizzo di diversi hostname, perchè il tempo di risoluzione Dns viene compensato dalla parallelizzazione del download di più risorse. Occorre, quindi, fare le giuste valutazioni in base a ogni esigenza.

Parallelizzazione

Come consigliato da Google il numero ottimale di host da utilizzare è tra 1 e 5 (distributi in modo che ci sia un host principale e quattro da cui scaricare le risorse “cacheable”) e il rapporto tra numero di host e risorse deve essere di 1 a 6. Dunque, mai impiegare più hostname se il numero di risorse utilizzate dalla pagina è inferiore a sei. Ad esempio, è possibile ipotizzare che un sito che utlizza un Css, un Javascript e sei immagini non trarrebbe beneficio nell’usare un ulteriore hostname, che sarebbe giustificabile nel caso in cui le risorse divenissero 12. 

Minificazione Css/Html/Javascript

La minificazione non è altro che l’operazione di compattare il codice sorgente dei file per ridurre al minimo la presenza di spazi bianchi e di new line. Questo intervento, combinato alla compressione, permette di ottenere una notevole riduzione delle dimensioni dei file. Un piccolo e banale esempio di minificazione è questo:

Prima:

a{

color:#0027ee

}

Dopo:

a{color:#0027ee}

Ottimizzazione delle immagini

I punti fondamentali, quando si parla di ottimizzazione delle immagini, sono senza dubbio la massimizzazione del rapporto qualità/dimensioni e l’utilizzo dei migliori algoritmi di compressione esistenti. Un ottimo strumento per ottenere questo risultato è smush.it di Yahoo, ma anche RIOT per i file JPG e TinyPng per i file PNG sono ottimi strumenti.

Altra operazione molto importante quando si realizza una pagina Web che usa immagini, è utilizzare sempre foto già scalate e, quindi, della dimensione corrispondente all’effettiva dimensione visualizzata. Utilizzando un’immagine grande, 200×200, e includendola nella pagina, ridimensionandola a 100×100 tramite i tag width e height, utilizzeremo un’immagine più grande di quanto abbiamo bisogno e, di conseguenza, sarà maggiore il tempo necessario al suo download. Altro parametro importante è specificare con i tag appena citati la dimensione esatta che evita tutte le operazioni di renderizzazione superflue. 

Ordine di caricamento e riduzione delle richieste HTTP

Quando si struttura una pagina le regole di base di cui tenere conto sono:

• combinare più file Css in una sola risorsa in modo da ridurre il numero di richieste Http (lo stesso vale per i JS);
• caricare prima i css e poi i Js in quanto questi ultimi sono bloccanti mentre i primi sono parallelizzabili;
• se possibile, includere i Javascript alla fine della pagina;
• evitare di includere Css e Js inline all’interno della pagina;
• evitare l’inclusione di file Css usando @import;
• servire i documenti statici da domini che non settano i Cookie.

Tutte queste ottimizzazioni, non solo permettono di ridurre notevolmente i tempi di caricamento delle pagine, perchè minimizzano il numero di richieste Http che hanno un tempo fisiologico per essere risolte, ma consentono anche di parallelizzare al massico lo scaricamento delle varie risorse.