Come caricare in modo asincrono i javascript esterni.

Come rendere un javascript asincrono inserendo un opportuno tag nel template.

Quando un browser apre una pagina web e incontra un javascript deve ovviamente scaricarlo. Questa operazione impiega diverso tempo e questo rallenta significativamente il caricamento del sito. Da qualche tempo sta prendendo piede il caricamento asincrono che consente al browser di caricare in background i javascript che supportano questa opzione per permettere di visualizzare immediatamente gli elementi principali della pagina. Con i normali javascript bisogna invece aspettare il loro download prima di procedere con il caricamento del resto della pagina. Tutti i maggiori social network utilizzano questo sistema. 

Mi sembra che il tutto iniziò con il bottone di Google+ per poi essere  la volta dei plugin di Facebook e dei pulsanti di Twitter. Anche Pinterest ha iniziato a usare questa tecnologia per i suoi plugin che attraverso dei javascript permettono di pinnare le immagini a di avere i widget relativi.

I social network ricordati come altri tipo StumbleUpon non sono gli unici a usare il caricamento asincrono basta ricordare il servizio di commenti Disqus e i siti di condivisione Shareaholic e ShareThis. Infine sono asincroni di default lo script di Google Analytics e le unità pubblicitarie Google Adsense. Questi elementi saranno caricati solo alla fine e questo si può verificare facilmente aprendo una qualunque pagina web. Per esempio su questo sito i bottoni dei social si visualizzeranno solo dopo tutto il resto. Quando si carica nel nostro template su Blogger un javascript c'è la possibilità di renderlo asincrono anche se purtroppo non sempre è possibile. 

Un javascript caricato nel template avrà questo codice

<script type="text/javascript" ....... src="Indirizzo del javascript"></script> oppure
<script type="text/javascript" ....... src="Indirizzo del javascript"/>

dove al posto di indirizzo del javascript ci sarà l'hotlink del javascript che può essere quello ottenuto da un widget trovato in rete o anche quello di un nostro account su cui lo abbiamo caricato. Al posto dei puntini di sospensione ci potrebbero essere o meno delle personalizzazioni. Per rendere questo javascript asincrono dobbiamo modificare la riga precedente in questo modo

<script type="text/javascript" async=""  ....... src="Indirizzo del javascript"></script>

dove è stato aggiunto l'elemento  async="". Si salva il modello. Nel caso il cui il modello non venisse salvato si può provare inserendo async="async". In ogni caso si deve poi aprire il sito per vedere se effettivamente il javascript si carica da ultimo. Se nei javascript sono stati utilizzati i tag document.write al momento non pare possibile renderli asincroni.