Una delle tematiche di cui si sente sempre più spesso parlare è la velocità dei siti. Ormai è ben noto come i test A/B abbiano dimostrato una netta correlazione tra la velocità del sito, e il suo tasso di conversione. Attori importanti del mercato sono arrivati a formulare delle regole aritmetiche a riguardo, come quella molto nota di Amazon, ovvero che ad ogni 0,1 secondi di tempo di caricamento della pagina, corrisponde una diminuzione delle conversioni del 1%. Ad alimentare la corsa alla velocizzazione dei siti è anche Google, che da ormai parecchi anni cerca di sensibilizzare i webmaster a velocizzare i propri siti web, introducendo tale parametro come fattore di posizionamento sulle fatidiche SERP. Al di là dei dati numerici e dei vantaggi di posizionamento, i benefici di un sito veloce possono essere già ricavati dalla propria esperienza personale. Tutti abbiamo provato e purtroppo proviamo frustrazione nel navigare siti lenti e pesanti che impiegano diversi secondi a caricare una pagina. Quando un utente è frustrato sicuramente non vive una buona esperienza di navigazione sul nostro sito e il suo unico desiderio sarà, se siamo fortunati, ricavare l’informazione che gli serve e allontanarsi definitivamente, o peggio ancora chiudere direttamente il sito (chi non lo ha mai fatto sul proprio smartphone in 3G?). Il problema della velocità è infatti ancor più amplificato dall’ormai enorme quota di traffico web veicolata tramite dispositivi mobile, che un po’ per tecnologia delle reti mobili tendono ad allungare i tempi di caricamento di una pagina. Questo articolo non vuole essere la solita lista di plugin da scaricare per velocizzare “magicamente” il proprio blog WordPress, ma piuttosto l’esposizione di un set di metodi per poter migliorare le prestazioni di qualsiasi sito web. La trattazione di ogni metodo richiederebbe pagine e pagine, se non libri, pertanto in questo articolo non sarò volutamente troppo approfondito, rimandando una lettura ben più avanzato ricercando sul nostro onnisciente Google. Da dove iniziare? Per migliorare la velocità del nostro sito, possiamo operare su due fronti:
- Il front-end
- Il back-end
Ottimizzare il Front-End
Le ottimizzazioni del front-end coinvolgono tutte quelle migliorie che vanno ad impattare essenzialmente il caricamento della pagina dalla parte del client (cioè il browser).
Ridurre al minimo il trasferimento e il peso delle risorse
Quando un browser scarica la pagina, procede in sequenza a scaricare tutte le risorse necessarie per la sua visualizzazione, come fogli di stile, JavaScript, immagini etc.. Per come ha funzionato fino ad oggi il protocollo HTTP 1.1, il download di queste risorse è seriale per ogni connessione, cioè una connessione al server può scaricare un file alla volta e purtroppo non possono essere parallelizzate troppo connessioni contemporanee al nostro server. Detto in termini pratici, possiamo generalmente interpretare che se il nostro sito ha 50 risorse da scaricare, e il nostro client può avviare massimo 4 connessioni per volta, saranno scaricati 4 file per volta. Questo limite varia in base al sistema operativo e al browser. È evidente che bisogna cercare di ridurre il più possibile il numero di risorse necessarie alla pagina tramite le seguenti tecniche:
- Minificazione e concatenazione. Bisogna cercare di accorpare tutti i fogli di stile e file JavaScript in un unico file e procedere alla minificazione, cioè alla rimozione degli spazi inutili all’interprete per elaborare il codice.
- CSS sprite. Per esempio, poniamo di usare un set di icone per il nostro sito. Anziché costringere il browser a scaricare un file per ogni icona, si possono inserire tutte le icone in un’unica immagine e procedere successivamente a mostrare frazioni di quella immagine. Esistono dei servizi che agevolano questo compito, trovabili come sempre su Google.
- Ridurre e minimizzare al minimo gli script esterni. Purtroppo si tende a sovraccaricare i siti di script esterni, certe volte persino inutilizzati, che vanno ad impattare sul caricamento della pagina. Basti pensare ai tanto diffusi bottoni social dei tantissimi social network esistenti. Si dovrebbe cercare di ridurre al minimo la loro presenza, in particolare a quelli più effettivamente utili. Avere il tasto social di un social russo, difficilmente sarà utile se il tuo sito è italiano.
- Impostare la cache per le risorse statiche. Dopo aver realizzato il sito, risorse come CSS, JavaScript e immagini difficilmente subiscono spesso mutazioni. Allora perché costringere i browser dei propri utenti ad ogni caricamento di una pagina a scaricare nuovamente tutte le risorse comuni, o nel migliore dei casi a chiedere al vostro server se il file è stato aggiornato (aggiungendo ulteriore carico al vostro server)? È evidente che risulta molto vantaggioso impostare sul vostro webserver la cache per le risorse statiche: in questo modo il browser, quando scarica un file, saprà che non cambierà per il tempo che avete stabilito ed eviterà di richiederlo nelle visite successive.
- Usare le CDN: acronimo di Content Delivery Network, sono dei sistemi di erogazione di risorse statiche distribuite in tutto il mondo. Sono particolarmente utili quando si ha un’utenza internazionale, per minimizzare la distanza di trasmissione delle risorse statiche all’utente. L’uso più comune che se ne fa, è quello di impiegarle per fornire contenuti statici molto comuni, come la libreria jQuery. Optando infatti di fornire il file tramite la sua CDN ufficiale anziché tramite il proprio server, si sfrutta il fatto che quella risorsa sarà stata sicuramente scaricata nella visita di un utente su un altro sito, e grazie al caching, sarà evitato un nuovo download.
Ottimizzare il Back-End
Le ottimizzazione del back-end coinvolgono tutte le migliorie che vanno ad impattare sostanzialmente sul carico di lavoro del server e sulla generazione delle pagine. Molte delle ottimizzazioni qui descritte non sono spesso possibili in un ambiente di shared hosting, pertanto l’unico modo per metterle in pratica è passare ad un VPS o ad un Server Dedicato.
- Attivare l’OPcache. Poiché la stragrande maggioranza dei siti web funziona su una piattaforma PHP, questo consiglio è particolarmente importante. Attivare l’OPcache di PHP, permette a PHP di evitare di dover reinterpretare ad ogni esecuzione dello script tutti i file di codice. Evitando questa operazione davvero molto onerosa, ridurrete drasticamente (anche del 80% con i CMS più pesanti) i tempi di generazione di una pagina e quindi il carico del vostro server. L’unico problema è che l’OPcache è un estensione di PHP che difficilmente troverete abilitata su un hosting shared. Così per poter beneficiare di questo opzione dovrete o passare il vostro sito, su uno dei pochi hoster che la offrono, oppure passare ad un Server Dedicato o VPS. Questi ultimi ormai si trovano a prezzi abbordabilissimi, e spesso inferiori a quelli dei normali hosting.
- Usare la cache di Nginx o Varnish. Probabilmente avrete già sentito parlare di questi due webserver. Se avete un sito molto frequentato, probabilmente avrete pagine visualizzate ben più di una volta al minuto. Perché allora costringere PHP (o qualsiasi altra piattaforma) a dover generare tante volte in un minuto la stessa pagina, che probabilmente non sarà cambiata di una virgola? Ecco che intervengono questi due software, che si occupano di mettere in cache intere pagine per la durata da voi stabilita e di fornirla ai visitatori. Di fatto viene azzerato il tempo di generazione della pagina a beneficio del carico del vostro server e di quella di trasferimento. Anche questa soluzione è purtroppo quasi indisponibile su shared hosting e richiede un server proprio.
- Ottimizzare il codice del proprio script. Qui si aprono due diversi rami: se si utilizza un CMS o meno. Se si utilizza un CMS, come WordPress, esistono sicuramente plugin sviluppati per accelerare il sito, mettendo in cache alcuni dati, riducendo il numero di query al database, o che riescono persino ad eseguire molte delle ottimizzazioni front-end che ho elencato prima (per esempio per WordPress, W3 Total Cache). Ovviamente i limiti di questi plugin, risiedono nei vincoli dell’architettura del CMS, che risultano quasi sempre molto pesanti e poco volti alle performance. Se si utilizza un sistema fatto in casa, si hanno le migliori possibilità di ottimizzazione, riducendo al minimo le query e sviluppando tenendo in conto le proprie prestazioni.
- Abilitare la compressione gzip. Gzip, soprattutto sui contenuti testuali, permette un notevole risparmio di peso nel trasferimento dei dati. In genere tutti gli hosting la supportano di default.
- HTTP 2.0. Ne sentirete parlare spesso, ha raggiunto da ormai un anno la specifica finale ed è supportato da tutti i maggiori browser e webserver. Vi ricordate del limite di risorse trasferibili contemporaneamente al visitatore? Questo protocollo risolve il problema, permettendo il trasferimento in contemporanea di molteplici file sulla singola connessione, risolvendo in un colpo gran parte dei problemi di ottimizzazione del front-end. L’unico problema è che questa specifica è stata implementata nei browser quasi esclusivamente per i siti che funzionano tramite TLS (HTTPS), cioè connessione criptata.
- Google PageSpeed. È un modulo per Apache e Nginx che una volta installato effettua gran parte delle operazioni di ottimizzazione che ho elencato in questo articolo in automatico (come la minificazione dei CSS e la compressione delle immagini). Ovviamente lo svantaggio è che incide sul carico del server, inoltre i suoi filtri possono avere effetti indesiderati causando errori nelle pagine. Vale la pena provarlo per testarne il funzionamento.
Scegliere un buon Provider su cui ospitare il proprio Sito Web
Potete mettere in pratica tutti i consigli di questo articolo alla lettera, tuttavia se non vi affiderete ad un buon provider saranno poco utili. Se optate per un servizio di hosting condiviso assicuratevi che il provider utilizzi hardware adeguato, che non pratichi overselling (ovvero che venda più risorse di quel che ha, sperando che tutti gli utenti non le utilizzino contemporaneamente), o perlomeno non in modo eccessivo: se un piano offre risorse illimitate, potete capire bene che è overselling per definizione! Se potete, chiedete di provare il servizio in modo da avere un idea sulle reali prestazioni e testate se nelle ore di punta di traffico mantiene le performance. Se usate un CMS, potreste considerare di orientarvi verso un provider che offra pacchetti specifici che supportino tale CMS. In realtà si tratta in genere di normali piani di hosting condiviso, con il supporto a qualche funzione più di comodità (per esempio l’autoinstallazione dei CMS più comuni). I server virtuali VPS hanno ormai raggiunto prezzi abbordabilissimi e addirittura inferiori a quelli di un hosting condiviso. Se vi orientate verso questa soluzione vi consiglio anche qui di verificare bene quali sono le caratteristiche hardware dei server, e quali sono quelle realmente garantite. Cercate di affidarvi a piattaforme valide e stabili. Qui in genere è più facile provare il servizio, visto che normalmente i pagamenti sono mensili. Con questa soluzione avrete la massima possibilità di personalizzazione, tuttavia se non siete in grado di gestire un server dovrete mettere in conto di pagare un servizio managed (cioè qualcuno che gestisca il server): se non avete tale budget è meglio ripiegare su un hosting condiviso e vivere tranquilli. Simili considerazioni si possono fare anche se scegliete un server dedicato.
Conclusione: misuriamo i risultati raggiunti
Dopo aver ottimizzato tutti i fattori che influenzano le performance è opportuno misurare i risultati raggiunti e confrontarli con quelli iniziali. Ottimale per lo scopo sarà utilizzare alcuni tool che misurano nel dettaglio la latenza e i tempi di attesa dei singoli fattori che incidono sul caricamento della pagina. Potete utilizzare webpagetest.org o l’estensione per browser PageSpeed Insights per misurare i risultati raggiunti. Dall’analisi dei dati potete comprendere quali sono i fattori su cui intervenire, grazie anche ai suggerimenti automatici che vengono forniti da questi strumenti. Un consiglio che voglio dare a margine è considerare l’ottimizzazione della velocità come un meccanismo per migliorare la qualità dell’esperienza dell’utente e non come un semplice numero da minimizzare. Alcuni interventi di ottimizzazione possono essere molto onerosi in termini di lavoro, ma consentendo un guadagno davvero risicato sulle performance e magari incidendo negativamente sul resto dell’esperienza dell’utente in termini di funzionalità. In quest’ottica bisogna cercare di avere una visione complessiva della user experience bilanciando opportunamente tutti i fattori che la influenzano.
Autore: Emiliano del Gobbo di Scudlayer, per il MaxValle.
