Linee guida su come ottimizzare le prestazioni di un sito web

In questo articolo troverete alcuni consigli utili per ottimizzare le performance e ridurre i tempi di caricamento di un sito web. Le linee guida si riferiscono a un insieme di pratiche suggerite da Google e possono essere verificate online sul sito: Google PageSpeed Insights.
In linea generale, le principali attività SEO per ottimizzare un sito web, sono le seguenti:

Abilitare la compressione GZIP

Generalmente i server che ospitano siti web sono in grado di comprimere i files prima di inviarli al download, utilizzando un modulo di terze parti o di routine incorporate. Questo sistema permette di ridurre il tempo richiesto per scaricare i contenuti ed eseguire il rendering del sito web. Lo standard prevede due metodi di compressione: "GZIP" e "DEFLATE". Sono entrambi supportati da molte librerie di client e quasi tutti i browser moderni. Esistono diversi modi per abilitare la compressione a seconda della tipologia di server (Apache, Nginx e IIS).

Dare la priorità ai contenuti visibili

Per contenuti visibili (in gergo tecnico ATF "Above The Fold") si intendono tutti i dati che caratterizzano la finestra di congestione iniziale. In altre parole, è la prima parte della pagina che non richiede l'uso della barra di scorrimento o del mouse per essere visualizzata. Questi primi contenuti hanno un'importanza fondamentale per il posizionamento nei motori di ricerca. Indicativamente, il tempo limite per il quale un visitatore è disposto ad attendere per il caricamento dei contenuti ATF è di 3 secondi.

Per quanto riguarda invece Google PageSpeed, questa regola viene attivata quando sono necessari ulteriori tempi di round trip per visualizzare i contenuti ATF. Per risolvere questo problema, è necessario ottimizzare e caricare prima i dati (HTML, CSS, JavaScript e immagini) necessari ad eseguire il rendering della parte più importante della pagina, posticipando il resto dei contenuti.

Eliminare JavaScript e CSS che bloccano la visualizzazione dei contenuti ATF

Relativamente a quanto descritto nel paragrafo precedente, un'attività richiesta per ottimizzare il caricamento della pagina è l'eliminazione di eventuali blocchi CSS e JavaScript che interrompono il rendering dei contenuti ATF. Ad esempio, invece di caricare il foglio di stile prima dell'inizio dei contenuti, lo si dovrebbe suddividere in due parti: La parte relativa ai contenuti ATF andrebbe incorporata nella parte superiore dell'HTML, mentre la parte relativa al resto della pagina dovrebbe essere caricato dopo la chiusura dell'intero documento. Lo stesso principio vale per le funzioni e le animazioni JavaScript presenti all'interno della pagina web.

Eliminare i reindirizzamenti delle pagine

Un reindirizzamento ("redirect") è una pagina che contiene un rimando automatico a un'altra pagina. Questa attività avvia un ciclo aggiuntivo richiesta-risposta e, di conseguenza, una latenza del tempo di round trip. Diminuire il numero di redirect può ridurre il tempo di attesa del visitatore affinché venga completato il caricamento della pagina. Ad esempio, se un redirect venisse utilizzato per reindirizzare l'utente sulla versione mobile del proprio sito web, per ottimizzare la pagina sarebbe necessario ricrearla con un design Responsive, in modo da evitare completamente il reindirizzamento e ridurne il tempo di caricamento.

Minimizzare HTML CSS e JavaScript

Per minimizzazione si intende la riduzione della dimensione delle risorse (byte) della pagina web (HTML CSS e JavaScript). In altre parole, questa attività consiste nell'eliminare i byte superflui come interruzioni di riga, rientri e spazi in più. La compattazione di queste risorse consente di ridurre i tempi di esecuzione, analisi e scaricamento. Inoltre, per i file CSS e JavaScript è possibile ridurre ulteriormente le dimensioni dei file rinominando le variabili ed ottimizzando le funzioni. A questo scopo, esistono diversi software online gratuiti che permettono di convertire file non ottimizzati in una versione compatta e minimizzata.

Ottimizzare le immagini

Ottimizzare le immagini significa impostare le dimensioni minime per le immagine chi si andranno ad utilizzare, in modo da ridurre il tempo di attesa dell'utente prima che le risorse vengano caricate. La compressione delle immagini consente di risparmiare molti byte di dati e, di conseguenza, diminuisce sensibilmente il tempo di caricamento di tutta la pagina. I tempi di caricamento sono anche legati alla velocità di connessione del dispositivo utilizzato. Gli utenti che utilizzano una connessione lenta rischiano di non riuscire a caricare in tempi accettabili le pagine che contengono immagini molto grandi, portandoli ad abbandonare il sito web.

Ridurre il tempo di risposta del server

La risposta del server viene misurata nel tempo necessario a caricare il codice HTML che conseguentemente avvia il rendering della pagina. Minore è il tempo richiesto, minore sarà la latenza di rete tra il motore di ricerca e il server. Un tempo di risposta del server molto elevato può generare un problema legato al rendimento. È consigliabile di ridurre il tempo di risposta del server sotto i 200ms. I principali fattori che determinano queste latenze sono riconducibili a blocchi delle risorse, framework, query su database o lentezza del routing. Per migliorare il tempo di risposta del server è necessario prendere in considerazione tutti questi fattori e capire quali elementi possono essere modificati per ottenere un rendimento migliore.

Sfruttare la cache dei browser

Sfruttare la cache significa attivare la memorizzazione delle risorse statiche da parte dei browser, al fine di ridurre il tempo di caricamento delle pagine agli utenti che visitano il sito web più di una volta. Le intestazioni di memorizzazione devono essere applicate a tutte le risorse statiche memorizzabili nella cache (come ad esempio file JS e CSS, immagini, file multimediali, PDF, etc.). Generalmente, il codice HTML non è statico e non dovrebbe essere memorizzato nella cache come impostazione predefinita. Le risorse statiche devono restare memorizzate nella cache per almeno una settimana (è consigliabile un mese), mentre e risorse di terze parti dovrebbero restare memorizzate per almeno un giorno. Queste impostazioni vengono configurate sul file .htaccess mediante le intestazioni: Expires, Cache-Control, Last-Modifed ed ETag. È importante prestare la massima attenzione su questa attività, dal momento che le risorse statiche memorizzate non verranno ricaricate fino alla scadenza impostata o fino a quando la cache del browser non sarà cancellata. L'unica soluzione per far ricaricare un file modificato, ma precedentemente memorizzato dal browser, è quella di rinominare la risorsa. In questo modo, non appena l'URL viene modificato, il browser riceve l'istruzione di recuperare nuovamente la risorsa.