Hur implementerar man Facebook-knappar asynkront för bättre prestanda?
Nuförtiden är det vanligt att se Facebook-knappar, som ”Gilla”, ”Dela” eller ”Följ”, integrerade på nästan alla bloggar och webbplatser.
Som du förmodligen är medveten om, laddas Facebooks standardkod för sociala medier synkront tillsammans med övriga resurser på din webbsida. Detta kan leda till längre laddningstider.
Långsamma laddningstider är inte bara dåliga för SEO (sökmotoroptimering), utan försämrar även användarupplevelsen. Det är viktigt att komma ihåg att användarupplevelsen påverkar din webbplats totala framgång.
Facebook-knapparna är utan tvekan viktiga, men de bör inte vara det som gör att din webbsida laddas långsamt. Många webbplatser lider av onödigt långa laddningstider just på grund av den synkrona laddningen av Facebooks standardkod.
Genom att använda Facebooks kod asynkront kan du potentiellt minska din webbsidas laddningstid med 0,5 till 1,5 sekunder. Här nedan följer information om hur du kan snabba upp laddningen av dina Facebook-knappar.
Koden nedan, som jag hämtade från Facebooks utvecklardokumentation, är avsedd för att implementera ”Gilla” och ”Dela” på adminvista.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>
För att ladda knapparna snabbare behöver du bara lägga till en enda rad i den befintliga koden:
js.async=true;
Den modifierade koden ser då ut så här:
<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>
Enkelt, eller hur?
Uppdatering: De nya kodsnuttarna som tillhandahålls av Facebook behöver inte ovanstående modifiering, eftersom de redan inkluderar asynkron skriptladdning, som du kan se nedan.
<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>
Använder du WordPress? Då kan du kolla in det här inlägget som förklarar hur du optimerar din webbplats prestanda utan att använda plugins. Om du är ute efter ett plugin för sociala medier som inte saktar ner din webbplats, rekommenderas Novashare starkt.
Jag är övertygad om att du uppskattar snabbare laddningstider för din webbsida och hoppas att den här informationen är till hjälp.
Gillade du den här artikeln? Dela gärna den med andra!