Velocità di un sito web. Ecco come migliorare le performance in download

performance

La Ferrari è sempre la Ferrari (credits Ferrari.com)

Leggeri e veloci, così vorremmo i siti nel 2014 e soprattutto così li vuole Google già da Aprile 2010.

Le connessioni a internet migliorano e la banda larga è disponibile sempre in più aree del nostro territorio, anche se sappiamo  l’Italia essere indietro rispetto a molti altri paesi del mondo. Tuttavia a Milano, ad esempio, si può navigare in mobilità via tablet o smartphone in 4g (LTE) ovvero a una velocità degna delle migliori ADSL.

Questo incremento di performance ha indotto talvolta designer e sviluppatori ad abusare di una situazione comoda, tanto che il peso medio delle pagine web è aumentato nel 2013 del 32%. Se da un lato ci possiamo permettere di inserire script e animazioni più complesse e pesanti, dall’altro diventa fondamentale non tralasciare l’importanza di abbattere il più possibile i tempi di download, ottimizzando così l’esperienza utente.

Due parole sulle immagini

Sicuramente gli elementi che contribuiscono maggiormente all’aumento del peso di una pagina sono le immagini. Vediamo qualche piccolo accorgimento utile per tenere a bada i kb di fotografie, loghi e grafiche varie:

  • File di larghezza e altezza corrette
    Molto spesso si vedono immagini ridimensionate direttamente dal browser, capita infatti di trovare .jpg 1200×800 inseriti in un contenitore 600×400. Delegare quindi le dimensioni a semplici regole CSS come width: 100% e height: auto può essere dannoso. E’ bene quindi esportare le immagini esattamente delle dimensioni con le quali verranno visualizzate.
  • Scelta del formato
    In fase di salvataggio di un file, è importante decidere quale sia il formato corretto per il tipo di immagine. Utilizzando, ad esempio, la funzione “Salva per il web” di Photoshop si possono verificare le variazioni di kilobytes a seconda dell’estensione finale: .gif, .png o .jpg.
  • Rifinire il peso finale
    Una volta completato correttamente il salvataggio si può fare ancora un piccolo passo in più, ovvero utilizzare alcuni script che riducono i bytes di un’immagine senza intaccarne la qualità finale. Su Mac personalmente uso ImageOptim (non disponibile per Windows), esistono alcune alternative online come il tool di Yahoo Smush.it.

CSS con attenzione e Javascript con moderazione

Dal linguaggio CSS non si può prescindere ovviamente, ma si può ragionare su un utilizzo dello stesso più consapevole (suona un po’ come un spot eco-sostenibile, lo so). Nonostante non sia considerato come uno dei fattori che drammaticamente possa incidere sulla velocità finale di una pagina, il codice di stile può essere reso comunque più snello. A differenza del peso di un’immagine, che è un qualcosa di oggettivo, il CSS si presta a tecniche e visioni differenti e a volte discordanti. Ognuno deve trovare la sua via e la metodologia che si adatta meglio al progetto in questione:

  • Concatenare più file in unico .css
    Una buona norma, per diminuire le HTTP Requests, è quella di fare una singola chiamata per scaricare il file di stile esterno invece che molteplici. Su questo punto naturalmente esistono teorie differenti che consigliano, invece, di avere uno stile essenziale (di peso inferiore) per la home page e i .css aggiuntivi solo nelle pagine interne.
  • File Minified
    Qualunque tecnica si usi, avere una versione minify del file è la best practice. Quando scriviamo file CSS diamo una formattazione logica al testo che comprende spazi e ritorni a capo; questi bit vuoti sono inutili al browser e sono dunque eliminabili tranquillamente. Se si usano pre-processori come Sass o Less le funzioni di consolidamento sono native, altrimenti ci sono tool online come YUI.
  • E Javascript? Solo l’essenziale
    Fatte valide le pratiche di cui sopra anche per i file .js, serve considerare che l’implementazione di codice Javascript dovrebbe essere limitato alle sole funzioni davvero importanti di una pagina. Non mi sembra produttivo includere molteplici librerie giusto per avere due immagini in fade l’una sull’altra. Nel caso si utilizzi jQuery è bene studiare qualche buon pattern che possa incrementare le performance della libreria.

Hosting, compressione e avanzate

Completata la messa a punto di codici e file esterni ci si può concentrare su alcuni aspetti un po’ più avanzati. In primis è importante scegliere un hosting di qualità, c’è una grande differenza infatti tra un condiviso e un server virtuale/dedicato/cloud. Ad esempio, in un progetto di medio traffico siamo passati da un hosting condiviso di Register a un DV base di MediaTemple e i risultati certificati da Webmaster Tools sono stati confortanti (vedi immagine qui sotto):

velocità scansione

Si può vedere chiaramente dai grafici come, da gennaio 2014, siano aumentate considerevolmente le pagine scansionate giornalmente e sia diminuito drasticamente il tempo di download di una pagina.

Abilitare la compressione gzip!
Sempre in ottica di ridurre il più possibile il peso dei vari elementi, è altamente consigliato configurare il server Apache abilitandolo all’uso del mod_deflate. Questa operazione affaticherà un po’ le risorse della macchina, ma il beneficio per gli utenti varrà il sacrificio.

Cache headers, cosa?
Un punto che devo ammettere sto ancora studiando è l’utilizzo della cache HTTP, ovvero quelle istruzioni che permettono di forzare il salvataggio in remoto di alcuni file che sappiamo non modificarsi spesso. Ad esempio a logo del sito, favicon, stili CSS core e altro possono essere impostate regole che indichino, al browser dell’utente, di non riscaricare ogni volta la risorsa. E’ un tema un po’ complicato, dal mio punto di vista, perché può coinvolgere l’aggiramento del comportamento naturale del browser, l’interazione con content delivery network e i sistemi di cache già presenti in alcuni cms.

Strategie e discussioni del momento…
Il dibattito sull’incremento delle performance è molto vivo sul web e le soluzioni a nostra disposizione sono davvero molteplici. Senza addentrarmi in ognuna di questa, visto che non le ho sperimentate di persona ancora, mi limito a indicare possbili percorsi di approfondimento:

  • Lazy Load (es. http://www.appelsiini.net/projects/lazyload):
    Questa tecnica prevede il download degli elementi del sito al solo scroll del finestra e non prima; ovvero vengono caricate solo le immagini che l’utente può realmente visualizzare alla sua risoluzione corrente.
  • CSS3 vs jQuery
    In termini di performance è consigliato animare alcuni elementi del DOM via CSS3 piuttosto che in jQuery, prevedendo eventualmente un fallback con modernizr. Nello stesso utilizzo di CSS3 le animazioni possono essere più o meno fluide a seconda delle proprietà utilizzate.
  • Data URIs, SVG e Icon Fonts
    Negli ultimi tempi si sta facendo largo anche una nuova “corrente”, che pensa di sostituire le care vecchie immagini con formati più innovativi. Nel caso specifico dei Data URIs si parla di eliminare le HTTP Requests sostituendole con un numero (incomprensibile per noi, ma non per i browser) di caratteri alfanumerici. I formati SVG invece sono file vettoriali che non perdono di qualità se scalati. L’ultima frontiera del design, invece, suggerisce di utilizzare le nuove icon fonts rispetto alle classiche icon sprites, questa novità è presente già nell’admin della nuova versione di WordPress.

In conclusione

A dir la verità ogni aspetto accennato in questo articolo meriterebbe un capitolo a sé. Il tema delle performance è a me molto caro perché, da una parte, si traduce in risparmio economico quando si paghi per la banda utilizzata, dall’altra però, consente di lavorare su un web più efficiente, più maturo e più sano. Il viaggio è solo all’inizio…

Scarica la guida

SCARICA LA GUIDA GRATUITA

Individua il motivo principale per cui non hai ancora sviluppato profitti interessanti attraverso il tuo sito e le tue campagne pubblicitarie.

Discussione

  1. Floriana ha detto:

    Dopo aver ottimizzato tutto l’ottimizzabile tra immagini, fogli di stile e cache dei siti che seguo, senza aver trovato grandi miglioramenti in termini di velocità del sito web, ho fatto la cosa più semplice e rivoluzionaria allo stesso tempo. Ho cambiato servizio hosting. Il mio problema era che i siti si trovavano tutti sullo stesso server condiviso che funzionava male perché non aveva abbastanza risorse per gestire tutti i siti che ospitava. Sono passata su un server virtuale flamenetworks e dall’oggi al domani è cambiata tutta la situazione. Io dico una cosa, indipendentemente dal provider (perché ce ne sono molti ottimi), dovremmo sempre curare il rapporto tra risorse necessarie e risorse a disposizione del sito. Fa tutta la differenza.

Lascia il tuo contributo...

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *