Come velocizzare il sito rendendo asincroni i javascript.

Come rendere i javascript asincroni per velocizzare il caricamento del sito su Blogger o Wordrpess.

I browser rilevano i javascript presenti nel codice di una pagina web e devono scaricarli per poter mostrare la pagina in modo corretto. Questa operazione può rallentare significativamente l'apertura della pagina soprattutto se i javascript sono caricati su hosting esterni e se sono particolarmente pesanti.

I grandi player del web sono da tempo a conoscenza della importanza della velocità di caricamento nella soddisfazione della esperienza di navigazione. Tale parametro tra l'altro è uno dei più rilevanti tra i più di 200 fattori di ranking di Google. Per questa ragione Facebook, Twitter, Google, Pinterest, Disqus e altri celebri social e servizi web hanno adottato il caricamento asincrono.

Si tratta in sostanza di dire al browser di caricare tutta la pagina web e di aspettare a fare il download dei javascript solo quando tutto il resto sia già stato scaricato. Vi sarete certamente accorti che i plugin di Facebook si caricano sempre per ultimi così come i bottoni di Twitter o di Google+ o come l'icona di Pinterest diventi visibile sulle immagini solo da ultimo.

Esiste un modo per rendere asincroni tutti i javascript esterni in modo da rendere più rapido il caricamento della pagina. I tag relativi a questa funzionalità sono stati introdotti con l'HTML5 che però adesso è supportato da tutti i browser più moderni.

I javascript esterni hanno un codice di questo tipo

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

Nel primo caso il tag <script> ha anche il suo tag di chiusura </script> mentre nel secondo caso per tale chiusura viene usata la slash ( / ) come nel tag <img>.  Per rendere asincrono lo script basterà aggiungere async="" o async="async" in questo modo:  

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

Ho aggiunto il tag async=""  anche nei javascript interni come quelli usati per il widget dei Commenti Recenti o degli Ultimi Post. Sostanzialmente non cambia nulla ma i widget funzionano regolarmente. Li lascerò sperando che tale tag venga attivato anche per i javascript interni.