I siti web Netdesign utilizzano cookies. Maggiori informazioni alla pagina Informativa Cookies. Continuando la navigazione accetti il loro utilizzo. Se non desideri i Cookie vai alla pagina Opt out Cookies

Buon Lunedì da Netdesign -Vieni a trovarci su Facebook o Twitter, scrivici a info@netd.it o chiamaci ai numeri 095 293 18 11 / 338 94 23 302

Come velocizzare un sito web

Consigli pratici per la progettazione di pagine web leggere e siti internet con un caricamento veloce.

Articolo pubblicato il 06/02/2012

Aggiornato il 21.10.2017: Aggiunto il paragrafo "7 - Strategie generiche per CMS"

Generalmente si pensa che per rendere un sito web più veloce sia necessario avere a disposizione più banda sul proprio server o sul proprio pacchetto di Hosting, a volte è vero ma molto spesso la velocità di caricamento - intesa come numero di secondi che passa dalla prima richiesta HTTP al rendering completo della pagina - può essere notevolmente migliorata se si mettono in pratica alcune tecniche di ottimizzazione sia della pagina che del codice lato server che la genera (PHP, Python, Perl).

In questo articolo vedremo come velocizzare un sito internet diminuendo il tempo di caricamento di una pagina anche del 50% ed agendo esclusivamente sulla struttura e le risorse contenute nella pagina.

Una pagina web contiene dati di diversa natura che appartengono generalmente a quattro categorie differenti:

1) Fogli di stile (CSS) (esterni ed integrati tramite link oppure incapsulati nel doc)
2) Libreria/e javascript (esterni ed integrati tramite script oppure incapsulati nel doc)
3) Immagini (esterne)
4) Testo (incapsulato nel documento stesso)

potremmo quindi standardizzare la struttura di una pagina web secondo il seguente codice html:

<html>
<head>
<link href="http://foo.com/bar.css" rel="stylesheet" type="text/css">
<script src="http://foo.com/lib.js"></script>
</head>
<body>
<p>Some Text</p>
<img src="http://foo.com/bar.jpg">
<p>Some Other Text</p>
</body>
</html>

La pseudo-pagina che avete appena visto è molto semplice e, se l'immagine, il css ed il javascript non hanno dimensioni proibitive, il caricamento dell'intera pagina dovrebbe avvenire in una manciata di millisecondi.

Peccato che questo sia soltanto uno scenario ideale e la maggior parte delle pagine web che visitiamo hanno una struttura molto più simile a questa:

<html>
<head>
<link href="http://foo.com/bar.css" rel="stylesheet" type="text/css">
<link href="http://foo.com/barx.css" rel="stylesheet" type="text/css">
<link href="http://foo.com/bary.css" rel="stylesheet" type="text/css">
<script src="http://foo.com/lib.js"></script>
<script src="http://foo.com/libx.js"></script>
<script src="http://foo.com/liby.js"></script>
</head>
<body>
<p>Some Text</p>
<img src="http://foo.com/bar.jpg">
<p>Some Other Text</p>
<img src="http://foo.com/barx.jpg">
<img src="http://foo.com/bary.jpg">
</body>
</html>

che a prescindere dal peso in kilobyte delle risorse integrate nella pagina (css, js, img) avrà un tempo di caricamento superiore all'esempio precedente.

Il problema delle richieste HTTP

Per ogni risorsa necessaria al rendering della pagina, il nostro browser dovrà effettuare una richiesta HTTP al server, per questo ottimizzare il numero di risorse di una pagina Web è un'operazione cruciale per migliorare le performance di un sito internet.

Per ogni richiesta HTTP il nostro browser aggiunge dell'overhead alla pagina causato dalla necessità di trasferire dati in upload al server; ad ogni richiesta infatti il browser invia parecchi HEADERS che contengono le informazioni riguardanti il path della risorsa da scaricare, i Cookies più altri HEADERS come l'User-Agent e l'Accept-Encoding.

Capirete dunque che limitare il numero di richieste HTTP generate da una pagina può realmente migliorare le performance della pagina stessa rendendo il caricamento più agile e scattante.

Limitare il numero di Fogli di Stile (CSS)

Una delle prime operazioni da effettuare è quella di limitare il numero di CSS inclusi in una pagina: è preferibile concentrare tutte le regole CSS in uno massimo due file in modo tale da evitare il download inutile di tanti piccoli file css. In certi casi questa operazione potrebbe rendere complicata l'amministrazione del sito web, ma il mondo dello sviluppo software è sempre pieno di "Princìpi di Heisenberg" che obbligano lo sviluppatore a scegliere tra due opzioni ognuna delle quali a scapito dell'altra.

Limitare il numero di librerie Javascript

Oltre a limitare il numero di file CSS, è consigliabile limitare anche il numero di librerie javascript integrate in una pagina. Facciamo l'esempio di jQuery. Moltissimi siti web funzionano grazie a jQuery e quasi sempre fanno uso di plugin ed estensioni della famosa libreria; ci si trova spesso a visitare siti web che contengono anche dieci o quindici script javascript integrati che devastano totalmente il browser rendendo il caricamento delle pagine lentissimo.

Il sito web di Repubblica ad esempio include all'interno dell'homepage ben 16 librerie javascript che potrebbero essere inglobate all'interno di un singolo file js avvantaggiando il tempo di caricamento. È anche vero che non sempre gli script caricati all'inizio della pagina sono necessari sin da subito, alcuni potrebbero essere eseguiti soltanto in seguito all'azione dell'utente, ma in questo caso ci viene in aiuto il download asincrono (la funzione jQuery $.getScript() ad esempio fa questo) che permette di scaricare lo script solo quando effetivamente necessario.

Ottimizzare le immagini

Le immagini sono un'altra componente della pagina che causa overhead, ma in questo caso l'overhead non è sempre dovuto alla richiesta stessa ma è causato da immagini troppo grandi o troppo poco ottimizzate. Per prima cosa è importante servire le immagini da un dominio differente da quello della pagina (un sottodominio va benissimo) per due semplici ragioni:

1) I browser non sono capaci di scaricare in parallelo decine di risorse dallo stesso dominio, usare due domini permette quindi di bilanciare il carico sia del server che del browser.

2) Offrire le immagini dallo stesso dominio della pagina web le sottopone ai cookie, che vengono quindi spediti come overhead al server senza effettivi vantaggi. Usare un dominio (cookie free) differente per le immagini permette di effettuare delle richieste più "leggere" e senza l'overhead causato dall'invio dei Cookie al server.

È poi consigliabile ottimizzare le immagini al fine di ottenere file di dimensioni più piccole: perchè scaricare un'immagine di 800 per 600 pixel quando nella pagina verrà visualizzata a metà della dimensione? se poi volete essere meticolosi comprimete le immagini - senza sacrificarne la qualità - utilizzando qualsiasi strumento di compressione sia ad interfaccia grafica (Photoshop, Gimp) che a riga di comando (optipng, convert).

Minimizzare i css e gli script javascript

Dopo aver raggruppato tra di loro i fogli di stile e gli script javascript, è auspicabile minimizzarli al fine di eliminare tutto ciò che non è necessario come commenti e tutti gli spazi (tab, newlines) generati dell'indentazione che sebbene siano utili per lo sviluppatore in fase di sviluppo, si traducono soltanto in overhead per il browser. Utilizzate quindi strumenti come yui compressor che minimizza sia file javascript che css ed ha incluse poche opzioni ed è facile da utilizzare.

Utilizzare gzip [deflate] per la compressione dei dati

L'utilizzo di gzip sul server permette di trasferire i dati dopo averli codificati con l'algoritmo gzip; questa pratica permette di comprimere i dati ottenendo una riduzione del payload fino al 75%. Applicate la compressione gzip soltanto alle risorse testuali (html, js, css, xml etc. etc.) perchè applicare la compressione ai file multimediali (immagini o video) - che sono sostanzialmente binari - non comporta nessun vantaggio sovraccaricando soltanto il vostro server.

Per scoprire se il vostro sito web utilizza già la compressione gzip, controllate il file di configurazione del vostro server oppure utilizzate uno strumento come cUrl che, permettendovi di ispezionare gli header di risposta del server vi dà la possibilità di scoprire l'esistenza dell'header Accept-Encoding: gzip.

Se non avete dimestichezza con cUrl - e con la riga di comando - utilizzate i Developer Tools di Google Chrome oppure installate l'estensione firebug di Firefox.

Strategie generiche

Come abbiamo già suggerito nei precedenti paragrafi la strategia del "less is more" è sicuramente premiante e ci aiuta nel raggiungere l'obiettivo di un sito web più veloce e leggero. Allo stesso modo se il tuo sito è sviluppato su un CMS generico, per blog oppure eCommerce ti suggeriamo di applicare la stessa strategia non soltanto allo sviluppo del tema ma anche - o forse soprattutto - alla quantità e qualità di estensioni da installare. È risaputo che ogni livello software aggiuntivo aggiungendo funzionalità aggiunge contemporaneamente un maggiore pero in termini di memoria e cicli di CPU consumati.

Ci è più volte capitato, per i nostri clienti, di occuparci del restyle o dell'aggiornamento di un sito web e siamo spesso inorriditi dal vedere dozzine di componenti e moduli aggiuntivi installati sui vari Wordpress, Joomla, Magento e Prestashop. Tali componenti vengono spessi installati ed attivati per usarne una minima parte di funzionalità producendo di fatto un grande appesantimento della piattaforma. Una pratica purtroppo parecchio diffusa ma assolutamente da evitare se vuoi veramente velocizzare il tuo sito web.

Conclusioni

Dopo aver messo in pratica tutte le tecniche di ottimizzazione di un sito web avrete delle pagine web più scattanti e con un tempo di caricamento a volte inferiore anche del 50%. Tutto questo modificando soltanto la struttura della pagina ed alcune delle risorse integrate. Se il vostro sito web è dinamico e fosse necessario migliorare ulteriormente le performance sarebbe opportuno apportare modifiche al codice, ottimizzare le query e mettere a punto la configurazione del server web e del vostro DBMS.

Novità

Per velocizzare un sito web, soprattutto su mobile, puoi utilizzare AMP, Accelerated Mobile Pages.

Hai trovato utile questo articolo?
Lasciaci un tuo sincero feedback

Pubblicati di recente

Articoli e documenti pubblicati di recente su questo sito web

  1. La SEO è cambiata: #Sapevatelo!
    online dal 09.02.2019
    ultima modifica il 09.02.2019


  2. Posso ottenere un certificato SSL per il mio sito web?
    online dal 05.02.2019
    ultima modifica il 05.02.2019


  3. Come ottenere l'accesso ai dati di analytics del mio sito web?
    online dal 05.02.2019
    ultima modifica il 05.02.2019


  4. Cos'è e cosa significa SEO?
    online dal 05.02.2019
    ultima modifica il 05.02.2019


  5. Come richiedere un preventivo?
    online dal 05.02.2019
    ultima modifica il 05.02.2019


  6. AMP - Il sito web che si apre istantaneamente
    online dal 03.02.2019
    ultima modifica il 05.02.2019


Ulteriori articoli recenti