Jak asynchronně načíst tlačítko Facebook?
Téměř každý blog, webová stránka má na Facebooku tlačítko To se mi líbí, sdílet nebo sledovat.
Jak možná víte, výchozí kód pro sdílení na Facebooku se načítá synchronně spolu se zdroji vaší webové stránky.
Tím se zvýší doba načítání vašeho webu a poškodí se skóre SEO. Není to jen SEO, ale také kazí uživatelský zážitek.
Jsem si jistý, že tlačítko pro sdílení na Facebooku je nezbytné, ale ne jako váš skutečný kód, který se má zobrazit jako první. Existuje mnoho blogů nebo webových stránek, které mají delší dobu načítání stránky kvůli výchozímu kódu Facebooku.
Asynchronní používání kódu Facebooku vám pomůže načíst vaši webovou stránku o 0,5 – 1,5 sekundy rychleji. To je to, co musíte načíst Facebook tlačítko To se mi líbí, sdílet nebo sledovat rychleji.
Zde je kód, ze kterého jsem dostal Vývojář Facebooku pro like a sdílení na etechblog.cz.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>
Nyní vše, co musím přidat, je sledovat jeden řádek v mém kódu, což pomůže rychleji načíst tlačítka.
js.async=true;
Upravený kód by tedy byl:
<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>
není to snadné?
Aktualizace: nové úryvky kódu nabízené Facebookem výše nevyžadují, protože zahrnují asynchronní skripty, které již můžete vidět níže.
<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>
Používáte WordPress? Podívejte se na tento příspěvek, který vysvětluje, jak optimalizovat výkon bez pluginu. A pokud hledáte plugin pro sociální média, který nezpomaluje, pak vřele doporučuji Novashare.
Jsem si jistý, že se vám líbí, že se vaše webová stránka načítá rychleji, a doufám, že vám to pomůže.
Užili jste si čtení článku? Co takhle sdílet se světem?