Ladda Facebook Gilla och dela-knapp snabbare

Spread the love

Hur laddar man Facebook-knappen asynkront?

Nästan varje blogg har en webbplats Facebook-gilla, dela eller följ-knapp.

Som du kanske vet laddas Facebooks standardkod för social delning synkront tillsammans med dina webbsidors resurser.

Detta kommer att öka din webbplats laddningstid och skada SEO-poängen. Det är bara inte SEO utan förstör också användarupplevelsen.

Jag är säker på att Facebook social dela-knapp är viktig men inte som din faktiska kod som ska visas först. Det finns många bloggar eller webbplatser som har högre sidladdningstid på grund av Facebook-standardkoden.

Att använda Facebook-kod asynkront hjälper dig att ladda din webbsida 0,5 – 1,5 sekunder snabbare. Det här är vad du måste ladda Facebook gilla, dela eller följ-knappen snabbare.

  Hur man ändrar Facebook-lösenord

Här är koden jag fick från Facebook-utvecklare för att gilla och dela till adminvista.com.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>

Nu är allt jag behöver lägga till att följa den enda raden i min kod, vilket hjälper till att ladda knappar snabbare.

js.async=true;

Så den modifierade koden skulle vara:

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

Är det inte lätt?

Uppdatering: de nya kodavsnitten som erbjuds av Facebook kräver inte ovan eftersom de innehåller skriptasynkronisering som du redan 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? Kolla in det här inlägget som förklarar hur du optimerar för prestanda utan ett plugin. Och om du letar efter ett plugin för sociala medier som inte saktar ner så rekommenderar jag starkt Novashare.

  Facebook Messenger Update lägger till gratis VoIP-samtalsfunktion

Jag är säker på att du gillar att din webbsida laddas snabbare, och jag hoppas att detta hjälper dig.

Gillade du att läsa artikeln? Vad sägs om att dela med världen?