Tutti i trucchi per velocizzare il caricamento delle pagine del proprio sito!

Giovanni Canella

27/09/2013

5965

Durante la realizzazione di un sito dobbiamo assicurarci di renderlo compatibile con la maggior parte dei browser che ci sono in circolazione e renderlo più veloce possibile adottando vari "trucchi" che vedremo uno ad uno in questo articolo!

Molti siti caricano una marea di immagini, video, script che se non ottimizzati non fanno altro che rallentare la pagina e infastidire l'utente, aumentando la possibilità che esca e nel peggiore dei casi lo inserisca nella sua "blacklist personale" per poi non tornare più.

Secondo varie statistiche la dimensione media delle homepage è inferiore a 1MB, più precisamente ~940kB, valore decisamente non basso: dato che se un utente visita in una giornata 50 pagine consuma mediamente appunto 50MB e se non ha una connessione veloce deve anche aspettare un tempo considerevole.

Quindi per ridurre drasticamente il peso del nostro sito ecco 7 consigli fondamentali:

1. Utilizzare più CSS e meno immagini

E' bene cercare di adottare sempre le soluzioni basate su CSS invece che utilizzare delle immagini per qualunque scopo, per esempio: se dobbiamo creare un menù usiamo i gradienti introdotti con l'avvento di CSS3 in questo modo:

background-image: linear-gradient(top right, #FFFFFF 0%, #AACFEF 100%);

Invece che:

background-image: url("gradiente.png");

E' solo un inutile spreco di risorse dato che si può arrivare allo stesso risultato con un procedimento più veloce e pulito. Qualcuno può obiettare sul fatto che la proprietà illustrata precedentemente non sia supportata da tutti i browser, e in verità ha ragione, ma diamo un occhio al seguente grafico

Grafico dei browser che supportano i gradienti CSS3

Possiamo renderci conto che ormai è supportata attualmente da tutti i browser principali, sia per desktop

  1. Firefox (<= 23),
  2. Chrome (<= 29),
  3. Safari (<= 6)),
  4. Opera ( <= 16),
  5. IE (> 10).

che per mobile.

Detto ciò un'altra cosa da evitare è impostare un cambio di immagine nell'evento :hover, perchè nella maggior parte dei casi il pulsante, o quello che è, diventerà per un momento trasparente finchè non viene caricata l'immagine di sottofondo. 

2. Ridurre il numero di immagini al minimo e comprimerle

Come già accennato prima, una delle cose principali per velocizzare il caricamento di una pagina è utilizzare le immagini che proprio riteniamo essenziali, per esempio quelle dentro un articolo o il logo del sito. Inoltre queste immagini vanno anche compresse con un qualsiasi programma per gestirle, per esempio GIMP, in modo da ridurre ancora di più la loro dimensione.

Per farlo andiamo in File -> Esporta, diamo un nome al file e clicchiamo su Esporta. Successivamente spuntiamo le caselle nel seguente modo per un buon rapporto qualità/peso.

Esempio di esportazione con un buon rapporto qualità/peso

In questo modo l'immagine finale avrà un peso di soli 8.4kB rispetto ai 28.3kB iniziali! Pensate invece con immagini molto più grandi quanto sarà il risparmio! Questo semplicemente modificando alcuni parametri!

Stesso discorso vale con le immagini .png, basta modificare il livello di compressione dall'attuale valore a quello massimo (9), sempre con un notevole miglioramento.

Compressione immagini .png 

 

3. Minimizzare file .css e .js

Altra cosa importante è comprimere i fogli di stile e gli script per ridurne le dimensioni, questo perchè fra una regola e l'altra non ci accorgiamo neanche delle linee di codice inserite! In siti con molti contenuti ci vuole un attimo a superare la soglia di 1000, con ovvia conseguenza per le prestazioni.

Per fare ciò possiamo affidarci a vari servizi online, come anche quello che ho creato per voi: Ginho Minifier! il procedimento è semplice: 

  • Basta inserire il contenuto del file .css/.js dentro la textarea, 
  • Premere sul pulsante "Comprimi",
  • Enjoy!

Ginho Minifier in azione

Si possono risparmiare svariati kB, il tutto dipende ovviamente dalle dimensioni originali. Pertanto sconsiglio di comprimere file di piccole dimensioni, dato che non otterremo nessun risultato.

 

4. Attivare la compressione gzip delle pagine web

Ogni volta che apriamo una pagina web, il nostro browser effettua una richiesta HTTP al server su cui è hostato e inizia a scaricare i file neccessari per essere visualizzato. Normalmente le pagine vengono inviate senza essere compresse, influendo così sulla velocità, per ovviare a ciò possiamo far comprimere la pagina prima che venga spedita con gzip.

Ma cos'è veramente? Semplice: è un formato open soruce per la compressione dei dati, utilizzato molto in questo ambito grazie alla sua potenza, dato che permette di risparmiare anche il 70% sulla dimensione della pagina! Possiamo attivarlo attraverso 2 strade:

  1. File .htaccess.
  2. PHP.

.htaccess

Se scegliamo la prima opzione, inseriamo all'interno dell'omonimo file il seguente pezzo di codice:

# Attivo compresione gzip.

	AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css application/x-javascript application/javascript

Che controllerà se su Apache è installata la mod_deflate, operazione consigliata dato che non è un modulo obbligario, ma opzionale; quindi nel caso non fosse installata ci verrà mostrato un bel errore 500. Successivamente procediamo all'attivazione sui seguenti tipi di file:

  • text/text - text/plain: FIle di testo,
  • text/html: File .html,
  • text/xml: FIle .xml,
  • text/css: File .css.
  • application/x-javascript - application/javascript: Script javascript.

PHP

Mentre se vogliamo fare il tutto con PHP, la strada è più semplice: infatti basta utilizzare l'utilissima funzione ob_start() per la gestione dell'output, passandogli come parametro ob_gzhandler:

ob_start("ob_gzhandler");

prima che la pagina venga mostrata:

<?php ob_start("ob_gzhandler"); ?>
<html>
<head>
	<!-- Intestazioni -->
</head>
<body>
	<!-- Contenuto -->
</body>
</html>

Per verificare se l'abbiamo attivata correttamente rechiamoci su http://checkgzipcompression.com, inseriamo il nostro sito e clicchiamo su "Check". Ecco un esempio del mio sito Ginho, che come si può ben vedere da una dimensione originale dell'homepage di 29.29kB si è andati a 6.18kB, con un risparmio del 78.9%!.

5. Utilizzare gli sprite CSS

Quando il browser scarica una pagina web, secondo gli standard definiti dal W3C su HTTP/1.1, può ottenere solo due elementi (immagini, video, script) alla volta, quindi più ne inseriamo più ce ne saranno in coda, rallentando così il caricamento. Per risolvere questo problema possiamo utilizzare gli sprite CSS, che non sono altro che un'unica immagine che fa da contenitore. In questo modo il peso sarà sempre lo stesso, ma le richieste HTTP da 20, per esempio, passano a 1! Dando un bel sprint alla pagina!

Giusto per dare qualche informazione: questo sistema è utilizzato da molti siti importanti:

  • Google,
  • Yahoo
  • Twitter,
  • YouTube,
  • Apple,
  • Amazon,
  • Ginho (:D)
  • e molti altri.

Ecco un esempio di sprite:

Esempio di sprite CSS Google

Per realizzarlo il procedimento è molto semplice, basta un qualunque programmma di grafica (io utilizzerò l'ottimo GIMP), e tanta, tanta pazienza; questo perchè dovremo prendere icona per icona e affiancarle in modo che non ci sia nessuno spazio abbondante fra di loro, in questo modo:

Creare uno sprite CSS

Per chi ha fretta si possono utilizzare dei servizi online, quali spriteme.org, che, predendo in input le nostre immagini, genera automaticamente lo sprite finale, con anche le relative coordinate. Sembra tutto bello, ma l'output non è dei migliori, infatti le icone non sono ravvicinate, ma bensì molto distanti tra di loro penalizzando la dimensione finale del file. 

In ogni caso ecco il risultato finale del nostro "artigianale":

Risultato finale sprite CSS

Una volta creato, quando vogliamo ottenere una di quelle immagini dobbiamo innanzitutto caricare lo sprite impostandolo come background del contenitore padre, successivamente tramite la proprietà background-position, inseriamo le coordinate x e y per fare in modo di inquadrare quella da noi desiderata.

.elemento-sprite {
	width: 16px; /* Imposto la lunghezza dell'elemento dentro lo sprite, in questo caso 16px	
    background-position: 16px 16px; /* Imposto in che coordinate si trova
}

Facciamo attenzione però di non utilizzare sempre questo sistema, in quanto andrebbe adoperato soltanto con immagini di piccole/medie dimensioni, altrimenti la pagina resterebbe in attesa per troppo tempo, vanificando il lavoro di ottimizzazione che abbiamo svolto.

6. Utilizzare dove possibile i CDN

Cosa sono i CDN? (Content Deliver Network) Sono infrastrutture atte alla distribuzione di contenuti di qualsiasi tipo, nel nostro caso ci interessano librerie javascript, quali jQuery, MooTools e affini. Il motivo per cui utilizzarli è semplice: dato che questi file sono generalmente hostati su siti importanti, quali Google, è molto probabile che siano nella memoria cache dell'utente, in modo da velocizzare il caricamento della pagina.

Google offre una miriade di librerie, ecco una lista completa, con anche il link della risorsa. Es.

Conclusioni

Una volta che avete messo in pratica i consigli sopra mostrati, il nostro sito avrà una marcia in più rispetto agli altri che non utilizzano queste tecniche, sia in termini di velocità, ma anche in classifica nei motori di ricerca. Questo perchè Google, ma anche altri, predilige nelle SERP siti più veloci.

Per vedere su carta i miglioramenti, facciamo analizzare il sito sul sito tools.pingdom.com/fpt/.

Ecco il mio risultato:

Scansione sito per determinare la velocità

Con una valutazione di 95/100, un peso di pagina complessivo di soli 242.4kB!

Ecco un confronto con un altro sito decisamente meno ottimizzato:

Sito non ottimizzato

Da notare il numero di richieste HTTP (180).

I più letti

Ti potrebbero interessare