Tra la miriade di accorgimenti che possono migliorare l’esperienza di caricamento delle pagine di un sito c’è sicuramente il rinvio asincrono dell’analisi del codice Javascript. Questo diventa tanto più importante tanto più invadente è la presenza di script Java che integrano nelle nostre pagine i collegamenti al mondo social. Facebook, Twitter, Google+ ecc hanno tutti un loro script per l’integrazione di bottoni Mi Piace, Follow, login e via di questo passo.

L’esecuzione in-line di questi script da al navigatore una sensazione di lentezza generalizzata del sito: la presenza di bottoni social è sicuramente importante ma secondaria rispetto alla rapidità di esposizione dei contenuti. E’ bene quindi rinviare l’analisi e l’esecuzione del codice che genera questi collegamenti ad immediatamente dopo che l’intero documento è stato caricato.

Abbiamo già visto in articoli precedenti come sia possibile fare questo per i bottoni di Google + e Facebook. Ma quando gli script da rinviare diventano molti ?

Prendendo a spunto lo script di integrazione di Facebook vediamo che la struttura è la seguente:

1
2
3
4
5
6
7
8
9
10

<script type="text/javascript">// < ![CDATA[
(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) {return;}
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/it_IT/all.js#xfbml=1&appId=xxxxxxxxxxxxxxxx";
  js.async = true;
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'))
// ]]></script>

Volendo integrare anche il bottone Follow di twitter ci troveremmo ad inserire un secondo blocco di codice, molto simile al precedente:

1
2
3
4
5
6
7
8
9

<script>!function(d,s,id){
  var js,fjs=d.getElementsByTagName(s)[0];
  if(!d.getElementById(id)){
    js=d.createElement(s);
    js.id=id;
    js.src="//platform.twitter.com/widgets.js";
    fjs.parentNode.insertBefore(js,fjs);
    }
  }(document,"script","twitter-wjs");</script>

Dal momento che replicare il medesimo codice non è certamente un’idea geniale è possibile con una piccola integrazione fare in modo che entrambe le sorgenti remote di script vengano caricate da un’unica funzione. E’ sufficiente creare un’array di sorgenti e passarla come unico parametro alla funzione di caricamento asincrono:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<script type="text/javascript">// < ![CDATA[
var scripts = ["//connect.facebook.net/it_IT/all.js#xfbml=1&page_Id=xxxxxxxxxxxxxxxx","//platform.twitter.com/widgets.js"];
(function(array) {
   for (var i = 0, len = array.length; i < len; i++)
   {
      var js = document.createElement('script');
      js.type = 'text/javascript';
      js.async = true;
      js.src = array[i];
      var s = document.getElementsByTagName('script')[0];
      s.parentNode.insertBefore(js, s);
   }
})(scripts);
// ]]></script>

Come vedete, con un unico blocco di codice, abbiamo caricato quanto necessario sia a facebook che a twitter.