WP Marketing: SEO Avanzata per WordPress
27 November 2011
Google Freshness Update
12 December 2011
Show all

Facebook Rallenta il Tuo Sito? A Tutto c’è Soluzione!

Facebook Like Button

La velocità di caricamento di un sito è da sempre un elemento molto importante sia per l’usabilità sia per l’indicizzazione nei motori di ricerca.

Con l’avvento del “famigerato” Google Panda, il fattore velocità è tornato prepotentemente alla ribalta, e così molti webmaster si sono trovati ad affrontare un vero e proprio dilemma: come rendere rapido il caricamento di una pagina senza eliminare i vari widget, come il Facebook Like Box, o ridurre drasticamente gli spazi pubblicitari di Adsense o di altri network?

Perché il nodo del problema è questo: non basta ottimizzare immagini e codice e  non basta neanche installare un plug-in per la cache, perché sono proprio i widget esterni gli elementi che influenzano pesantemente la velocità di caricamento. E come se non bastasse, bisogna considerare che alcuni di questi widget sono diventati degli importanti strumenti di interazione con il pubblico, quindi il fatto di togliergli non è una soluzione senza conseguenze.

Mi sono arrivate diverse richieste per risolvere questo problema e così, dopo aver provato diverse soluzioni, ho scritto un semplice codice javascript che avvia il richiamo dei widget solo dopo che tutto l’html è stato già caricato. I risultati sono stati davvero sorprendenti: l’home page del sito di un nostro cliente è passata da un tempo medio di caricamento di 20 secondi, a meno di 6 secondi, mantendo tutti i widget e gli spazi pubblicitari.

Il procedimento è molto semplice e il codice non si appoggia a librerie tipo jQuery o MooTools, in quanto ho preferito puntare sulla massima compatibilità.

Facciamo un esempio per il “Like Box di Facebook”. Per prima cosa crea un file vuoto, nominalo “facebook_like_box.php” e dentro mettici solo il codice del widget “Like Box” che trovi qui: http://developers.facebook.com/docs/reference/plugins/like-box/

Nella home page del tuo sito, o in qualsiasi altra pagina, crea un div, con id unico, e mettilo nella posizione dove vuoi far comparire il widget.

<div id="fb_like_box"> </div>

A fine pagina, prima di </body> inserisci questo javascript:

<script type="text/javascript">// <![CDATA[
try {
 
document.getElementById("fb_like_box").innerHTML='<iframe marginheight="0px" marginwidth="0px" frameborder="0" scrolling="no" width="300" height="600" src="facebook_like_box.php"></iframe>';
 
} catch(err1){};
// ]]></script>

In pratica una volta che l’HTML è stato caricato e quindi il rendering è arrivato a fine pagina, il javascript trova l’elemento con l’id “fb_like_box” e inserisce al suo interno il codice preso dalla pagina “facebook_like_box.php”.

Finito! Puoi replicare lo stesso procedimento per tutti i widget o spazi pubblicitari che vuoi e il tuo sito rimarrà sempre veloce. Ti consiglio di usare sempre il “try catch” per la gestione di eventuali errori e di sperimentare variazioni sul codice che hai appena visto.

Ecco un esempio funzionante: http://www.istintoweb.com/caricamento-like-box-facebook/

E’ proprio il caso di dirlo: ci vediamo presto :)

Matteo Santiloni

http://www.istintoweb.com – soluzioni digitali di successo 

Matteo Santiloni
Matteo Santiloni
Matteo Santiloni, Executive Director e Social Media Consultant di Istinto Web.

Lascia un Commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

È possibile utilizzare questi tag ed attributi XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>