Categorie
JavaScript Tools

Migliorare le prestazioni di AddThis

AddThis è sicuramente una delle più grandi piattaforme di condivisione esistenti.
Milioni di siti web in tutto il mondo utilizzano questo servizio per visualizzare i pulsanti di social networking e condivisione.

Si tratta di uno strumento molto utile per i webmaster, in quanto permette di semplificare la condivisione delle proprie pagine web sui principali Social Networks (Facebook, Twitter, Linkedin, etc.) e su altri media (es. email, Digg, etc.).

Problema

Spesso capita che una volta aggiunto il codice AddThis sulle nostre pagine, queste risultino più lente al caricamento.

Motivo

Per visualizzare pulsanti social sul sito web è necessario integrare un blocco di codice AddThis nel codice del sito.
Visto che il sito andrà a prendere il codice direttamente dal server AddThis, questo lo renderà dipendente dalla sua velocità. Se il server AddThis è lento ecco che anche il sito sarà lento.

Soluzione

Per ovviare a questo inconveniente possiamo attivare il caricamento asincrono degli assets di AddThis.
Una volta caricato lo script iniziale il nostro sito bloccherà la connessione con il server Addthis per riprenderla solo una volta che il DOM sarà completamente caricato.

Tutto quello che dovremo fare sarà di aggiungere alla fine della chiamata dello script addthis_widget.js i seguenti parametri querystring:
async=1&domready=1.

quindi al posto di:

<script type="text/javascript" 
src="http://s7.addthis.com/js/250/addthis_widget.js"></script>

avrai:

<script type="text/javascript" 
src="http://s7.addthis.com/js/250/addthis_widget.js#async=1&domready=1"></script>

Ora non ci rimane altro che consentire il caricamento degli assets al termine del caricamento della pagina.
Lo possiamo fare aggiungendo la seguente chiamata di funzione prima della chiusura del tag body o comunque una volta che siamo sicuri che il DOM è stato caricato (motodo ready() per JQuery per esempio).

<script>
    function initAddThis()
     {
          addthis.init()
     }
     initAddThis();
</script>

Risorse

http://support.addthis.com/customer/portal/articles/381221-optimizing-addthis-performance

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.