Hogyan lehet aszinkron módon betölteni a Facebook gombot?
Szinte minden blogon, weboldalon megtalálható a Facebook like, megosztás vagy követés gomb.
Amint azt bizonyára tudja, az alapértelmezett Facebook közösségi megosztási kód szinkronban töltődik be a weboldal erőforrásaival együtt.
Ez növeli a webhely betöltési idejét és károsítja a SEO pontszámot. Csak nem SEO, hanem rontja a felhasználói élményt is.
Biztos vagyok benne, hogy a Facebook közösségi megosztás gombja elengedhetetlen, de nem az elsőként megjelenítendő tényleges kód. Sok blognak vagy webhelynek hosszabb az oldalbetöltési ideje az alapértelmezett Facebook-kód miatt.
A Facebook kód aszinkron használatával 0,5-1,5 másodperccel gyorsabban töltheti be weboldalát. Ez az, amit gyorsabban kell betölteni a Facebook like, megosztás vagy követés gombra.
Itt van a kód, ahonnan kaptam Facebook fejlesztő like-hoz és megosztáshoz a etoppc.com.com oldalon
<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>
Most már csak annyit kell hozzátennem, hogy kövessem a kódom egyetlen sorát, ami segít a gombok gyorsabb betöltésében.
js.async=true;
Tehát a módosított kód a következő lenne:
<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>
Hát nem könnyű?
Frissítés: a Facebook által kínált új kódrészletekhez nincs szükség a fentiekre, mivel tartalmazza a szkript aszinkronizálását, amelyet alább láthat.
<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>
WordPress használata? Tekintse meg ezt a bejegyzést, amely elmagyarázza, hogyan lehet bővítmény nélkül optimalizálni a teljesítményt. És ha olyan közösségi média bővítményt keres, amely nem lassít, akkor nagyon ajánlom Novashare.
Biztos vagyok benne, hogy szereti, ha weboldala gyorsabban töltődik be, és remélem, ez segít Önnek.
Élvezettel olvasta a cikket? Mit szólnál a világgal való megosztáshoz?