Kako da se Fejsbuk dugme učita asinhrono?
Gotovo svaki blog ili veb stranica ima integrisano Fejsbuk dugme, bilo da je to za „sviđanje“, deljenje ili praćenje.
Kao što je poznato, podrazumevani kod za Fejsbuk deljenje se učitava sinhrono zajedno sa ostalim resursima vaše veb stranice.
Ovakav pristup može usporiti učitavanje stranice i negativno uticati na SEO rezultat. Dakle, ne samo da narušava SEO, već kvari i korisničko iskustvo.
Naravno, Fejsbuk dugme za deljenje je korisno, ali nije neophodno da se učita pre ostalog ključnog sadržaja stranice. Mnogo je blogova i veb sajtova koji imaju produženo vreme učitavanja upravo zbog ovog podrazumevanog Fejsbuk koda.
Implementacija asinhronog učitavanja Fejsbuk koda može značajno ubrzati učitavanje vaše veb stranice, za nekih 0,5 do 1,5 sekundi. Zato je ovo neophodan korak za brže učitavanje Fejsbuk „like“, „share“ ili „follow“ dugmadi.
Kod koji je preuzet sa Fejsbuk Developer stranice, korišćen za „like“ i deljenje na primeru sajta vdzvdz.com, izgleda ovako:
<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>
Da biste ubrzali učitavanje dugmadi, potrebno je dodati samo jednu liniju koda.
js.async=true;
Dakle, izmenjeni kod treba da izgleda ovako:
<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>
Jednostavno, zar ne?
Ažuriranje: Novi delovi koda koje nudi Fejsbuk već uključuju asinhronizaciju skripte, kao što možete videti u nastavku, tako da dodatni koraci nisu potrebni.
<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>
Koristite WordPress? Pogledajte ovaj tekst koji objašnjava kako optimizovati performanse bez korišćenja dodataka. Ukoliko vam je ipak potreban dodatak za društvene mreže koji neće usporiti vaš sajt, toplo preporučujemo Novashare.
Sigurni smo da želite da se vaša veb stranica učitava brže, i nadamo se da će vam ovo pomoći.
Da li vam se dopao članak? Razmislite o deljenju sa drugima!