Как да заредя Facebook бутона асинхронно?
Почти всеки блог, уебсайт има Facebook бутон за харесване, споделяне или следване.
Както може би знаете, кодът за социално споделяне във Facebook по подразбиране се зарежда синхронно заедно с ресурсите на вашата уеб страница.
Това ще увеличи времето за зареждане на вашия уебсайт и ще навреди на SEO резултата. Това просто не е SEO, но също така разваля потребителското изживяване.
Сигурен съм, че бутонът за социално споделяне на Facebook е от съществено значение, но не като действителен код, който да се показва първи. Има много блогове или уебсайтове с по-високо време за зареждане на страницата поради кода на Facebook по подразбиране.
Използването на Facebook код асинхронно ще ви помогне да заредите уеб страницата си с 0,5 – 1,5 секунди по-бързо. Това е, което трябва да заредите Facebook бутон за харесване, споделяне или следване по-бързо.
Ето кода, от който взех Facebook разработчик за харесване и споделяне на pctechbg.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>
Сега всичко, което трябва да добавя, е да следвам единствения ред в моя код, което ще помогне за по-бързото зареждане на бутоните.
js.async=true;
Така че модифицираният код ще бъде:
<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>
Не е ли лесно?
Актуализация: новите кодови фрагменти, предлагани от Facebook, не изискват по-горе, тъй като включват асинхронен скрипт, който вече можете да видите по-долу.
<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? Вижте тази публикация, която обяснява как да оптимизирате за производителност без плъгин. И ако търсите плъгин за социални медии, който не се забавя, тогава силно препоръчвам Novashare.
Сигурен съм, че харесвате вашата уеб страница да се зарежда по-бързо и се надявам това да ви помогне.
Приятно ви е да прочетете статията? Какво ще кажете за споделяне със света?