Social Plugin di Facebook rallentano WordPress? Ecco cosa fare per velocizzarlo!

I plugin sociali di Facebook, come il pulsante Mi piace o la Fan Box, aiutano nel processo di diffusione dell’articolo e di visibilità del blog, quindi ritengo che siano essenziali per un progetto online.

Ma anche la velocità di un blog è fondamentale, vero?

E siccome Facebook è il social network più utilizzato al mondo, siccome sono pieni di soldi, siccome Mark Zuckerberg è un mega nerd, i plugin sociali saranno super veloci, vero?

No.

Facebook, come sei lento!

Analizzando con pingdom tools il mio blog, dove ho installato la versione HTML5 dei plugin sociali che uso, che necessitano del kit JavaScript SDK (Software Development Kit), ecco cosa ho notato:

Con un totale di 1.96 secondi. E ancora:

Con altri 0.799 secondi.

Gli URL che rallentano di molto il blog sono dati da www.facebook.com/dialog/ e static.ak.facebook.com/connect/.

Ecco cosa dice Facebook per il primo indirizzo:

you can invoke a Dialog by redirecting the user’s browser to a URL. Every dialog has a method name and parameters.

E per il Dialogo OAuth:

The OAuth Dialog is used within the authentication flows to enable a user to authorize your application and to grant additional permissions to your app.

In poche parole viene utilizzato per far dialogare il tuo browser con un determinato URL, per gestire in maniera autenticata le autorizzazioni dell’applicazione di Facebook associata al blog e ai pulsanti sociali.

Il secondo URL invece sembra stabilire la connessione tra Facebook e il blog.

Dai dati ricavati, sembra proprio che l’utilizzo del protocollo di comunicazione crittografato SSL, utilizzato per dare una maggiore sicurezza, porta ad un notevole incremento del tempo di caricamento.

Confronto con Google+ e Twitter

Ma come si comporteranno gli altri due Social più IN del momento?

Ecco Google+:

E Twitter:

Differenza abissale 😯

Quindi, dovrei rimuovere i social plugin?

A questa domanda ci risponde il caro Matt Cutts in questo video:

Risposta illuminante: ”Do what’s best for the user.”, ovvero, fai quello che è meglio per l’utente.

All’utente servono questi plugin sociali? Sì.

Allora non rimuoverli.

Come risolvere il problema

Usa il codice IFRAME! In pratica, mostra una pagina esterna, che in questo caso contiene solamente il social plugin, direttamente nel tuo blog.

Il codice è non validato dal W3C ma funzionante, anche se con alcune limitazioni (ad esempio non si può aggiungere la funzionalità Invia al pulsante Mi piace).

Per ottenerlo, basta andare alla pagina ufficiale dei Social Plugin, selezionare un plugin e ottenere il codice. Dopodichè selezionare IFRAME.

Ora elimina il vecchio codice, ed incolla nel punto esatto in cui vuoi mostrare il Social Plugin, il codice che ti è appena stato fornito (leggi come e dove modificare WordPress).

Il mio consiglio è di inserire il codice all’interno di un <div>, così da poter gestire la visualizzazione grafica tramite codice CSS. Ad esempio:

<div class=”nome-classe”>
  CODICE IFRAME
</div>

Attenzione: per inserire il pulsante Mi piace, dovrai specificare l’indirizzo a cui collegare il pulsante stesso. Ovviamente l’indirizzo varia da articolo ad articolo, per cui utilizza la funzione <?php the_permalink(); ?> in questo modo:

[php]
<iframe src="//www.facebook.com/plugins/like.php?href=<?php the_permalink(); ?>&amp;send=false…
[/php]

Ottimo. Guarda il risultato sfruttando pingdom, sono scomparsi i tempi di caricamento che ti ho mostrato in precedenza, mentre è rimasto solamente il tempo per caricare il plugin (che era presente anche prima):

Un bel risparmio di tempo, non trovi?

Ultimo consiglio: testa sempre il plugin che hai inserito con l’IFRAME, per verificare che effettivamente funzioni!

Ultime considerazioni

È tutto oro ciò che luccica? No.

Come ho già detto, utilizzando il codice IFRAME avrai delle limitazioni e il codice non sarà validato. Si perdono tutte le novità introdotte dal codice XFBML:

The XFBML dynamically re-sizes its height according to whether there are profile pictures to display, gives you the ability (through the Javascript library) to listen for like events so that you know in real time when a user clicks the Like button, and it always gives the user the ability to add an optional comment to the like. If users do add a comment, the story published back to Facebook is given more prominence.

Ridimensiona automaticamente l’altezza (in questo caso si parla del pulsante Mi piace), permette di sfruttare gli eventi generati dal clic sul pulsante Mi piace e permette di lasciare un commento che potrà andare a finire direttamente sul diario dell’utente.

In più, a Google non piacciono i siti che contengono iframe (in passato se n’è abusato per fini non etici). Quindi?

Secondo me, se il contenuto dell’iframe arriva da un sito con un buon trust, e direi che Facebook abbia un buon trust :), e se non contiene molti link (come in questo caso), allora Google non ti romperà con penalizzazioni & Co.!

Infine, per il dialogo tra il blog e Facebook, i nuovi codice HTML5 e XFBML richiedono il protocollo di comunicazione crittografato SSL, che viene utilizzato per fornire una connessione sicura nel web, che a quanto pare, non è presente nel codice Iframe.

Il gioco vale la candela? Per l’utilizzo base dei Social Plugin, come faccio io e la maggior parte dei blog della rete, credo proprio di sì.

Oltre all’impossibilità di utilizzare l’Invia per il pulsante Mi piace e al non poter accedere agli eventi di facebook, che altre limitazioni hai trovato?