Come caricare il pulsante Facebook in modo asincrono?
Quasi tutti i blog, un sito Web hanno il pulsante Mi piace, Condividi o Segui di Facebook.
Come forse saprai, il codice di condivisione social predefinito di Facebook viene caricato in modo sincrono insieme alle risorse della tua pagina web.
Ciò aumenterà il tempo di caricamento del tuo sito Web e danneggerà il punteggio SEO. Non è solo SEO, ma rovina anche l’esperienza dell’utente.
Sono sicuro che il pulsante di condivisione social di Facebook è essenziale ma non come codice effettivo da visualizzare per primo. Ci sono molti blog o siti Web che hanno un tempo di caricamento della pagina più elevato a causa del codice predefinito di Facebook.
L’uso asincrono del codice di Facebook ti aiuterà a caricare la tua pagina web 0,5 – 1,5 secondi più velocemente. Questo è ciò che devi caricare Facebook come, condividere o seguire il pulsante più velocemente.
Ecco il codice da cui ho preso Sviluppatore Facebook per mettere mi piace e condividere su winadmin.it.com
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&appId=xxxxxxxxxx&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
Ora, tutto quello che devo aggiungere è seguire la singola riga nel mio codice, che aiuterà a caricare i pulsanti più velocemente.
js.async=true;
Quindi il codice modificato sarebbe:
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.async=true;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&appId=xxxxxxxxxx&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
Non è facile?
Aggiornamento: i nuovi frammenti di codice offerti da Facebook non richiedono quanto sopra poiché include lo script async che puoi vedere di seguito.
<div id="fb-root"></div> <script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v7.0" nonce="JekfmCeX"></script>
Utilizzi WordPress? Dai un’occhiata a questo post che spiega come ottimizzare le prestazioni senza un plug-in. E se stai cercando un plug-in per social media che non rallenti, lo consiglio vivamente NovaShare.
Sono sicuro che ti piace che la tua pagina web si carichi più velocemente e spero che questo ti aiuti.
Ti è piaciuto leggere l’articolo? Che ne dici di condividere con il mondo?