Conviene metterli in fondo al body per evitare che il loro caricamento ritardi l'elaborazione della pagina da parte del browser.
Infatti, finché il browser trova dei tag <script> nella head sarà "costretto" a scaricarli in maniera sincrona prima di proseguire con il caricamento del body e delle risorse che contiene.
Dato che lo sviluppo web prevede ormai sempre più librerie javascript, rischiamo realmente di far restare l'utente davanti ad una pagina bianca per
un certo numero di secondi. Considera gli utenti che si collegano da 3G: per loro l'attesa sarà maggiormente percepita per via della maggiore latenza e minore banda disponibile.
Spostandoli in fondo al body, invece, la pagina può iniziare ad essere renderizzata per cui l'utente avrà l'
impressione di una maggiore reattività del sito.
Ci sono delle eccezioni: ovviamente se una libreria come
modernizr ti serve per compiere delle scelte in qualche punto del body, allora diventa indispensabile caricarla il più presto possibile. Ma a meno che non ti servano prima, conviene mettere gli script a fondo pagina anche perché si tratta spesso di codice che comunque andrebbe in esecuzione solo quando il documento è pronto.
Esistono poi delle tecniche per fare in modo che il caricamento di un js non sia bloccante, e quindi la loro posizione nella pagina diventa meno rilevante. Si può ad esempio porre l'attributo
async sul tag script ma, come vedi
qui, non gode di buon supporto con le vecchie versioni di Opera e IE.
L'altra tecnica di caricamento asincrono, l'avrai sicuramente vista con
Google Analytics o l'
SDK di Facebook, consiste nel creare dinamicamente un tag <script> e aggiungerlo al documento.
Usa gli strumenti di sviluppo che i browser mettono a disposizione per capire se ci sono file .js che stanno ritardando la visualizzazione della pagina. In caso usa una delle contromisure di cui si è parlato.
ciao
Modificato da BrightSoul il 11 luglio 2013 08.41 -
