Come avrete notato, non di rado capita di visitare siti apparentemente ben fatti e ricchi di contenuti ma anche particolarmente lenti. L' esperienza di navigazione in questi siti, non è affatto gradevole e spesso e volentieri, siamo spinti ad abbandonare il sito, nonostante i contenuti che avevamo iniziato a consultare risultassero pertinenti alle nostre ricerche ed interessanti. Inoltre, anche i motori di ricerca (Google in primis), preferiscono indicizzare un sito veloce pittosto che uno lento. Detto ciò, le cause che possono rallentare il caricamento delle pagine del nostro sito, possono esssere molteplici.

Escludendo evetuali problemi nel server e/o codice mal progettato, tra la più frequenti cause di rallentamento di una pagina del sito possiamo trovare:

• Il caricamento di numerosi fogli di stile (file css).
• Il caricamento di numerose librerie javascript (social widgets, jquery, etc).
• File immagine.

Per quanto riguarda i file css, nel limite del possibile, a scapito di una più difficile lettura e manutenzione dei codici, è conveniente raggruppare le varie direttive css su un unico file, pittosto che su molti file.

I file immagine e bene che siano ottimizzati. Capita non di rado di linkare file immagine troppo dettagliati per la qualità che ci serve dell' immagine.

Ma quello su cui vorrei soffermarmi più in dettaglio sono gli script java, sia perchè sono sempre molto presenti in una pagina web, sia perchè difficilmente si riesce a farne a meno. In particolar modo, i vari bottoni dei social network, immancabili sulle nostre pagine , causano un evidente rallentamento del caricamento della pagina. Rinunciare però a questa potenziale fonte di pubblictà non è  una cosa giusta.

Pertanto, esistono diverse strategie che possono essere adottate.  Per esempio, molti script forniti, sono asincroni ma questo non migliora in modo soddisfacente, il caricamento della pagina.

Quello che invece occorre sottolineare e che un utente , appena raggiunge il nostro sito e la nostra pagina , è interessato ai contenuti. Per usufruire dei contenuti, non è necessario attendere il caricamento dei pulsanti social, banner vari, etc. etc.. Pertanto, possiamo prendere in considerazione di caricare i vari script dei social e di qualsiasi altro componente, solo dopo che la pagina con i suoi contenuti più importanti , sia stata caricata completamente.

Per fare ciò, utilizziamo una tecnica detta Deferer e cioè carichiamo gli script non necessari in differita, al termine del caricamento della pagina.

E' sufficente impostare il seguente codice:

if (window.addEventListener)
  window.addEventListener("load", socialWidgets, false);
else if (window.attachEvent)
  window.attachEvent("onload", socialWidgets);
else
  window.onload = socialWidgets;

Come si può notare, il codice riportato richiama la funzione socialWidgets al termine del caricamento della pagina web dove tale codice verrà inserito. Vediamo ora quì sotto, un esempio della funzione socialWidgets.

function socialWidgets.() {
  //alert("La pagina ha finito il caricamento. Ora è tempo di caricare i seguenti script");
  
  //FACEBOOK
  (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=248914445198312";
  fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));
  //TWITTWER
  !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http: /.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
  //GOOGLE+
 window.___gcfg = {lang: 'it'};
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = '<a href="https://apis.google.com/js/platform.js';">https://apis.google.com/js/platform.js';</a>
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
}

Ho riportato come esempio, i codici dei tre social più famosi (vedi commenti). Questi codici sono generabili in base alle proprie preferenze dai rispettivi social ai seguenti link:

Google +1

Facebook

Twitter

Come si può notare, gli script di generazione dei pulsanti social, verranno avviati solo al termine del caricamento della nostra pagina, rendondo il termine del caricamento della stessa non assoggettato al caricamento di questi script.

Il codice completo da inserire nella nostra pagina web sarà il seguente:

<script>
// inserire questo script all' interno del body
function socialWidgetsLoad() {
  //alert("La pagina ha finito il caricamento. Ora è tempo di caricare i seguenti script");
  
  //FACEBOOK
  (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=248914445198312";
  fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));
  //TWITTWER
  !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http: /.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
  //GOOGLE+
 window.___gcfg = {lang: 'it'};
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = '<a href="https://apis.google.com/js/platform.js';">https://apis.google.com/js/platform.js';</a>
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
}
if (window.addEventListener)
  window.addEventListener("load", socialWidgetsLoad, false);
else if (window.attachEvent)
  window.attachEvent("onload", socialWidgetsLoad);
else
  window.onload = socialWidgetsLoad;
</script>

Ancora non abbiamo finito. Manca infatti la parte di codice che mostra i widget (pulsanti) social. Sempre dai tre link riportati sopra, come esempio avremo:

per Google+

per Facebook

per Twitter

Ora, non ci rimane altro da fare che, posizionare questi tre codici nei punti della nostra pagina web dove vogliamo che compaiano i widget. Noteremo subito che i tre pulsanti, verranno caricati solo al termine del caricamento della pagina. Fate un confronto dei tempi con e senza questa metodologia e vi renderete conto "ad occhio" e senza utilizzare particolari applicazioni online, della netta differenza di caricamento e velocità della pagina. Gli utenti e google, ne saranno sicuramente felici!

Da notare anche che, con questa tecnica, possiamo decidere di caricare in differita qualsiasi codice javascript non necessario subuto/di sistema (banner pubblicitari e quant' altro)

Come applicare il Deferer in un sito joomla.

E' molto semplice.

Generiamo tre moduli custom "HTML Personalizzato" e su ogniuno andiamo ad inserire i tre codici sopra riportati. Posizioniamo questi moduli sul template, dove vogliamo che compaiano i widget social.

Generiamo un ulteriore modulo custom "HTML Personalizzato" e aggiungiamoci il codice Deferer completo visto sopra. Posizioniamo questo modulo dove vogliamo (non visualizza nulla).

Quando copiamo i codici, ricordiamoci di disabilitare l' editor.

Tramite questi semplici passaggi, abbiamo applicato il deferer in un sito joomla.

Pensi che questo articolo possa essere d' aiuto anche ad altri? Allora condividilo subito nel tuo social preferito.