Javascript rallenta il caricamento del tuo sito? Prova la modalità asincrona!
Pagina 1 di 2
Quante volte abbiamo sentito dire che Javascript è la causa più frequente dei rallentamenti nel caricamento di una pagina web? tante volte, vero? La cosa, purtroppo, deriva dal fatto che molti servizi utilizzati sui siti web ed i blog sono forniti dall'esterno mediante l'inclusione nella pagina web di un codice Javascript. Per fare un esempio si pensi a servizi come statistiche, scambi banner, social plugin, shoutbox, ecc.
Tutti questi elementi, di norma, vengono caricati nella pagina web attraverso l'utilizzo del tag <script> in questo modo:
<script type="text/javascript" src="http://www.sitoesterno.com/servizio.js"></script>Questo tipo di markup, come anticipato, patisce un problema significativo: se la risorse esterna non risponde in tempi brevi (ad esempio perchè il server è sovraccarico o c'è un momentaneo problema di Rete) il browser, chiamato a visualizzare la pagina web che ospita tale codice, bloccherà il caricamento in attesa che il javascript venga caricato. La conseguenza è che la pagina web potrebbe diventare molto lenta oppure, nel peggiore dei casi, potrebbe restare bianca... con conseguente perdita di traffico!
Risolvere il problema in modo semplice
Una prima soluzione a questo problema è offerta dall'utilizzo del tag <iframe> ma ciò non è sempre possibile: quando l'elemento da incorporare ha una dimensione ben precisa (ad esempio un banner) è possibile ricorrere a questa soluzione... ma quando l'elemento da includere ha dimensioni variabili oppure utilizza effetti dinamici, l'iframe risulta certamente inadeguato.
Una seconda soluzione, anch'essa molto semplice, consiste nel posizionare i codici Javascript che non producono direttamente un output (come ad esempio le statistiche) a fondo pagina subito prima della chiusura del <body>... ma quando il nostro codice deve produrre un output e questo deve essere posizionato in un punto ben preciso del nostro layout ciò non è, ovviamente, possibile.
Entrambe queste semplici soluzioni, quindi, non sono la risposta che stiamo cercando... vediamo, quindi, in cosa consiste e come funziona il caricamento asincrono del codice javascript.
