Velocizzare i social plugins con Ajax e Javascript

Postato da regole-seo, in Approfondimenti SEO, Social, in data 09/01/2011

Vai all’ indice degli articoli » Velocità e SEO

ajax-velocita-social

Il problema di come utilizzare i social plugins senza compromettere la velocità, è già stato affrontato una volta su regole-seo proponendo una soluzione Ajax e Javascript, basata sulle librerie jQuery.

Sebbene l’utilizzo di una libreria come jQuery rappresenti la migliore soluzione in quanto permette di risparmiare tempo e numerose linee di codice, è anche vero che spesso qualcuno (specialmente alle prime armi) potrebbe trovarsi di fronte a problemi di compatibilità con altre librerie Javascript utilizzate.
Per questo motivo e per eventuali altri casi in cui doveste decidere di non utilizzare jQuery, voglio proporre qui di seguito una soluzione tutta Javascript e Ajax per risolvere l’ormai famoso problema di come utilizzare i social plugins senza compromettere la velocità

Come consiglia anche Matt Cutts non è opportuno lasciare perdere i social widgets solo perchè il server a cui si collegano è “un po’ lento”.
Il guadagno che deriva dall’utilizzo dei social plugins in termini di link popularity e presenza nel web è talmente enorme rispetto allo svantaggio che deriva dalla lentezza provocata dai social plugins che sarebbe davvero ingenuo rinunciarvi per questo motivo.

La soluzione che proporrò qui di seguito mostra come “salvare capra e cavoli” sfruttando la tecnica delle “chiamate asincrone” per caricare i social plugins, in modo che il loro tempo di caricamento non incida sul tempo di caricamento delle vostre pagine. Tutto ciò è possibile utilizzando Javascript e Ajax

Come sempre, visto che l’articolo è dedicato anche a chi non ha grandi competenze in ambito Javascript, procederò passo passo commentando (soprattutto all’interno del codice) anche quei passaggi che a qualcuno sembreranno più ovvi.

Caricamento asincrono dei social plugin

Come nell’articolo Velocizzare i social plugins con jQuery e Ajax ripropongo qui sotto uno schema che descrive quanto andremo a realizzare.
Perchè il tempo di caricamento dei social plugins non incida sul tempo di caricamento dei contenuti, faremo in modo di eseguire gli script per la generazione dei widget successivamente al caricamento della pagina e in modo asincrono come schematizzato nella figura sottostante:

social-plugin-ajax

Creazione file contenente il codice dei social plugin

Per comodità, in questo paragrafo ripeto quanto già scritto in Velocizzare i social plugins con jQuery e Ajax. In alcuni articoli precedenti abbiamo visto come realizzare il codice per i tre social buttons utilizzati anche qui su regole-seo. Trovate queste brevi guide a questi indirizzi:

Nell’esempio qui riportato realizzeremo una chiamata asincrona il cui scopo è quello di caricare questi tre social buttons ma è chiaro che potrete riutilizzare lo stesso metodo anche per caricare altri social plugins.
Il codice ottenuto seguendo le guide sopra citate sarà simile al seguente:

che realizza i pulsanti così come li vedete nell’immagine sottostante.

social-buttons-example

Il codice in blu si riferisce al bottone “mi piace” di Facebook, quello in verde al retweet button di Twitter e quello in grigio al Google buzz button.
Quello evidenziato in rosso è il parametro utilizzato da Twitter per identificare l’utente che sta eseguendo il retweet. Dovrete sostituire questo parametro con il vostro utente Twitter.
Potete trovate tutti i dettagli su questo codice nelle tre guide sopra citate.

Ciò che dovete fare è copiare questo codice in un nuovo file (anzichè nella vostra pagina web) e caricarlo sul server che ospita il vostro sito.
D’ora in avanti chiameremo questo file social_buttons.php.
Per i principianti che stanno utilizzando un blog wordpress, consiglio di utilizzare l’estensione php per questo file (per evitare sorprese).

Creazione del contenitore per i social plugin

Anche questo passaggio è identico a quanto descritto in Velocizzare i social plugins con jQuery e Ajax. Per comodità descriverò nuovamente qui il tutto.
Inserite nella pagina web in cui volete visualizzare i tre social buttons, chiamata d’ora in avanti myPage.php un elemento (come ad esempio un tag <div>) che identificherà il luogo in cui lo script che realizzeremo inserirà i social buttons caricandoli dal file social_buttons.php.
Potremmo dunque realizzare un <div> simile al seguente:

Prestate attenzione al valore dell’attributo id (evidenziato in rosso). Sarà utilizzato dal codice Javascript per identificare l’elemento in cui inserire i social buttons.

Realizzazione dello script Javascript-Ajax per il caricamento asincrono dei social plugins

Non ci resta che richiamare il file social_buttons.php appena creato tramite una chiamata Ajax.
Per realizzare questo utilizzeremo le seguenti linee di codice da inserire nella vostra pagina web myPage.php:

Come vedete sono molte più linee di codice rispetto alla soluzione jQuery proposta nell’articolo Velocizzare i social plugins con jQuery e Ajax.
Ho inserito diverse linee di commenti per cercare di agevolare i meno esperti in ambito Ajax e Javascript.

L’istruzione setTimeout(“getUrl()”, “3000″); è quella che da il via al tutto invocando la funzione getUrl() tre secondi dopo il caricamento della pagina. Questa funzione effettua il caricamento del codice contenuto nel file “social_buttons.php“. A quel punto partiranno le richieste ai server dei social plugins che andranno a realizzare i nostri social buttons.

Il ritardo che ho voluto impostare a tre secondi ha migliorato la velocità di rendering della pagina web.
Potrete giocare a piacere su questo valore (espresso in millisecondi) per raggiungere la condizione che vi sembra ottimale.
Il secondo parametro della funzione req.open( “get”, ‘/social_buttons.php’, true); (in rosso nel codice) dovrà essere modificato in base alla posizione del file social_buttons.php sul vostro server.
Tramite “social_buttons_top” (sempre evidenziato in rosso nel codice) individuiamo invece il <div> precedentemente creato all’interno del quale lo script “inietterà” i social buttons caricati.

In questo modo anche chi non può o non vuole appoggiarsi a comodissime librerie Javascript come jQuery (che io consiglio vivamente) può risolvere il problema di come utilizzare i social plugins senza compromettere la velocità.
Una volta capito il meccanismo potrete ovviamente applicarlo anche agli altri social plugin come la Facebook like box che vedete a destra in questa pagina.

Non esitate a farmi sapere cosa ne pensate! :)

Commenti (4)

  1. franco scrive:

    ciao, molto interessante come articolo. Considera che adesso non è più necessario a una chiave da Google per utilizzare Google Loader.
    ciao

  2. regole-seo scrive:

    Grazie mille per la segnalazione Franco!

  3. Giuliana scrive:

    ma questa soluzione potrebbe andare per un blog creato con blogger?

  4. regole-seo scrive:

    Non uso blogger ma non credo ti dia la possibilità di mettere mano al sorgente per inserire lo script… …magari attraverso dei plugin…

Scrivi un commento