Hvordan laster jeg inn Facebook-knappen asynkront?
Nesten hver eneste blogg har en nettside Facebook-lik, del eller følg-knapp.
Som du kanskje vet, lastes standard Facebook-sosial delingskode synkront sammen med nettsideressursene dine.
Dette vil øke nettstedets lastetid og skade SEO-poengsummen. Det er bare ikke SEO, men ødelegger også brukeropplevelsen.
Jeg er sikker på at Facebooks sosiale deleknapp er viktig, men ikke som den faktiske koden din som skal vises først. Det er mange blogger eller nettsteder som har høyere sideinnlastingstid på grunn av standard Facebook-kode.
Å bruke Facebook-kode asynkront vil hjelpe deg å laste inn nettsiden din 0,5 – 1,5 sekunder raskere. Dette er hva du må laste inn Facebook liker, del eller følg-knappen raskere.
Her er koden jeg fikk fra Facebook-utvikler for å like og dele til tipsbilk.net.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>
Nå, alt jeg trenger å legge til er å følge den enkle linjen i koden min, noe som vil bidra til å laste inn knapper raskere.
js.async=true;
Så den endrede koden vil være:
<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>
Er det ikke lett?
Oppdatering: de nye kodebitene som tilbys av Facebook krever ikke ovenfor, da de inkluderer skriptasynkronisering som du allerede kan se nedenfor.
<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>
Bruker du WordPress? Sjekk ut dette innlegget som forklarer hvordan du kan optimalisere for ytelse uten en plugin. Og hvis du leter etter en plugin for sosiale medier som ikke bremser ned, anbefaler jeg det på det sterkeste Novashare.
Jeg er sikker på at du liker at nettsiden din laster raskere, og jeg håper dette hjelper deg.
Likte du å lese artikkelen? Hva med å dele med verden?