Utilizzando questo sito accetti il nostro uso dei cookie. Approfondisci

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

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:

Tempo di caricamento di Facebook

Con un totale di 1.96 secondi. E ancora:

Tempo di caricamento di Facebook 2

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+:

Google time

E Twitter:

twitter time

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? .

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.

Codice 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:

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

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):

Tempo di facebook con Iframe

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?


VUOI CREARE IL TUO SITO O BLOG WORDPRESS?

Scegli uno tra i migliori hosting per WordPress

HOSTING

Scegli uno tra i migliori hosting per WordPress

Hosting

Scegli uno tra i migliori temi WordPress professionali

GRAFICA

Scegli uno tra i migliori temi WordPress professionali

Grafica

Guide e risorse per gestire il sito WordPress a 360°

GESTIONE

Guide e risorse per gestire il sito WordPress a 360°

Gestione

EMAIL NEWSLETTER

Vuoi ricevere i miei ultimi articoli
comodamente nella tua email? È gratis!
Ben 3552 persone lo stanno già facendo!
Anonimo
   
con le dita sempre in costante, frenetico movimento sulla tastiera… vengo spesso trascinato e catturato “in rete” per colpa delle mille idee che mi girano per la testa (prima o poi troverò quella giusta)… dal futuro incerto (nonostante una laurea, e chi non lo è?..siamo in tanti!) .. credo fortemente nella condivisione della conoscenza!
9 Commenti
  • Andrea Barghigiani

    Complimenti per l’articolo, pubblicato anche nel momento giusto visto che qualche giorno fa i plugin di Facebook hanno bloccato la rete!

    Ti lascio il riferimento all’articolo del Corriere della Sera (http://bit.ly/WyIVN3) e ad un articolo di Andrea Pernici dove analizza nel dettaglio i problemi dovuti all’utilizzo di questi tipi di servizi (http://seoblog.giorgiotave.it/spof/3156)

    A presto!

    • Roberto Iacono

      Grazie Andrea per le segnalazioni, come sempre Andrea Pernici crea dei capolavori! È proprio un NON-Conventional WebDev 😉 Lo stimo!

  • fausto

    Se non ricordo male basta eliminare l’attributo “allowTransparency” per renderlo validato W3C. ciao

    • Roberto Iacono

      Grazie Fausto, ma ho un bel po’ di errori da parte dell’iframe… (non che mi importi poi molto)

  • salvatore

    Ciao Roberto, ho disattivato i plugin di facebook, ma se faccio il test con pingdom, mi risulta 1,27 per questo facebook.com/dialog/ ed un altro bel po di tempo da questo static.ak.facebook.com/connect/ cosa potrebbe essere?

    • Roberto Iacono

      Ciao Salvatore, sono richieste per la connessione sicura. Per velocizzare, puoi usare il codice Iframe.

  • Luca

    Ciao Luca!
    Sto combattendo con la velocità di caricamento della pagina e ho notato che tu su gt metrix hai dei punteggi stellari :)
    il mio problema più grande sono le richieste dei codici .js (defer parsing of javascript) in particolare del plugin social (digg digg).
    i bottoni like li faccio apparire esattamente come te, di fianco e sotto l’articolo.
    Credo che tu invece abbia scritto il codice manualmente… sbaglio?
    non avevi fatto un art proprio su come sostituire il plug con codice?
    magari avessi dei risultati come i tuoi… era tutto verde! grande!

    Grazie mille!

  • Luca

    *ciao Roberto! scusa… ho visto che usi socialite, ma come hai fatto ad impostarlo per farlo apparire sia sotto l’articolo che accanto?

    • Roberto Iacono

      Ciao Luca, ho aggiunto manualmente i pulsanti, modificando il single.php ed ho inserito la barra laterale nel footer, modificando il css e la posizione su “fissa”.

Seguimi

Scarica gli ebook gratuiti

Vuoi creare e gestire il tuo blog WordPress autonomamente ed in maniera gratuita?

Allora scarica gratuitamente gli ebook Blogging Box e Le 30+ cose da non fare con WordPress, inserisci la tua email qui sotto:
13591+
Scarica gratuitamente gli ebook!

Per maggiori informazioni guarda questa pagina per la Blogging Box e questa per le 30+ cose da non fare con WordPress.

Scarica gli ebook gratuiti

Vuoi creare e gestire il tuo blog WordPress autonomamente ed in maniera gratuita?

Allora scarica gratuitamente gli ebook Blogging Box e Le 30+ cose da non fare con WordPress, inserisci la tua email qui sotto:
13591+
Scarica gratuitamente gli ebook!

Per maggiori informazioni guarda questa pagina per la Blogging Box e questa per le 30+ cose da non fare con WordPress.
Unisciti agli oltre 10999 lettori
che seguono questo blog
3152
982
2251
4614