Pubblicato il 06/07/14e aggiornato il

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. 

javascript-asincrono

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.




4 commenti :

  1. Ciao Ernesto grazie per questo articolo che capita proprio a fagiuolo e grazie anche per gli altri ovviamente,ho inserito diversi widget da te proposti :) sto provando a inserire l'elemento async"" e mi sto chiedendo...ma tra le 2 " " ci va qualcosa? o semplicemente doppie virgolette e basta? (non so se mi sono spiegata...grazie

    RispondiElimina
    Risposte
    1. No solo le virgolette. Se il template non viene salvato allora si mette async="async"

      Elimina
  2. Nei widget tipo quello degli ultimi commenti o degli articoli correlati, dato che non c'è un link bensì un codice javascript copiato per intero nel blog è possibile utilizzare il tag async="" per renderlo asincrono? Funziona anche se tale tag lo inserisco all'interno di un javascript presente nel modello di Blogger?

    RispondiElimina
    Risposte
    1. Bella domanda. Non ho mai testato ma potresti provare.
      @#

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.